AI와 함께 0원으로 PWA를 만든 이야기
100+ 메뉴 데이터, 룰렛 추첨, 다크모드, 날씨 연동까지
"오늘 점심 뭐 먹지?" — 이 질문은 매일 반복되지만 답을 내리기가 여간 어렵지 않습니다. 메뉴는 수십 가지인데 막상 고르려면 아무것도 떠오르지 않고, 팀원들의 취향도 제각각이라 결정 장애가 생기기 마련입니다.
저 역시 매일 12시가 되면 "오늘은 뭐 먹지?"로 10분을 낭비하고 있었습니다. 그러다 문득 생각했습니다. "직장인 점심 메뉴 추천 서비스를 만들면 어떨까?"
그렇게 jikjang.vercel.app이 탄생했습니다. 서버 비용 0원, 개발 비용 0원, 하지만 기능은 꽉 채운 PWA 서비스입니다.
모든 기술 스택이 무료 — 월 운영 비용 0원
Next.js, React 같은 프레임워크를 쓸 수도 있었습니다. 하지만 정적 HTML/CSS/JS를 선택한 이유가 있습니다.
PWA로 Service Worker까지 추가하니 오프라인에서도 동작하고, 홈 화면에 설치까지 됩니다. "0원짜리 앱"이 완성된 순간이었습니다.
처음에는 Canvas API로 원형 룰렛을 그렸습니다. 데스크톱에서는 잘 돌아갔지만, 모바일에서 애니메이션이 뚝뚝 끊기는 문제가 생겼습니다. 특히 저사양 안드로이드 기기에서 Canvas 렌더링이 버벅거렸고, requestAnimationFrame 루프가 배터리를 과도하게 소모했습니다.
Canvas 성능 문제를 Claude에게 설명했더니, CSS 3D transform을 활용한 드럼 롤 방식을 제안해줬습니다. perspective와 rotateX를 이용해 세로 방향으로 메뉴가 회전하는 드럼 롤 UI를 CSS 애니메이션만으로 구현했습니다.
"CSS 3D 애니메이션은 GPU 합성 레이어로 처리되어 CPU 부담이 없고, 모바일에서도 60fps를 유지합니다. will-change: transform을 추가해 미리 레이어를 준비하면 더욱 부드러워집니다."
결과적으로 CSS 3D 드럼 롤 방식이 훨씬 부드럽고 에너지 효율도 좋았습니다. 코드 양도 오히려 줄었습니다.
날씨에 따라 먹고 싶은 음식이 달라집니다. 비 오는 날엔 파전과 막걸리, 더운 날엔 냉면과 아이스크림이 생각나죠. 이 아이디어를 실제 기능으로 만들었습니다.
현위치 기반 지도는 Geolocation API로 현재 좌표를 얻은 뒤 Kakao Maps SDK로 주변 식당을 표시합니다. 위치 권한을 거부해도 지도 없이 메뉴 추천은 정상 동작하도록 graceful degradation을 적용했습니다.
이 프로젝트의 거의 모든 코드는 Claude AI와 함께 작성했습니다. 단순히 코드를 생성받는 게 아니라, 문제를 함께 분석하고 해결책을 고민하는 파트너로 활용했습니다.
1. 메뉴 필터 로직 설계: "사용자가 필터를 많이 선택할수록 결과가 없어지는 문제"를 Claude에게 설명했더니 AND 조건을 완화하는 fallback 전략을 제안해줬습니다. 필터 수를 줄여가며 재시도하는 로직이 지금의 추천 시스템 핵심입니다.
2. CSS 3D 룰렛 구현: Canvas 성능 문제를 말했더니 perspective + rotateX를 이용한 드럼 롤 방식을 제안했고, 구체적인 CSS 코드까지 바로 작성해줬습니다.
3. Service Worker 캐시 전략: Stale-While-Revalidate, Cache First, Network First의 차이를 설명하고 각 리소스 유형별 최적 전략을 안내해줬습니다.
"AI를 쓴다고 개발자가 필요 없어지는 게 아니라, 혼자서는 며칠 걸릴 문제를 몇 시간 안에 해결할 수 있게 됩니다. 중요한 건 무엇을 만들지, 어떤 UX를 줄지 — 방향을 잡는 사람의 역할입니다."
서비스를 만들고 나면 아이디어는 오히려 더 많아집니다. 다음에 추가할 기능들을 정리했습니다.