클로드코드로 모바일 타임트래커 웹앱개발해서 배포하기

개발 로그 소개

AI 코딩 도구와 함께 진행한 모바일 PWA 타임트래커 개발 작업 기록입니다.

PWA는 Progressive Web App의 약자예요.
쉽게 말하면:

“웹사이트를 앱처럼 동작하게 만드는 기술”

2026-05-29 (Day 1) 개발 시작

모바일 PWA 타임트래커 초기 개발

모바일에서 쓸 수 있는 시간 기록 앱 만들어줘. PWA로 만들어서 홈화면에 추가할 수 있게 해줘.

Claude Code 작업:

• React + Vite 기반 프로젝트 초기 구성

• PWA 설정 (vite-plugin-pwa) — 홈화면 추가 및 오프라인 지원

• 모바일 퍼스트 레이아웃 설계

• Zustand 상태 관리, Tailwind CSS 스타일링 적용

• Recharts로 시간 데이터 시각화 구성

• src/components/, src/store/useStore.js 등 주요 파일 생성

스크린샷 자동화 도구 추가

앱 스크린샷 자동으로 찍을 수 있게 해줘

Claude Code 작업:

• Playwright 개발 의존성 추가

• screenshot.mjs 스크립트 작성 — 앱 화면 자동 캡처

• generate-icons.mjs 아이콘 생성 스크립트 추가

시간 기록에 메모 기능 추가

시간 기록할 때 메모도 같이 남길 수 있게 해줘

Claude Code 작업:

• 타임 슬롯에 메모 입력 필드 추가

• 메모 데이터를 Zustand 스토어에 연동

• 메모 저장 및 불러오기 로직 구현

체험판 모드 추가

앱을 처음 보는 사람들이 써볼 수 있게 샘플 데이터가 있는 체험판 모드 만들어줘

Claude Code 작업:

• VITE_DEMO_MODE=true 환경변수로 체험판 모드 토글 구현

• 샘플 데이터 생성 — 카테고리별 시간 기록 예시

• 체험판 배너 UI 컴포넌트 추가

모바일 메모 입력칸 UI 개선

모바일에서 메모 입력칸이 잘 안 보여. 더 눈에 띄게 바꿔줘

Claude Code 작업:

• 메모 입력칸 가시성 개선 (2회 수정)

• 메모 입력 위치를 슬롯 행 인라인으로 이동

• 바텀시트 높이 고정 → 콘텐츠 크기에 맞게 자동 조정으로 변경

• 메모 입력칸을 바텀시트 안으로 이동 → 카테고리 버튼 위로 재배치

• 메모 입력칸 보라색 테두리+배경으로 시각적 강조

• 바텀시트 내용 스크롤 가능하도록 수정

샘플 데이터 카테고리 수정

체험판 샘플 데이터 카테고리가 이상해. 수정해줘

Claude Code 작업:

• 샘플 데이터 카테고리 2회 수정 (실제 사용 시나리오에 맞게 재구성)

체험판 배너에 초기화 버튼 추가

체험판에서 데이터 초기화할 수 있는 버튼 추가해줘

Claude Code 작업:

• 체험판 배너에 "초기화" 버튼 추가

• 클릭 시 샘플 데이터를 원래 상태로 리셋하는 기능 구현

바텀시트 하단 네비게이션바 위에 위치하도록 수정

바텀시트가 하단 네비게이션바에 가려져. 네비게이션바 위로 올려줘

Claude Code 작업:

• 바텀시트 z-index 및 position 조정

• 하단 네비게이션바 높이만큼 여백 확보

커밋 히스토리

기술 스택

• Frontend: React 19, Vite 8, Tailwind CSS

• 상태 관리: Zustand

• 차트: Recharts

• PWA: vite-plugin-pwa

• 테스트/자동화: Playwright (스크린샷)

• AI 도구: Claude Code

주요 기능

1. 시간 기록

   • 카테고리별 시간 슬롯 입력

   • 메모 첨부 기능

   • 모바일 바텀시트 UI

2. 체험판 모드

   • 샘플 데이터로 앱 미리 체험

   • 초기화 버튼으로 리셋

3. PWA 지원

   • 홈화면 추가 (모바일 앱처럼 사용)

   • 스크린샷 자동화 스크립트

4. 시각화

   • Recharts 기반 시간 데이터 차트