바이브코딩 워크쓰루 0-2 VS Code와 터미널 왜 쓰는가

시작 전에 꼭 읽어주세요

이 글은 바이브코딩 워크쓰루 시리즈의 두 번째 글입니다.

이전 글 0-1. 코딩용 AI 뭘 써야 할까를 먼저 읽고 오시면 좋습니다.

AI 도구를 골랐으니, 이제 코드를 편집하고 실행할 작업 공간 을 만들 차례입니다.

바이브코딩에서 AI는 코드를 만들어주는 역할을 합니다. 그런데 AI가 만들어준 코드를 어디에 저장하고, 어디서 실행할까요? 메모장에 붙여넣을 수는 없습니다. 코드를 편집하고, 저장하고, 실행하는 전용 작업 공간 이 필요합니다. 그것이 바로 VS Code와 터미널입니다.

이 두 가지만 세팅하면 바이브코딩을 위한 환경 준비는 끝납니다. 어렵지 않습니다. 프로그램 하나 설치하고, 그 안에 이미 들어있는 기능 하나를 여는 것이 전부입니다.

VS Code가 뭔가요

VS Code(Visual Studio Code)는 코드 전용 메모장 이라고 생각하시면 됩니다. 일반 메모장과 뭐가 다르냐면, 코드를 색상으로 구분해서 보여주고, 오타가 있으면 알려주고, AI 도구와 연동할 수 있습니다. 전 세계 개발자들이 가장 많이 쓰는 코드 편집기이고, 무료입니다.

왜 하필 VS Code냐는 질문을 하실 수 있습니다. 코드 편집기는 여러 가지가 있지만, VS Code를 추천하는 이유는 명확합니다. 첫째, 무료입니다. 둘째, 윈도우와 맥 모두에서 동일하게 작동합니다. 셋째, 이 시리즈에서 다룰 Cursor도 VS Code를 기반으로 만들어진 도구여서, VS Code에 익숙해지면 Cursor로의 전환이 매끄럽습니다. 넷째, 확장 프로그램이라는 것을 설치하면 기능을 원하는 대로 추가할 수 있습니다.

터미널이 뭔가요

터미널은 컴퓨터에게 텍스트로 명령을 내리는 창 입니다. 우리는 보통 마우스로 폴더를 클릭하고, 파일을 더블클릭해서 여는 방식(그래픽 인터페이스)으로 컴퓨터를 사용합니다. 터미널은 같은 일을 텍스트 명령어로 합니다.

예를 들어 “바탕화면에 새 폴더를 만들어라”라는 작업을 터미널에서는 mkdir my-project라고 입력합니다. “이 프로그램을 설치하라”는 npm install이라고 입력합니다. 처음에는 낯설지만, 바이브코딩에서는 AI가 “이 명령어를 터미널에 입력하세요”라고 알려주기 때문에 명령어를 외울 필요가 없습니다. 복사해서 붙여넣기만 하면 됩니다.

터미널이 왜 필요한지 의아하실 수 있습니다. 바이브코딩의 핵심 흐름이 이렇기 때문입니다. AI에게 코드를 요청합니다. AI가 코드와 함께 “터미널에 이것을 입력하세요”라는 안내를 줍니다. 터미널에 그 명령어를 붙여넣고 엔터를 누릅니다. 결과가 나옵니다. 그 결과를 다시 AI에게 보여줍니다. 이 반복입니다. 터미널은 AI의 지시를 실행하는 실행 창구 인 셈입니다.

좋은 소식은 터미널이 VS Code 안에 내장되어 있다는 것입니다. 별도로 설치할 것이 없습니다.

VS Code 설치하기

단계별로 따라해 보겠습니다.

1단계 VS Code 공식 사이트에 접속합니다. 화면 중앙에 큰 다운로드 버튼이 보입니다. 사이트가 자동으로 여러분의 운영체제(윈도우 또는 맥)를 감지해서 맞는 버전을 보여줍니다.

2단계 다운로드된 파일을 실행합니다. 윈도우에서는 .exe 파일을 더블클릭하고, 맥에서는 .dmg 파일을 열어서 Applications 폴더에 드래그합니다. 설치 과정에서 특별히 변경할 것은 없습니다. 다음(Next) 버튼을 계속 눌러 진행하면 됩니다.

3단계 설치가 완료되면 VS Code를 실행합니다. 처음 실행하면 영어로 표시됩니다. 한글로 바꾸겠습니다.

한글 언어팩 설치하기-선택

4단계 VS Code 왼쪽 사이드바에서 네모 네 개가 합쳐진 아이콘을 클릭합니다. 이것이 확장 프로그램 메뉴입니다. 확장 프로그램은 VS Code에 기능을 추가하는 부품이라고 생각하시면 됩니다.

5단계 검색창에 “Korean”을 입력합니다. “Korean Language Pack for Visual Studio Code”가 나타나면 Install 버튼을 클릭합니다.

6단계 설치가 끝나면 오른쪽 아래에 “Restart” 버튼이 나타납니다. 클릭하면 VS Code가 재시작되면서 메뉴가 모두 한글로 바뀝니다.

바이브코딩에 유용한 확장 프로그램 설치하기-선택

한글 언어팩과 함께 두 가지 확장 프로그램을 더 설치하겠습니다.

7단계 확장 프로그램 검색창에서 “Live Server”를 검색하고 설치합니다. Live Server는 HTML 파일을 브라우저에서 실시간으로 확인할 수 있게 해주는 도구입니다. 코드를 수정하고 저장하면 브라우저가 자동으로 새로고침됩니다. 수동으로 새로고침 버튼을 누를 필요가 없어서 편합니다.

8단계 “Prettier”를 검색하고 설치합니다. Prettier는 코드를 자동으로 깔끔하게 정렬해주는 도구입니다. 들여쓰기가 엉망이어도 저장만 하면 예쁘게 맞춰줍니다.

이 두 개면 입문 단계에서는 충분합니다. 나중에 필요한 확장 프로그램이 생기면 그때 추가하면 됩니다.

터미널 열어보기

9단계 VS Code 상단 메뉴에서 터미널 → 새 터미널 을 클릭합니다. 또는 키보드에서 Ctrl+(맥은 Cmd+)를 누릅니다. 백틱(`) 키는 키보드 왼쪽 상단, 숫자 1 왼쪽에 있습니다.

화면 아래쪽에 검은색 또는 어두운 색의 패널이 나타납니다. 이것이 터미널입니다. 깜빡이는 커서가 보이면 정상입니다.

10단계 터미널이 잘 작동하는지 확인해봅니다. 다음 명령어를 입력하고 엔터를 누릅니다.

node —version

숫자가 나오면(예: v20.11.0) Node.js가 설치되어 있는 것입니다. “command not found”라고 나오면 Node.js를 설치해야 합니다. Node.js 공식 사이트에서 LTS 버전을 다운로드해서 설치하면 됩니다. Node.js는 자바스크립트 코드를 실행하는 프로그램인데, 웹사이트를 만들 때 필요한 도구들이 대부분 Node.js 기반으로 만들어져 있어서 설치가 필수입니다.

VS Code 화면 구성 이해하기

VS Code의 화면은 크게 세 영역으로 나뉩니다.

왼쪽 사이드바 에는 파일 탐색기, 검색, 소스 제어(Git) 등의 기능이 있습니다. 폴더를 열면 그 안의 파일 목록이 여기에 표시됩니다.

가운데 에디터 영역 이 코드를 작성하는 곳입니다. 파일을 클릭하면 이 영역에서 열립니다. 탭 형태로 여러 파일을 동시에 열어놓을 수 있습니다.

아래쪽 패널 이 터미널과 출력, 문제 등의 정보를 보여주는 영역입니다. 이 패널은 위아래로 크기를 조절할 수 있고, 필요 없을 때는 숨길 수도 있습니다.

자주 쓰는 단축키 세 가지만 기억해두시면 됩니다. 파일 저장은 Ctrl+S(맥은 Cmd+S), 새 파일 만들기는 Ctrl+N(맥은 Cmd+N), 터미널 열기는 Ctrl+(맥은 Cmd+)입니다.

바이브코딩 작업 환경 완성하기

이제 실제 바이브코딩을 할 때의 화면 배치를 세팅해보겠습니다.

11단계 컴퓨터 화면을 두 개로 나눕니다. 왼쪽에는 AI 대화창(ChatGPT 또는 Claude 웹사이트)을, 오른쪽에는 VS Code를 배치합니다. 윈도우에서는 창을 화면 왼쪽이나 오른쪽 끝으로 끌면 자동으로 반반으로 나뉩니다. 맥에서는 창 왼쪽 상단의 초록색 버튼 위에 마우스를 올리면 화면 분할 옵션이 나타납니다.

이 배치가 바이브코딩의 기본 작업 환경입니다. 왼쪽 AI 대화창에서 코드를 요청하고, AI가 알려준 코드를 오른쪽 VS Code에 붙여넣습니다. AI가 “터미널에 이 명령어를 입력하세요”라고 하면 VS Code 하단의 터미널에 붙여넣고 엔터를 누릅니다. 결과가 나오면 그 결과를 복사해서 다시 왼쪽 AI 대화창에 붙여넣습니다. 이 반복만으로 프로젝트가 완성되어 갑니다.

정리

VS Code는 코드를 편집하는 전용 메모장이고, 터미널은 AI가 알려준 명령어를 실행하는 창구입니다. 이 두 가지가 바이브코딩의 작업 공간 전부입니다. VS Code를 설치하고, 한글 언어팩과 Live Server, Prettier 확장 프로그램을 추가하고, 터미널을 열어보았습니다. Node.js까지 설치되어 있다면 바이브코딩을 위한 환경 설정은 완료입니다.

다음 글에서는 만든 코드를 안전하게 보관하는 무료 클라우드 창고, GitHub에 대해 알아보겠습니다.

다음 글 예고

0-3. 깃허브 가입하고 레포 만들기 — 코드를 저장하고 관리하는 무료 창고를 만듭니다.

#VSCode #터미널 #개발환경 #바이브코딩 #코드에디터 #설치가이드 #개발도구 #입문

🎵 바이브코딩 워크쓰루 내비게이션

순서 제목 링크
0-1 코딩용 AI 뭘 써야 할까 바로가기
0-2 VS Code와 터미널, 왜 쓰는가 지금 읽은 글
0-3 깃허브 가입하고 레포 만들기 바로가기
0-4 Cloudflare Pages 무료 배포 바로가기
1-1 AI 대화로 자기소개 페이지 만들기 바로가기
1-2 깃허브 올리고 배포하기 바로가기
1-3 도메인 연결하고 내 주소 갖기 바로가기