제12강 : 바이브코딩 기초 실습

투두리스트, 날씨 대시보드 등 3종 프로젝트 실습

주요 주제
실전 프로젝트 개요
  • • 투두리스트, 날씨 대시보드, 포트폴리오 등 3종 프로젝트 실습
  • • 바이브코딩 프롬프트 반복 실습 및 배포 경험

바이브코딩 실전 프로젝트

진행 방식
  • 프로젝트별 목표와 기능 정의 : 진행하고자 하는 프로젝트에 대한 PRD와 기술정의서를 작성합니다. 생성형 AI와 많은 대화를 통해서 최대한 구체적으로 작성합니다.
    '주의 사항'은 온라인 배포를 할 것인지, 데이터베이스가 필요한지 등에 따라서 난이도가 크게 달라진다는 점을 고려해야 합니다.
  • 프롬프트 설계 및 AI 기반 코드 자동 생성 : 커서 기반으로 폴더부터 모든 파일을 다 생성해주는 서비스를 사용할 것인지, 지피티 등을 이용하는 경우라면 직업 폴더 구조 등을 작성해야 합니다.
  • 결과 확인 및 코드/UX 반복 개선 : 한번에 제대로 되지 않습니다. 오류 메시지를 최대한 잘 확인되는 방식으로 진행하고, 수차레 반복에도 해결이 되지 않으면 tdd 방식을 고려합니다.
  • 완성 후 즉시 배포 및 공유
실습 프로젝트 예시
  1. 개인 할 일 관리 앱
    HTML, CSS, JavaScript(바닐라) | 난이도: ⭐⭐☆☆☆
    • 간단한 투두리스트 만들기
    • 로컬 스토리지로 데이터 저장
    • 드래그 앤 드롭으로 순서 변경
    • 완료/미완료 상태 토글
  2. 날씨 정보 대시보드
    JavaScript, API 연동 | 난이도: ⭐⭐⭐☆☆
    • 오픈웨더맵 API 사용
    • 현재 위치 기반 날씨 표시
    • 5일 예보 정보 제공
    • 깔끔한 UI/UX 디자인
  3. 간단한 포트폴리오 웹사이트
    HTML, CSS, 반응형 디자인 | 난이도: ⭐⭐☆☆☆
    • 자기소개 페이지
    • 프로젝트 갤러리
    • 연락처 폼
    • 모바일 친화적 레이아웃
TIP: 각 프로젝트는 프롬프트 → 코드 생성 → 실행 → 개선 과정을 반복합니다.
바이브코딩의 핵심은 ‘빠른 실습, 반복 학습’입니다.
생성형 AI를 위한 PRD(Product Requirements Document) 작성 원칙
생성형 AI를 위한 PRD 작성 원칙
1. 명확성 원칙 (Clarity First)
- 모든 기능에 대해 구체적인 입력/출력 명세 작성
- "적절히", "필요시", "유연하게" 등 모호한 표현 금지
- 각 기능마다 실제 데이터 예시 포함

2. 보안 우선 원칙 (Security First)
- 모든 API 엔드포인트에 대한 인증/인가 요구사항 명시
- 입력 검증 규칙 구체적으로 정의
- 환경변수 사용 필수 (하드코딩 금지)

3. 타입 안정성 원칙 (Type Safety)
- 모든 데이터 구조에 대한 타입 정의 포함
- any 타입 사용 금지
- 인터페이스/스키마 우선 설계

4. 단일 책임 원칙 (Single Responsibility)
- 각 API/컴포넌트마다 하나의 명확한 목적만 기술
- 기능 간 의존성 명시적으로 표현
- 한 섹션에서는 하나의 기능만 다루기
5. 계층 분리 원칙 (Layer Separation)
- Controller-Service-Repository 패턴 강제 적용
- 각 계층별 역할과 책임 명확히 구분
- 데이터 흐름 방향 명시

6. 에러 처리 표준화
- 모든 예외 상황에 대한 HTTP 상태 코드 지정
- 일관된 에러 응답 형식 정의
- 사용자 친화적 에러 메시지 포함

7. 테스트 가능성 우선
 - 의존성 주입을 통한 모듈 간 결합도 최소화
 - 각 기능별 테스트 케이스 요구사항 포함
 - Mock 가능한 외부 의존성 설계
생성형 AI를 위한 기술정의서 작성 원칙
생성형 AI를 위한 기술정의서 작성 원칙

1. PRD 기반 기술 스택 선택
- PRD의 요구사항을 분석하여 필요한 기술만 선택
- 정적 사이트: SSG (Next.js, Gatsby 등)
- 동적 웹앱: SSR 또는 풀스택 (Next.js, Nuxt.js 등)
- 데이터 분석/대시보드: Python 기반일 경우 Streamlit MVP 우선 고려
- API만 필요: Express.js, FastAPI 등
- 데이터 저장이 불필요하면 DB 제외

2. 초보자 배포 가능성 우선
- Git 연동 자동 배포 가능한 플랫폼 기술 조합 선택
- 복잡한 서버 설정이나 인프라 구축 필요한 기술 스택 배제
- 환경설정 최소화된 기술 우선

3. 프로젝트 규모별 기술 선택
- 소규모/개인: 단일 프레임워크 (Next.js, Nuxt.js, Streamlit)
- 중규모: 프론트+백엔드 분리 가능
- 대규모: 마이크로서비스 고려 (하지만 바이브코딩에서는 비추천)

4. 외부 서비스 활용 우선
- 직접 구현보다 검증된 서드파티 서비스 우선 선택
- 인증, 결제, 파일 업로드 등은 외부 서비스 권장
- API 키 기반 간단 연동 가능한 서비스 우선

5. 개발 복잡도 최소화
- 설치/설정 단계 최소화된 기술 선택
- 보일러플레이트 코드 최소화
- IDE나 에디터에서 바로 실행 가능한 구조

6. 확장성보다 단순성 우선
- 초기 버전에서는 성능 최적화, 확장성 고려 제외
- 모놀리식 구조 우선, 마이크로서비스 지양
- 프리미엄 기능보다 기본 기능 활용

7. 문서화된 기술 스택 우선
- 튜토리얼과 예제가 풍부한 기술 선택
- 커뮤니티가 활발하고 문제 해결 자료가 많은 기술 우선
- 공식 문서가 초보자 친화적인 기술 선택