스터디 테마에는 맞지 않지만 지금 당장 필요한 것들을 만드는데 토큰을 사용하고 싶어서 계속 작업한 내용으로 게시글 올립니다.
## 📝 한줄 요약
메모앱과 채팅에 분산되어 있던 정보를 한 곳에 모으고 싶어서, Claude Code로 직접 웹앱을 5일 만에 만든 이야기입니다.
**바쁘시면 이것만 읽어도 돼요:**
- Claude Code + `/show-me-the-prd` + `/kkirikkiri`로 10개 탭 웹앱 5일 완성
- 기획서를 먼저 만들면 AI가 훨씬 일관성 있게 코딩해준다
- 빌드 도구 없이 Vanilla JS + Firebase로 실용적인 웹앱 완성
- 에이전트 2명이 동시에 작업하는 걸 처음 보고 "이게 되네?" 싶었다
- 다음 단계는 모바일 앱 전환
---
## 🎯 이런 분들께 도움돼요
- 직접 만든 도구를 써보고 싶은 분
- Claude Code를 한 번도 안 써봤거나 막 시작하려는 분
- 빌드 도구 없이 가볍게 웹앱 만들어보고 싶은 분
---
## 😫 문제 상황 (Before)
특정 주제로 준비할 일이 생기면 정보가 여기저기 흩어진다. 카카오톡 대화에 업체 연락처, 메모앱에 할 일 목록, 스프레드시트에 예산 계산, 또 다른 메모앱에 아이디어. 뭔가 확인하려면 앱을 네다섯 개 열어야 했다.
기존 도구들을 써봤는데 딱 원하는 방식이 아니거나 기능이 부족했다. 그래서 든 생각이 "그냥 내가 원하는 대로 만들면 되지 않나?"였다.
마침 Claude Code를 제대로 써볼 기회를 찾고 있었다. 실제 쓸 만한 앱을 만들어보면서 AI 코딩 도구의 한계와 가능성을 직접 확인해보고 싶었다.
---
## 🛠️ 사용한 도구
- **AI 코딩**: Claude Code (claude-sonnet-4-6)
- **기획 스킬**: `/show-me-the-prd` - 인터뷰 기반 PRD 자동 생성
- **멀티에이전트**: `/kkirikkiri` - 에이전트 팀 자동 구성 및 병렬 실행
- **기술 스택**: Vanilla JS ES Modules, Firebase (Firestore + Auth), CSS Variables
---
## 🔧 작업 과정
### Day 1 - "만들기 전에 계획부터"
무작정 "웹앱 만들어줘"라고 하지 않았다. 먼저 `/show-me-the-prd` 스킬을 실행했다.
```
체크리스트, 예산 관리, 업체 관리, 하객 관리 등을 한 곳에서 관리할 수 있는 웹앱을 만들어보고 싶어.
```
그러자 AI가 5번의 인터뷰를 진행했다. 어떤 기능이 필요한지, 어떻게 데이터를 구조화할지, 어떤 기술 스택을 쓸지. 그 결과로 기획서 4종류가 자동으로 만들어졌다. 제품 요구사항 문서, 데이터 모델, 개발 단계 계획, 기술 스펙.
기획서가 있으니까 그 다음부터는 AI에게 "이 기획서 기반으로 구현해줘"라고 할 수 있었다. 방향이 잡혀있으니 결과물도 훨씬 일관성이 있었다.
---
### Day 2-4 - "에이전트 2명이 동시에 일한다고?"
체크리스트 탭부터 구현을 시작했다. `/kkirikkiri` 스킬로 "체크리스트 탭 만들어줘"라고 하니까 자동으로 팀이 구성됐다.
```
체크리스트 탭 만들어줘. 담당자 지정이랑 마감일 기능 포함해서.
```
데이터 레이어 담당 에이전트 1명, UI 구현 담당 에이전트 1명. 둘이 동시에 작업하는 걸 처음 봤을 때 "이게 되네?"라는 생각이 들었다. 한 명이 Firebase 함수 짜는 동안 다른 한 명이 화면 레이아웃을 만들었다.
같은 방식으로 탭을 하나씩 늘려갔다. 예산, 업체, 창작, 무드보드, 하객, 축의금, 설정, 관리, 홈 대시보드. 매번 비슷한 과정이었다.
```
업체 탭 만들어줘. 카테고리별 계약 체크리스트 기능 포함해서.
```
```
하객 탭 만들어줘. 관계(직장/친구/가족)랑 신랑측/신부측 분류 필드 추가해줘.
```
---
### Day 5 - 디테일 다듬기
큰 틀을 잡고 나서도 마찬가지로 각 탭에 대해서 기획 스킬과 멀티 에이전트 스킬을 반복했다.
처음에는 직접 앱을 검토해보면서 하나하나 지시사항을 달아서 전달했지만,
내가 알고 있는 내용에 한계가 있다는 생각이 들었다.
그래서 맨 처음 틀을 잡을 때 했던 것과 마찬가지의 작업을 세부 탭에서도 반복했다.
그 다음은 지시하고 다 될때가지 기다리고, 또 지시하고 다 될때까지 기다림의 연속이었다.
하지만 생산성은 그 어느때보다도 높았고 웹앱은 점점 더 고도화되었다.
---
## ✅ 결과 (After)
### Before vs After
| 항목 | Before | After |
|------|--------|-------|
| 정보 위치 | 메모앱, 카카오톡, 스프레드시트 분산 | 웹앱 한 곳에 통합 |
| 제작 방식 | - | Vanilla JS + Firebase, 빌드 도구 없음 |
| 소요 시간 | - | 5일 (Day 1 기획 포함) |
| 완성 기능 | - | 10개 탭, 수십 개 기능 |
### 결과물
- 체크리스트: 담당자 지정, 마감일, 카테고리, 진행률
- 예산: 계약금/잔금 분리 관리, 납부일 알림, 카테고리 인사이트
- 업체: 비교 모달, 계약 체크리스트
- 하객: 관계/측 분류, 인원 집계
- 축의금: 총액/평균/최고 통계
- 홈 대시보드: D-Day, 오늘 할 일, 전체 진행률
---
## 💬 이 과정에서 배운 AI 활용 팁
### 효과적이었던 것
1. **기획서를 먼저 만들어라**: `/show-me-the-prd`로 PRD 만들고 시작하니까 AI가 일관성 있게 코딩했다. 기획서 없이 바로 "만들어줘" 했을 때보다 결과물 품질이 눈에 띄게 달랐다.
2. **탭 하나씩 위임해라**: 전체를 한꺼번에 요청하지 않고 탭 단위로 나눠서 에이전트에게 넘겼다. 범위가 작을수록 더 정확하게 만들어줬다.
3. **"다른 곳도 확인해줘"가 통한다**: 버그 하나를 고치고 나서 "다른 탭들도 같은 문제 있는지 봐줘"라고 하면 전체를 다 뒤져준다. 패턴 기반 수정이 편리하다.
4. **CLAUDE.md에 컨벤션을 적어둬라**: 모달 패턴처럼 반복되는 규칙을 문서에 적어두면 AI가 매번 같은 패턴으로 만들어준다.
### 이렇게 하면 아쉬울 수 있어요
1. 기획 없이 바로 코딩 요청: 나중에 수정 범위가 커진다.
2. 너무 많은 기능을 한 번에 요청: 범위를 나눌수록 품질이 올라간다.
---
## 🌍 다른 상황에 적용한다면?
같은 방식을 "원하는 도구가 없어서 직접 만들고 싶은" 어떤 상황에든 쓸 수 있다.
- 팀 내부용 현황 대시보드
- 반복 업무 추적 도구
- 특정 분야 전용 체크리스트 앱
핵심은 "기획서 먼저, 구현은 탭/기능 단위로 나눠서"다.
---
## 🚀 앞으로의 계획
이 웹앱을 당장 필요성에 따라 만들어진만큼 사용성이 반영되면서 점점 더 발전될 수 있기에 나중에는 모바일 앱으로 배포하는 작업도 해보고 싶다.
Claude code와 함께라면 못할게 없다는 자신감이 생겼다..
---
## 📋 재사용 가능한 프롬프트
### 프롬프트 1: 기획서 생성 (show-me-the-prd 스킬)
> [만들고 싶은 앱을 한 문장으로]을 만들어보고 싶어. 주요 기능은 [기능1], [기능2], [기능3]이야.
> `/show-me-the-prd`로 기획서 먼저 만들어줘.
### 프롬프트 2: 탭/기능 단위 구현 (kkirikkiri 스킬)
> [탭 이름] 탭 만들어줘.
> 핵심 기능: [기능 설명]
> 기존 기획서와 코딩 컨벤션 참고해서 일관성 있게 만들어줘.
### 프롬프트 3: 버그 패턴 일괄 수정
> [탭 이름]에서 [버그 설명] 문제가 있어. 고쳐줘.
> 다른 탭들도 같은 문제 있는지 전부 확인하고 일괄 수정해줘.
