빌드 케이스: 위너책쓰기 AI 프롬프트 사이트¶
바이브 코딩으로 사이트 만들기 - 두 번째 케이스 (2026-02-28) 첫 번째 케이스: sigil-css-guide (D:\sigil-css-guide) 이 문서는 "이때는 이렇게 했다"는 기록이자, "다음엔 더 잘할 수 있는 포인트"를 함께 담는다.
프로젝트 개요¶
- 사이트: https://winner-writing.vercel.app
- 목적: 위너책쓰기 7주 코칭 수강생용 AI 프롬프트 레퍼런스
- 핵심 기능: 카테고리별 프롬프트 찾기 → 복사 → 바로 사용
- 소요 시간: 1세션 (기획안 준비된 상태에서 시작)
기술 스택과 선택 이유¶
| 선택 | 이유 |
|---|---|
| Astro 5.x | 정적 콘텐츠 사이트에 최적. 마크다운 → HTML 자동 변환. sigil-css-guide에서 검증됨 |
| Content Collections | 마크다운 파일 수정만으로 콘텐츠 업데이트 가능 (비개발자 친화적) |
| 순수 CSS | 외부 라이브러리 없이 1285줄로 전체 디자인. 빌드 빠르고 의존성 0 |
| Vanilla JS | interactions.ts 하나로 카드/복사/토글 처리. 프레임워크 불필요 |
| Vercel | GitHub push → 자동 배포. 무료. 모노레포 지원 |
작업 흐름 (이 순서가 효율적이었음)¶
1. 기획안 준비 (docs/기획안.md)
2. 프로젝트 초기화 (Astro)
3. 틀 먼저 + 샘플 1개 → 로컬 확인
4. 사용자 피드백 → 디자인 수정
5. 나머지 콘텐츠 병렬 채우기 (4개 에이전트 동시)
6. 세부 조정 (배지, 카피, CTA)
7. 구조 점검 → GitHub → Vercel 배포
핵심 원칙: 틀 먼저, 샘플로 확인, 나머지 채우기 - 31개를 다 만들고 수정하면 비용이 큼 - 1개로 확인 후 나머지를 병렬로 채우는 게 효율적
프로젝트 구조¶
apps/ai-prompt/
├── src/
│ ├── content/prompts/ ← 마크다운 프롬프트 (수강생이 편집할 곳)
│ │ ├── planning/ (8개)
│ │ ├── writing/ (8개)
│ │ ├── editing/ (6개)
│ │ ├── title/ (5개)
│ │ └── promotion/ (4개)
│ ├── data/categories.ts ← 카테고리 한 곳 관리 (추가/순서 변경 여기만)
│ ├── components/ ← 3개 (PromptCard, Sidebar, MobileNav)
│ ├── layouts/ ← BaseLayout 1개
│ ├── pages/ ← 카테고리별 페이지 + 홈 + 팁
│ ├── styles/global.css ← 전체 디자인 1파일
│ └── scripts/interactions.ts ← 전체 JS 1파일
├── content.config.ts ← Content Collections 스키마
└── astro.config.mjs
핵심 설계 결정들¶
1. 카테고리 데이터 중앙화 (categories.ts)¶
- 한 파일 수정하면 사이드바, 홈 카드, 모바일 탭, STEP 번호 전부 자동 반영
- 새 카테고리 추가 = 1줄 추가 + 페이지 파일 1개 + 프롬프트 md 파일들
2. 마크다운 컨벤션¶
---
title: "프롬프트 제목"
category: planning
description: "한 줄 설명"
order: 1
badge: "AI 역할"
---
## 프롬프트 템플릿
(복사할 프롬프트)
## 완성 예시
(접이식)
## 활용 팁
(접이식)
## 변형
(접이식, 선택)
3. 카드 → 상세 패널 패턴¶
- 그리드에서 카드 클릭 → 해당 행 아래에 상세 패널 삽입
- 별도 페이지 이동 없이 같은 화면에서 확인/복사
- interactions.ts의 insertAfterGridRow()로 구현
4. AI 역할 배지¶
- 처음: 필수/추천 라벨 → 주관적이라 폐기
- 최종: 프롬프트별 고유 AI 역할 (출판 기획자, 스토리텔러 등)
- 모든 카드에 적용, 카드마다 다른 내용 → 시각적 통일성 + 다양성
피드백 → 수정 과정 (바이브 코딩의 핵심)¶
| 피드백 | 수정 |
|---|---|
| 히어로가 밋밋해 | 그라데이션 배경 + 숫자 스탯 추가 |
| 필수/추천 라벨이 주관적 | → AI 역할 배지로 전환 |
| 카테고리별 배지가 다 같으면 재미없어 | → 프롬프트별 고유 역할 |
| 메인 카피가 아쉬워 | → 여러 방향 제안 → 대화로 다듬기 |
| 글이 너무 많아 보여 | → 설명문 제거, 2줄로 압축 |
패턴: 사용자가 "아쉬운데 설명 못하겠어" → 여러 방향 제안 → 골라서 다듬기
배포 체크리스트¶
- [x] git email = mintmaum07@gmail.com (Vercel 계정 일치)
- [x] .gitignore: node_modules, .astro, .claude, dist, .vercel, *.pdf
- [x] 브랜치: main
- [x] Vercel Root Directory: apps/ai-prompt
- [x] 빌드 확인 후 push
다음에 더 잘할 수 있는 포인트¶
디자인¶
- Tailwind CSS 도입 검토 — 유틸리티 클래스가 빠른 반복에 유리할 수 있음
- 다크 모드 지원
- 모바일 히어로 텍스트 크기 최적화 (이번에 미처 안 함)
- OG 이미지 자동 생성 (satori 등)
구조¶
- 카테고리별 페이지가 거의 동일한 코드 → 동적 라우팅
[category].astro로 통합 가능 - 프롬프트 count를 categories.ts에 하드코딩 → 빌드 시 자동 계산으로 전환
- 검색 기능 추가 (프롬프트가 50개 넘어가면 필요)
콘텐츠¶
- 프롬프트 품질 검수 (실제 AI에 넣어보고 결과 확인)
- 완성 예시를 더 많은 프롬프트에 추가
- 사용자 피드백 수집 기능 (간단한 폼)
기술 도전¶
- 프로젝트마다 같은 스택만 쓰지 않기 — Next.js, SvelteKit, 11ty 등도 시도
- 인터랙티브 요소가 많은 사이트는 React/Svelte 고려
- CMS 연동 (Notion, Sanity 등) — 마크다운 직접 수정 대신