실습용 바이브코딩 환경 만들기: VS Code 설치와 첫 세팅 가이드

대부분 바이브코딩을 처음 시작할 때는 어떤 AI 도구를 써야 하는지부터 찾습니다. 그런데 막상 실습을 해보면 진짜 시간을 잡아먹는 건 AI 선택보다 작업 환경입니다. 폴더를 잘못 열어놓고 명령을 따라 하다가 경로가 꼬이고, 저장이 안 된 상태에서 결과가 달라져서 헤매고, 확장 프로그램을 한꺼번에 많이 깔아 충돌이 나는 식입니다.

그래서 실습용 환경은 먼저 단순해야 합니다. 이 글은 VS Code를 기준으로 설치 방법부터 첫 실행, 기본 세팅, 실습용 환경 분리까지 한 번에 정리한 글입니다. 특정 AI 확장을 밀기보다, 어떤 도구를 붙이더라도 흔들리지 않는 바닥을 먼저 만드는 데 초점을 맞추겠습니다.

---

왜 바이브코딩도 작업 환경부터 잡아야 하는가

바이브코딩을 아주 단순하게 말하면, AI에게 자연어로 지시하면서 코드를 만들고 고치는 흐름입니다. 얼핏 보면 편해 보여도, 실제로는 환경이 단순할수록 훨씬 잘 맞습니다. AI가 제안한 명령을 내가 어디서 실행하고 있는지, 어떤 파일이 열린 상태인지, 저장은 됐는지가 분명해야 하기 때문입니다.

• AI가 터미널 명령을 알려줘도 현재 폴더가 틀리면 바로 막힙니다.
• 파일이 저장되지 않으면 실행 결과가 안 바뀌는데, 초보자는 코드 문제로 착각하기 쉽습니다.
• 포맷터나 AI 확장을 여러 개 넣으면 자동완성, 저장 시 정리 방식, 단축키가 서로 부딪히기 쉽습니다.

실습용 환경의 목표는 화려함이 아니라 문제가 생겼을 때 원인을 빨리 좁힐 수 있는 상태를 만드는 것입니다.

이 지점을 먼저 잡아두면, 나중에 AI가 코드를 잘못 준 건지, 내가 실행 위치를 잘못 잡은 건지, 확장 프로그램이 충돌하는 건지를 비교적 차분하게 구분할 수 있습니다. 초보자일수록 이 차이가 큽니다.

VS Code 설치 전에 먼저 알아둘 것

가장 먼저 정리할 오해가 하나 있습니다. VS Code는 편집기입니다. 파일을 열고, 고치고, 터미널을 붙이고, 확장 기능을 더하는 중심 도구이지, 모든 언어의 실행 환경을 한 번에 대신 설치해주는 프로그램은 아닙니다.

예를 들어 HTML과 CSS 파일을 여는 건 VS Code만으로도 충분합니다. 하지만 나중에 AI가 npm install, python app.py, git clone 같은 명령을 제안하면, 그때는 Node.js, Python, Git 같은 별도 도구가 필요할 수 있습니다. 초반에는 이것까지 한꺼번에 다 깔려고 하지 말고, 먼저 VS Code 자체를 안정적으로 쓰는 것부터 끝내는 편이 낫습니다.

오해하기 쉬운 부분: VS Code를 설치했다고 해서 Node.js, Python, Git까지 자동으로 깔리는 것은 아닙니다. 편집기와 실행 환경은 따로 생각하는 편이 이해가 빠릅니다.

이 글도 그런 기준으로 설명하겠습니다. 지금 단계에서는 VS Code 설치와 기본 세팅까지만 끝내고, 실제 프로젝트가 정해졌을 때 필요한 실행 도구를 하나씩 얹는 흐름이 더 현실적입니다.

VS Code 설치하기

이 글은 Windows 기준으로 설명하되, macOS와 Linux도 흐름은 크게 다르지 않습니다. 처음 시작하는 사람이라면 검색 결과의 제3자 다운로드 사이트를 거치기보다 공식 페이지에서 받는 습관부터 들이는 편이 안전합니다.

1) Windows에서 설치할 때

1. VS Code 공식 다운로드 페이지에서 Windows용 설치 파일을 내려받습니다.
2. 개인 PC라면 보통 User Installer로 시작하면 무난합니다.
3. 설치 프로그램을 실행하고 기본 흐름대로 설치를 마칩니다.
4. 설치가 끝나면 VS Code를 한 번 실행해 화면이 정상적으로 뜨는지만 먼저 확인합니다.

처음에는 설치 옵션을 너무 세세하게 건드리지 않아도 됩니다. 오히려 초보 단계에서는 기본값에 가깝게 두고 시작한 뒤, 실제로 불편한 지점이 생겼을 때 하나씩 바꾸는 편이 덜 헷갈립니다.

설치가 끝난 뒤에는 터미널을 다시 열었을 때 code . 명령으로 현재 폴더를 VS Code에서 바로 열 수 있는지 확인해두면 편합니다. 지금 당장 필수는 아니지만, 실습을 반복할수록 꽤 자주 쓰게 되는 방식입니다.

2) macOS와 Linux는 어떻게 보면 되나

다운로드 후 설치하는 흐름 자체는 비슷합니다. 다만 운영체제마다 설치 파일 형식과 메뉴 이름이 조금 다를 수 있습니다. 여기서 중요한 건 세부 화면을 외우는 것이 아니라, 설치 후 폴더를 열고, 설정을 열고, 터미널을 붙일 수 있느냐입니다. 이 세 가지만 되면 이후 실습 흐름은 거의 같습니다.

3) 처음부터 알아두면 좋은 판단 기준

• 혼자 쓰는 PC라면 시스템 전체 설치보다 개인 사용자 설치로 시작해도 충분합니다.
• 업데이트 알림이 뜨면 너무 오래 미루지 않는 편이 좋습니다. 오래된 화면과 최신 문서를 섞어 보면 초보자는 더 헷갈리기 쉽습니다.
• 지금은 VS Code만 설치하고, Git이나 Node.js 같은 도구는 실제로 필요한 실습이 나왔을 때 추가해도 늦지 않습니다.

설치 직후 바로 해둘 기본 세팅

VS Code는 처음 켰을 때부터 이것저것 많이 할 수 있는 편집기입니다. 문제는 그만큼 초보자가 어디서부터 손대야 할지 모르기 쉽다는 점입니다. 그래서 저는 처음 10분 안에 끝낼 기본 세팅을 따로 잡아두는 편이 낫다고 봅니다.

먼저 외울 단축키 4개

• Ctrl + Shift + P : 명령 팔레트 열기
• Ctrl + , : 설정 열기
• Ctrl + ` : 통합 터미널 열기/닫기
• Ctrl + Shift + X : 확장 프로그램 화면 열기

이 네 개만 익혀도 초반 헤맴이 크게 줄어듭니다. 특히 명령 팔레트는 VS Code의 거의 모든 기능으로 들어가는 관문이라고 생각하면 됩니다. 메뉴를 못 찾아도 여기서 대부분 찾을 수 있습니다.

표시 언어는 편한 쪽으로 먼저 맞춘다

처음에는 영어 UI가 부담스러울 수 있습니다. 그럴 때는 표시 언어를 한국어로 바꿔서 시작해도 괜찮습니다. 다만 실습을 이어가다 보면 에러 메시지, 공식 문서, 확장 프로그램 설명은 영어를 마주칠 일이 많습니다. 그래서 처음엔 한국어로 익숙해지고, 나중에 천천히 영어 화면에 적응하는 방식도 충분히 현실적입니다.

테마나 아이콘 꾸미기는 나중 문제로 미뤄도 됩니다. 실습 초반에는 예쁜 화면보다 덜 낯선 화면이 더 중요합니다.

vscode 한국어 팩

자동 저장은 초보자에게 거의 필수에 가깝다

AI와 같이 실습할 때는 파일을 조금씩 자주 고치게 됩니다. 그런데 저장을 깜빡하면 브라우저 결과가 안 바뀌거나, 실행 결과가 예전 상태로 남아 있는 일이 꽤 자주 생깁니다. 이때 초보자는 “AI가 틀린 코드를 준 건가?”라고 생각하기 쉬운데, 실제로는 저장이 안 된 경우가 많습니다.

그래서 Auto Save는 편의 기능이라기보다 혼란을 줄이는 안전장치에 가깝습니다. 파일을 손으로 꼬박꼬박 저장하는 습관이 이미 잡혀 있는 사람이 아니라면, 실습용 환경에서는 켜두는 쪽이 훨씬 편합니다.

통합 터미널은 미리 친숙해져야 한다

바이브코딩에서 AI는 생각보다 자주 터미널 명령을 제안합니다. 패키지를 설치하라고 하거나, 프로젝트를 실행하라고 하거나, Git 명령을 안내하는 식입니다. 그래서 VS Code 안에서 터미널을 여는 것 자체가 낯설면, AI의 설명이 맞아도 사용자가 따라가기가 어려워집니다.

Windows에서는 일단 PowerShell로 시작해도 충분합니다. 이미 Git Bash를 쓰던 사람만 나중에 기본 터미널을 바꾸면 됩니다. 중요한 건 멋진 셸을 고르는 게 아니라, 터미널이 어디 있고 현재 어느 폴더에서 열리는지를 이해하는 것입니다.

설정 동기화는 여러 기기를 쓸 때만 우선순위를 올린다

노트북과 데스크톱을 같이 쓰는 사람이라면 설정 동기화를 켜둘 가치가 있습니다. 테마, 단축키, 설정, 확장 목록을 다시 맞추는 시간을 줄여주기 때문입니다. 반대로 PC 한 대에서만 실습한다면, 이 기능은 당장 안 켜도 괜찮습니다. 초보 단계에서는 동기화보다 현재 PC에서 안정적으로 쓰는 것이 먼저입니다.

폴더 신뢰 메시지는 무시하지 않는다

인터넷에서 내려받은 예제나 남이 준 압축 파일을 처음 열 때, VS Code가 폴더를 신뢰할지 묻는 경우가 있습니다. 이때 아무 생각 없이 허용하기보다, 출처가 애매하면 일단 제한 모드로 두는 습관이 좋습니다. 실습용으로 내가 직접 만든 폴더라면 신뢰해도 괜찮지만, 남이 만든 코드는 신중할수록 좋습니다.

어떤 폴더에서는 AI 기능이나 작업 실행이 갑자기 제한되어 보일 수 있습니다. 이럴 때는 코드 문제가 아니라 폴더 신뢰 상태가 원인인 경우도 있습니다.

실습용 폴더와 프로필을 따로 만들어두자

실습용 바이브코딩 환경은 가볍게 망가져도 괜찮은 공간이어야 합니다. 업무용 프로젝트와 뒤섞어놓으면, 설정 하나 바꾸는 것도 조심스러워지고 확장 프로그램 실험도 부담스러워집니다. 그래서 저는 실습용 폴더와 실습용 프로필을 따로 두는 방식을 권합니다.

파일 하나보다 폴더를 여는 습관이 중요하다

초보자는 바탕화면의 파일 하나를 더블클릭해서 VS Code를 여는 경우가 많습니다. 그런데 바이브코딩은 보통 파일 하나가 아니라 프로젝트 전체 맥락을 기준으로 움직입니다. 터미널도 폴더 기준으로 열리고, 프로젝트별 설정도 폴더 기준으로 저장됩니다. 그래서 가능하면 File > Open Folder로 실습 폴더를 먼저 여는 습관을 들이는 편이 좋습니다.

예를 들어 AI가 “이 폴더에서 새 파일을 만들고 실행해보세요”라고 했는데, 실제로는 파일 하나만 열려 있으면 경로가 꼬이기 쉽습니다. 초반에 이런 식으로 막히면 코딩보다 환경 문제를 푸는 데 시간을 더 쓰게 됩니다.

실습용 폴더 구조는 단순할수록 좋다

처음부터 거창한 구조를 만들 필요는 없습니다. 다만 실습이 쌓일수록 파일이 흩어지기 쉬우니, 최소한 아래처럼 주제별로 폴더를 나눠두면 관리가 편합니다.

vibe-lab/
  01-hello-web/
  02-javascript-basic/
  03-mini-project/
  prompts/
  notes.md

prompts 폴더나 notes.md 파일을 두는 이유는 단순합니다. AI에게 잘 먹힌 요청 문장, 막혔던 오류, 다시 보고 싶은 설명을 따로 남겨두면 다음 실습에서 바로 재사용할 수 있기 때문입니다. 이게 쌓이면 나중에는 내 나름의 실습 매뉴얼이 됩니다.

실습용 프로필은 생각보다 유용하다

VS Code의 프로필은 설정, 확장, UI 배치를 묶어서 관리하는 개념이라고 생각하면 쉽습니다. 실습용 프로필을 하나 만들어두면, 업무용 환경과 분리해서 확장 프로그램을 설치하거나 설정을 조정하기 편합니다. 예를 들어 Vibe Coding Lab 같은 이름으로 프로필을 하나 만들고, 그 안에는 실습에 필요한 확장만 두는 식입니다.

이 방식이 좋은 이유는 단순합니다. 뭔가 꼬였을 때 원인을 좁히기 쉽고, 나중에 실습 환경을 통째로 정리하거나 초기화하기도 수월합니다. 처음부터 꼭 해야 하는 건 아니지만, VS Code를 오래 쓸 생각이라면 꽤 만족도가 높은 기능입니다.

구분	어디에 쓰나	초보자 기준 예시
사용자 설정	내 PC의 VS Code 전체에 공통으로 적용	글자 크기, 자동 저장, 기본 터미널
워크스페이스 설정	현재 연 폴더에만 적용	실습 프로젝트 전용 포맷팅 규칙, 제외 폴더
프로필	환경 자체를 묶어서 분리	실습용 확장만 담은 별도 환경

 

예를 들어 글자 크기나 기본 터미널처럼 개인 취향에 가까운 건 사용자 설정에 두고, 특정 실습 폴더에서만 쓸 규칙은 나중에 .vscode/settings.json으로 분리하면 관리가 편합니다.

이 차이를 초반에 알아두면 나중에 “왜 어떤 설정은 전체 프로젝트에 다 적용되고, 어떤 건 지금 폴더에서만 바뀌지?” 같은 혼란이 줄어듭니다.

확장 프로그램은 적게, 목적은 분명하게

VS Code를 설치한 직후 가장 하기 쉬운 실수가 확장 프로그램을 너무 많이 깔아버리는 것입니다. 화면이 화려해지고 기능이 많아지는 건 맞지만, 초보자에게 그게 꼭 좋은 건 아닙니다. 자동완성, 포맷팅, AI 추천, 단축키가 서로 겹치기 시작하면 무엇이 어떤 기능을 담당하는지부터 흐려집니다.

확장 프로그램은 단순한 꾸미기 도구가 아니라 편집기 동작에 꽤 깊게 들어옵니다. 그래서 이름이 낯설거나 용도가 모호한 확장은 일단 미루고, 발행자와 설명을 한번 확인한 뒤 설치하는 습관이 좋습니다.

초반 확장 설치 원칙은 네 가지면 충분하다

• 지금 당장 필요한 것만 깐다. 나중에 필요해질 것 같은 확장은 그때 가서 추가해도 됩니다.
• 겹치는 역할은 하나만 둔다. 특히 포맷터와 AI 확장은 중복 설치의 체감 부작용이 큽니다.
• 언어 지원과 실습 보조를 구분한다. 언어 지원 확장과 AI 보조 확장을 한꺼번에 많이 넣지 않습니다.
• 출처가 애매하면 설치를 미룬다. 초보일수록 기능 수보다 신뢰할 수 있는 환경이 더 중요합니다.

처음에는 이 정도 구성이면 충분하다

• 표시 언어 관련 확장 : 영어 UI가 부담스러울 때만
• 지금 배우는 언어 지원 : HTML/CSS/JavaScript나 Python처럼 현재 실습 주제에 맞는 것만
• 포맷터 1개 : 저장 시 코드 모양을 정리하는 용도
• AI 확장 1개 : 지금 실제로 써볼 도구 하나만 (Codex,Gemini,Cluade)

확장 프로그램은 많을수록 좋은 게 아니라, 내가 왜 설치했는지 설명할 수 있을수록 좋은 것에 가깝습니다.

실습용으로 무난한 settings.json 예시

설정은 화면에서 하나씩 켜도 되지만, 복붙해서 빠르게 시작하고 싶다면 사용자 설정 JSON에 아래 정도를 넣어도 무난합니다.

{
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.fontSize": 14,
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

설정	왜 넣는가
files.autoSave	저장 누락 때문에 실행 결과가 안 바뀌는 혼란을 줄입니다.
editor.formatOnSave	저장할 때 코드 모양을 정리해 들여쓰기 싸움을 줄입니다.
editor.minimap.enabled	처음에는 화면 요소를 줄여서 편집기에 집중하기 쉽습니다.
editor.fontSize	글자가 너무 작으면 코드보다 화면 피로가 먼저 옵니다.
terminal.integrated.defaultProfile.windows	터미널 동작을 일정하게 유지해 초반 혼란을 줄입니다.

 

단, editor.formatOnSave는 해당 언어나 확장이 포맷팅을 지원해야 제대로 체감됩니다. 그러니 이 설정만 켜고 아무 포맷터도 없는 상태라면 기대한 만큼 변하지 않을 수도 있습니다.

여기서 중요한 건 값 자체를 외우는 게 아닙니다. 왜 이 설정을 켜는지 이해하는 것이 더 중요합니다. 실습용 세팅은 멋을 내기 위한 게 아니라, 오류 원인을 빨리 좁히고 실습 흐름을 덜 끊기 위해 존재합니다.

마무리

실습용 바이브코딩 환경에서 먼저 잡아야 할 것은 AI 도구의 종류가 아닙니다. 폴더를 제대로 열고, 저장이 자동으로 되고, 터미널이 보이고, 설정 범위를 구분할 수 있는 상태가 먼저입니다. 이 바닥이 흔들리지 않아야 AI가 도와주는 부분과 내가 직접 판단해야 하는 부분이 구분되기 때문입니다.

정리하면, 지금 단계에서의 목표는 복잡한 개발 환경을 완성하는 것이 아니라 VS Code를 실습에 방해되지 않는 상태로 만드는 것입니다. 여기까지 해두면, 다음 단계에서는 AI 확장을 하나 붙이고 “무엇을 어떻게 요청해야 하는가”, “AI가 준 코드를 어디까지 믿고 어디부터 검증해야 하는가”를 훨씬 차분하게 다룰 수 있습니다.

이 글 기준으로 세팅이 끝난 상태

• VS Code 설치가 끝났다.
• 실습용 폴더를 따로 만들었다.
• 파일이 아니라 폴더 단위로 여는 습관을 잡았다.
• 자동 저장과 터미널 사용에 익숙해지기 시작했다.
• 확장 프로그램은 많이 깔지 않고 필요한 것만 골랐다.
• 실습용 프로필이나 설정 범위의 차이를 이해했다.

이 정도면 바이브코딩을 본격적으로 시작하기 전에 필요한 바닥 공사는 충분히 된 셈입니다.