Showcase Tuning: AI 지원 렌더링 코드를 위한 시각적 디버깅 워크플로

Source: Dev.to

Overview

렌더링 코드는 많은 개발자들이 조용히 받아들이는 테스트 문제에 시달립니다: 보기에 맞다. 단위 테스트는 로직을 검증하지만, 뒤집힌 노멀이나 잘린 스프라이트와 같은 문제는 잡아내지 못합니다. 이를 해결하기 위해 저는 Showcase Tuning이라는 워크플로를 만들고, 쉽게 재사용할 수 있도록 패키징했습니다.

The Showcase Tuning Loop

1. 하네스 작성 – 실제 렌더링 코드를 호출하는 작고 독립적인 프로그램을 만든다.
2. 실행 – 출력 이미지를 생성한다.
3. 결과 확인 – 시각적인 결과물을 검토한다.
4. 렌더러 수정 – 하네스가 아니라 렌더링 코드를 조정한다.
5. 반복 – 출력이 기대에 부합할 때까지 반복한다.

Rules for an Honest Loop

• 결정론적 입력 – 고정된 시드와 하드코딩된 데이터를 사용해 모든 실행을 비교 가능하게 만든다.
• 하네스가 아니라 렌더러를 고친다 – 하네스는 단지 캡처 메커니즘일 뿐이며, 결함은 렌더링 코드에 있다.
• 검토 전에 생성 – 출력이 어떻게 보일지 추측하지 말고, 항상 먼저 이미지를 만든다.
• 한 번에 하나의 컴포넌트 – 변경 사항을 격리해 피드백을 명확히 하고 결과를 애매하지 않게 유지한다.

Example Session: Hot‑Air Balloon Renderer

Step 1 – Initial inspection

Claude가 하네스를 처음 실행한다. 풍선이 평범한 타원 형태로 나타난다.

Step 2 – First round of fixes

이제 다섯 가지 팔레트가 모두 렌더링된다. 바구니, 고어 라인, 로프가 보이지만 일부 기하학적 형태가 아직 어긋나 있다.

Steps 3‑4 – Diagnosing and redesigning the shape

Claude는 문제를 buildEnvelopePath에서 찾고, 프로파일 곡선을 다시 작성한다.

Steps 5‑6 – Final refinements

• 높이 비율을 조정했다.
• 바구니 위치를 고쳤다 (풍선에서 너무 멀리 떠 있었음).

깨진 타원에서 완성된 풍선까지 전체 과정은 몇 차례의 반복만으로 끝났다.

Additional Showcases

• 파티클 시스템 튜닝.
• 야간 타일맵 렌더러 쇼케이스.
• 모든 애니메이션 프레임을 포함한 캐릭터 스프라이트 시연.

Platform Support

하네스는 여러 플랫폼에서 동작한다:

• Android / JVM
• Web / TypeScript
• Python

생성된 이미지는 Showcase/ 디렉터리에 저장되며, 자동으로 .gitignore에 추가된다.

Repository

리포지토리에는 Showcase Tuning에 사용되는 Claude Code 스킬을 정의한 SKILL.md 파일이 포함되어 있다.

👉 GitHub:

스킬 동작은 전부 SKILL.md에 존재하므로 읽고 확장하기가 쉽다.

Call to Action

렌더링 코드와 관련된 비슷한 문제를 겪어본 적이 있나요? 시각적 디버깅을 어떻게 처리하는지 궁금합니다.