받은 아이디어를 세 시간 만에 배포까지 — Claude Code로 만든 ADHD 스크리닝 서비스
라이브
첫 섹션은 누구나 읽을 수 있어요. 나머지 섹션의 전문·프롬프트 원문·Q&A는 라이브 프리미엄 멤버십 회원 전용이에요.
시청자가 보내 준 아이디어를 라이브에서 대신 만들어 주는 회차였어요. 주제는 ADHD 자가 검사와 집중력 테스트를 한데 모은 서비스 Focus-OS예요. 기획 문서에서 시작해 온보딩, 회원가입, 스크리닝 검사, 대시보드, 미니 테스트를 만들고 배포까지 했어요. 코딩은 쓴 지 사흘 된 Claude Code에 맡겼어요.
이 노트를 읽고 나면 할 수 있는 것
- 아이디어 문서에서 MVP 기능 다섯 개를 고르고, 기능마다 페이지 경로를 붙여 범위 정하기
- AI가 쓴 기획·기술 문서를 다른 AI에게 검토시킨 뒤, 룰 파일과 함께
CLAUDE.md에 연결해 Claude Code가 읽게 하기 - Supabase MCP 없이 마이그레이션 SQL로 DB를 만들고, 막히면 화면 증상과 에러 원문을 글로 넘겨 고치게 하기
Opus 4·Sonnet 4 시절, Claude Code를 VS Code 확장으로 처음 붙여 쓰던 때의 기록이에요. 그 뒤로 바뀐 기본값이나 화면 밖에서 확인한 사실은
보충으로 따로 적었어요.
2025-07-17 라이브 · 3시간 18분 · 다시보기
목차
- 받은 아이디어에서 무엇을 남길까요 ▶ 0:03:01
- 문서는 Vooster가 쓰고 Gemini가 다듬어요 ▶ 0:14:22
- Claude Code를 켜기 전에 깔아 둔 것 ▶ 0:28:41
- Supabase MCP 없이 DB 다루기 ▶ 0:48:03
- 모르는 분야는 딥 리서치로, 데이터는 JSON으로 ▶ 0:55:13
- 태스크를 쪼개고 "다음 작업 진행해 줘" ▶ 1:08:57
- 온보딩에서 두 번 막혔어요 ▶ 1:34:06
- 디자인 가이드는 룰로 한 번 만들어 둬요 ▶ 1:40:51
- 검사지 문서를 붙이니 결과지까지 ▶ 2:18:42
- 미니 테스트 — 0.25초는 너무 빨랐어요 ▶ 2:38:49
- 배포는 Vercel CLI로 ▶ 3:08:38
- Q&A ▶ 0:59:15
- 오늘 해볼 것 ▶ 3:18:01
받은 아이디어에서 무엇을 남길까요 ▶ 0:03:01
신청서 제목은 "ADHD 개선과 집중력 향상을 위한 종합 플랫폼"이었어요 ▶ 0:05:26. 레퍼런스 서비스와 기능 목록까지 자세히 적혀 있었어요. 온보딩, 초진 스크리닝, 집중력 미니 테스트, 결과 대시보드, 데일리 기록 같은 것들이요.
서비스 형태는 PWA 웹앱으로 적혀 있었어요. PWA는 스마트폰 홈 화면에 앱처럼 아이콘을 추가할 수 있는 웹이에요 ▶ 0:07:53. 만드는 방식은 웹과 같아서 그냥 웹으로 정했어요.
기능은 다 만들지 않고 네다섯 개만 골랐어요 ▶ 0:07:41. PDF 내보내기는 가장 중요한 기능이 아니라서 미뤘어요 ▶ 0:12:50.
웹페이지로 만들 거라면, 저는 경로를 뽑아 보는 걸 좋아해요. 페이지 단위니까요. ▶ 0:13:15 기능 이름 옆에 /screening, /dashboard 같은 주소를 적으면 만들 화면 개수가 바로 보여요.
도구도 정했어요. 코딩은 Claude Code예요. Cursor 사용량을 다 써 버려서 Auto 모드밖에 못 쓰는 상황이었어요 ▶ 0:09:28. 대화형 AI는 둘을 나눠 써요. ChatGPT는 아이디에이션이나 자료 조사처럼 살을 붙여야 할 때, Gemini는 하려는 게 정해져 있을 때 검증하고 최적화할 때 써요 ▶ 0:11:00.