1. 바이브코딩이란?

바이브코딩(Vibe Coding)은 AI에게 자연어로 지시하여 코드를 생성하는 개발 방식이다. 직접 코드를 작성하는 대신, AI 에이전트에게 원하는 기능을 설명하면 AI가 코드를 만들어낸다.

---

2. AI 에이전트 도구

2.1. Gemini CLI

Gemini CLI는 터미널에서 직접 Gemini를 사용할 수 있는 오픈 소스 AI 에이전트이다. Apache 2.0 라이선스.

2.1.1. 특징

• 무료 요금제: Google 계정 로그인 시 분당 60건, 하루 1,000건 요청 가능
• Gemini 3 모델: 100만 토큰 컨텍스트 윈도우
• 멀티모달: PDF, 이미지, 스케치 등 다양한 입력 지원
• 내장 도구: Google 검색, 파일 작업, 셸 명령, 웹 가져오기
• MCP 지원: 확장 프로그램을 통한 커스텀 통합 (Figma, GitHub, Slack 등)
• 대화 체크포인트: 세션 저장/복원 가능

---

2.1.2. 설치

요구사항: Node.js 20 이상 / macOS, Linux, Windows

Windows / Linux

npm install -g @google/gemini-cli

설치 없이 바로 실행:

npx @google/gemini-cli

macOS

brew install gemini-cli

또는 MacPorts:

sudo port install gemini-cli

---

2.1.3. 인증 (3가지 방식)

Google 로그인 (권장)

1. 터미널에 gemini 입력 후 엔터

2. "How would you like to authenticate?" 질문에서 Login with Google 선택

3. 브라우저에서 Google 계정 로그인 및 권한 허용

4. 터미널에 "Authenticated successfully!" 메시지 확인

Gemini API 키

API 키 발급 후 환경변수 설정:

export GEMINI_API_KEY="발급받은_키"

Vertex AI (기업용)

export GOOGLE_API_KEY="키"
export GOOGLE_GENAI_USE_VERTEXAI=true

90일 무료 체험 후 토큰 기반 과금. 높은 요청 한도 제공.

---

2.1.4. 실행

gemini

특정 모델 지정:

gemini -m gemini-2.5-flash

비대화형 모드 (스크립트용):

gemini -p "이 프로젝트 구조를 설명해줘"

---

2.1.5. 슬래시 명령어

대화 중 / 로 시작하는 명령어이다.

기본

대화 관리

설정

도구 및 확장

---

2.1.6. 특수 입력

---

2.1.7. 예약된 파일명

Gemini CLI가 특별한 목적으로 인식하는 파일들이다. 프로젝트 루트나 .gemini/ 폴더에 위치한다.

---

2.1.8. 활용 예시

파일명 일괄 변경

photos/photo1.png
photos/photo2.png
photos/photo3.png

gemini -p 'Rename the photos in my "photos" directory based on their contents.'

코드 분석

gemini -p "이 프로젝트의 아키텍처를 분석하고 개선점을 알려줘"

사용량 확인

대화 중 아래 명령어로 현재 토큰 사용량과 쿼터를 확인할 수 있다:

/stats model

---

2.1.9. 확장 프로그램 (Extensions)

확장 프로그램 설치 명령어:

gemini extensions install [GitHub URL]

Figma 연결

gemini extensions install https://github.com/figma/figma-gemini-cli-extension

인증키 설정 (Figma에서 Personal Access Token 발급 후):

gemini extensions config figma FIGMA_PERSONAL_ACCESS_TOKEN

발급받은 토큰을 붙여넣는다.

GitHub 연결

gemini extensions install https://github.com/github/github-mcp-server

주요 확장 목록

---

2.2. Replit

사이트 이동

Replit은 브라우저에서 바로 코딩하고 배포할 수 있는 클라우드 개발 환경이다.

2.2.1. 요금제

2.2.2. 주요 특징

• 클라우드 IDE: 브라우저에서 바로 코딩 가능. 로컬 설치 불필요.
• 다양한 언어 지원: Python, JavaScript, C++, Java 등 50개 이상 언어 실행 가능.
• 즉시 실행/미리보기: 코드를 저장하면 바로 실행·배포 테스트 가능.
• 멀티플레이(Multiplayer): 구글 Docs처럼 동시에 코드 편집 가능.
• 팀/교육 기능: 역할 기반 접근 제어, 중앙 청구, 과제 제출 등 지원.

2.2.3. 활용하기

프레임워크 선택

Legacy Web

1. 
2. 
3. 
4. 
5. 

2.2.4. 학습·커뮤니티

• 커뮤니티 Hub: 프로젝트 공유와 탐색 가능: Replit Explore
• Docs & 학습 자료: 공식 문서와 가이드: Replit Docs

---

3. PRD (제품 요구사항 정의서)

3.1. 개념

인공지능을 활용해 자연어로 코드를 작성하는 '바이브 코딩' 환경에서, AI에게 제공하는 핵심 작업 지시서이자 설계도이다. 전통적인 방식에서는 개발자가 참고하는 기획 문서지만, 바이브 코딩에서는 AI가 전체 구조를 파악하고 코드를 생성하게 만드는 '초대형 명령어(프롬프트)' 역할을 한다.

3.2. 기존 방식과의 핵심 차이점

1. 직접적인 코드 생성 기준: 사람이 읽고 이해하는 것을 넘어, AI가 문서를 읽고 즉시 코드를 짜야 하므로 훨씬 논리적이고 빈틈없이 작성되어야 한다.

2. 제한 사항의 엄격한 통제: AI는 자유도를 주면 엉뚱한 기술을 사용할 수 있다. 따라서 사용해야 할 기술(예: 리액트, 자바스크립트)과 절대 쓰면 안 되는 방식을 명확히 제한해야 한다.

3. 단계별 분할: AI가 한 번에 너무 많은 코드를 생성하다 오류를 내지 않도록, 기능을 아주 작은 단위로 쪼개어 순서대로 지시할 수 있게 구조화해야 한다.

3.3. 필수 포함 요소

1. 목적 및 대상: 이 제품을 왜 만들며, 누가 사용하는가.
2. 핵심 기능 명세: 버튼을 누르면 어떤 화면이 나오고 데이터는 어떻게 처리되는지 구체적인 작동 방식.
3. 기술 구조 및 환경: 프론트엔드 프레임워크, 화면 배치 규칙, 데이터 연동 방식 등.

3.4. PRD 생성용 프롬프트

너는 바이브 코딩을 돕는 숙련된 프론트엔드 개발 보조 인공지능이다.
내가 제공하는 '제품 요구사항 정의서(PRD) 양식'을 사용하여,
'React를 사용한 포트폴리오'를 개발하기 위한 완벽한 문서로 채워라.

[작성 규칙]
1. 동적 페이지 구현을 위한 데이터베이스 연동 방식을 명확히 포함할 것.
2. 코드를 한 번에 생성하지 않고, 단계별로 지시할 수 있게 작업 순서를 아주 잘게 나눌 것.
3. 아래 제공된 마크다운 양식의 목차를 훼손하지 않고 내용을 작성할 것.

[양식]
# 제품 요구사항 정의서(PRD) 양식

## 1. 서비스 개요
* **목적**: [어떤 문제를 해결하는 서비스인지 명확히 작성한다]
* **대상**: [실제 서비스를 사용할 대상을 구체적으로 작성한다]

## 2. 필수 기술 환경
* **화면 구성 기술**: [사용할 프레임워크를 작성한다. 예: 리액트, 아스트로]
* **디자인 및 화면 배치**: [적용할 디자인 방식을 작성한다. 예: 테일윈드 CSS]
* **데이터베이스**: [데이터 연동 방식을 작성한다. 예: 수파베이스]
... (이하 내용 작성) ...

3.5. PRD 템플릿

# 제품 요구사항 정의서(PRD) 양식

## 1. 서비스 개요
* **목적**: [어떤 문제를 해결하는 서비스인지 명확히 작성한다]
* **대상**: [실제 서비스를 사용할 대상을 구체적으로 작성한다]

## 2. 필수 기술 환경
* **화면 구성 기술**: [사용할 프레임워크를 작성한다. 예: 리액트, 아스트로]
* **디자인 및 화면 배치**: [적용할 디자인 방식을 작성한다. 예: 테일윈드 CSS]
* **데이터베이스**: [데이터 연동 방식을 작성한다. 예: 수파베이스]

## 3. 핵심 화면 및 기능 명세
* **[화면 이름 1]**:
    * [기능 A]: 사용자가 특정 행동을 했을 때의 결과를 상세히 작성한다.
    * [기능 B]: 예외 상황(오류, 빈 화면)에 대한 처리 방식을 작성한다.
* **[화면 이름 2]**:
    * [기능 C]: 데이터가 어떻게 불러와지고 보여지는지 작성한다.

## 4. 인공지능 작업 지시 순서
* **1단계**: [가장 기초가 되는 화면 뼈대와 기본 구조를 먼저 작성하게 한다]
* **2단계**: [세부적인 디자인과 핵심 기능 1개를 완성하게 한다]
* **3단계**: [데이터를 연결하고 전체적인 동작을 확인하게 한다]

## 5. 절대 규칙 및 제한 사항
* **금지 사항**: [인공지능이 임의로 추가하거나 사용하면 안 되는 기술을 명시한다]
* **필수 규칙**: [반드시 지켜야 할 폴더 구조나 변수명 규칙을 명시한다]

3.6. 앱 생성용 프롬프트

너는 지금부터 수석 프론트엔드 개발자 역할을 수행한다.
아래 제공하는 '제품 요구사항 정의서(PRD)'를 꼼꼼히 읽고, 명시된 기술 환경과 규칙에 맞추어 응용 프로그램(앱) 개발을 시작해라.

[개발 진행 규칙]
1. 전체 코드를 한 번에 작성하지 마라.
2. 1단계로, 프로젝트의 기본 폴더 구조와 필수 설정 파일(예: package.json 등)의 코드만 먼저 생성하여 제시해라.
3. 내가 "다음 단계 진행"이라고 지시할 때만, PRD의 '인공지능 작업 지시 순서'에 따라 다음 화면이나 핵심 기능을 순차적으로 구현해라.
4. 코드 작성 시 PRD에 명시된 '필수 기술 환경'과 '절대 규칙 및 제한 사항'을 반드시 지켜라.
5. 모르는 부분이 있거나 문서에 누락된 내용이 있다면, 임의로 추측하여 코드를 짜지 말고 반드시 나에게 먼저 질문해라.

[제품 요구사항 정의서(PRD)]
(여기에 앞서 완성된 PRD 전체 내용을 복사하여 붙여넣는다)

3.7. PRD 작성 사례

아래는 작성된 PRD의 모범 사례이다. 이 정도 구체성을 목표로 작성한다.

### 1. 프로젝트 개요

  - **이름:** 포커스 타이머 (Focus Timer)
  - **설명:** 25분 집중, 5분 휴식을 반복할 수 있는 웹 기반 타이머
  - **타깃:** 시간 관리가 필요한 수험생 및 직장인

  ### 2. 기술 환경

  - **언어:** HTML, CSS, 바닐라 자바스크립트(Vanilla JS)
  - **디자인:** 별도 프레임워크 없이 CSS로 직접 구현 (다크 모드 지원)

  ### 3. 핵심 기능

  1. **타이머 시작:** '시작' 버튼을 누르면 25분 카운트다운이 시작된다.
  2. **휴식 모드:** 25분이 끝나면 알림음이 울리고, 5분 휴식 타이머로 자동 전환된다.
  3. **초기화:** '리셋' 버튼을 누르면 시간이 25:00으로 되돌아간다.
  4. **시각 효과:** 남은 시간에 따라 원형 그래프(Progress bar)가 줄어든다.

  ### 4. 화면 흐름

  1. 접속 시 중앙에 '25:00' 숫자와 '시작' 버튼이 보인다.
  2. 시작 버튼 클릭 시 숫자가 줄어든다.
  3. 시간 종료 시 화면 배경색이 붉은색에서 초록색(휴식)으로 변경된다.

---

4. 프롬프트 모음

4.1. UI 스크린샷을 코드로 변환

Claude, Gemini 등 AI 채팅에 UI 이미지를 첨부하고 아래 프롬프트를 사용한다.

# Role
당신은 10년 차 시니어 프론트엔드 개발자이자 UI/UX 전문가입니다.

# Task
첨부된 UI 디자인(스크린샷)을 분석하여, 즉시 실행 가능한 '단일 컴포넌트 코드'로 변환하세요.

# Tech Stack
- HTML
- CSS
- fontawsome (아이콘 필요 시 사용)

# Requirements (Detail)
1. **시각적 일치성:** 이미지의 레이아웃, 여백(Padding/Margin), 색상 톤, 폰트 크기를 최대한 동일하게 구현하세요.
2. **현대적 디자인 적용:** 스크린샷이 다소 투박하더라도, 결과물은 모던하고 세련된 스타일(부드러운 그림자, 둥근 모서리, 적절한 호버 효과)로 업그레이드하여 코딩하세요.
3. **반응형:** 모바일과 데스크톱 모두에서 깨지지 않고 중앙 정렬되도록 구현하세요.
4. **인터랙션:**
- 입력창에 focus가 되면 테두리 색상이 변경되어야 합니다.
- 버튼 클릭 시 "로그인 시도 중..."이라는 alert 창이 뜨도록 기능을 추가하세요.

# Output Format
- 설명은 최소화하고, Artifacts를 통해 렌더링 된 결과물과 전체 코드를 보여주세요.

---

4.2. 텍스트를 디자인으로 생성하기

스티치

Google Stitch에서 텍스트 프롬프트로 UI 디자인을 생성할 수 있다.

테일윈드 v4를 사용하여 '고플릭스'라는 이름의 인터넷 동영상 서비스 웹 화면을 제작한다. 주요 강조 색상은 노란색(yellow-500)을 사용한다. 전체 배경은 어두운 색으로 설정하여 영화에 집중할 수 있게 한다.
상단 영역에는 고플릭스 이름(노란색), 검색창, 사용자 단추를 배치한다. 중앙의 가장 큰 영역에는 주요 추천 영화의 큰 사진과 함께 노란색의 '재생' 단추를 눈에 띄게 배치한다. 그 아래에는 장르별 영화 목록을 여러 줄로 나열하며, 각 줄은 가로로 넘겨볼 수 있도록 만든다. 영화 사진 위에 마우스를 올리면 테두리가 노란색으로 강조되는 효과를 추가한다.
필수 조건: 테일윈드 v4를 사용 . 화면을 생성한 후 나에게 설명하는 모든 답변과 코드 주석, 화면 내의 모든 글자는 반드시 한국어로 출력한다.
글꼴은 https://cdn.jsdelivr.net/npm/pretendard-std@1.3.9/subset.min.js 를 사용한다

생성된 디자인을 피그마로 복사한다.

---

4.3. 피그마 디자인으로 앱 생성하기

참조페이지

피그마 디자인을 JSON으로 변환한 후 아래 프롬프트로 React 앱을 생성한다.

다음 스택으로 React 앱을 만들어줘:

- 빌드 도구: Vite (최신 버전)
- React (최신 버전), JavaScript만 사용 — TypeScript 금지
- React-Compress 로 설치
- Tailwind CSS v4 (최신 버전) 스타일링
- 모든 의존성은 최신 버전으로 설치

프로젝트 설정 조건:
- `npm create vite@latest` 명령어로 react (JavaScript) 템플릿 사용
- Tailwind CSS v4는 `npm install tailwindcss @tailwindcss/vite` 로 설치
- vite.config.js에 @tailwindcss/vite 플러그인으로 Tailwind 설정
- CSS 파일에 `@import "tailwindcss"` 로 Tailwind 불러오기
- tailwind.config.js 사용 금지 (v4는 CSS 기반 설정 방식)
- TypeScript 파일 금지 (.ts, .tsx, tsconfig 모두 금지)

파일 구조:
- src/main.jsx
- src/App.jsx
- src/index.css (@import "tailwindcss" 포함)
- vite.config.js

만들어야 할 앱: 1-structure.json  파일을 참조

---

4.4. Replit 프롬프트

사이트 클론 기본 템플릿

Clone this site EXACTLY as shown: [URL]

IMPORTANT - TECH STACK:
- Use ONLY HTML, CSS, and JavaScript (NO React, Vue, or frameworks)
- CLIENT-SIDE ONLY (NO server, backend, or database)
- Pure vanilla JavaScript only

FONT REPLACEMENT:
- Replace existing fonts with Korean fonts as follows:
  - [기존폰트1] → [새폰트1]
  - [기존폰트2] → [새폰트2]
  - [기존폰트3] → [새폰트3]
- Load fonts from CDN: [폰트CDN링크1], [폰트CDN링크2], [폰트CDN링크3]
- Update all corresponding font-family declarations in CSS
- Keep font weights and styles intact

작성 예시

JAVASCRIPT LIBRARY:
- Use [gsap core,gsap scroll] instead of any existing libraries
- Load from CDN: [https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js],[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollToPlugin.min.js],[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js]

REQUIREMENTS:
- Make it pixel-perfect match to the original layout and design
- Make it responsive
- Include all animations and interactions
- Recreate every section exactly as it appears
- Frontend only - no backend implementation needed
- Only change fonts, keep all other styling

Build complete working website using HTML/CSS/JS ONLY.

React 생성 방지 및 수정 요청

리액트로 계속 생성시 수정 요청 프롬프트:

Stop! Please rebuild this using ONLY HTML, CSS, and vanilla JavaScript.

DO NOT use React, JSX, or any frameworks.

Create these files instead:
- index.html (main HTML file)
- style.css (CSS styles)
- script.js (JavaScript functionality)

Use pure HTML/CSS/JS only. No React components.

더 강하게:

Convert this to pure HTML/CSS/JavaScript.

Remove all React code and JSX.
Create standard HTML files only.
No frameworks allowed.

예방책 - 프롬프트 맨 앞에 추가:

IMPORTANT: Use HTML/CSS/JS files ONLY. Do NOT create React app.

Clone this site...

[클로드 채팅공유](https://claude.ai/public/artifacts/3fb39c01-293f-4d55-9352-dd7193c034f2)