바이브 코딩 실전 프로젝트 아이디어부터 배포까지

바이브 코딩 실전 프로젝트 아이디어부터 배포까지

 

바이브 코딩 시리즈에서 다룬 개념을 하나의 프로젝트로 실습합니다.  
아이디어를 정하고 AI에게 주문을 넣어 배포까지 완료하는 전 과정을 따라갑니다.  
예시 프로젝트는 링크 저장 앱입니다.

---

실습 프로젝트 개요

localStorage를 사용하면 새로고침 후에도 데이터가 유지됩니다.  
단, localStorage는 사용자 브라우저에 데이터를 저장하기 때문에 다른 사용자와 데이터를 공유할 수는 없습니다.
별도 서버나 데이터베이스 없이 구성할 수 있어 첫 실전 프로젝트에 적합합니다.

반응형

바이브코딩 실습 프로젝트

 

실습 프로젝트
프로젝트명	링크 저장 앱
기능	URL 입력 > 저장 > 목록 표시 > 삭제
저장 방식	localStorage (브라우저 저장, 별도 서버 불필요)
로컬 실행 환경	Docker
배포 플랫폼	GitHub + Vercel

---

전체 흐름

Docker는 이번 실습에서 로컬 개발 환경을 맞추기 위한 도구로 사용합니다.  
Docker 컨테이너를 Vercel에 배포하는 것이 아닙니다.  
Vercel은 GitHub 저장소의 소스코드를 직접 빌드해서 배포합니다.

 

바이브코딩 실습 프로젝트 전체 흐름

 

전체 흐름
1. 아이디어 구체화	요구사항 정리
2. 기능별 주문	화면 > 저장 > 목록 > 삭제 순서로 요청
3. Docker 로컬 테스트	이미지 빌드 > 컨테이너 실행 > 브라우저 확인
4. 디버깅	에러 로그 복사 후 재주문
5. Git 저장	commit > push
6. Vercel 배포	GitHub 연결 > Deploy
7. 배포 후 확인	실제 URL에서 기능 점검

 

---

1단계: 아이디어 구체화 — 메뉴판 만들기

막연한 아이디어를 AI가 이해할 수 있는 구체적인 요구사항으로 정리합니다.  
1편(핵심 개념)에서 다룬 주방 환경 설정과 같은 단계입니다.

바이브코딩 실습 프로젝트 1단계: 아이디어 구체화 — 메뉴판 만들기

 

요구사항 저리
화면 구성	URL 입력창, 저장 버튼, 저장된 링크 목록
기능	URL 입력 및 저장, 목록 표시, 항목 삭제
저장 방식	localStorage (브라우저 내 저장)
제외 기능	로그인, 회원가입, 태그 분류 (1차 버전 제외)

 

---

2단계: AI에게 첫 주문 — 기능별로 나눠서 넣기

전체 코드를 한 번에 요청하기보다 기능별로 나눠서 주문하는 것이 안전합니다.
화면 > 저장 > 목록 > 삭제 각 단계마다 확인하고 다음으로 넘어갑니다.
AI가 한 기능을 만들면 직접 실행해 정상 작동하는지 확인합니다.
문제가 없다면 Git에 커밋하거나 다음 기능을 주문합니다.

 

바이브코딩 실습 프로젝트 2단계: AI에게 첫 주문 — 기능별로 나눠서 넣기

1차 주문: 기본 화면 구성

바이브코딩 실습 프로젝트 2단계: AI에게 첫 주문 1차 주문 기본 화면 구성

 

 

프롬프트

Vite + React 기반으로 링크 저장 앱을 만들어 주세요.  
아래 조건을 지켜주세요. 

1. URL 입력창과 저장 버튼만 있는 기본 화면을 먼저 만들어 주세요.  
2. 초보자가 이해하기 쉬운 최소한의 파일 구조로 만들어 주세요.  
3. API Key나 비밀정보는 코드에 직접 넣지 말고 환경변수를 사용해 주세요.  
4. Docker로 로컬 실행할 수 있도록 Dockerfile도 함께 작성해 주세요.

실행에 필요한 파일을 포함해 프로젝트 전체를 하나의 압축 파일로 만들어 주세요.

 

2차 주문: 저장 기능 추가

바이브코딩 실습 프로젝트 2단계: AI에게 첫 주문 2차 주문 자징과 삭제 기능

 

 

프롬프트

저장 버튼을 눌렀을 때 URL을 localStorage에 저장하는 기능을 추가해 주세요.  
새로고침 후에도 데이터가 유지되어야 합니다.

3차 주문: 목록 표시 및 삭제 기능 추가

프롬프트

저장된 URL 목록을 화면에 표시하고  
각 항목 옆에 삭제 버튼을 추가해 주세요.  
삭제하면 localStorage에서도 함께 제거되어야 합니다.

 

[AI] - 바이브 코딩 프롬프트 작성법 AI에게 첫 주문 넣기

바이브 코딩 프롬프트 작성법 AI에게 첫 주문 넣기

 

---

3단계: Docker로 로컬 테스트 — 주방에서 맛보기

AI가 만든 코드를 Docker로 실행해 내 컴퓨터에서 확인합니다.  
Docker를 설치하면 호스트 컴퓨터에 Node.js를 직접 설치하지 않고도  
컨테이너 안에서 Node.js 환경을 구성해 프로젝트를 실행할 수 있습니다.

 

바이브코딩 실습 프로젝트 3단계: Docker로 로컬 테스트 — 주방에서 맛보기

 

Vite 기반 Dockerfile

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

 

Docker 실행 순서
1. 이미지 빌드	docker build -t link-app	프로젝트 폴더에서 실행합니다.
2. 컨테이너 실행	docker run -p 5173:5173 link-app	5173번 포트로 실행합니다.
3. 브라우저 확인	http://localhost:5173 접속	화면이 정상적으로 뜨는지 확인합니다.

 

 

[AI] - 바이브 코딩 테스트 방법 AI가 만든 음식 맛보기

바이브 코딩 테스트 방법 AI가 만든 음식 맛보기

 

---

4단계: 디버깅 — 재주문 넣기

실행 후 문제가 생기면 3편(디버깅)에서 다룬 방법으로 수정 요청합니다.

 

바이브코딩 실습 프로젝트 4단계: 디버깅 — 재주문 넣기

 

자주 발생하는 문제
docker build 실패	에러 로그를 복사해서 AI에게 전달합니다.
화면이 안 뜸	콘솔 에러를 복사해서 AI에게 전달합니다.
저장이 안 됨	어떤 동작에서 발생했는지 재현 조건과 함께 전달합니다.
삭제 버튼 반응 없음	기대 결과와 함께 AI에게 재주문합니다.

 

 

프롬프트

Docker로 빌드 중 아래 에러가 발생했습니다.  
원인을 찾아서 해결 방법을 단계별로 알려주세요.  
에러 로그: (로그 전체 붙여 넣기)

 

[AI] - 바이브 코딩 디버깅 AI에게 재주문하는 법

바이브 코딩 디버깅 AI에게 재주문하는 법

 

---

5단계: Git으로 코드 저장 — 세이브 포인트 만들기

로컬에서 정상 작동이 확인되면 GitHub에 코드를 올립니다.  
번외 편(Git 용어 정리)에서 다룬 commit, push 단계입니다.
API Key 등 민감한 정보가 포함된 .env 파일은 .gitignore에 추가해서 GitHub에 올라가지 않도록 합니다.  
8편(보안)에서 다룬 민감 정보 보호 내용을 함께 확인합니다.

 

바이브코딩 실습 프로젝트 5단계: Git으로 코드 저장 — 세이브 포인트 만들기

 

Git으로 코드 저장
저장소 초기화	git init
변경 사항 추가	git add .
커밋	git commit -m "링크 저장 앱 1차 완성"
브랜치 이름 설정	git branch -M main
GitHub 저장소 연결	git remote add origin [저장소 URL]
최초 push	git push -u origin main

 

 

[AI] - 바이브 코딩 Git 용어 정리 AI 코딩 전에 알아두면 좋은 개념

바이브 코딩 Git 용어 정리 AI 코딩 전에 알아두면 좋은 개념

 

---

6단계: 배포 — 손님에게 음식 내놓기

6편(배포)에서 다룬 Vercel 배포 방법으로 실제 URL을 만듭니다.  
Vercel은 GitHub 저장소를 연결하면 프로젝트 설정에 따라 소스코드를 빌드하고 배포할 수 있습니다.

 

바이브코딩 실습 프로젝트 6단계: 배포 — 손님에게 음식 내놓기

 

배포
1. Vercel 가입	vercel.com에서 GitHub 계정으로 가입합니다.
2. 저장소 연결	Vercel 대시보드에서 GitHub 저장소를 선택합니다.
3. 배포 실행	Deploy 버튼을 누릅니다.
4. URL 확인	배포 완료 후 제공된 URL로 접속해 확인합니다.

 

 

바이브 코딩 실습 프로젝트 Docker VS Vercel

 

 

[AI] - 바이브 코딩 배포 방법 AI가 만든 음식을 손님에게 내놓는 법

바이브 코딩 배포 방법 AI가 만든 음식을 손님에게 내놓는 법

 

---

7단계: 배포 후 확인 — 최종 맛보기

배포된 실제 URL에서 기능을 하나씩 확인합니다.

 

바이브코딩 실습 프로젝트 7단계: 배포 후 확인 — 최종 맛보기

 

배포 후 확인
URL 입력 및 저장	실제 링크를 입력하고 저장 버튼을 눌러봅니다.
새로고침 후 데이터 유지	저장 후 새로고침해서 목록이 그대로인지 확인합니다.
삭제	항목 삭제가 정상 작동하는지 확인합니다.
모바일 화면	스마트폰으로 직접 접속해 화면을 확인합니다.

 

---

바이브 코딩

웹사이트 구조를 식당에 비유합니다.

핵심 개념
프로트엔드와 백앤드	매장과 주방
상태	손님 상황
DB와 API	대형 냉장고와 배달 기사
에러로그	문제 기록장

 

 

[AI] - 바이브 코딩 시작 전 꼭 알아야 할 핵심 개념 4가지

바이브 코딩 시작 전 꼭 알아야 할 핵심 개념 4가지

 

 

이제는 AI 요리사에게 직접 첫 주문을 할 차례입니다.
[AI] - 바이브 코딩 프롬프트 작성법 AI에게 첫 주문 넣기

바이브 코딩 프롬프트 작성법 AI에게 첫 주문 넣기

 

 

주문했는데 음식이 잘못 나왔다면 상황에 맞게 피드백을 주어야 합니다.
[AI] - 바이브 코딩 디버깅 AI에게 재주문하는 법

바이브 코딩 디버깅 AI에게 재주문하는 법

 

 

AI와 오래 대화를 나누다 보면 똑같은 실수를 반복할 때가 있습니다.
그럴 때 새 대화방을 열어 새 주문을 넣어야 할 타이밍이 있습니다.

[AI] - 바이브 코딩 문맥 초기화 AI가 헷갈리기 시작할 때 새 주문 넣는 법

바이브 코딩 문맥 초기화 AI가 헷갈리기 시작할 때 새 주문 넣는 법

 

 

AI가 만든 코드를 바로 배포하면 안 됩니다.  
주방에서 나온 음식을 손님 테이블에 올리기 전에 맛을 봐야 합니다.

[AI] - 바이브 코딩 테스트 방법 AI가 만든 음식 맛보기

바이브 코딩 테스트 방법 AI가 만든 음식 맛보기

 

 

로컬에서만 돌아가는 코드는 주방 안에서만 맛본 음식입니다.
주방의 음식을 손님이 있는 테이블까지 가져다줘야 합니다.

[AI] - 바이브 코딩 배포 방법 AI가 만든 음식을 손님에게 내놓는 법

바이브 코딩 배포 방법 AI가 만든 음식을 손님에게 내놓는 법

 

 

식당도 문을 열었다고 끝나는 것이 아닙니다.
손님이 불편 없이 먹을 수 있도록 점검하고 관리해야 합니다.

[AI] - 바이브 코딩 운영 방법 배포 후 식당 계속 운영하는 법

바이브 코딩 운영 방법 배포 후 식당 계속 운영하는 법

 

 

AI가 만든 음식이라고 해서 무조건 안전한 것은 아닙니다.  
배포 전에 재료는 신선한지 위생은 괜찮은지 독은 없는지 반드시 확인해야 합니다.

[AI] - 바이브 코딩 보안 AI가 만든 음식에 독이 없는지 확인하는 법

바이브 코딩 보안 AI가 만든 음식에 독이 없는지 확인하는 법

 

 

[AI] - 바이브 코딩 Git 용어 정리 AI 코딩 전에 알아두면 좋은 개념

바이브 코딩 Git 용어 정리 AI 코딩 전에 알아두면 좋은 개념

 

 

[AI] - 바이브 코딩 실전 프로젝트 아이디어부터 배포까지

바이브 코딩 실전 프로젝트 아이디어부터 배포까지

 

---

요약

1. 아이디어를 구체적인 요구사항으로 정리
2. 저장 방식(localStorage)을 먼저 정하고 시작
3. 전체 코드 한 번에 요청보다 기능별로 나눠서 주문
4. Docker로 로컬 테스트 후 Git으로 저장
5. Vercel은 Docker가 아닌 GitHub 소스코드를 직접 빌드
6. 배포 완료 후 실제 URL에서 반드시 최종 확인

 

바이브 코딩 실전 프로젝트 아이디어부터 배포까지