내 컴퓨터에 개발환경 만들기 맥이든 윈도우든 VSCode 하나면 된다
바이브코딩을 위한 개발환경을 설정합니다. VSCode 설치부터 한글 설정, 필수 확장 프로그램까지 초보자도 따라할 수 있게 안내합니다.
바이브코딩을 시작하려면 코드를 작성하고 편집할 도구가 필요합니다. 여러 가지 선택지가 있지만, 가장 추천하는 것은 Visual Studio Code, 줄여서 VSCode입니다. 무료이고, 맥과 윈도우 모두에서 동작하며, 전 세계 개발자들이 가장 많이 사용하는 에디터입니다. AI 코딩 도구들과의 연동도 뛰어납니다.
“개발환경 설정”이라고 하면 어렵게 느껴지실 수 있습니다. 하지만 VSCode 하나만 설치하면 바이브코딩을 시작할 준비가 끝납니다. 복잡한 설정 없이, 프로그램 하나 설치하는 것이 전부입니다. 지금부터 단계별로 따라해 보겠습니다.
VSCode 다운로드 및 설치
VSCode 공식 사이트에 접속합니다. 화면 중앙에 큰 다운로드 버튼이 보입니다. 사이트가 자동으로 여러분의 운영체제를 감지해서 맞는 버전을 보여줍니다. 윈도우 사용자는 Windows용, 맥 사용자는 Mac용 버튼을 클릭하면 됩니다.
다운로드가 완료되면 설치 파일을 실행합니다. 윈도우에서는 .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 #프로그래밍입문 #개발환경설정