바이브코딩으로 웹사이트를 만들려면 Next.js 프로젝트라는 틀이 필요합니다. 터미널에서
npx create-next-app@latest 명령어 하나로 프로젝트가 생성되고, npm run dev로 개발 서버를 띄우면 브라우저에서 바로 결과를 확인할 수 있습니다. 이 글은 프로젝트 생성부터 AI로 첫 페이지를 바꾸는 것까지, 비전공자 눈높이로 하나씩 안내합니다.
목차
🎯 바이브코딩에 Next.js가 필요한 이유
바이브코딩은 AI에게 자연어로 “이런 기능 만들어줘”라고 말하면 코드가 생성되는 방식입니다. 그런데 AI가 만든 코드를 실행하려면 프로젝트라는 틀이 있어야 합니다. 프로젝트란 파일 구조, 개발 서버, 라우팅 같은 기본 뼈대를 갖춘 작업 공간입니다. 이 틀 없이 코드만 있으면 브라우저에서 아무것도 보이지 않습니다.
Next.js는 React 기반의 웹 프레임워크입니다. React가 화면을 그리는 UI 라이브러리라면, Next.js는 거기에 페이지 라우팅, 서버 렌더링, 빌드 최적화를 더한 것입니다. 바이브코딩에서 Next.js가 특히 유리한 이유는 세 가지입니다.
- 명령어 하나로 프로젝트가 완성됩니다.
npx create-next-app을 실행하면 파일 구조, 설정 파일, 개발 서버까지 자동으로 세팅됩니다. - 파일 기반 라우팅이라 직관적입니다.
app/about/page.tsx파일을 만들면 브라우저에서/about경로로 바로 접속됩니다. AI에게 “about 페이지 만들어줘”라고 요청하면 끝입니다. - AI 코딩 도구와 궁합이 좋습니다. Cursor나 Claude Code 같은 도구가 Next.js 프로젝트 구조를 잘 이해하고 있어서, 정확한 코드를 생성할 확률이 높습니다.
요약하면, Next.js는 비전공자가 바이브코딩을 시작하기에 가장 실용적인 프레임워크입니다. 프로젝트 생성이 간단하고, AI가 구조를 잘 파악하고, 결과를 브라우저에서 바로 확인할 수 있기 때문입니다.
📋 프로젝트 생성 전 준비물 확인
Next.js 프로젝트를 만들기 전에 아래 도구가 설치되어 있어야 합니다. 하나라도 빠지면 create-next-app 명령어가 실행되지 않거나, 프로젝트 생성 도중 에러가 발생합니다.
| 도구 | 확인 명령어 | 정상 출력 | 없으면 |
|---|---|---|---|
| Node.js | node --version |
v20.x.x 이상 | Node.js 설치 가이드 |
| npm | npm --version |
10.x.x 이상 | Node.js 설치 시 함께 설치됨 |
| Git | git --version |
git version 2.x.x | Git 설치 가이드 |
| 에디터 | VS Code 또는 Cursor 실행 | 에디터 화면 표시 | VS Code 설정 가이드 |
터미널을 열고 각 명령어를 하나씩 입력해보세요. 버전 번호가 출력되면 해당 도구가 정상적으로 설치된 것입니다. Windows에서 터미널을 여는 방법이 헷갈린다면 바이브코딩 터미널 사용법을 먼저 읽어보세요.
Node.js를 설치하면 npm은 함께 포함됩니다.
node --version은 되는데 npm --version이 안 되면, 설치가 불완전한 상태입니다. Node.js를 삭제하고 다시 설치한 뒤 터미널을 새로 열어보세요.
🚀 바이브코딩 Next.js 프로젝트 생성 5단계 가이드
준비물이 확인됐다면 프로젝트를 만들 차례입니다. 아래 5단계를 순서대로 따라가면 10분 안에 브라우저에서 동작하는 웹사이트를 볼 수 있습니다.
📁 1단계: 프로젝트를 저장할 폴더로 이동
프로젝트 파일이 저장될 위치를 먼저 정해야 합니다. 바탕화면이나 다운로드 폴더에 만들면 나중에 찾기 어려우니, 문서 폴더 안에 전용 작업 폴더를 만들어 사용하세요.
# Windows (PowerShell)
cd C:\Users\사용자이름\Documents
mkdir projects
cd projects
# macOS (Terminal)
cd ~/Documents
mkdir projects
cd projectsprojects라는 폴더가 생기고 그 안으로 이동한 상태가 됩니다. mkdir은 폴더를 만드는 명령어이고, cd는 해당 폴더로 이동하는 명령어입니다. 이미 폴더가 있다면 cd projects만 입력하면 됩니다.
⚡ 2단계: create-next-app으로 프로젝트 생성
Next.js 공식 도구인 create-next-app을 사용합니다. 이 도구는 프로젝트에 필요한 파일 구조, 설정, 의존성을 한 번에 만들어주기 때문에 비전공자도 복잡한 설정 없이 바로 시작할 수 있습니다. 터미널에 아래 명령어를 입력하세요.
npx create-next-app@latest my-first-appmy-first-app은 프로젝트 이름입니다. 영문 소문자, 숫자, 하이픈(-)만 사용하세요. 한글이나 공백이 들어가면 에러가 발생할 수 있습니다. 실행하면 아래처럼 옵션을 묻는 질문이 차례로 나옵니다.
Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like your code inside a `src/` directory? → No
Would you like to use App Router? → Yes
Would you like to use Turbopack for next dev? → Yes
Would you like to customize the import alias? → No바이브코딩 입문 단계에서는 위 선택지를 그대로 따르세요. 각 옵션이 의미하는 것을 간략히 정리하면 아래와 같습니다.
- TypeScript — JavaScript에 타입 정보를 추가한 언어입니다. AI가 더 정확한 코드를 생성하는 데 도움이 됩니다.
- ESLint — 코드에 실수가 있으면 경고해주는 도구입니다.
- Tailwind CSS — 클래스 이름만으로 스타일을 적용하는 CSS 프레임워크입니다. AI에게 디자인 변경을 요청할 때 빠르고 일관된 결과가 나옵니다.
- App Router — Next.js의 최신 라우팅 방식입니다. 파일 위치가 곧 URL 경로가 되어 직관적입니다.
- Turbopack — 개발 서버 속도를 빠르게 해주는 번들러입니다.
옵션 선택이 끝나면 파일 다운로드와 패키지 설치가 진행됩니다. 네트워크 속도에 따라 1~3분 정도 걸립니다. 터미널에 “Success!”라는 메시지가 보이면 프로젝트 생성이 완료된 것입니다.
네트워크가 불안정할 가능성이 높습니다. Wi-Fi를 안정적인 것으로 전환하거나, 회사/학교 네트워크에서 차단되는 경우 모바일 핫스팟을 사용해보세요. 프로젝트 폴더를 삭제하고 다시 실행하면 됩니다.
📂 3단계: 프로젝트 폴더로 이동
생성된 프로젝트 폴더 안으로 들어가야 합니다. 이후 명령어는 모두 이 폴더 안에서 실행해야 제대로 동작합니다.
cd my-first-app터미널 프롬프트에 my-first-app이라는 폴더 이름이 표시되면 정상적으로 이동한 것입니다.
🖥️ 4단계: 에디터에서 프로젝트 열기
VS Code 또는 Cursor에서 프로젝트를 열어야 파일을 보고 수정할 수 있습니다. 터미널에서 아래 명령어를 입력하면 에디터가 현재 폴더를 기준으로 열립니다.
# VS Code
code .
# Cursor
cursor .에디터가 열리면 왼쪽 탐색기(Explorer) 패널에 app/, public/, package.json 같은 파일과 폴더가 보입니다. 이것이 Next.js 프로젝트의 기본 구조입니다. 탐색기가 안 보이면 Ctrl+Shift+E(macOS: Cmd+Shift+E)를 눌러보세요.
🌐 5단계: 개발 서버 실행하고 브라우저에서 확인
에디터 내장 터미널을 열어야 합니다. Ctrl+`(macOS: Cmd+`) 단축키 또는 상단 메뉴에서 “터미널 → 새 터미널”을 선택하세요. 터미널이 열리면 아래 명령어를 입력합니다.
npm run dev잠시 후 터미널에 아래와 비슷한 내용이 출력됩니다.
▲ Next.js (turbo)
- Local: http://localhost:3000브라우저를 열고 주소창에 http://localhost:3000을 입력하세요. Next.js 기본 환영 페이지가 표시됩니다. 이 페이지가 보이면 프로젝트가 정상적으로 동작하는 것입니다. 축하합니다 — 바이브코딩으로 코드를 만들 준비가 끝났습니다.
npm run dev가 실행 중인 터미널을 닫거나 Ctrl+C를 누르면 개발 서버가 종료됩니다. 다시 보려면 프로젝트 폴더에서 npm run dev를 다시 입력하면 됩니다.
🎨 AI에게 요청해서 첫 페이지 바꾸기
프로젝트를 만들었으니, 이제 바이브코딩의 핵심인 “AI에게 말해서 코드 바꾸기”를 직접 해볼 차례입니다. 에디터에서 app/page.tsx 파일을 열어보세요. 이 파일이 브라우저에 보이는 메인 페이지입니다.
🤖 Cursor에서 AI에게 요청하는 방법
Cursor를 사용한다면 Ctrl+L(macOS: Cmd+L)로 채팅 패널을 엽니다. 아래처럼 요청해보세요.
이 page.tsx 파일을 수정해줘.
간단한 자기소개 페이지로 바꿔줘.
- 가운데 정렬
- 이름: "홍길동"
- 한 줄 소개: "바이브코딩으로 첫 웹사이트를 만들고 있습니다"
- 좋아하는 것 3가지를 목록으로 표시AI가 코드를 수정하면 브라우저에서 localhost:3000을 확인하세요. 기본 환영 페이지 대신 자기소개 내용이 표시됩니다. 개발 서버가 실행 중이라면 파일 저장과 동시에 브라우저가 자동으로 갱신되기 때문에, 수정 결과를 실시간으로 볼 수 있습니다. Cursor에 익숙하지 않다면 Cursor 설치와 첫 프로젝트 만들기 글을 참고하세요.
💻 Claude Code에서 AI에게 요청하는 방법
Claude Code를 사용한다면 터미널에서 프로젝트 폴더로 이동한 뒤 claude를 입력해 실행합니다.
cd my-first-app
claudeClaude Code가 시작되면 아래처럼 자연어로 요청합니다.
app/page.tsx를 간단한 자기소개 페이지로 바꿔줘.
이름은 "홍길동", 한 줄 소개와 좋아하는 것 3가지를 포함해줘.Claude Code는 파일을 직접 수정합니다. 수정이 끝나면 별도 터미널 탭에서 npm run dev를 실행하고 브라우저에서 결과를 확인하세요. Claude Code가 처음이라면 Claude Code 설치 가이드가 도움이 됩니다.
AI가 만든 결과가 마음에 안 들면 “배경색을 파란색으로 바꿔줘”, “폰트를 더 키워줘” 같은 추가 요청을 이어가면 됩니다. 이 반복 과정에서 코드를 직접 작성하지 않아도 원하는 결과를 점점 만들어갈 수 있습니다.
📁 Next.js 프로젝트 폴더 구조 이해하기
프로젝트 안에 있는 파일과 폴더가 각각 어떤 역할을 하는지 알아두면, AI에게 요청할 때 더 정확하게 설명할 수 있습니다. “page.tsx를 수정해줘”와 “메인 페이지를 수정해줘”는 같은 뜻이지만, 파일명을 직접 언급하면 AI가 더 정확하게 작업합니다.
| 파일/폴더 | 역할 | AI에게 요청 예시 |
|---|---|---|
app/page.tsx |
메인 페이지 (/ 접속 시 표시) |
“page.tsx를 자기소개 페이지로 바꿔줘” |
app/layout.tsx |
전체 페이지 공통 레이아웃 (헤더, 푸터) | “layout.tsx에 상단 메뉴 추가해줘” |
app/globals.css |
전체 스타일 시트 | “전체 배경색을 어두운 톤으로 바꿔줘” |
public/ |
이미지, 아이콘 등 정적 파일 | “public에 넣은 로고 이미지를 헤더에 추가해줘” |
package.json |
프로젝트 정보와 설치된 패키지 목록 | 직접 수정하지 않음 (npm이 관리) |
next.config.ts |
Next.js 설정 파일 | “외부 이미지 도메인 허용해줘” |
tailwind.config.ts |
Tailwind CSS 설정 파일 | “커스텀 색상 팔레트 추가해줘” |
새 페이지를 추가하고 싶다면 app/ 폴더 안에 새 폴더와 page.tsx 파일을 만들면 됩니다. 예를 들어 app/about/page.tsx를 만들면 브라우저에서 /about으로 접속할 수 있습니다. 이것이 Next.js App Router의 파일 기반 라우팅입니다. 폴더 구조가 곧 URL 구조가 되기 때문에 별도의 라우팅 설정이 필요 없습니다.
✅ 프로젝트 생성 완료 점검 목록
5단계를 모두 마쳤다면 아래 항목을 하나씩 확인해보세요. 다섯 항목 모두 통과하면 바이브코딩으로 코드를 만들 준비가 완료된 상태입니다.
| 항목 | 확인 방법 | 정상 신호 |
|---|---|---|
| 프로젝트 폴더 존재 | ls 또는 dir로 폴더 목록 확인 |
my-first-app 폴더가 보임 |
| 의존성 설치 완료 | 프로젝트 안에 node_modules 폴더 존재 |
폴더 안에 파일이 다수 존재 |
| 개발 서버 실행 | npm run dev 입력 |
localhost:3000 주소 출력 |
| 브라우저 접속 | http://localhost:3000 열기 |
Next.js 환영 페이지 또는 수정한 페이지 표시 |
| AI 수정 반영 | 파일 저장 후 브라우저 확인 | 변경 내용이 자동으로 반영됨 |
🔧 자주 발생하는 에러와 해결 방법
프로젝트를 만드는 과정에서 에러를 만나도 대부분 원인이 명확합니다. 아래 네 가지가 가장 빈번한 사례이니, 해당 증상이 나타나면 순서대로 확인해보세요.
🚫 “npx: command not found” 에러
Node.js가 설치되지 않았거나, 설치 후 터미널을 재시작하지 않아서 PATH에 등록되지 않은 상태입니다. node --version을 입력해 버전이 출력되는지 먼저 확인하세요. 버전이 나오지 않으면 Node.js가 미설치된 것입니다. Node.js 설치 가이드를 따라 설치한 뒤 터미널을 닫고 새로 열면 해결됩니다.
🚫 프로젝트 생성 중간에 멈추거나 실패
create-next-app은 패키지를 인터넷에서 다운로드하기 때문에 네트워크 상태에 민감합니다. Wi-Fi가 불안정하면 중간에 끊길 수 있습니다. 안정적인 네트워크로 전환한 뒤, 기존에 만들어진 프로젝트 폴더를 삭제하고 명령어를 다시 실행하세요. 회사나 학교 네트워크에서 npm 레지스트리가 차단된 경우에는 모바일 핫스팟을 사용하면 우회할 수 있습니다.
🚫 localhost:3000에 접속할 수 없음
개발 서버가 실행 중인지 터미널을 확인하세요. npm run dev 명령어가 돌아가고 있어야 브라우저에서 접속됩니다. 터미널을 실수로 닫았거나 Ctrl+C를 눌렀다면 서버가 종료된 것이니 다시 실행하면 됩니다. 간혹 다른 프로그램이 3000번 포트를 이미 사용하고 있으면 Next.js가 localhost:3001 같은 다른 포트를 자동 할당합니다. 터미널에 표시된 주소를 정확히 확인하세요.
🚫 파일 수정 후 브라우저에 변화가 없음
파일을 저장했는지 먼저 확인하세요. Ctrl+S(macOS: Cmd+S)를 누르지 않으면 변경 사항이 디스크에 기록되지 않아 개발 서버가 감지하지 못합니다. 저장했는데도 변화가 없다면 브라우저에서 강제 새로고침(Ctrl+Shift+R 또는 Cmd+Shift+R)을 시도합니다. 그래도 안 되면 터미널에서 Ctrl+C로 서버를 중지하고 npm run dev로 다시 시작하세요.
프로젝트 폴더 바깥에서
npm run dev를 실행하면 Missing script: "dev" 에러가 납니다. 반드시 cd my-first-app으로 프로젝트 폴더 안에 들어간 뒤 명령어를 실행하세요. 현재 위치를 확인하려면 pwd(macOS) 또는 cd(Windows)를 입력하면 됩니다.
🔄 AI 도구별 작업 흐름 비교
바이브코딩에 사용하는 AI 도구에 따라 프로젝트를 다루는 방식이 조금 다릅니다. 본인 상황에 맞는 도구를 선택하면 됩니다.
| 항목 | Cursor | Claude Code |
|---|---|---|
| 프로젝트 생성 | 내장 터미널에서 npx create-next-app |
일반 터미널에서 npx create-next-app |
| 코드 수정 요청 | Ctrl+L 채팅 또는 Ctrl+K 인라인 편집 |
터미널에서 대화형 요청 |
| 파일 참조 | @파일이름으로 지정 |
프로젝트 내 파일 자동 인식 |
| 결과 확인 | 에디터 안에서 즉시 확인 | 별도 터미널에서 npm run dev 실행 필요 |
| 추천 대상 | 비주얼 에디터 선호, 완전 입문자 | 터미널 기반 작업 선호, 여러 파일 동시 수정 |
입문자라면 Cursor로 시작하는 것이 직관적입니다. 에디터 안에서 AI 채팅, 코드 편집, 터미널, 브라우저 미리보기를 한 화면에서 사용할 수 있기 때문입니다. Claude Code는 터미널 환경에 익숙해진 뒤에 시도해도 늦지 않습니다. 두 도구 모두 Next.js 프로젝트와 잘 동작하므로 편한 쪽을 선택하면 됩니다.
💡 프로젝트를 만든 뒤 해볼 만한 것들
첫 프로젝트가 동작한다면, 바이브코딩의 “요청 → 확인 → 다시 요청” 루프를 연습할 수 있는 작은 과제들을 시도해보세요. 한 번에 큰 것을 만들기보다, 작은 변경을 쌓아가는 것이 실력 향상에 효과적입니다.
- 새 페이지 추가하기 — AI에게 “about 페이지 만들어줘”라고 요청하면
app/about/page.tsx가 생깁니다. 브라우저에서/about으로 접속해 결과를 확인합니다. - 스타일 바꿔보기 — “배경색을 어두운 톤으로 바꿔줘”, “폰트 크기를 키워줘” 같은 요청으로 Tailwind CSS가 어떻게 동작하는지 감을 잡습니다.
- 네비게이션 메뉴 추가하기 — 메인 페이지와 about 페이지를 오갈 수 있는 메뉴를 AI에게 요청합니다. 이 과정에서
layout.tsx의 역할을 이해하게 됩니다. - GitHub에 프로젝트 올리기 — Git으로 커밋하고 GitHub에 푸시합니다. AI에게 “이 프로젝트를 GitHub에 올리는 방법 알려줘”라고 요청하면 단계별로 안내해줍니다.
- Vercel에 배포하기 — GitHub에 올린 프로젝트를 Vercel에 연결하면 무료로 인터넷 주소를 받을 수 있습니다. 다른 사람에게 내가 만든 사이트를 보여줄 수 있게 됩니다.
“완벽한 앱”을 목표로 하지 마세요. “AI에게 요청 → 결과 확인 → 추가 요청”의 반복에 익숙해지는 것이 먼저입니다. 작은 성공 경험이 쌓이면 자연스럽게 복잡한 프로젝트로 나아갈 수 있습니다.
프로젝트를 만들었으면 다음엔 뭘 만들지 고민되죠. 바이브코딩 프로젝트 아이디어 10가지에서 골라보세요.
⚖️ 면책조항
create-next-app의 옵션이나 프로젝트 구조가 달라질 수 있습니다. 문제가 생기면 Next.js 공식 설치 문서에서 최신 정보를 확인하시기 바랍니다.
여기까지 따라오셨다면, 바이브코딩으로 첫 프로젝트를 만드는 데 성공한 것입니다. 이제 AI에게 하고 싶은 것을 말하고, 결과를 확인하고, 다시 요청하는 루프를 반복하면서 원하는 웹사이트를 만들어보세요.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
Q. Next.js가 뭔가요? React와 다른 건가요?
Q. TypeScript를 모르는데 선택해도 되나요?
Q. Tailwind CSS는 뭔가요? 반드시 써야 하나요?
className="text-xl font-bold" 같은 형태로 사용합니다. 필수는 아니지만, AI에게 디자인 변경을 요청할 때 빠르고 일관된 결과가 나오기 때문에 바이브코딩에서는 사용을 권장합니다.Q. 프로젝트 이름에 한글을 쓰면 어떻게 되나요?
create-next-app이 에러를 발생시키거나, 이후 패키지 설치 과정에서 문제가 생길 수 있습니다.Q. npm run dev를 실행한 터미널을 닫으면 사이트도 사라지나요?
localhost:3000에 접속할 수 없습니다. 다시 보려면 프로젝트 폴더에서 npm run dev를 다시 실행하면 됩니다. 코드 자체는 사라지지 않으니 걱정하지 않아도 됩니다.Q. 다른 사람에게 내가 만든 사이트를 보여주려면 어떻게 하나요?
localhost는 본인 컴퓨터에서만 접속되는 주소입니다. 다른 사람에게 보여주려면 Vercel 같은 배포 서비스를 사용해야 합니다. GitHub에 코드를 올린 뒤 Vercel에 연결하면 무료 도메인을 받을 수 있습니다. 전체 과정을 AI에게 “Vercel에 배포하는 방법 알려줘”라고 요청하면 안내받을 수 있습니다.Q. 프로젝트를 삭제하고 처음부터 다시 만들고 싶으면 어떻게 하나요?
rm -rf my-first-app, Windows에서는 파일 탐색기에서 폴더를 우클릭 후 삭제합니다. 이후 npx create-next-app@latest를 다시 실행하면 새 프로젝트가 만들어집니다.Q. pnpm이나 yarn 같은 다른 패키지 매니저를 써도 되나요?
create-next-app 실행 시 --use-pnpm 또는 --use-yarn 옵션을 추가하면 됩니다. 다만 입문 단계에서는 Node.js에 기본 포함된 npm을 사용하는 것이 가장 간단합니다. 패키지 매니저 간 차이를 이해한 뒤에 전환해도 늦지 않습니다.Q. AI가 만든 코드에 에러가 있으면 어떻게 해야 하나요?
Q. 이 프로젝트를 실제 서비스로 운영할 수 있나요?
🔗 관련 글
- 바이브코딩 시작 전 개발환경 세팅 완벽 가이드
- 바이브코딩 Node.js 설치부터 시작까지 3단계
- Cursor 설치 방법과 첫 프로젝트 만들기
- 바이브코딩용 VS Code 설정 가이드
- Claude Code 설치부터 첫 프로젝트까지 완벽 가이드
📑 참고 자료
- Next.js 공식 문서 — Getting Started: Installation
- Next.js 공식 문서 — App Router
- Tailwind CSS 공식 문서 — Next.js 설치 가이드
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
