👀 시도하고자 했던 것과 그 이유
아침 일찍 카페에서 하루를 시작하고 싶은데, 매번 "강남 새벽 카페", "성수동 아침 카페"를 검색하는 게 너무 비효율적이었습니다.
카카오맵으로 검색해도 영업시간 필터가 없어서, 지도에 뜨는 카페를 하나하나 열어보며 "이 카페 7시에 여나?" 확인해야 했습니다.
네이버지도에는 영업시간 필터가 있지만, 프랜차이즈보다는 이쁜 개인 카페를 가고싶었어요,,
그래서 직접 만들기로 했습니다.
모닝커피 — 서울에서 아침 일찍(6~8시) 여는 카페만 카카오 지도에서 한눈에 찾아주는 웹앱
🔗 https://morning-cafe-phi.vercel.app
핵심 기능:
- 시간대 필터: ~6시 / 6~7시 / 7~8시 원하는 오픈 시간대만 필터
- 요일별 영업시간: 주말과 평일 오픈 시간이 다른 카페도 정확히 표시
- 25개 구별 필터: 강남구, 마포구 등 원하는 지역만 빠르게
- 체인/개인 필터: 개인 카페만 보기
- 바텀시트 상세: 사진, 메뉴, 별점, 주차, 편의시설 한눈에
- 카카오톡 공유: 발견한 카페를 친구에게 OG 이미지와 함께 공유
- PWA: 홈 화면에 추가하면 네이티브 앱처럼 사용
한국의 레스토랑 위치를 보여주는 지도
노란 점이 많은 한국 지도
📖 진행 방법
사용한 도구
Claude Code (CLI) | 전체 코딩, 아키텍처 설계, 디버깅, 마케팅 문서 작성
Next.js 16 (App Router) | 프론트엔드 프레임워크
Supabase (PostgreSQL) | 카페 데이터 DB
카카오맵 SDK | 지도 렌더링 + 마커
Tailwind CSS 4 | 스타일링
Zustand 5 | 클라이언트 상태 관리
Vercel | 배포
Serwist | PWA 서비스 워커
Claude Code 활용법
전체 개발 과정을 Claude Code CLI로 진행했습니다. 코드 작성부터 아키텍처 결정, 버그 디버깅, 성능 최적화, SEO, 마케팅 문서까지 하나의 도구로 처리했습니다.
서울 카페 데이터를 Supabase에 저장하고,
카카오 지도 위에 마커로 표시하는 웹앱을 만들어줘.
핵심 기능: 시간대별 필터, 구별 필터, 체인/개인 필터.
모바일 우선, PWA 지원.
기술 스택: Next.js App Router, TypeScript, Tailwind, Zustand, Supabase.
Claude Code가 프로젝트 구조, Supabase 스키마, Zustand 스토어 설계까지 한번에 잡아줬습니다.
핵심 팁: CLAUDE.md 파일
프로젝트 루트에 CLAUDE.md 파일을 상세하게 작성해두면, Claude Code가 프로젝트 맥락을 정확히 이해합니다. 저는 여기에 다음을 기록했습니다:
- 프로젝트 구조 + 파일별 역할
- Zustand 스토어 아키텍처 (파생 상태 규칙)
- z-index 순서, 레이아웃 규칙
- 코딩 컨벤션 19개 항목
- API 엔드포인트 스펙
- 알려진 제약 + TODO
이게 있으면 Claude Code가 "이 프로젝트에서는 이렇게 해야 한다"를 정확히 알고, 일관된 코드를 생성합니다. 바이브코딩의 핵심은 CLAUDE.md입니다.
🥸 결과와 배운 점
배운 점과 꿀팁
1. CLAUDE.md가 바이브코딩의 80%다
프롬프트를 아무리 잘 써도, 프로젝트 컨텍스트가 없으면 Claude Code가 매번 다른 방향으로 갑니다. CLAUDE.md에 아키텍처, 컨벤션, 제약사항을 정리해두면 일관된 코드가 나옵니다. 저는 19개 코딩 컨벤션을 여기에 기록했고, Claude Code가 이걸 매번 참조합니다.
2. 작게 요청하고, 빌드로 검증하기
한번에 큰 기능을 요청하면 엉킵니다. "필터 만들어줘" → "시간 필터 칩 UI 만들어줘" → "필터 변경 시 마커 업데이트 연결해줘" 이렇게 쪼개서 요청하고, 매번 npm run build로 깨지는 게 없는지 확인합니다.
3. 에러가 나면 그대로 Claude Code에 붙여넣기
빌드 에러, 런타임 에러가 나면 에러 메시지를 그대로 붙여넣으면 됩니다. "이 에러 고쳐줘" 한 마디면 컨텍스트를 파악하고 수정합니다. 특히 TypeScript 타입 에러는 Claude Code가 사람보다 빠릅니다.
시행착오
1. 3,000개 마커 메모리 폭발
처음에 전체 카페 마커를 한번에 렌더링했더니 모바일에서 화면이 멈췄습니다. Claude Code에 성능 문제를 설명했더니 뷰포트 기반 필터링 + 250ms 쓰로틀 + SVG 마커 캐싱 조합을 제안했고, 적용 후 부드럽게 동작합니다.
앞으로의 계획
- 카페 사장님 직접 등록 기능 (공급자 참여)
- 카페 데이터 자동 갱신 크롤링
- 인스타그램에 구별 아침 카페 카드뉴스 연재
- 사용자 리뷰 / 아침 카페 추천 커뮤니티
도움 받은 글
- Claude Code 공식 문서: https://docs.anthropic.com/en/docs/claude-code
- Anthropic CLAUDE.md 작성 가이드 (프로젝트 컨텍스트 설정)
