FASSTO Herald 개발기 Claude Code 바이브코딩으로 9일 만에 프로덕션 서비스 만들기

해결하려는 문제

기존 업데이트 공지 프로세스에는 여러 문제가 있었습니다:

1. 개발팀이 릴리즈 내용을 간단히 정리하여 Slack 채널에 공지하는 방식이었고, 별도로 이메일을 보내지 않았습니다.
2. 정리된 내용이 상세하지 않아, 배경을 모르는 비개발자는 어떤 업데이트인지 파악하기 어려웠습니다.
3. 지나간 Slack 공지는 다시 찾아보기 어려워 업데이트 여부가 잘 인지되지 않았습니다.
4. 기능 개선을 요청했던 담당자도 본인의 요청이 반영되었는지 알기 어려웠습니다.

도구를 직접 만든 이유

솔직히 말하면, 이런 용도에 딱 맞는 SaaS 도구는 찾지 못했습니다. JIRA Release Note 파싱 + AI 변환 + Slack 연동 + 이메일 발송이라는 조합은 우리 조직의 워크플로우에 특화된 것이었고, 범용 도구로는 해결이 안 되는 영역이었습니다.

"그냥 코딩해줘"가 아니라 "설계부터 구현까지"

바이브코딩의 가장 큰 함정은 방향 없이 코드만 생성하는 것입니다. 이 프로젝트에서는 Speckit이라는 Claude Code 커스텀 슬래시 커맨드 세트를 활용하여 기획 → 설계 → 구현을 체계적으로 진행했습니다.

각 단계가 하는 일

왜 인프라가 3번이나 바뀌었을까?

바이브코딩의 장점 중 하나는 인프라 마이그레이션도 빠르게 할 수 있다는 것입니다. 각 전환은 Claude Code에게 "DB를 MySQL로 바꾸고 S3 업로드로 교체해줘" 같은 지시로 진행했고, 각각 1~2시간 내에 완료되었습니다.

왜 최종적으로 Vercel을 선택했는가

• 빠른 배포 편의성: git push origin main 한 번이면 프로덕션 배포 완료. EKS 대비 운영 부담이 제로.
• 간단한 서비스 특성: 소규모 내부 도구(사용자 <100명)로, EKS 클러스터를 운영할 필요가 없었음.
• 내부 시스템 조작 불필요: DB 조회만 하고 내부 운영 시스템에 쓰기 작업이 없어, VPN/내부망 접근이 필요 없었음.
• DevOps 요청 최소화: 가장 마지막에 herald.fassto.ai 도메인의 DNS만 Vercel로 연결해달라고 DevOps에 요청. 나머지는 모두 셀프 서비스.

최종 아키텍처

1단계: 클로드 채팅으로 PRD 다듬기

프로젝트의 시작은 코드가 아니라 요구사항 정리입니다. Claude 채팅(claude.ai)에서 만들고 싶은 서비스에 대해 여러 번 대화하며 요구사항을 다듬었습니다. "이런 도구가 필요해", "사용자 흐름은 이렇게", "이런 기능도 있으면 좋겠어" 같은 대화를 반복하며 어느 정도 정리되면 Markdown으로 다운로드하여 feature-spec.md로 저장합니다.

2단계: Speckit으로 구조화된 스펙 생성

1단계에서 다운로드한 feature-spec.md를 프로젝트에 넣고, Claude Code에서 /speckit.specify를 실행합니다. 이 문서를 참조하여 User Story, 수용 기준, 엣지 케이스가 자동 생성됩니다.

3단계: 구현 중 피드백 — TODO.md 패턴

초판 구현 후에는 실제 사용하면서 발견한 문제와 요청을 TODO.md에 적고, Claude Code에게 한 번에 또는 하나씩 처리하도록 요청했습니다.

효과적인 프롬프트의 공통점

CLAUDE.md가 중요한 이유

CLAUDE.md는 Claude Code가 프로젝트를 이해하는 영구 컨텍스트입니다. 대화가 길어져도, 새 세션을 열어도, 이 파일의 내용은 항상 유지됩니다. 이 프로젝트에서는 CLAUDE.md에 다음을 담았습니다:

실제 CLAUDE.md 구성 (149줄)

Design System 섹션 예시

## Design System (MANDATORY)

### Color Palette
Primary Gradient:  from-blue-600 to-purple-600
Background:        from-slate-50 via-blue-50/30 to-purple-50/30
Card:              bg-white/80 backdrop-blur-sm

### Category Colors
| 카테고리 | Badge Gradient |
| 기능 개선 | from-blue-100 to-blue-200 text-blue-700 |
| 버그 수정 | from-red-100 to-red-200 text-red-700   |

### Glassmorphism Pattern
bg-white/80 backdrop-blur-sm rounded-3xl shadow-xl border border-white/60

### Icons (lucide-react)
인증: Mail, Lock, User, CheckCircle, AlertCircle
편집: Edit2, Trash2, GripVertical, Merge

Figma Make 프롬프트도 Claude Code로 생성

Figma의 AI 기능(Make)으로 화면 디자인을 빠르게 만들었는데, 이때 Figma Make에 넣을 프롬프트 자체도 Claude Code로 생성했습니다. 서비스의 기능 명세와 브랜딩 가이드를 참조하여 각 화면에 맞는 디자인 프롬프트를 만들어주므로, 일관된 디자인 언어를 유지할 수 있었습니다.

1:1 구현: 화면별로 Figma와 비교

단순히 "Figma 디자인을 참고해서 구현해줘"라고 하면 디자인이 온전히 반영되지 않습니다. 화면 하나하나를 Figma와 1:1로 비교하여 동일하게 구현하도록 명시적으로 지시했습니다.

작동 흐름

가장 중요한 단계

구현이 끝났다고 바로 사용할 수 있는 것이 아닙니다. Playwright를 이용한 자동 테스트로 기본적인 런타임 오류를 먼저 잡고, 그 다음에 직접 개발 서버를 실행하여 수동으로 테스트하는 2단계 QA 사이클을 반복했습니다.

Playwright 테스트 프롬프트

구현 완료 후 Claude Code에게 Playwright E2E 테스트를 실행하도록 요청합니다. 오류가 발견되면 바로 수정하게 하여 기본적인 런타임 에러를 제거합니다.

수동 테스트 → TODO.md → 개발 요청

Playwright 테스트가 통과하면, 그제서야 직접 개발 서버(pnpm dev)를 실행하고 브라우저에서 수동으로 테스트합니다. 이 과정에서 발견한 UI 이슈, UX 개선점, 기능 변경사항을 TODO.md에 수기로 정리하고, 다시 Claude Code에 개발을 요청합니다.

Playwright로 사용자 매뉴얼 자동 생성

모든 개발과 QA가 완료된 후, Playwright를 테스트가 아닌 스크린샷 캡처 도구로 활용하여 사용자 매뉴얼을 자동으로 생성했습니다. 각 화면을 순서대로 캡처하고, 캡처된 이미지를 기반으로 HTML 매뉴얼 페이지까지 Claude Code가 작성합니다.

잘 된 것

• Speckit 워크플로우가 방향을 잡아줬습니다. specify → plan → tasks → implement → simplify 순서를 따르니 "이제 뭘 해야 하지?"라는 막막함이 사라졌습니다.
• CLAUDE.md의 디자인 시스템이 일관성을 유지했습니다. 6개 화면 모두 같은 색상/타이포/패턴을 사용하여 통일된 UI를 확보했습니다.
• TODO.md 기반의 반복적 피드백이 효율적이었습니다. 실사용 중 발견한 45개+ 이슈를 체계적으로 추적하고 해결했습니다.
• 인프라 마이그레이션이 빠르게 진행되었습니다. 3번의 인프라 변경(SQLite → MySQL → Neon)을 각 1~2시간 안에 완료. 코드 변경은 Claude가 처리하므로 의사결정에 집중할 수 있었습니다.
• Playwright + 수동 테스트 사이클이 품질을 보장했습니다. 자동 테스트로 기본 오류를 빠르게 잡고, 수동 테스트로 UX를 다듬는 2단계 접근이 효과적이었습니다.

주의할 점

• 초기 기술 스택 결정을 신중하게. 인프라를 3번 바꿨는데, 처음부터 배포 환경을 확정했으면 2일을 절약했을 것입니다. plan 단계에서 "실제 운영은 어디에?"를 반드시 결정하세요.
• AI 변환 프롬프트는 반복 튜닝이 필요합니다. JIRA 티켓을 비개발자용으로 바꾸는 프롬프트는 5~6번 수정했습니다. "분량을 2배로", "효용성을 더 구체적으로" 같은 피드백을 반복했습니다.
• 외부 API 인증 문제는 Claude가 해결하기 어렵습니다. Google OAuth 설정, JIRA API 토큰 발급 등은 직접 콘솔에서 작업해야 합니다. Claude는 코드만 작성해 줄 수 있으므로, 인증 설정 가이드를 따로 준비하세요.
• 보안 정보 관리에 주의. TODO.md에 실수로 Client Secret을 기록한 적이 있습니다. 민감 정보는 .env에만, .gitignore에 반드시 포함하세요.

프로젝트 규모 대비 생산성 지표

JIRA, Slack, Gmail, Anthropic Claude, Vercel Blob — 5개의 외부 서비스 연동을 포함한 풀스택 서비스

이런 도구를 만들어 보세요

업무에서 "이거 왜 매번 수동으로 해야 하지?" 라고 느끼는 순간이 있다면, 그것이 자동화 도구의 후보입니다. 몇 가지 예시:

시작하기 체크리스트