토요일 OT 작업 개선-개인생산성 대시보드 작업

소개

Goalmeter는 "내 목표가 지금 얼마나 진행되고 있는지 한눈에 보고 싶다"는 데서 출발한 1인용 생산성 대시보드입니다.

기존엔 투두 앱 따로, 목표 따로여서 "이번 주에 목표 대비 얼마나 했지?"를 알려면 흩어진 기록을 일일이 모아야 했고, 그게 번거로워 회고를 자꾸 건너뛰게 됐습니다. Goalmeter는 이걸 한 화면에 모읍니다.

목표 → 주간 계획 → 일별 작업을 하나로 연결
시간 그리드(10분 단위) 로 "계획한 시간 vs 실제 쓴 시간"을 비교
하루 끝에 완료율·시간정확도와 AI 회고(Gemini) 로 돌아보기(무료API 연계 목표)

핵심은 단순 체크가 아니라 "계획과 실제의 차이를 직시하고 회고로 개선" 하는 도구라는 점입니다.

진행 방법

도구는 Claude Code(Opus) 하나만 썼고, 코드는 한 줄도 직접 작성하지 않았습니다. "무엇을, 왜, 누구를 위해"를 말로 정리하면 AI가 기획서·코드·배포까지 처리하는 방식이었습니다. 아래는 제가 실제로 입력했던 프롬프트를 날짜별로 그대로 정리한 것입니다. (세션 로그에서 원문을 추출해 검증했고, 오타·표현도 손대지 않았습니다.)

📅 5월 23일 (Day 1) — 하루 만에 v1 MVP 기획·구현·배포

나는 토요일 오프라인 모임에서 만들 작은 웹앱을 기획하려고 해.
내 아이디어는 개인 생산성 관리 대시보드야.

일일 작업 완료율, 주간 목표 달성률 등 지표를 기준으로 대시보드를 만들고 싶어.
결국 내의 목표, 이와 연계된 나의 작업, 주간 작업, 월간 작업 완료율 등을 보고, 회고할 수 있게 만드는게 목표야.

바로 구현하지 말고,
사용자, 사용 상황, 입력값, 출력값, 핵심 기능 3개,
이번 버전에서 제외할 기능을 먼저 질문해줘.

→ 바로 만들게 하지 않고 질문부터 시켰더니, 막연한 아이디어가 "한 화면에서 동작하는 회고 도구"로 또렷해졌습니다.

방금 정리한 웹앱 아이디어를 show-me-the-prd로 PRD 문서로 만들어줘. 토요일 오프라인 모임에서 실제 구현할 수 있게 MVP 범위를 작게 잡아줘.

→ 인터뷰 답변을 그대로 기획서(PRD) 로 만들게 했습니다.

4번 항목에 대해 하나하나 나하고 대화로 좀더 수정했으면 좋겠어.

→ PRD의 미결 항목을 한 줄씩 대화로 확정했습니다.

이 PRD를 바탕으로 kkirikkiri로 웹앱 구현 팀을 구성해줘.

필요한 관점:
- PM
- 프론트엔드 개발자
- UI 디자이너
- QA 리뷰어

→ 한 명에게 다 시키지 않고 PM·디자이너·개발·QA로 역할을 나눠 만들게 했습니다. 특히 QA가 "정말 동작하나"를 따로 검증해주니 결과가 탄탄했습니다.

지금 만든 웹앱을 배포하려고 해. 이 프로젝트 구조를 보고 Vercel에 배포해줘 그 방법으로 배포 준비 파일과 절차를 안내해줘.

→ 그날 바로 Vercel 공개 배포(goalmeter.vercel.app)까지 끝냈습니다.

📅 5월 24일 (Day 2) — "제대로 키우자": v2 재기획 + 버전 관리 도입

내가 추가로 해당 앱을 처음부터 업그레이드 하고 싶어. 버전이 많이 바뀔거 같은데 어떻게 디렉토리 관리하는게 좋을지 의견을 부탁해. 거의 처음부터 다시 시작할꺼야.

→ AI가 git + GitHub를 권했고, v1을 v1.0 태그로 "박제"한 뒤 새 버전을 안전하게 쌓는 구조를 잡아줬습니다. 마음껏 갈아엎어도 언제든 v1으로 되돌릴 수 있게 됐죠.

자 V2작업을 위해 새 prd작업 부터 할꺼야.. 여기 v1 코드는 내가 삭제 안해도 되는거지?

→ v1을 지우지 않고 보존한 채 v2 작업을 시작할 수 있는지 확인했습니다.

내가 만들고 싶은 것은 "개인 생산성 관리 대시보드" 이야. 기존에 기획해둔 문서는 여기에 있어: (…PRD 경로…)

→ 예전에 다른 곳에 적어둔 기획 문서를 분석시켜 v2 PRD의 출발점으로 삼았습니다.

50-my-work/saturday-webapp-assignment/goalmeter/PRD 아래 prd문서가 있어 show-me-the-prd로 해당 prd를 반영하여 prd를 검토, 보완 해서 만들어줘.

→ 새 PRD를 검토·보완하게 했습니다.

📅 5월 25일 (Day 3) — 디자인 입히고 기능 대확장 (v2.1)

대시보드부터 같이 얘기하자 니가 보기에 개선할 만한 곳을 니가 제안해봐.

→ "내가 지시"가 아니라 "네가 먼저 제안해봐" 로 개선점을 끌어냈습니다.

달력은 부터, 일요일이 해당 주의 첫 시작이야. 이부분 반영해줘. 그리고 2번 진행해

→ 활동 캘린더를 5월 달력(일요일 시작) 으로 교체했습니다.

기존 PRD에 주간 계획 기능 반영해줘. 일일계획 화면도 화면이 필요하면 나랑 같이 기획하자.

→ 주간 계획·일일 계획 화면을 같이 기획하기로 했습니다.

목표 별 실적과  별도로 전체  계획대비 실적은 별도로 정리하는 것은 어떨까?  일일계획에 단순 작업이 들어갈 수 있어. 이런 것들은 목표로 정할 수 없거든.. 니 의견을 줘. 모든 task에 목표를 줘야 하는 것인지, 좀더 유연하게 가는 것이 자연스러울 거 같고,  dashboard에 관점에 따라 보여주는게 좋을거 같아.

→ AI가 "목표 강제는 부자연스럽다. 목표 없는 작업도 허용하고 대시보드를 '전체 / 목표별' 두 관점으로 나누자"고 제안 → 설계를 토론으로 더 자연스럽게 잡았습니다.

PRD 문서를 읽고 내가 만들고 싶은 웹앱을 개발해줘.

PRD 문서 경로:
- /Users/kimtaehyung/dev/goalmeter/docs/PRD

`/kkirikkiri`를 사용해서 이 개발에 필요한 전문가들로 팀을 구성하고, 각자가 맡을 작업을 나눠 병렬로 개발을 진행해줘.

진행할 때는 아래를 해줘:
- PRD를 먼저 읽고 만들 앱의 목표를 파악해줘.
- 필요한 개발 전문가 팀을 알아서 구성해줘.
- 각 전문가가 수행할 작업을 나눠줘.
- claude design으로 만든 웹페이지 양식으로 "mygoalbashboard_V2"에 있어 해당 디자인을 바탕으로 작업을 진행하고 싶어.
  해당 디자인으로 병렬로 개발을 진행해서 핵심 기능이 작동하는 MVP를 만들어줘.

 참고로,
  레퍼런스:
- uploads/01_PRD.md ~ 04_PROJECT_SPEC.md : 제품 사양 (정답)
- Goalmeter.html / Daily Plan Prototype.html : UI 목업 (시각 기준)
- assets/wanted.css : Wanted 디자인 토큰 (그대로 채택)
  스택:
- Vite + React 18 + TypeScript + Tailwind + Supabase 클라이언트
- 03_PHASES.md의 S0~S6 순서, 1순위 = 시간 그리드 (10분 드래그, plan/actual)
- 04_PROJECT_SPEC.md의 "절대 하지 마 / 항상 해" 규칙 엄수

- 결과물이 나오면 실행 방법과 확인 방법을 알려줘.
- 막힌 지점이나 남은 작업이 있으면 정리해줘.

→ v2.1 빌드도 다시 kkirikkiri 팀으로 돌리되, 이번엔 별도로 만들어둔 디자인 시안(mygoaldashboard_V2)을 디자인 기준으로 지정했습니다. 곧바로 시안 폴더의 절대 경로도 그대로 넣어줬습니다.

/Users/kimtaehyung/.../gpters-saturday-webapp/mygoaldashboard_V2

→ 디자인 시안이 어디 있는지 경로를 콕 집어 알려줬습니다.

시작해줘. 반드시 mygoaldashboard_V2 을 준수해서 구축해줘.

→ 준비한 디자인 시안을 임의 변경 없이 그대로 따르게 했습니다.

드래그로 블록 길이 조정과 이동 둘 다 되게 해줘. 그리고 단위를 시간, 분으로 모두 일치시켜줘. h, m과 혼용되어 있어 일관성이 부족해

→ 시간 그리드 블록을 드래그로 리사이즈·이동, 단위(h/m) 통일.

새 일일 계획을 새우고 싶은어. 새 일일 계획은 반드시 오늘의 계획만 세우는 것이 아니고 과거의 날에대해서도 회고를 위해 지난 계획을 입력할 수 있고, 오늘의 계획을 입력할 수 도 있고, 미래의 계획을 입력 할 수 도 있어. 일일계획 입력 화면을 만들어줘.

→ 과거·오늘·미래 어느 날이든 골라 입력하는 날짜 선택형 일일 계획을 추가했습니다.

📅 5월 26일 (Day 4) — 깃에 올리고, 배포 정리하고, 기록으로 남기기

오늘 만든 웹앱 결과를 제출 양식으로 정리해줘. 포함할 것: 웹앱 이름 / 한 줄 설명 / PRD 위치 / kkirikkiri 빌드 요약 / 코드 위치 / Vercel 배포 URL / 가장 잘 된 점 / 가장 막힌 점 / 다음에 개선할 점 / 2주차에 Goaljaby로 맡길 작업

→ 제출 양식(03-submission.md)으로 정리.

2주차에서 PRD 기반 실행 워크스페이스를 만들 수 있게 인계 메모를 정리해줘.

→ 다음 주로 넘길 인계 메모(04-handoff.md) 작성.

모두 날짜별로 나눠서 작성해줘.

→ 개발 로그(DEVLOG)와 기록을 날짜별로 정리했습니다.

지금 배포가 끝난거야? 26일까지 추가로 개발된 http://localhost:5173/ 화면과 vercel 화면이 달라. 이유가 무엇인지 확인하고 해결해줘

→ 내 화면과 배포 화면이 달랐던 문제를 추적 → 새 프로젝트(goalmeter-v2)로 재배포해 해결했습니다.

아래글을 "사례글.md"파일로 작성해줘 (소개 / 진행 방법 / 결과와 배운 점)

→ 지금 읽고 계신 이 사례글을 만들게 한 프롬프트입니다.

v1 → v2.1 개선 과정 (화면 비교)

v1 (하루 만에 만든 첫 버전) — 목표·작업·완료율 카드만 있는 단순한 대시보드. 데이터는 브라우저에만 저장(localStorage).

v2.1 (재기획 후 대거 확장) — 완료율·시간정확도·투입시간 KPI, 14일 추세, 5월 활동 달력, 전체/목표별 2관점 토글까지. 회고 도구다운 대시보드로 발전.

v2.1 일일 계획 — 시간 그리드(10분 단위)에 계획/실제를 드래그로 칠하고, 블록을 끌어 옮기거나 늘일 수 있습니다. 하단엔 AI 회고. 과거·오늘·미래 날짜를 골라 입력할 수 있습니다.

v2.1 주간 계획 — 목표별로 그 주 할 일을 적고, 요일에 배치하면 그 날의 작업이 자동 생성됩니다. (종이 위클리 플래너에서 착안)

같은 "개인 생산성 대시보드"라도, v1은 단순 완료율 체크였고 v2.1은 시간 계획·AI 회고·주간 계획까지 갖춘 도구로 진화했습니다.

결과와 배운 점

배운 점 & 나만의 꿀팁

"바로 만들지 말고 질문부터 해줘" — 막연한 생각이 또렷한 기획이 됩니다. 첫 프롬프트로 가장 효과가 컸습니다.
버전이 커질 거면 git부터 — v1을 태그로 박제해두면, 겁 없이 갈아엎고 실험할 수 있습니다.
설계는 "지시"가 아니라 "토론"으로 — "이게 맞아? 네 의견 줘"라고 물으면 혼자 생각 못 한 더 나은 구조가 나옵니다.
요청은 짧고 분명하게 — 길게 설명할수록 오히려 핵심이 묻혀 막혔고, 핵심만 줄 때 잘 됐습니다.

시행착오

"내가 보는 폴더"와 "코드가 있는 폴더"가 달라 혼란 — git 충돌을 피하려고 코드를 동기화 폴더 밖으로 옮겼는데, 화면과 코드 위치가 달라 헷갈렸습니다. (역할을 분리해 정리)
배포가 계속 막힘 — 기존 배포 프로젝트가 빌드 단계에서 멈추는 문제가 반복됐습니다. 결국 새 배포 프로젝트를 만들어 해결했습니다.
토큰을 실수로 채팅에 붙여넣음 — AI가 "그건 비밀번호와 같으니 폐기하라"고 즉시 막아줘서 큰일을 면했습니다.

결과물

v2.1 배포본: https://goalmeter-v2.vercel.app
v1 배포본: https://goalmeter.vercel.app
코드: GitHub (Private 저장소, v1.0 태그로 v1 보존)
코딩 0줄로 기획→구현→배포→재기획→확장까지 완주

앞으로의 계획

데이터를 브라우저 저장에서 클라우드 DB(Supabase) 로 옮겨 여러 기기에서 사용
주간/월간 AI 종합 회고, 알림, 반복 작업 추가
며칠 직접 써보며 정말 필요한 기능부터 보강

🔥<24기 AI 스터디> 9/21 모집 마감 🔥