🎯 AI한테 말해서 웹사이트를 만든다는 게 진짜 되나요

됩니다. 바이브코딩은 AI에게 자연어로 요청해서 코드를 만드는 방식입니다. 그리고 그 코드를 실제로 돌리려면 프로젝트라는 틀이 필요합니다. Next.js는 React 기반의 웹 프레임워크로, 프로젝트를 만드는 명령어 하나로 파일 구조, 개발 서버, 라우팅 같은 기본 뼈대가 자동으로 갖춰집니다.

이 글은 개발 환경이 이미 세팅된 상태에서 Next.js 프로젝트를 처음 만드는 과정을 안내합니다. 터미널에서 프로젝트를 생성하고, 개발 서버를 띄우고, AI에게 요청해서 첫 페이지를 바꿔보는 것까지가 목표입니다. 코딩 경험이 없어도 따라 할 수 있도록 각 단계를 하나씩 풀어 설명합니다.

📋 시작하기 전에 확인할 것

Next.js 프로젝트를 만들려면 아래 도구가 먼저 설치되어 있어야 합니다. 하나라도 빠져 있으면 프로젝트 생성 명령어가 실행되지 않습니다.

도구	확인 명령어	정상 출력
Node.js	`node --version`	v20.x.x 이상
npm	`npm --version`	10.x.x 이상
Git	`git --version`	git version 2.x.x
에디터	VS Code 또는 Cursor 실행	에디터 화면 표시

터미널에서 각 명령어를 입력해서 버전 번호가 출력되면 준비 완료입니다. 아직 설치가 안 됐다면 개발환경 세팅 가이드를 먼저 참고하세요.

💡 팁: Node.js를 설치하면 npm이 함께 설치됩니다. node --version이 되는데 npm --version이 안 되면 Node.js를 다시 설치해보세요.

🚀 Next.js 프로젝트 생성 단계별 가이드

📁 1단계: 프로젝트를 만들 폴더로 이동

프로젝트 파일들이 저장될 위치를 먼저 정합니다. 보통 문서 폴더 안에 작업용 폴더를 만들어 사용합니다.

# Windows (PowerShell)
cd C:\Users\사용자이름\Documents
mkdir projects
cd projects

# macOS (Terminal)
cd ~/Documents
mkdir projects
cd projects

projects라는 폴더가 생기고, 그 안으로 이동한 상태가 됩니다. 이 폴더 안에 Next.js 프로젝트가 만들어집니다.

⚡ 2단계: create-next-app 실행

Next.js 공식 도구인 create-next-app을 사용해 프로젝트를 생성합니다. 터미널에 아래 명령어를 입력하세요.

npx create-next-app@latest my-first-app

my-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는 AI가 더 정확한 코드를 생성하는 데 도움이 되고, App Router는 Next.js의 최신 라우팅 방식입니다. Tailwind CSS는 스타일을 클래스 이름으로 빠르게 적용할 수 있어서 AI와 함께 작업하기 편합니다.

명령어 실행 후 파일 다운로드와 설치가 진행됩니다. 네트워크 속도에 따라 1~3분 정도 걸릴 수 있습니다. 터미널에 "Success!"라는 메시지가 나오면 프로젝트 생성이 완료된 것입니다.

📂 3단계: 프로젝트 폴더로 이동

생성된 프로젝트 폴더로 이동합니다.

cd my-first-app

🖥️ 4단계: 에디터에서 프로젝트 열기

VS Code 또는 Cursor에서 프로젝트를 엽니다.

# VS Code
code .

# Cursor
cursor .

에디터가 열리면 왼쪽 탐색기에 app/, public/, package.json 같은 파일과 폴더가 보입니다. 이것이 Next.js 프로젝트의 기본 구조입니다.

🌐 5단계: 개발 서버 실행

에디터 내장 터미널(Ctrl+` 또는 메뉴 → 터미널 → 새 터미널)을 열고 아래 명령어를 입력합니다.

npm run dev

터미널에 아래와 비슷한 내용이 출력됩니다.

▲ Next.js (turbo)
- Local: http://localhost:3000

브라우저에서 http://localhost:3000을 열면 Next.js 기본 환영 페이지가 표시됩니다. 이 페이지가 보이면 프로젝트가 정상적으로 동작하는 것입니다.

🎨 AI에게 요청해서 첫 페이지 바꾸기

🤖 Cursor에서 AI에게 요청하기

에디터에서 app/page.tsx 파일을 엽니다. 이 파일이 브라우저에서 보이는 메인 페이지입니다. Ctrl+L(macOS: Cmd+L)로 채팅을 열고 아래처럼 요청해보세요.

이 page.tsx 파일을 수정해줘.
간단한 자기소개 페이지로 바꿔줘.
- 가운데 정렬
- 이름: "홍길동"
- 한 줄 소개: "바이브코딩으로 첫 웹사이트를 만들고 있습니다"
- 좋아하는 것 3가지를 목록으로 표시

AI가 코드를 수정해주면 브라우저에서 localhost:3000을 확인하세요. 페이지가 자기소개 내용으로 바뀌어 있습니다. 개발 서버가 실행 중이면 파일을 저장할 때마다 브라우저가 자동으로 갱신됩니다.

💻 Claude Code에서 AI에게 요청하기

Claude Code를 사용한다면 터미널에서 프로젝트 폴더 안에 진입한 뒤 Claude Code를 실행합니다.

cd my-first-app
claude

Claude Code가 실행되면 아래처럼 요청합니다.

app/page.tsx를 간단한 자기소개 페이지로 바꿔줘.
이름은 "홍길동", 한 줄 소개와 좋아하는 것 3가지를 포함해줘.

Claude Code가 파일을 직접 수정합니다. 수정이 끝나면 별도 터미널에서 npm run dev를 실행해 결과를 확인하세요.

📁 Next.js 프로젝트 구조 이해하기

프로젝트 안에 있는 주요 파일과 폴더가 어떤 역할을 하는지 알아두면 AI에게 요청할 때 더 정확하게 설명할 수 있습니다.

파일/폴더	역할
`app/page.tsx`	메인 페이지 (브라우저에서 `/` 접속 시 표시)
`app/layout.tsx`	전체 페이지의 공통 레이아웃 (헤더, 푸터 등)
`app/globals.css`	전체 스타일 시트
`public/`	이미지, 아이콘 같은 정적 파일 저장 폴더
`package.json`	프로젝트 정보와 설치된 패키지 목록
`next.config.ts`	Next.js 설정 파일
`tailwind.config.ts`	Tailwind CSS 설정 파일

새 페이지를 추가하고 싶다면 app/ 폴더 안에 새 폴더와 page.tsx 파일을 만들면 됩니다. 예를 들어 app/about/page.tsx를 만들면 브라우저에서 /about으로 접속할 수 있습니다. 이것이 Next.js App Router의 파일 기반 라우팅입니다.

✅ 프로젝트 생성 완료 점검 목록

항목	확인 방법	정상 신호
프로젝트 폴더 생성	`ls` 또는 `dir`로 폴더 확인	`my-first-app` 폴더 존재
의존성 설치	`node_modules` 폴더 존재	폴더 안에 파일 다수
개발 서버 실행	`npm run dev`	`localhost:3000` 표시
브라우저 확인	`http://localhost:3000` 접속	페이지 정상 표시
AI 수정 반영	파일 저장 후 브라우저 확인	변경 내용 반영

⚠️ 자주 발생하는 실수와 해결 방법

🚫 "npx: command not found" 에러

Node.js가 설치되지 않았거나 PATH에 등록되지 않은 경우입니다. node --version을 먼저 확인하세요. 버전이 나오지 않으면 Node.js 설치 가이드를 따라 설치한 뒤 터미널을 재시작합니다.

🚫 프로젝트 생성 중 네트워크 에러

create-next-app은 패키지를 인터넷에서 다운로드합니다. 네트워크가 불안정하면 중간에 실패할 수 있습니다. 안정적인 Wi-Fi로 전환하거나, 잠시 후 다시 시도하세요. 회사/학교 네트워크에서 차단되는 경우라면 모바일 핫스팟을 사용해보세요.

🚫 "localhost:3000에 접속할 수 없음"

개발 서버가 실행 중인지 터미널을 확인하세요. npm run dev 명령어가 실행 중이어야 합니다. 다른 프로그램이 3000 포트를 사용하고 있다면 터미널에 다른 포트 번호가 표시됩니다(예: localhost:3001). 표시된 주소로 접속하면 됩니다.

🚫 파일 수정 후 브라우저에 반영이 안 됨

파일을 저장했는지 확인하세요(Ctrl+S 또는 Cmd+S). 저장해도 반영이 안 되면 브라우저에서 강제 새로고침(Ctrl+Shift+R 또는 Cmd+Shift+R)을 시도합니다. 여전히 안 되면 터미널에서 개발 서버를 중지(Ctrl+C)하고 npm run dev로 다시 실행하세요.

🔄 AI 도구별 작업 흐름 비교

항목	Cursor	Claude Code
프로젝트 생성	내장 터미널에서 `npx create-next-app`	일반 터미널에서 `npx create-next-app`
코드 수정 요청	`Ctrl+L` 채팅 또는 `Ctrl+K` 인라인 편집	터미널에서 대화형 요청
파일 참조	`@파일이름`으로 참조	프로젝트 폴더 내 파일 자동 인식
실시간 반영	에디터 안에서 즉시 확인	별도 터미널에서 `npm run dev` 실행 필요
적합한 상황	비주얼 에디터 선호, 입문자	터미널 기반 작업 선호, 여러 파일 동시 수정

입문자라면 Cursor로 시작하는 것이 직관적입니다. 에디터 안에서 AI 채팅, 코드 편집, 터미널을 한 화면에서 모두 사용할 수 있기 때문입니다. Claude Code는 터미널에 익숙해진 뒤에 시도해도 늦지 않습니다.

💡 프로젝트를 만든 뒤 해볼 만한 것들

첫 프로젝트가 동작한다면, 다음 단계로 아래를 시도해보세요.

새 페이지 추가 — app/about/page.tsx를 만들어 자기소개 페이지를 /about 경로에 추가합니다. AI에게 "about 페이지 만들어줘"라고 요청하면 됩니다.
스타일 변경 — AI에게 "배경색을 파란색으로 바꿔줘", "폰트 크기를 키워줘" 같은 요청을 하면서 Tailwind CSS가 어떻게 동작하는지 감을 잡습니다.
네비게이션 추가 — 메인 페이지와 about 페이지를 오갈 수 있는 메뉴를 AI에게 요청합니다. 이 과정에서 layout.tsx의 역할을 이해하게 됩니다.
GitHub에 저장 — Git으로 프로젝트를 커밋하고 GitHub에 푸시합니다. AI에게 "이 프로젝트를 GitHub에 올리는 방법 알려줘"라고 요청하면 단계별로 안내해줍니다.

작은 변경을 하나씩 시도하면서 "요청 → 결과 확인 → 다음 요청"의 반복에 익숙해지는 것이 바이브코딩의 핵심입니다.

⚠️ 주의: 이 글은 2026년 4월 기준 Next.js 15 버전을 기반으로 작성되었습니다. Next.js 버전에 따라 명령어 옵션이나 프로젝트 구조가 달라질 수 있으므로, 문제가 생기면 Next.js 공식 문서를 확인하세요.

❓ 자주 묻는 질문

Q. Next.js가 뭔가요? React와 다른 건가요?

Next.js는 React를 기반으로 만든 웹 프레임워크입니다. React는 UI를 만드는 라이브러리이고, Next.js는 여기에 라우팅, 서버 렌더링, 빌드 최적화 같은 기능을 추가한 것입니다. 바이브코딩에서는 Next.js로 시작하는 것이 편합니다. 프로젝트 생성 명령어 하나로 필요한 것이 모두 갖춰지기 때문입니다.

Q. TypeScript를 모르는데 Yes를 선택해도 되나요?

네, 선택해도 됩니다. TypeScript는 JavaScript에 타입 정보를 추가한 언어입니다. AI가 TypeScript 코드를 더 정확하게 생성하기 때문에, 바이브코딩에서는 TypeScript를 사용하는 것이 오히려 유리합니다. 문법을 몰라도 AI가 알아서 작성합니다.

Q. Tailwind CSS가 뭔가요? 꼭 써야 하나요?

Tailwind CSS는 미리 정의된 클래스 이름으로 스타일을 적용하는 CSS 프레임워크입니다. className="text-xl font-bold text-blue-500" 같은 형태로 씁니다. AI에게 스타일 변경을 요청할 때 Tailwind CSS가 있으면 AI가 빠르고 일관된 코드를 생성합니다. 필수는 아니지만 바이브코딩에서는 편리합니다.

Q. 프로젝트 이름은 아무거나 해도 되나요?

영문 소문자, 숫자, 하이픈(-)만 사용하면 됩니다. 한글이나 공백은 피하세요. 폴더 이름이 되기 때문에 짧고 알아보기 쉬운 이름이 좋습니다.

Q. npm run dev를 실행한 터미널을 닫으면 어떻게 되나요?

개발 서버가 종료됩니다. 브라우저에서 localhost:3000에 접속할 수 없게 됩니다. 다시 보려면 프로젝트 폴더에서 npm run dev를 다시 실행하면 됩니다.

Q. 다른 사람에게 내가 만든 페이지를 보여주고 싶어요.

localhost는 본인 컴퓨터에서만 접속되는 주소입니다. 다른 사람에게 보여주려면 Vercel 같은 배포 서비스를 사용해야 합니다. GitHub에 코드를 올린 뒤 Vercel에 연결하면 무료로 인터넷 주소를 받을 수 있습니다.

Q. 프로젝트를 삭제하고 다시 만들고 싶으면 어떻게 하나요?

프로젝트 폴더를 통째로 삭제하면 됩니다. 파일 탐색기에서 삭제하거나 터미널에서 rm -rf my-first-app(macOS) 또는 폴더를 우클릭 → 삭제(Windows)하면 됩니다. 이후 npx create-next-app@latest를 다시 실행하면 새 프로젝트가 만들어집니다.

Q. pnpm이나 yarn을 써도 되나요?

네, 패키지 매니저는 자유롭게 선택할 수 있습니다. create-next-app 실행 시 자동으로 감지하거나, --use-pnpm, --use-yarn 옵션을 추가하면 됩니다. 처음이라면 npm으로 시작하는 것이 가장 간단합니다.

Q. AI가 만든 코드에 에러가 있으면 어떻게 하나요?

에러 메시지를 그대로 AI에게 전달하세요. "이 에러가 나는데 고쳐줘"라고 요청하면 AI가 원인을 분석하고 수정 코드를 제안합니다. 바이브코딩의 장점은 에러 해결 과정도 AI와 함께 할 수 있다는 것입니다.

Q. 이 프로젝트를 실제 서비스로 운영할 수 있나요?

가능합니다. 다만 실제 서비스 운영에는 도메인 설정, 데이터베이스 연결, 보안 설정 등 추가 작업이 필요합니다. 먼저 간단한 프로젝트로 바이브코딩에 익숙해진 뒤, 단계적으로 확장하는 것을 권장합니다.

⚡ 환경 세팅부터 프로젝트 생성까지 한 번에

개발 환경이 아직 안 갖춰져 있다면 VibeStart에서 운영체제를 선택하세요. Git, Node.js, VS Code 설치를 단계별로 안내한 뒤 바로 프로젝트를 생성할 수 있는 상태까지 이어줍니다.

바이브코딩으로 Next.js 프로젝트 만들기: 비전공자도 10분이면 완성