바이브코딩을 시작하려면 코드를 작성하고 편집할 도구가 필요합니다. 여러 가지 선택지가 있지만, 가장 추천하는 것은 Visual Studio Code, 줄여서 VSCode입니다. 무료이고, 맥과 윈도우 모두에서 동작하며, 전 세계 개발자들이 가장 많이 사용하는 에디터입니다. AI 코딩 도구들과의 연동도 뛰어납니다.
"개발환경 설정"이라고 하면 어렵게 느껴지실 수 있습니다. 하지만 VSCode 하나만 설치하면 바이브코딩을 시작할 준비가 끝납니다. 복잡한 설정 없이, 프로그램 하나 설치하는 것이 전부입니다. 지금부터 단계별로 따라해 보겠습니다.
VSCode 공식 사이트에 접속합니다. 화면 중앙에 큰 다운로드 버튼이 보입니다. 사이트가 자동으로 여러분의 운영체제를 감지해서 맞는 버전을 보여줍니다. 윈도우 사용자는 Windows용, 맥 사용자는 Mac용 버튼을 클릭하면 됩니다.
VSCode 다운로드 및 설치
다운로드가 완료되면 설치 파일을 실행합니다. 윈도우에서는 .exe 파일을 더블클릭하고, 맥에서는 .dmg 파일을 열어서 Applications 폴더에 드래그합니다. 설치 과정에서 특별히 변경할 옵션은 없으니 다음(Next) 버튼을 계속 눌러 진행하시면 됩니다. 1~2분이면 설치가 완료됩니다.
한글 언어팩 설치하기
VSCode를 처음 실행하면 영어로 표시됩니다. 한글로 바꾸려면 언어팩을 설치해야 합니다. 왼쪽 사이드바에서 네모 네 개가 합쳐진 아이콘(확장 프로그램)을 클릭합니다. 검색창에 "Korean"을 입력하면 "Korean Language Pack for Visual Studio Code"가 나타납니다.
Install 버튼을 클릭하고 잠시 기다리면 오른쪽 아래에 "Restart" 버튼이 나타납니다. 이 버튼을 클릭하면 VSCode가 재시작되면서 한글 인터페이스로 바뀝니다. 메뉴와 설정이 모두 한글로 표시되니 훨씬 편하게 사용할 수 있습니다.
---
바이브코딩을 위한 필수 확장 프로그램
VSCode의 강점은 확장 프로그램입니다. 기본 기능에 원하는 기능을 추가할 수 있습니다. 바이브코딩에 유용한 확장 프로그램 몇 가지를 설치해 보겠습니다. 확장 프로그램 검색창에서 다음 항목들을 검색해서 설치합니다.
Live Server는 HTML 파일을 실시간으로 브라우저에서 확인할 수 있게 해줍니다. 코드를 수정하면 저장하는 순간 브라우저가 자동으로 새로고침됩니다. Prettier는 코드를 자동으로 정렬해 주는 도구입니다. 저장할 때마다 들여쓰기와 줄바꿈을 깔끔하게 맞춰줍니다. 이 두 개만 설치해도 입문 단계에서는 충분합니다.
---
VSCode 기본 사용법 익히기
VSCode의 화면 구성을 간단히 알아보겠습니다. 왼쪽은 사이드바로 파일 탐색기, 검색, 소스 제어 등의 기능이 있습니다. 가운데는 에디터 영역으로 코드를 작성하는 곳입니다. 아래쪽은 터미널과 출력 패널입니다.
새 파일을 만들려면 파일 메뉴에서 새 파일을 선택하거나 Ctrl+N(맥은 Cmd+N)을 누릅니다. 파일을 저장할 때는 Ctrl+S(맥은 Cmd+S)입니다. 폴더를 열려면 파일 메뉴에서 폴더 열기를 선택합니다. 이 정도만 알면 바이브코딩을 시작할 준비가 된 것입니다.
준비가 됐다면, 컴퓨터 화면을 두 개로 분리해서 왼쪽에는 챗지피티나 클로드와의 대화창을 띄워놓고 오른쪽에는 VSCode창을 띄워 놓고 대화창에 이야기를 해줍니다. VSCode 터미널이 준비되어 있으니까, 입력할 코드를 알려달라고 합니다. 복사 붙여넣기 만 하면 되는 환경이 완성됐습니다. 코드를 알려준 ai는 꼭 '결과를 알려주세요' 라는 말을 남깁니다. 알려준 코드를 VSCode 터미널에 복사 붙여넣기 한 후 엔터. 그결과를 복사 붙여넣기로 챗지피티나 클로드와의 대화창에 붙여넣으면서 나만의 프로젝트가 완성되어 갑니다.
---
결론
개발환경 설정이라고 해서 거창한 것이 아닙니다. VSCode 하나만 설치하면 맥이든 윈도우든 동일한 환경에서 코딩을 시작할 수 있습니다. 한글 언어팩과 Live Server, Prettier 확장 프로그램까지 설치했다면 바이브코딩을 위한 준비는 끝났습니다. 다음 강에서는 내 코드를 저장하고 관리할 수 있는 GitHub에 대해 알아보겠습니다.
---
#VSCode #개발환경 #코드에디터 #설치가이드 #바이브코딩 #개발도구 #초보자 #VisualStudioCode #프로그래밍입문 #개발환경설정
