본문으로 바로가기
리옵트 핸드북
리옵트 핸드북
Windows 바이브코딩 초기 세팅

환경 준비

시작하기 전에Git 설치Node.js 설치VS Code 설치

Claude Code

Claude Code 설치Claude Code 인증

프로젝트 시작

Next.js 프로젝트 생성Next.js AI 세팅Claude Code 첫 실행CLAUDE.md 설정

트러블슈팅
핸드북›Windows 바이브코딩 세팅›VS Code 설치

VS Code 설치

코드 에디터 Visual Studio Code를 설치하고 기본 설정합니다

핵심 요약

  • VS Code 설치 시 "PATH에 추가"를 반드시 체크하고, "Code로 열기" 컨텍스트 메뉴 항목도 켜두면 편리합니다.
  • Korean Language Pack으로 메뉴를 한국어로 바꾸고, Anthropic의 Claude Code 확장을 깔면 에디터 안에서 더 편하게 쓸 수 있습니다.
  • VS Code 1.120(2026-05-14 기준 최신)에는 Agents window, 터미널 명령 위험도 표시, 긴 터미널 출력 압축, Markdown diff preview가 추가되었습니다.
  • 내장 터미널은 Ctrl + `로 열고, PowerShell을 따로 열지 않아도 명령어를 실행할 수 있습니다.
  • 프로젝트 폴더는 메뉴 "폴더 열기", 탐색기의 "Code로 열기", 또는 터미널에서 code .로 엽니다.

Visual Studio Code(VS Code)는 코드를 작성하고 편집하는 프로그램입니다. Claude Code가 만든 코드를 확인하고, 터미널에서 명령어를 실행하는 데 사용합니다.

VS Code를 꼭 설치해야 하나요?

Claude Code는 터미널에서만 동작하므로, 메모장으로도 코드를 볼 수는 있습니다. 하지만 VS Code는 코드 색상 구분, 파일 탐색, 내장 터미널 같은 편리한 기능이 있어서 꼭 쓰시길 권합니다.

VS Code 다운로드 및 설치

공식 사이트 접속

웹 브라우저에서 code.visualstudio.com에 접속합니다.

다운로드

Download for Windows 버튼을 클릭합니다.

설치 실행

다운로드된 설치 파일을 실행합니다. 설치 중 아래 옵션을 체크하세요:

  • PATH에 추가 (Add to PATH): 반드시 체크
  • "Code로 열기" 작업을 파일 컨텍스트 메뉴에 추가: 체크 권장
  • "Code로 열기" 작업을 디렉터리 컨텍스트 메뉴에 추가: 체크 권장

설치 완료

설치가 끝나면 VS Code를 실행합니다.

추천 확장 프로그램

VS Code는 확장 프로그램(Extensions)을 설치하여 기능을 추가할 수 있습니다.

Korean Language Pack (한국어 지원)

VS Code 메뉴를 한국어로 바꿔줍니다.

  1. VS Code에서 Ctrl + Shift + X를 눌러 확장 프로그램 패널을 엽니다
  2. 검색창에 Korean을 입력합니다
  3. Korean Language Pack for Visual Studio Code를 찾아 Install 클릭
  4. VS Code를 재시작하면 한국어가 적용됩니다

Claude Code 확장 프로그램

VS Code 안에서 Claude Code를 더 편리하게 사용할 수 있습니다.

  1. 확장 프로그램 패널에서 Claude Code를 검색합니다
  2. Claude Code (Anthropic 제공)를 찾아 Install 클릭

확장 프로그램은 나중에 설치해도 됩니다

지금 당장 설치하지 않아도 괜찮습니다. Claude Code는 터미널에서 독립적으로 동작하므로, 확장 프로그램 없이도 바이브코딩을 시작할 수 있습니다.

VS Code 최신 업데이트 (v1.120)

2026-05-14 기준 최신 VS Code 릴리스는 1.120입니다. 공식 릴리스 노트에서 바이브코딩과 문서 작업에 직접 도움이 되는 항목만 추렸습니다.

Agents window

VS Code Stable에서 Agents window 프리뷰를 사용할 수 있습니다. 여러 프로젝트와 에이전트 작업을 별도 창에서 관리하고, 끝난 세션의 변경 파일을 한 번에 확인하기가 더 편해졌습니다.

터미널 명령 위험도 표시

터미널 명령 실행 전 위험도를 표시하는 실험 기능이 추가되었습니다. 파일 읽기처럼 위험이 낮은 작업과 삭제·강제 push처럼 되돌리기 어려운 작업을 구분해 검토합니다.

긴 터미널 출력 압축

git diff, npm install처럼 긴 터미널 출력이 AI 컨텍스트를 과도하게 차지하지 않도록 압축하는 프리뷰 설정이 추가되었습니다. 큰 프로젝트에서 Claude Code와 VS Code 에이전트를 함께 쓸 때 유용합니다.

Markdown diff preview

Markdown 파일 변경사항을 원문이 아니라 렌더링된 미리보기로 비교합니다. 핸드북이나 README를 AI가 고쳤을 때 실제 독자에게 보이는 차이를 더 쉽게 검토할 수 있습니다.

VS Code 자동 업데이트

VS Code는 기본적으로 자동 업데이트됩니다. 수동으로 업데이트하려면 도움말(Help) > **업데이트 확인(Check for Updates)**을 클릭하세요.

터미널 사용법

VS Code에는 터미널이 내장되어 있습니다. 별도로 PowerShell을 열 필요 없이 VS Code 안에서 명령어를 실행할 수 있습니다.

동작단축키
터미널 열기/닫기Ctrl + ` (백틱, 숫자 1 왼쪽 키)
새 터미널Ctrl + Shift + `
터미널 간 전환Ctrl + PageUp/PageDown

VS Code에서 폴더 열기

프로젝트 폴더를 VS Code에서 여는 방법입니다.

  1. VS Code에서 파일(File) > 폴더 열기(Open Folder) 클릭
  2. 원하는 폴더를 선택하고 폴더 선택 클릭

참고 자료

  1. VS Code 공식 사이트
  2. VS Code 다운로드
  3. VS Code 공식 문서
  4. VS Code Windows 설치 가이드
  5. VS Code 터미널 기본 사용법
  6. VS Code 터미널 시작 가이드
  7. Korean Language Pack 확장
  8. VS Code 표시 언어 설정
  9. VS Code 1.120 릴리스 노트

관련 문서

Ch10. IDE 통합

Claude Code 고급 활용 · Claude Code를 VS Code·JetBrains에 통합해 사이드바 채팅·@멘션 컨텍스트·인라인 diff·체크포인트·Remote Control·Desktop 앱을 사용하는 방법

트러블슈팅

PowerShell 실행 정책, PATH 인식 실패, claude 명령 누락, 포트 3000 충돌, Next.js MCP 연결 등 Windows 바이브코딩 세팅에서 자주 막히는 문제의 증상과 해결법을 모았습니다.

Claude Code 설치

PowerShell 한 줄 네이티브 설치(irm install.ps1)로 Claude Code를 설치하고, ExecutionPolicy·PATH 문제를 해결하며 claude doctor로 환경을 점검합니다.

Cmd. /terminal-setup

Claude Code 명령어 마스터 · Shift+Enter 등 줄바꿈 단축키를 터미널에 맞게 자동 구성하는 명령

Ch11. 헤드리스 & CI/CD

Claude Code 고급 활용 · claude -p 비대화형 실행과 --bare 경량 모드, JSON·stream-json 출력, 세션 연속성·퍼미션 모드·GitHub Actions로 CI 파이프라인을 구성하는 방법

Node.js 설치

nodejs.org에서 Node.js LTS를 설치해 Next.js 실행에 필요한 20.9 이상 조건을 충족하고, node·npm 버전 확인과 함께 npm·npx의 역할까지 이해합니다.

Claude Code 설치

PowerShell 한 줄 네이티브 설치(irm install.ps1)로 Claude Code를 설치하고, ExecutionPolicy·PATH 문제를 해결하며 claude doctor로 환경을 점검합니다.

On this page

VS Code 다운로드 및 설치공식 사이트 접속다운로드설치 실행설치 완료추천 확장 프로그램Korean Language Pack (한국어 지원)Claude Code 확장 프로그램VS Code 최신 업데이트 (v1.120)Agents window터미널 명령 위험도 표시긴 터미널 출력 압축Markdown diff preview터미널 사용법VS Code에서 폴더 열기참고 자료