Project‐Time

⏱️ Time

측정 목표

쇼핑몰(사용자)과 관리자 페이지를 1일, 업무 시간 기준 8시간 이내에 완성하는 것을 목표로 하고, 단계별 실제 소요 시간과 비교한다.

측정 단계

순서	단계	범위	소요 시간	합계 반영	비고
1	프로젝트 설계	기능 범위 · 기술 스택 결정	1시간 10분	1시간 10분
2	레퍼런스 조사	디자인 방향 결정	44분	44분
3	쇼핑몰 디자인	사용자 페이지 Figma 디자인	2시간	2시간
4	쇼핑몰 개발	사용자 페이지 구현	2시간 28분	2시간 28분
5	관리자 디자인	관리자 페이지 Figma 디자인	1시간	0분	개발과 병행
6	관리자 개발	관리자 페이지 구현	48분	0분	마무리와 병행
7	마무리	디자인 디테일 · UX 점검 · 테스트	1시간 18분	1시간 18분
	합계	목표: 8시간 이내	9시간 28분	7시간 40분	병행 −1시간 48분

---

측정 방식

• 측정 도구: macOS 타이머 앱 Session
• 각 단계는 Session의 URL Scheme으로 시작 · 일시정지 · 종료한다. Claude Code가 단계를 바꿀 때 명령을 직접 실행한다.
• intent는 [Figma-MCP] 단계명 형식으로 기록해 단계별 시간을 구분한다.

# 시작 (예: [Figma-MCP] 쇼핑몰 디자인)
open "session:///start?intent=%5BFigma-MCP%5D%20%EC%87%BC%ED%95%91%EB%AA%B0%20%EB%94%94%EC%9E%90%EC%9D%B8&categoryId=<카테고리 ID>&duration=240"
# 일시정지 / 재개 (토글)
open "session:///pause"
# 종료
open "session:///finish"

기록 조회

Session의 URL Scheme에는 기록을 꺼내는 명령이 없다. 대신 Session이 기록을 로컬 SQLite DB(Core Data)에 저장하므로, DB를 복사해 단계별 시간을 직접 조회한다.

• ZSESSIONTASK 테이블: ZNAME(intent), ZSTARTDATE · ZENDDATE(Apple epoch, +978307200으로 Unix 시간 변환)
• 일시정지 구간은 ZMETA에 JSON({"type":"PAUSE", ...})으로 들어 있어, 전체 시간에서 빼서 계산한다.

규칙

• 단계 사이의 휴식 시간과 단계 중 일시정지 구간은 측정에서 제외한다.
• duration은 넉넉히(240분) 둔다. Session은 설정한 집중 시간이 지나면 자동으로 종료된다.

---

단계별 기록

1. 프로젝트 설계 — 1시간 10분

README 작성 프롬프트를 바탕으로 프로젝트 목적, 기능 범위, 기술 스택과 선택 근거를 정했다. 설계 리뷰 과정에서 다음을 추가로 결정했다.

• Route Handler 대신 Server Action + lib/services 계층
• 프론트엔드 별도 interface 없이 Prisma 생성 타입 사용, 가격은 Int
• Zod 스키마를 Prisma 스키마에서 자동 생성
• 공개 관리자 페이지는 ADMIN_PASSWORD로 변경 보호, 개인정보는 서버에서 마스킹

2. 레퍼런스 조사 — 44분

수집해 둔 베이커리 쇼핑몰 레퍼런스를 분석해 디자인 방향을 정했다.

• 레퍼런스 공통점: 밝은 크림 배경 + 강조색 하나, 세리프 제목 + 산세리프 본문, 개성은 상품 사진에서
• 브랜드 그린과 같은 단계 · 같은 밝기의 브라운 스케일을 새로 만들어 색 체계 확정

3. 쇼핑몰 디자인 — 2시간

Figma MCP로 디자인 토큰, 컴포넌트, 데스크톱 · 모바일 화면을 만들고 이미지를 생성해 배치했다. Session 기록은 134.9분이고, 그중 일시정지 14.8분을 뺐다.

• Figma MCP 무료 플랜 한도에 걸려 작업이 중단됐고, 플랜 결정 동안 타이머를 일시정지했다. (Professional 플랜 Full 시트로 전환 후 재개)
• 피드백 반영이 시간의 상당 부분을 차지했다.
  • 모바일 구조 재설계 (하단 탭 바, 원형 카테고리 탭, 상품 버블 메뉴)
  • 마이페이지 사용자 흐름 수정 (비회원은 주문 상세만, 주문 내역은 회원 전용)
  • 카테고리 이미지 재생성 (배경 제거 방식 3회 변경)

5. 관리자 디자인 — 1시간

Figma MCP로 관리자 데스크톱 10개, 모바일 12개 화면과 관리자 전용 컴포넌트를 만들었다. 이 단계는 쇼핑몰 개발 세션과 동시에 진행했고, Session 타이머는 쇼핑몰 개발 쪽만 썼다. 그래서 Claude Code 대화 기록의 메시지 시각으로 직접 계산했다.

• 계산 방법: 첫 메시지(16:07)부터 마지막 메시지(22:22)까지에서 10분 이상 공백을 모두 뺐다. 빠진 공백은 사용량 한도 대기 구간 4개(3시간 53분, 10분, 16분, 55분)다.
• 흐름: 데스크톱 방향 확인 → 모바일 방향 확인 → 피드백 반영(상태 테두리 제거, 접수 탭, 주문 상세, 일괄 상태 변경) → 개발 세션의 Prisma 스키마와 대조해 수정
• 피드백 반영과 추가 기능이 시간의 절반가량을 차지했다.
  • 모바일 하단 탭에 접수 탭 추가 (새 주문을 바로 준비하도록 접수 상태만 보여 줌)
  • 주문 상태 일괄 변경 (데스크톱 · 모바일, 변경 대상은 상태만)
  • 스키마 대조: 주문 취소 상태 추가, 상품 폼 필드 추가, 저장할 곳이 없는 상태 이력 제거
• README 합계는 쇼핑몰 개발과 겹친 구간을 한 번만 세어야 해서, 쇼핑몰 개발 시간이 기록되면 다시 계산한다.

4. 쇼핑몰 개발 — 2시간 28분

Next.js로 쇼핑몰 전체(홈 · 목록 · 검색 · 상세 · 장바구니 · 주문 · 주문조회)와 정렬을 구현했다. Session 기록은 두 번(59.8분 + 88.3분)이고 일시정지는 없다. 중간에 사용량 한도로 멈춘 구간은 타이머도 멈춰 있었다.

• 공통 기반 먼저, 기능은 병렬로. 폴더 구조 · 경계 규칙 · 디자인 토큰 · 공통 UI · DB를 먼저 머지한 뒤, 화면별로 git worktree를 나눠 Claude 세션 · 서브에이전트가 동시에 작업했다(카탈로그 / 장바구니 · 주문 / 마이페이지).
• 머지 전에 Review를 직접 검증. 헤드리스 Chrome으로 데스크톱 1440 · 모바일 390 화면을 캡처해 Figma와 비교하고, 클릭 · 입력 동작까지 확인했다. 사람의 판단이 필요한 항목만 물어보는 방식으로 정했다.
• 시간을 쓴 곳
  • 병렬 작업 후 합쳤을 때 생기는 문제를 통합 검증(린트 · 빌드 · 구매 → 조회 전체 흐름)으로 확인
  • 모바일 푸터를 홈에서만 보이게 바꾸는 요구 반영 (Figma도 수정)
  • 인기순 정렬: 판매수를 어디에 저장할지 설계(Data 참고)
  • 로고 · 파비콘 적용, 구현과 달라진 디자인을 Figma에 되돌려 반영
• 겹친 시간. 관리자 디자인(1시간)은 이 단계와 같은 시간대에 진행했다. 두 단계를 각각 더하면 7시간 22분이지만, 같은 시간대에 병렬로 진행했으므로 겹친 1시간을 한 번 뺀 6시간 22분을 합계로 쓴다. (README와 같음)
• 다듬기(모바일 홈 배너 글자 가독성, 어두운 푸터의 로고, 세부 간격)는 마무리 단계에서 한꺼번에 한다.

6. 관리자 개발 — 48분

관리자 레이아웃, 상품 관리(목록 · 등록 · 수정 · 삭제), 주문 관리(목록 · 상세 · 상태 변경 · 일괄 상태 변경 · 모바일 접수 탭)와 테스트를 구현했다. Session 타이머는 마무리 세션이 쓰고 있어서, 관리자 디자인과 같은 방식으로 대화 기록의 메시지 시각으로 계산했다.

• 계산 방법: 메인 대화와 서브에이전트 2개의 기록 시각을 합친 뒤, 10분 이상 공백을 뺐다. 서브에이전트가 일하는 동안에는 메인 대화가 조용하므로 메인 기록만 보면 그 구간이 공백으로 잘못 빠진다. 합쳐서 보면 두 서브에이전트가 동시에 일한 시간도 한 번만 센다. 빠진 공백은 쉬는 시간 1개(9시간 27분)다.
• 흐름
  1. 공통 기반(레이아웃 · 상태 배지 · 비밀번호 확인 · 하단 시트 · 상태 색 토큰)을 먼저 만들고 PR로 올림
  2. 그 위에 상품 · 주문 worktree를 나눠 서브에이전트 2개가 동시에 구현 (각각 약 10분)
  3. 서브에이전트 결과는 diff를 직접 검토하고 화면을 다시 찍어 Figma와 대조. 주문 동시 취소 시 판매수가 두 번 빠지는 버그를 찾아 고침
  4. 사용자 결정 반영: 공통 Select를 Input 모양으로 통일, 모바일 주문 상세 헤더는 비교 이미지를 보고 현재 구현 유지
  5. 테스트 원칙에 따라 단위 5 · 통합 17 · E2E 2를 작성
• 순서 문제: 테스트 도구는 마무리 세션의 feat/common-test에 있고, 마무리 세션은 관리자 기능이 먼저 들어가야 진행할 수 있었다. 그래서 기능 PR(#14 · #15 · #16)을 먼저 머지하고, 관리자 테스트는 별도 PR(#17)로 나눠 테스트 도구 다음에 머지한다.

7. 마무리 — 1시간 18분

Session 기록 두 번(43.0분 + 34.9분)이고, 사이의 쉬는 시간(9시간 30분)은 뺐다. 관리자 개발(48분)은 처음부터 끝까지 마무리와 동시에 진행해, 관리자 개발의 "합계 반영"을 0분으로 두었다.

• 워크트리 2개로 병렬: 화면 마무리(디자인 디테일 + UX 수정)와 테스트를 나눴다. 디자인과 UX를 따로 나누면 같은 컴포넌트를 동시에 고쳐 머지 정리에 시간이 더 든다고 판단해 한곳에서 했고, UX 점검(읽기 전용)과 테스트 작성 · 관리자 PR 검토는 서브에이전트가 동시에 진행했다.
• 디자인 디테일: 작은 수정 하나마다 스크린샷과 수치(높이, 글자 위아래 여백, 배너 글자 대비)로 바로 보고하고 다음 지시를 받았다. Figma는 수정이 끝난 뒤 한 번에 반영했다.
• UX 공통 원칙 점검: 커서 · 터치 영역 · 포커스 · 자동완성 · 스크롤 유지 등 10건을 고쳤다.
• 시간을 쓴 곳
  • 임시 로그인 · 주문 내역 · 로그인 드롭 메뉴 추가 (주문 내역 화면을 보여 주기 위한 요구)
  • Suspense 경계를 페이지 전체에서 데이터 단위로 다시 나눔 (Troubleshooting)
  • 관리자 PR 사후 검토와 발견한 문제 수정(이동 설정, 비밀번호 타입 확인, 동시 등록/삭제)
  • 테스트 도구 선정(유지 상태 확인) · 테스트 DB · CI — 첫 CI 실행부터 통과
• 결과: 단위 25 · 통합 35 · E2E 6, 합계 반영 7시간 40분으로 목표(8시간) 안에 끝났다.

---

📎 Reference

• Session URL Scheme
• README 시간 측정 표