Claude Code를 사용해 피트니스 앱의 운동 데이터를 은하계와 움직이는 신체 형태로 시각화해 봤습니다
I asked Claude Code to turn my fitness app's 1,321 exercises into a galaxy, and then into a body that can move, all interactive in the browser. Details inside.
핵심 요약
Claude Code를 활용해 1,300여 개의 운동 데이터를 인터랙티브한 은하계와 신체 모델로 시각화한 개발자의 작업기입니다.
- 데이터 시각화 — 1,321개의 운동 데이터를 은하계와 신체 모델로 인터랙티브하게 구현함
- Claude Code 활용 — 복잡한 시각화 작업을 몇 번의 프롬프트만으로 완성함
- 비용 투명성 — API 사용량과 캐시 읽기 등 상세한 토큰 비용을 공개함
- 앱 홍보 논란 — 반복적인 앱 홍보로 인해 일부 사용자로부터 스팸 의혹을 받음
틈틈이 안드로이드용 운동 및 러닝 트래커인 Kinoku를 만들고 있는 11년 차 소프트웨어 엔지니어다. 지난주 r/SideProject에서 이 클립을 본 사람들도 있을 거다. 저번 글은 앱 자체에 대한 거였고, 이번엔 그 페이지랑 Claude Code로 몇 번 프롬프트 날려서 뚝딱 만든 썰 좀 풀어보려고 한다.
페이지는 여기: https://kinoku.app/tools/exercise-galaxy (완전 인터랙티브하고, 요청 들어오는 대로 계속 개선할 예정).
앱 카탈로그에 있는 모든 운동은 별 모양으로 표시되는데, 같은 근육을 쓰는 운동끼리 뭉쳐 있어서 프레스 계열은 한곳에, 로우 계열은 또 다른 곳에 모여 있다. 'Pressing Body'를 누르면 각 운동이 자극하는 근육마다 빛이 하나씩 들어오는데, 앱 자체 근육 맵에만 총 4,903개의 빛이 켜진다. 차트 만드는 게 앱 개발하면서 제일 재밌는 부분인데, 사람들이 직접 열어서 이것저것 만져볼 수 있으면서도 눈이 즐거운 결과물을 만들고 싶었다.
프롬프트는 그냥 평범하게 대화하듯이 넣어서 딱히 특별할 건 없다.
세션 기록(메인 루프랑 모든 서브 에이전트 포함, 전부 Opus 5.5)에서 뽑은 토큰이랑 비용은 다음과 같다:
| Session | What it did | Effort | Output tokens (thinking) | Cache writes | Cache reads | List price |
|---|---|---|---|---|---|---|
| 1 | The galaxy, plus the first clip and post draft | xhigh | 806,517 (333,388) | 3,118,285 | 360,241,072 | $108.32 |
| 2 | The Body view | xhigh | 657,656 (315,358) | 2,267,350 | 180,103,085 | $63.85 |
| 3 | Icons on the body, new buttons | medium | 115,649 (32,374) | 337,662 | 22,956,011 | $9.61 |
| 4 | A review, small fixes | medium |
