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

환경 준비

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

Claude Code

Claude Code 설치Claude Code 인증

프로젝트 시작

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

트러블슈팅
핸드북›Windows 바이브코딩 세팅›Claude Code 첫 실행

Claude Code 첫 실행

프로젝트 폴더에서 claude 명령으로 Claude Code를 시작하고, AGENTS.md와 로컬 문서를 기준으로 첫 분석·수정을 요청하며 권한 승인과 종료 방법까지 익힙니다.

핵심 요약

  • 반드시 프로젝트 폴더(cd C:\Projects\my-first-app)로 이동한 뒤 claude를 실행해야 Claude Code가 프로젝트 파일을 읽고 수정합니다.
  • 첫 명령으로 "AGENTS.md와 CLAUDE.md를 먼저 읽고 구조를 설명해줘"처럼 로컬 Next.js 문서를 기준으로 분석해 달라고 요청하면 좋습니다.
  • 별도 PowerShell에서 npm run dev를 켜두면 Next.js 16.2가 브라우저 오류·Server Function 로그를 터미널에 표시해 디버깅이 쉬워집니다.
  • 파일 수정·명령 실행 시 권한 승인을 요청하며, 처음에는 Always allow 대신 하나씩 확인하는 것을 추천합니다.
  • 작업을 마치려면 /exit를 입력하거나 Ctrl + C를 두 번 누릅니다.

Next.js 프로젝트가 준비됐으니, 이제 Claude Code를 프로젝트에서 실행해 봅시다. 여기서부터 본격적인 바이브코딩입니다.

프로젝트 폴더에서 Claude Code 시작

프로젝트 폴더로 이동

PowerShell에서 프로젝트 폴더로 이동합니다:

cd C:\Projects\my-first-app

Claude Code 실행

claude

인터페이스 확인

Claude Code가 실행되면 터미널에 프롬프트(>)가 나타납니다. 여기에 자연어로 명령을 입력하면 됩니다.

반드시 프로젝트 폴더에서 실행하세요

Claude Code는 현재 폴더의 파일을 읽고 수정합니다. 프로젝트 폴더가 아닌 곳에서 실행하면 프로젝트 파일을 찾지 못합니다.

첫 번째 명령: 프로젝트 구조 확인

Claude Code에게 Next.js 에이전트 안내부터 읽고 프로젝트를 분석해 달라고 요청해 봅시다:

AGENTS.md와 CLAUDE.md를 먼저 읽고, 이 프로젝트의 구조를 설명해줘.
Next.js 관련 내용은 node_modules/next/dist/docs/의 로컬 문서를 기준으로 설명해줘.

Claude Code가 프로젝트의 파일과 폴더를 분석하고, 각각의 역할을 한국어로 설명해줍니다.

개발 서버와 함께 실행하기

Next.js 앱을 수정할 때는 개발 서버를 켜 둔 상태가 좋습니다. 별도 PowerShell 창에서 아래 명령어를 실행합니다:

npm run dev

그 다음 Claude Code에는 이렇게 요청합니다:

현재 개발 서버 로그와 브라우저 로그를 확인하면서 메인 페이지를 수정해줘.
문제가 생기면 원인을 설명하고 최소 변경으로 고쳐줘.

Next.js 16.2에서는 브라우저 오류와 Server Function 실행 로그가 개발 서버 터미널에 뜨므로, Claude Code가 문제를 더 쉽게 찾아냅니다.

간단한 수정 요청

이번에는 메인 페이지를 수정해 봅시다:

메인 페이지의 제목을 '나의 첫 번째 앱'으로 바꿔줘

Claude Code가 src/app/page.tsx 파일을 찾아서 수정합니다.

수정 후에는 아래처럼 확인까지 요청합니다:

변경 내용을 확인하고 npm run build를 실행해서 빌드 오류가 없는지 봐줘.

권한 승인 이해하기

Claude Code는 파일을 읽거나 수정할 때 권한 승인을 요청합니다.

권한설명일반적인 선택
파일 읽기프로젝트 파일의 내용을 읽습니다허용
파일 수정파일 내용을 변경합니다확인 후 허용
명령어 실행터미널 명령어를 실행합니다확인 후 허용

권한 승인 팁

  • Yes: 이번 한 번만 허용합니다
  • Always allow: 같은 유형의 작업을 앞으로 항상 허용합니다 (편리하지만, 처음에는 하나씩 확인하는 것을 추천합니다)

유용한 바이브코딩 예시

프로젝트에서 시도해볼 수 있는 명령어 예시입니다:

헤더에 네비게이션 바를 추가해줘
다크 모드를 지원하게 해줘
/about 페이지를 새로 만들어줘. 간단한 자기소개 내용으로
메인 페이지에 카드 3개를 그리드로 배치해줘
Next.js App Router 문서를 로컬에서 확인한 뒤 /about 페이지를 만들어줘.
loading.tsx와 error.tsx가 필요한지도 판단해줘.
브라우저 콘솔 경고가 터미널에 뜨면 원인을 찾아서 고쳐줘.

명령어 작성 팁

  • 구체적으로 요청할수록 원하는 결과를 얻기 쉽습니다
  • 한 번에 너무 많은 것을 요청하기보다, 작은 단위로 나누어 요청하세요
  • 결과가 마음에 들지 않으면 "이전으로 되돌려줘"라고 말할 수 있습니다

Claude Code 종료

바이브코딩을 마치려면 아래 명령어를 입력합니다:

/exit

또는 Ctrl + C를 두 번 누르면 됩니다.


참고 자료

  1. Claude Code 공식 문서
  2. Claude Code 일반 워크플로우
  3. Claude Code 베스트 프랙티스
  4. Claude Code 설정
  5. Next.js 16.2: AI Improvements

관련 문서

CLAUDE.md 설정

AGENTS.md와 CLAUDE.md로 프로젝트 맥락을 Claude Code에게 알려줍니다

Next.js AI 세팅

Next.js 16.2의 AGENTS.md, 터미널 로그, MCP, next-browser를 Claude Code와 함께 설정합니다

Ch2. CLAUDE.md 마스터하기

Claude Code 고급 활용 · 프로젝트 지침서의 계층 구조, 모듈형 규칙, @import 활용법

Ch10. IDE 통합

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

프로젝트 규칙 문서

에이전틱 시대의 문서화 혁신 · AGENTS.md, CLAUDE.md, path-scoped rules를 충돌 없이 설계하는 법

Next.js AI 세팅

Next.js 16.2의 AGENTS.md, 터미널 로그, MCP, next-browser를 Claude Code와 함께 설정합니다

CLAUDE.md 설정

AGENTS.md와 CLAUDE.md로 프로젝트 맥락을 Claude Code에게 알려줍니다

On this page

프로젝트 폴더에서 Claude Code 시작프로젝트 폴더로 이동Claude Code 실행인터페이스 확인첫 번째 명령: 프로젝트 구조 확인개발 서버와 함께 실행하기간단한 수정 요청권한 승인 이해하기유용한 바이브코딩 예시Claude Code 종료참고 자료