📌 사전 준비사항
⚡ 준비물 체크리스트
시작하기 전에 4가지를 미리 준비해주세요!
💡 이미 준비가 끝났다면 바로 시작해도 좋아요!
🎯 바이브 코딩이란?
AI와 함께 코딩하는 새로운 개발 방식입니다.
💡 왜 Cursor?한국어로 대화하듯 코딩할 수 있고, 설치부터 배포까지 한 번에 가능한가장 친절한 AI 코딩 도구입니다.
📋 1부: 개발 환경 세팅
🌐 Step 1. 준비 작업
프로젝트를 시작하기 전에 필요한 준비를 해둡니다.
⚠️먼저 할 일: 프로젝트 폴더 만들기 (Cursor 열기 전!)
Cursor를 열기 전에, 먼저 우리가 작업할 폴더를 직접 만들어야 해요!
- 1.원하는 위치에 새 폴더 만들기 (예: 바탕화면, Documents, Downloads 등)
- 2.폴더 이름 예시:
vibe-coding - 3.폴더 이름은 영어로, 띄어쓰기 없이! (하이픈 - 사용 가능)
- 2GitHub에서 새 Repository 생성
github.com 로그인 → 우측 상단 + 버튼 → New repository 클릭
Repository 이름 입력 → 아무것도 체크하지 말고 → Create repository
⚠️ 이름은 영어, 숫자, 하이픈(-)만 사용 (예: my-cute-website)
빈 레포지토리는 Vercel에 바로 연결할 수 없어요. 먼저 프로젝트를 만들고 나서 연결합니다!
🚀 Step 2. Cursor 열고 프로젝트 폴더 선택하기
Cursor를 처음 실행하면 먼저 작업할 폴더를 열어야 해요!
프로젝트 폴더 열기
- 1Cursor 실행
바탕화면이나 Dock에서 Cursor 아이콘 클릭
- 2Open Folder 클릭
시작 화면에서 "Open Folder" 버튼을 찾아 클릭
- 3프로젝트 폴더 선택
아까 만든 폴더 (예: vibe-coding) 선택 → Open 클릭
이제 Cursor 왼쪽 사이드바에 폴더 구조가 보일 거예요. 아직은 비어있지만 곧 채워집니다!
🔐 Step 3. Cursor 로그인하기
AI와 대화하려면 먼저 로그인이 필요해요!
로그인 확인하기
- 1Settings 열기
Windows: Ctrl + , | Mac: Cmd + ,
- 2Cursor Settings 탭 클릭
- 3Account 확인
로그인이 안 되어 있다면 "Log In" 버튼 클릭
만약 안 보인다면 준비 가이드를 다시 확인해주세요.
🤖 Step 4. AI 모델 선택하기
Cursor에서 사용할 AI 모델을 선택합니다.
- 1Settings → Models 탭
- 2Chat Model 선택✅ 추천: claude-3.5-sonnet
가장 똑똑하고 한국어를 잘 이해해요!
🚀 빠른 응답: gpt-4o빠르게 답변이 필요할 때 좋아요
채팅창을 열려면: Cmd/Ctrl + L
🛡️ 에러 해결 마법 공식
이제부터 AI와 본격적인 대화가 시작됩니다!
🎯 가장 중요한 마인드셋
우리는 개발을 배우러 온 게 아닙니다.
바이브 코딩을 하러 왔습니다!
AI를 잘 활용하는 것이 핵심입니다. 에러가 나도 당황하지 마세요.
모든 문제는 AI가 해결할 수 있습니다. 그냥 물어보면 됩니다!
💬 AI가 이해 못했을 때
AI가 잘못 이해했거나 다른 걸 했나요?
해결:"아니야, 내가 원한 건 ___야" 라고 다시 설명
🔴 에러 메시지가 떴을 때
터미널이나 브라우저에 빨간 글씨?
해결:에러 전체를 복사해서 AI에게 "이거 해결해줘"
⏳ 뭔가 안 될 때
예상대로 작동하지 않나요?
해결:"이게 안 되는데 확인해줘" 라고 요청
❓ 터미널이 물어볼 때
(y/N) 같은 선택지가 나왔나요?
해결:대문자가 기본값! 잘 모르면 Enter
"이거 왜 안 돼?", "이거 고쳐줘", "다시 해줘" - 이런 말들을 편하게 하세요!
에러는 AI와 대화할 기회일 뿐입니다.
💬 Step 5. 이제 AI 채팅으로 지시해보세요!
🎉 축하합니다! 이제부터 AI와 대화하면서 모든 걸 해결할 수 있어요!
아래 단계들부터는 전부 AI 채팅에 한국어로 말하면 됩니다.
예: "Git 설치해줘", "Node.js 설치 도와줘", "에러 났어 도와줘"
📦 Step 6. Git 설치
코드의 변경사항을 기록하고 백업하는 도구입니다.
💬 Cursor AI 채팅에서 말하기:
🟢 Step 7. Node.js 설치
웹사이트를 실행하고 테스트하는데 필요한 환경입니다.
💬 Cursor AI 채팅에서 말하기:
▲ Step 8. Vercel CLI 설치
웹사이트를 인터넷에 공개하는 서비스입니다.
💬 Cursor AI 채팅에서 말하기:
💡 만약 설치가 안된다면 터미널에서 직접 npm i -g vercel 명령어를 사용하세요.
🎉 1부 완료! 이제 프로젝트를 준비해봅시다
📝 2부: 프로젝트 준비
⚡ Step 1. Next.js 프로젝트 생성
💬 Cursor AI 채팅에서 말하기:
💡 프로젝트 이름 짓기 팁
- • 영어로 지으세요: my-portfolio, todo-app, blog-site
- • 단어 사이에 - 사용: my-awesome-website (✅) myawesomewebsite (❌)
- • 직관적인 이름이 좋아요: shopping-list > project1
- • 예시: my-first-site, vibe-coding-site, personal-blog
터미널에서
(y/N) 형태로 물어볼 때:• 대문자(N)가 기본값입니다
• 그냥 Enter = N 선택
• y를 원하면 y 입력 후 Enter
🚀 Step 2. 로컬 서버 실행
이제 만든 웹사이트를 실행해봅시다!
💬 Cursor AI 채팅에서 말하기:
AI가 자동으로 npm run dev 명령어를 실행해줄 거예요!
위 방법이 안 되면 아래 단계를 따라해주세요:
- 1터미널 열기
Cursor 하단 패널에서 PowerShell(Mac은 Terminal) 선택 또는Ctrl + ` - 2프로젝트 폴더로 이동 (필요한 경우만!)
👀 먼저 터미널 경로를 확인하세요!
터미널 왼쪽에 현재 위치가 표시되어 있어요.
이미vibe-coding-site같은 프로젝트 폴더에 있다면 이 단계는 건너뛰세요!cd [프로젝트 이름]💡 cd = "Change Directory" (폴더 이동하기)
예시:cd vibe-coding-site또는cd my-awesome-site - 3서버를 깨우는 마법 주문 🪄npm run dev
💫 해리포터의 "윙가르디움 레비오사"처럼 서버를 띄우는 마법 주문이에요!
이 주문을 입력하면 웹사이트가 살아납니다 ✨
서버가 실행되면 브라우저에서 http://localhost:3000 링크를 클릭하거나 주소창에 입력하세요!
걱정 마세요! Cursor에게 이렇게 물어보세요:
"localhost:3000에 접속이 안 돼. 서버가 실행 중인지 확인해줘"Cursor가 문제를 찾아서 해결해드릴 거예요!
빨간 에러 화면의 메시지를 복사 → Cursor에 붙여넣기
몇 초 안에 해결됩니다!
🎉 이제 실제로 웹사이트를 만들어봅시다!
지금까지 배운 것들을 활용해서 나만의 웹사이트를 만들어볼 시간이에요!
💡 5분 브레인스토밍
어떤 웹사이트를 만들지 고민해보세요!
예시 아이디어
- • [귀여운] 강아지 사진 갤러리
- • [여행자를 위한] 맛집 추천 사이트
- • [나만의] 포트폴리오 웹사이트
- • [친구들과 함께하는] 퀴즈 게임
AI에게 요청하기
"귀여운 강아지 사진 갤러리 웹사이트 만들어줘"
"여행자를 위한 맛집 추천 사이트 만들어줘"
이렇게 구체적으로 요청해보세요!
아래 단계를 따라가면서 여러분만의 멋진 웹사이트를 만들어보세요!
🔥 실시간 수정 확인하기 (Hot Reload)
코드를 수정하면 브라우저에서 바로 확인할 수 있어요! (Hot Reload)
- 1코드 수정 → 저장 (Ctrl+S 또는 Cmd+S)
- 2브라우저가 자동으로 새로고침됩니다
- 3변경사항이 즉시 반영됩니다!
🖼️ AI와 이미지에 대한 중요한 사실
💡 이미지를 웹사이트에 넣는 방법
- 1
public폴더를 만듭니다 - 2이미지 파일을 그 폴더에 넣습니다
예:
public/logo.png - 3AI 채팅에서 이렇게 말합니다:"public 폴더에 있는 logo.png를 메인 페이지 상단에 보여줘"
📁 public 폴더 구조 예시:
💡 핵심 포인트: 이미지는 직접 준비해야 하고, AI는 그 이미지를 코드로 연결하는 일만 도와줍니다.
🔍 브라우저 개발자 도구 사용법
웹사이트 디버깅의 핵심 도구입니다!
웹사이트에서 문제가 생겼을 때, 브라우저 개발자 도구를 사용하면 AI가 문제를 더 빠르게 해결할 수 있어요!
🖱️ 개발자 도구 열기
웹사이트에서 마우스 오른쪽 클릭 → "검사" 클릭
단축키: Windows (F12 또는 Ctrl+Shift+I) / Mac (Cmd+Opt+I)
📱 콘솔과 모바일 뷰
Console 탭: 에러 메시지가 표시되는 곳
모바일 아이콘: 모바일 화면에서 어떻게 보이는지 확인
🚨 콘솔 에러가 나타났을 때
콘솔에 빨간색 에러 메시지가 보이면?
- 1에러 메시지를 드래그해서 선택
- 2복사 (Ctrl+C 또는 Cmd+C)
- 3AI 채팅에 붙여넣고 "이 에러를 해결해줘"
🌐 배포
🌐 Step 3. GitHub에 코드 올리고 Vercel로 배포하기
📋 GitHub 레포지토리 URL 복사
아까 만든 빈 레포지토리로 가면 이런 화면이 나와요:
- 1Code 버튼 클릭
초록색 "Code" 버튼을 찾아서 클릭 - 2HTTPS URL 복사
https://github.com/[username]/[repo-name].git 형태의 URL 복사
🚀 그 다음, Vercel로 배포하기
GitHub에 연결했다면, 이제 Vercel로 배포해보세요!
AI가 Vercel CLI를 사용해서 자동으로 배포 프로세스를 진행해줄 거예요!
🚨 중요! Vercel 배포 시 반드시 읽어주세요!
모두가 볼 수 있는 사이트를 만들려면 이 설정이 필요해요
💡 터미널 선택지 팁
터미널에서 (y/N) 형태로 물어볼 때:
- • 대문자(N)가 기본값입니다
- • 그냥 Enter = N 선택
- • y를 원하면 y 입력 후 Enter
⚠️ 배포할 때 터미널에서 이런 질문이 나옵니다:
Enable Vercel Authentication (y/N)?👉 반드시 n 을 입력하세요!
• 그냥 Enter 치면 안돼요! (Enter = N이지만 다른 의미)
• 꼭 n을 타이핑하고 Enter를 눌러주세요
• 이렇게 해야 다른 사람들도 여러분의 사이트를 볼 수 있어요
💡 앞으로는 이렇게 하세요!
이제 다 세팅했으니까, 앞으로는 이 말을 습관처럼 하면 됩니다:
💡 코드를 수정할 때마다 이 마법의 주문을 외워보세요!
AI가 자동으로 GitHub에 저장하고 Vercel에 배포해줄 거예요.
배포가 완료되면
https://프로젝트명.vercel.app 같은 주소를 받게 됩니다.🔗 자동 배포 설정하기
GitHub에 푸시할 때마다 자동으로 배포되도록 설정하면 편리합니다!
- 1Vercel 대시보드에서 프로젝트 선택
- 2Settings → Git → Deploy Hooks 설정
- 3이제 git push만 하면 자동 배포!
🔄 Step 3-3. 코드 가져오기 (Pull)
다른 컴퓨터에서 작업하거나, 팀원이 수정한 내용을 가져올 때 사용해요.
"풀(pull) 해줘" 또는 "최신 코드 가져와줘"🌐 도메인 이름 바꾸기 (선택사항)
기본 주소가 너무 길다고요? Vercel에서 더 짧고 예쁜 주소로 바꿀 수 있어요!
- 1Vercel 대시보드 접속
vercel.com에 로그인 → 여러분의 프로젝트 클릭
- 2Settings → Domains 메뉴로 이동
프로젝트 설정에서 도메인 관리 페이지로 들어가요
- 3원하는 이름 입력하고 Add 클릭
예: my-awesome-site.vercel.app → coolsite.vercel.app
친구들에게 자랑해보세요! 🎊