개발자가 Claude Code를 사용하여 와이어프레임에서 프로덕션 품질의 지출 차트를 하룻밤 만에 반복적으로 완성했습니다.

Claude Code를 통한 반복적 개발

개인 재정 앱을 혼자 개발 중인 개발자가 Claude Code를 유일한 개발 도구로 사용하여 지출 차트를 재설계했습니다. 이 과정은 한 번의 세션에서 네 차례의 수정을 포함했으며, 차트를 와이어프레임 품질에서 거의 프로덕션 수준의 품질로 약 3시간 만에 발전시켰습니다.

구체적인 프롬프트 기반 수정

개발자는 구체적이고 상세한 프롬프트가 좋은 결과를 얻는 데 필수적이라는 것을 발견했습니다. '차트를 더 좋게 만들어줘'와 같은 모호한 프롬프트는 효과가 없었지만, 정확한 지시사항은 즉각적인 수정을 가져왔습니다.

단계별 개선 사항

• 1차 수정: 차트가 화면 너비의 40%만 채웠는데, 이는 x축이 3월 13일임에도 1일부터 31일까지 매핑되었기 때문입니다. 개발자는 문제를 스크린샷으로 찍어 Claude Code에 설명했고, Claude Code는 기존 데이터 포인트만 사용하도록 도메인을 수정했습니다.
• 2차 수정: 한 번의 프롬프트로 세 가지 문제를 해결했습니다: 선이 화면 왼쪽 가장자리에서 벗어나 있었고, 그라데이션 채우기가 보이지 않았으며(강조 색상인 금색 대신 테마의 어두운 색상을 사용했음), 차트 주위에 디버그처럼 보이는 점선 테두리가 있었습니다.
• 3차 수정: Robinhood의 차트와 비교한 후, 개발자는 y축이 0에서 시작하여 작은 지출일은 하단에 붙고 최근 급증은 상단에서 압축되는 문제를 발견했습니다. Claude Code는 y축을 전체 수직 범위를 사용하도록 재매핑하고 선이 가장자리에 닿지 않도록 상하 패딩을 추가했습니다.
• 4차 수정: 감정 색상이 구현되었고(각 차트 세그먼트에 기쁨은 녹색, 필요는 금색, 후회는 빨간색), 그라데이션 채우기가 마침표 나타났으며, 선 부드럽게 하기가 다음 단계로 계획되었습니다.

효율적인 작업 흐름

개발자의 성공적인 접근 방식은 매 차례 수정 후 실제 장치 출력을 스크린샷으로 찍고 참조(Robinhood)와 비교하여 정확히 무엇이 잘못되었는지 설명하는 것이었습니다. 이로 인해 3시간 세션 동안 Stack Overflow나 문서 검색이 필요 없었습니다.