## 한 줄 요약
결과값이 나오고 먼저 나 자신과 대화를 했어요 잘 했든 못했든 클로드를 한번도 사용한적 없는 나 자신에게 이정도면 충분히 잘 한거야 하면 된다 항상 할 일과 건강 관리가 머릿속에서 뒤엉켜 스트레스였는데, Claude Code에게 "내 할 일 대시보드 만들어줘" 한 마디로 시작해서 **KPI 요약 · 14일 활동 추이 차트 · 카테고리별 현황 · 오늘 할 일 체크리스트**까지 갖춘 개인용 대시보드를 하루 만에 완성하고 GitHub에 올렸습니다.
---
## 막막했던 시작
개인 일정,건강 관리, 공부, 회사일까지 — 할 일이 여기저기 흩어져 있고 해야 뭘 놓치고 있는지도 모른 채 계속 신경만 쓰이는 상태였습니다. 스트레스는 외부에서 만들어진다. 외부 또는 외부 환경변화에서 만들어 진다고 하더라구요 이런 바쁜 활동에서 할 일은 먼저 나 자신을 돌봐야 한다는 생각이 들더라구요
"이걸 한 화면에서 보이게만 만들어도 스트레스가 줄겠다" 싶어서 Claude Code를 열었는데, 막상 첫 프롬프트를 뭐라고 써야 할지부터 막막했습니다. 개발 경험이 없다 보니 "대시보드"라는 말만 던지면 알아서 만들어줄지, 아니면 화면 구성부터 하나하나 다 지정해줘야 하는 건지 감이 안 잡히더라고요. 그래서 일단 제일 단순하게, 만들고 싶은 걸 말로 풀어서 던졌습니다.
```
대시보드 페이지 만들거야, 주제는 내 할 일 대시보드
2주치 할일더미 데이터 만들어서 제작해줘
```
이 한 줄이 시작이었습니다.
## 작업 과정
### 1. 기획 — AI가 먼저 디자인 방향을 잡아줌
신기했던 건, 제가 색상이나 폰트에 대해 아무 말도 안 했는데 Claude Code가 디자인 스킬을 스스로 불러와서 색상·타이포그래피·레이아웃 방향부터 먼저 기획했다는 점입니다. 그다음 오늘(2026-07-25, 토요일) 기준 최근 2주(07.12~07.25)치 더미 작업 데이터 82건을 업무·개인·건강·학습·집안일 5개 카테고리로 직접 설계해줬습니다. 덕분에 빈 화면이 아니라 실제로 쓰는 것처럼 보이는 대시보드로 바로 확인할 수 있었습니다.
### 2. 제작 — 세세한 부분까지 신경 쓴 완성도
- 한글이 잘 보이는 시스템 산세리프 폰트 + 구글 폰트(Fraunces)를 조합해서 제목과 본문 느낌을 다르게 구성
- 색약(색각이상)인 분이 봐도 카테고리 색이 구분되도록 대비 검증 스크립트까지 돌려서 라이트·다크 모드 모두 통과 확인
- KPI 카드 4종(완료율 / 총 완료 / 오늘 남은 작업 / 연속 완료일), 14일 활동 추이 차트(막대에 마우스 올리면 상세 수치, 7일·14일 보기 전환), 카테고리별 완료 비중 미터, 지연 작업 알림, 오늘 할 일 체크리스트(카테고리 필터 + 체크 토글)까지 한 번에 구현
이 모든 게 `index.html` 파일 하나(HTML/CSS/JS)로 완성됐고, 라이트·다크 테마도 둘 다 지원합니다.
### 3. GitHub 저장소 연결
```
github repor랑 연결할거야 https://github.com/autoprimecokr-oss/dashbooard.git
```
미리 만들어둔 빈 GitHub 저장소 주소만 던졌더니, 로컬 폴더에 클론하고 완성된 대시보드를 `index.html`로 저장한 뒤, 프로젝트 설명이 담긴 `README.md`까지 작성해서 커밋·푸시까지 끝냈습니다. GitHub Pages만 켜면 URL로 바로 접속할 수 있는 상태로 마무리됐습니다.
## 인상 깊었던 순간 & 막혔던 부분
가장 막막했던 건 역시 **처음에 뭐라고 설명해야 할지 모르겠다는 점**이었습니다. "대시보드 만들어줘"라는 말이 너무 막연하게 느껴져서 이걸로 될까 싶었는데, 오히려 짧고 단순한 한 문장만으로도 AI가 필요한 걸 되짚어 물어보고 기획·디자인·데이터 설계까지 스스로 채워나가는 걸 보면서 "이 정도로 구체적이지 않아도 되는구나"를 체감했습니다. 특히 색약 대비 검증처럼 제가 미처 생각도 못 한 부분까지 알아서 챙겨준 게 가장 인상적이었어요.
## 지금까지의 결과
아직 실제 제 할 일·건강 데이터를 연동하기 전 단계라, 이번엔 **"코딩을 몰라도 하루 만에 원하는 도구를 직접 완성했다"는 것 자체가 성과**입니다. 막연하게 스트레스로만 느껴지던 일정 관리를 눈에 보이는 화면으로 옮겨놓고 나니, 다음 단계로 뭘 하면 될지가 명확해졌습니다.
## 앞으로의 계획
- 아직 스트레스 측정 기능은 없습니다. 앞으로 만들면 돼요
- 더미 데이터 대신 **실제 제 할 일·건강 기록을 연동**해서 매일 쓰는 도구로 발전시키기
- 운동·식단·수면 같은 **건강 관리 항목을 더 세분화**해서 추가하기
- 지금은 스트레스 측정" 관련 기능은 없지만 일정 관리에서 오는 스트레스를 수치로 확인하고 자동으로 관리해주는 형태까지 발전시켜보고 싶습니다.
## 이런 분들께 추천해요
- 할 일과 건강 관리가 여기저기 흩어져서 스트레스받는 분
- "나만의 도구를 만들고 싶은데 코딩을 몰라서" 망설였던 분
- AI 코딩 도구를 처음 써보는데, 뭐라고 프롬프트를 써야 할지 감이 안 잡히는 분
## 핵심 팁
1. **처음부터 완벽하게 설명하려 하지 말 것.** "내 할 일 대시보드 만들어줘"처럼 짧은 한 문장으로 시작해도, AI가 디자인·데이터·기능까지 알아서 기획해줍니다.
2. **더미 데이터를 먼저 요청하면 결과물을 바로 눈으로 확인할 수 있어** 방향이 맞는지 빠르게 판단하기 좋습니다.
3. **완성 후 GitHub 저장소 주소만 던지면** 클론부터 커밋·푸시까지 한 번에 처리되니, Git 명령어를 몰라도 배포 직전 단계까지 갈 수 있습니다.
## 사용한 프롬프트 (복붙용)
```
대시보드 페이지 만들거야, 주제는 내 할 일 대시보드
2주치 할일더미 데이터 만들어서 제작해줘
---
**기술 스택**: HTML / CSS(라이트·다크 테마) / Vanilla JavaScript, Pretendard + Fraunces 폰트, GitHub(GitHub Pages 배포 예정)
**사용 도구**: Claude Code (Sonnet 5)
**저장소**: https://github.com/autoprimecokr-oss/dashbooard
