4강: VS Code 200% 활용하기

작성 2026-04-12읽는 시간 7분

도구를 잘 세팅하면 바이브 코딩 속도가 2배가 됩니다

이건 뭐예요?

지난 3강에서 우리는 코드를 담아둘 금고(GitHub)를 만들고, AI 조수(Claude Code)를 고용했어요. 그리고 이 조수가 일할 작업대인 에디터(VS Code)도 쓱 훑어봤죠.

오늘은 이 VS Code(브이에스 코드) 라는 작업대를 내 손에 딱 맞게 튜닝하는 시간이에요.

바이브 코딩에서 VS Code는 내가 직접 코드를 타이핑하는 곳이 아니에요. AI가 열심히 만들어낸 코드를 편안하게 앉아서 지켜보고, "여기 좀 고쳐줄래?" 하고 지시를 내리는 관제탑(Control Tower) 같은 곳이죠. 관제탑의 모니터가 크고 선명할수록, 그리고 버튼들이 내 손에 익을수록 작업 속도는 어마어마하게 빨라져요.

우리는 이렇게 쓰고 있어요

AI//STUDY 사이트를 만들 때, 화면 위쪽에서는 Docusaurus(문서 사이트 엔진)가 만들어 낸 페이지를 실시간으로 확인하고, 화면 아래쪽 터미널에서는 Claude Code에게 "이 섹션 스타일 바꿔줘"라고 지시해요. 이 두 화면을 왔다 갔다 하는 게 바이브 코딩의 기본 동선이에요.

관제탑이 잘 세팅돼 있으면 이 동선이 매끄러워져요. 오늘 배우는 확장 프로그램, 단축키, 자동 저장 같은 세팅이 전부 이 "매끄러움"을 위한 거예요.

1단계: 확장 프로그램 설치 — 앱스토어에서 앱 깔기

가장 먼저 할 일은 관제탑에 필요한 도구를 설치하는 거예요. VS Code에는 확장 프로그램(Extension) 이라는 기능이 있어요. 스마트폰에서 앱스토어로 카카오톡이나 유튜브를 다운받듯이, VS Code에도 필요한 기능을 다운받아 붙일 수 있답니다.

확장 프로그램 설치하는 법

VS Code를 엽니다.
화면 왼쪽 아이콘들 중에서 이렇게 생긴 아이콘을 누르세요. 이게 확장(Extensions) 탭이에요.
위쪽 검색창에 설치하고 싶은 확장의 이름을 입력합니다.
검색 결과에서 원하는 항목을 찾아 Install(설치) 버튼을 누르면 끝이에요.

필수 확장 3가지

앱스토어를 연 김에, 바이브 코더들이 필수로 설치하는 앱 3가지를 깔아볼게요.

1. Korean Language Pack (한글 패치)

영어 메뉴가 부담스러우신가요? 마이크로소프트가 공식으로 제공하는 이 확장을 설치하면, VS Code의 모든 메뉴가 친절한 한국어로 바뀌어요. 설치 후 VS Code를 한 번 재시작하면 적용돼요.

Korean Language Pack for Visual Studio Code

2. Prettier - Code formatter (코드 자동 청소부)

AI가 코드를 짜다 보면 가끔 들여쓰기(코드 앞의 빈칸)가 삐뚤빼뚤해질 때가 있어요. Prettier(프리티어) 는 파일을 저장할 때마다 코드를 보기 좋게 싹 정리해주는 자동 청소부예요. 사람이 방을 치울 필요 없이, 로봇 청소기가 알아서 돌아다니는 거죠.

3. Auto Rename Tag (짝꿍 이름표 도우미)

웹사이트를 만들 때 <div>로 시작해서 </div>로 끝나는 짝꿍 이름표들을 많이 쓰게 돼요. 앞의 이름을 <section>으로 바꾸면, 뒤의 짝꿍 이름도 자동으로 </section>으로 바꿔주는 기특한 녀석이에요.

Claude Code 확장 프로그램 연결하기

마지막으로, 관제탑 안에 AI 비서의 직통 전화를 놓을 거예요. 검색창에 Claude 라고 입력하세요. Claude Code 공식 확장 프로그램을 찾아 설치하면, 터미널을 따로 띄우지 않아도 에디터 안에서 바로 AI와 대화할 수 있어요.

2단계: 터미널 통합 — 관제탑 안에서 명령하기

3강에서 터미널(명령어 입력 창)을 따로 열어서 Claude Code를 실행했었죠? 이제는 그 까만 창을 별도로 열 필요가 없어요. VS Code 관제탑 안에 터미널이 내장되어 있거든요.

키보드에서 Ctrl + ` (백틱) 을 동시에 눌러보세요. 백틱은 숫자 1 왼쪽에 있는 물결 모양(~) 키예요. Mac에서는 Cmd + ` 이에요.

화면 아래쪽에 작은 터미널 창이 스르륵 올라올 거예요. 여기서 바로 명령어를 칠 수 있어요.

# VS Code 내장 터미널에서 3강의 연습 폴더로 이동하기
cd vibe-practice

# Claude Code 시작하기
claude

아래처럼 터미널에서 Claude Code가 실행되면 성공이에요.

VS Code 터미널에서 Claude Code 실행 화면

이제 화면 위쪽에서는 AI가 만든 파일 내용을 눈으로 확인하고, 화면 아래쪽 터미널에서는 AI와 대화를 나누는 완벽한 바이브 코딩 사무실이 만들어졌어요.

작업 속도를 높이고 싶다면 — Bypass 모드

Claude Code는 처음 실행하면 매번 "이거 해도 돼요?" 하고 물어보는 기본 모드로 시작해요. Shift + Tab 키를 누르면 권한 모드를 전환할 수 있어요. Bypass 모드를 켜면 AI가 묻지 않고 바로바로 작업해서 속도가 확 빨라져요. 자세한 내용은 Claude Code 권한 모드 팁을 참고하세요.

3단계: 단축키 5가지 — 마우스 없이 일하기

관제탑에 앉았으면, 키보드 단축키 몇 개만 외워두면 마우스로 손이 가는 시간을 확 줄일 수 있어요. 딱 5개만 외워볼까요?

기능	Windows	Mac	이건 언제 써요?
파일 찾기	`Ctrl` + `P`	`Cmd` + `P`	"그 파일 어딨지?" — 파일 이름으로 바로 검색해서 열 때
터미널 열기/닫기	`Ctrl` + `	`Cmd` + `	"조수야 이리 와!" — 아래쪽 대화창을 숨겼다 꺼낼 때
사이드바 열기/닫기	`Ctrl` + `B`	`Cmd` + `B`	"책장 좀 치워" — 왼쪽 폴더 목록을 숨겨서 화면을 넓게 쓸 때
저장하기	`Ctrl` + `S`	`Cmd` + `S`	"기록해!" — 파일 내용을 확정 짓기
되돌리기	`Ctrl` + `Z`	`Cmd` + `Z`	"아차, 취소!" — 실수로 지운 내용을 시간 여행으로 복구

단축키가 너무 많아서 헷갈려요

괜찮아요. 오늘은 터미널 열기(Ctrl + `) 하나만 확실히 외워두세요. 이것만 알아도 마우스 클릭 횟수가 확 줄어요. 나머지는 쓰다 보면 자연스럽게 손에 붙어요.

4단계: 테마 & 폰트 — 눈이 편안한 작업실 만들기

개발자들은 왜 다들 까만 화면을 쓸까요? 하루 종일 하얀 화면을 보면 눈이 너무 부시기 때문이에요. 우리도 눈 건강을 위해 다크 모드(Dark Mode, 어두운 배경 테마) 로 바꿔볼게요.

화면 왼쪽 아래의 톱니바퀴 아이콘(설정) 을 누르세요.
테마(Themes) > 색 테마(Color Theme) 를 선택하세요.
목록에서 마음에 드는 어두운 테마를 골라보세요. Dark+ (기본 다크 테마)도 충분히 좋아요.

코딩 전용 폰트 설치하기

글꼴(Font, 폰트)도 중요해요. 1(숫자 일), I(대문자 아이), l(소문자 엘)이 헷갈리지 않게 생긴 코딩 전용 폰트를 쓰면 오류를 줄일 수 있어요. D2Coding(네이버에서 만든 무료 코딩 폰트)을 추천해요.

github.com/naver/d2codingfont 에 접속하세요.
Releases 탭에서 최신 버전의 zip 파일을 다운로드하세요.
압축을 풀고, .ttf 파일을 더블클릭해서 설치 버튼을 누르세요.
VS Code 설정에서 폰트를 D2Coding으로 바꾸면 돼요. (바로 다음 단계에서 같이 해볼 거예요!)

5단계: settings.json — 관제탑 세부 설정

VS Code의 모든 설정은 사실 settings.json 이라는 하나의 파일에 저장돼요. JSON(제이슨)은 설정값을 적어두는 메모장 같은 형식이에요. 여기서 바이브 코더에게 꼭 필요한 설정 몇 가지를 한 번에 적용해 볼게요.

설정 파일 여는 법

Ctrl + Shift + P (Mac은 Cmd + Shift + P)를 누르세요. 명령 팔레트(Command Palette) 라는 검색창이 위쪽에 나타나요.
settings json 이라고 입력하세요.
Preferences: Open User Settings (JSON) 을 선택하세요.

파일이 열리면, 아래 내용을 통째로 복사해서 붙여넣으세요.

{
  "files.autoSave": "onFocusChange",
  "editor.fontFamily": "D2Coding, Consolas, monospace",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

각 줄이 뭘 하는지 풀어볼게요.

설정	의미
`files.autoSave`	다른 창을 클릭하면 자동으로 저장해줘요. 깜빡 저장 실수 방지!
`editor.fontFamily`	아까 설치한 D2Coding 폰트를 사용해요
`editor.fontSize`	글자 크기를 14로 설정해요. 눈이 편한 크기예요
`editor.tabSize`	들여쓰기 칸 수를 2칸으로 맞춰요. 웹 개발의 표준이에요
`editor.formatOnSave`	저장할 때마다 Prettier가 코드를 자동으로 정리해줘요
`editor.defaultFormatter`	코드 정리는 Prettier가 담당한다고 지정하는 거예요

저장(Ctrl + S)하면 바로 적용돼요.

한번 써볼까요? — 실습

오늘 배운 걸 직접 해볼 시간이에요. 3강에서 만든 vibe-practice 폴더를 계속 사용할 거예요.

1단계: VS Code에서 프로젝트 열기

VS Code를 켜고, 내장 터미널(Ctrl + `)을 열어주세요.

# 3강에서 만든 연습 폴더로 이동
cd vibe-practice

# Claude Code 시작
claude

2단계: Claude Code에게 세팅 확인 시키기

Claude Code 대화창이 열렸으면, AI에게 우리 환경을 확인시켜 볼게요.

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# 현재 폴더에 뭐가 있는지 확인 (Claude Code 대화창 안에서 실행)
! ls

# VS Code가 제대로 연결됐는지 확인
! code --version

3단계: AI에게 연습 파일 만들어달라고 하기

Claude Code 대화창에 아래를 그대로 입력해 보세요.

이 폴더에 index.html 파일을 만들어줘. 
내용은 간단한 자기소개 페이지로 해줘. 
이름은 "바이브 코더", 한 줄 소개는 "AI와 함께 만드는 첫 번째 웹페이지" 로 하고,
배경은 어두운 색, 글자는 밝은 색으로 해줘.

파일이 만들어지면 확인해 볼까요?

# 만들어진 파일을 VS Code 에디터에서 열기
! code index.html

VS Code 위쪽 편집 영역에 AI가 만든 HTML(웹페이지 코드)이 열릴 거예요. 코드를 직접 읽을 줄 몰라도 괜찮아요. 색깔이 입혀진 코드가 보이면 성공이에요.

4단계: 브라우저에서 확인하기

이번에는 AI가 만든 페이지를 실제 브라우저(Chrome 같은 인터넷 창)에서 확인해 볼게요. Claude Code 대화창에서 이렇게 말해보세요.

방금 만든 index.html을 브라우저에서 볼 수 있게 해줘.

Claude Code가 파일을 여는 방법을 알려주거나, 직접 열어줄 거예요. 어두운 배경에 밝은 글자로 자기소개가 보이면 성공이에요!

이번 강에서 기억할 것

VS Code는 바이브 코더의 관제탑이에요. AI가 만든 코드를 확인하고 관리하는 본부 역할을 해요.
확장 프로그램(Extension) 4가지를 설치하세요. Korean Language Pack(한글 패치), Prettier(코드 정리), Auto Rename Tag(짝꿍 이름표), Claude Code(AI 연결). 전부 무료예요.
Ctrl + ` (백틱) 단축키는 꼭 외우세요. VS Code 안에서 바로 터미널을 열고 Claude Code를 부를 수 있는 마법의 키예요.
settings.json에서 자동 저장을 켜두세요. "files.autoSave": "onFocusChange" 한 줄이면 돼요. 저장 깜빡 실수를 완벽하게 막아줘요.
D2Coding 폰트를 설치하면 코드가 훨씬 잘 보여요. 숫자 1과 소문자 l이 헷갈리지 않아요.

다음 강에서는 Git(깃) — 게임 세이브 시스템을 배울 거예요. 코드를 만들다가 "아, 10분 전으로 돌아가고 싶다!" 할 때 정말 유용한 도구예요. 오늘 만든 vibe-practice 폴더를 그대로 사용할 거니까 삭제하지 마세요.

이런 분께 추천해요

"설치까지 했는데, 이 까만 화면에서 뭘 해야 하죠?" 하시는 분 -- 3강에서 설치한 도구들을 제대로 세팅하는 법을 알려드려요.
Claude Code 대화창과 파일 확인 창을 번갈아 띄우느라 손목이 아프신 분 -- VS Code 안에서 전부 해결하는 방법을 배워요.
남들처럼 멋진 어두운 화면에서 바이브 코딩을 즐기고 싶으신 분 -- 다크 테마와 코딩 전용 폰트로 분위기를 확 바꿔요.

참고 링크

▸개정 이력1건

v12026-04-12초판

이 글이 도움이 되었나요?

이건 뭐예요?​

우리는 이렇게 쓰고 있어요​

1단계: 확장 프로그램 설치 — 앱스토어에서 앱 깔기​

확장 프로그램 설치하는 법​

필수 확장 3가지​

Claude Code 확장 프로그램 연결하기​

2단계: 터미널 통합 — 관제탑 안에서 명령하기​

3단계: 단축키 5가지 — 마우스 없이 일하기​

4단계: 테마 & 폰트 — 눈이 편안한 작업실 만들기​

코딩 전용 폰트 설치하기​

5단계: settings.json — 관제탑 세부 설정​

설정 파일 여는 법​

한번 써볼까요? — 실습​

1단계: VS Code에서 프로젝트 열기​

2단계: Claude Code에게 세팅 확인 시키기​

3단계: AI에게 연습 파일 만들어달라고 하기​

4단계: 브라우저에서 확인하기​

이번 강에서 기억할 것​

이런 분께 추천해요​

참고 링크​