# Claude Code Design 개발 기록: Opus 5 장기

| 항목 | 값 |
| --- | --- |
| Model | Claude Opus 5 |
| 도구 | Claude Code Design |
| 플랜 | Pro |
| 프로젝트 | [claude_code_design_opus5](../../claude_code_design_opus5/) |
| Usage | 5시간 사용량 윈도우의 약 76% 소진 |
| Time | 미기록 |
| Steps | 미기록 |
| 비교 성격 | 기본 장기 명세에 디자인 중심 추가 프롬프트를 적용한 결과물 |

## 해석 및 측정 기준

- 사용량은 사용자가 제공한 근사 관측값이다. 5시간은 사용 한도의 집계 윈도우이며 실제 개발 소요 시간이 아니다.
- 소진율을 개발 시간·토큰·실제 청구액·GitHub Copilot 크레딧으로 환산하지 않는다. 월 $20·30일·하루 2개 윈도우를 가정한 구독료 배분 추정은 약 $0.253이다.
- Claude Code Design 런타임(`support.js`)과 디자인 시스템 번들(`_ds/`)은 외부 제공 실행 자산이다. 비교 포털의 코드 LOC에는 앱 작성 코드만 포함하고, 전체 파일·텍스트 규모에는 별도로 포함될 수 있다.
- 이 구현은 P0~P12 요구사항 충족도 중심의 기존 7종 심층 리포트에는 넣지 않는다. 해당 리포트는 원래 명세와 동일한 구성의 정적 분석을 보존하기 위한 자료이며, 본 구현은 별도의 디자인 지시를 포함한다.
- 디자인·UX 품질은 현재 자동 점수로 순위를 매기지 않는다. 사용자 관측으로는 이 결과물이 디자인 품질과 UX 반영 측면에서 가장 높게 평가되었다.

## 사용자 제공 추가 프롬프트

### 디자인 중심 구현 요청

~~~~text
다음은 웹 장기 앱을 만드는 방법입니다.
실제 장기 게임처럼 장기 게임을 위한 디자인을 해주세요.

참고 문서는 장기를 위한 아주 기본적인 방법입니다.

기본적인 디자인 역시 단순히 동그라미가 아니라 팔각형 안에 한과 초나라의 문자도 한자가 멋진 폰트로 그려집니다. 그리고 실제 장기알 처럼 3D 느낌도 나면 더욱 좋을것 같습니다.

실제 장기 게임이 더 재미가 있으려면 점수가 높은 기물을 잡을수록 잡을때 강력한 애니메이션이 발생하면 좋을것입니다. 뭔가 쾅하고 잡아 먹는 느낌을 내는거죠.

처음 시작하기 전에는 미리 놓여지는 모습이 미리 보여지면 이해하기 좋을 것입니다.

AI랑 장기를 두는 모드의 경우 3가지 난이도를 선택할 수 있습니다. AI 난이도별 승패 횟수를 저장할 수 있어 자신의 실력을 다른 사람들과 비교할 수 있습니다 이런 요소들을 고려하여 디자인을 만들어줘. 전체적인 배경색은 흰색이고, 실제 장기판처럼 해줘.

최대한 진짜 같은 느낌을 주는게 핵심이야. 장기알의 배경색이나 장기알의 폰트색이나 폰트는 선택할 수 있는 옵션을 제공해줘.
~~~~

### 설정 화면 후속 요청

~~~~text
사각형 박스에 + 처럼 모서리에 +로 끝내지 않고 그냥 사각형 그대로 써줘.
대국 설정에서 왼쪽에 대국 설정하는 UX에서 다음을 수정해줘.

장기알 색, 글자 색, 서체, 장기 판의 선택은 펼치기 기능으로 요구할 때에만 나오게 해줘. 지금 너무 설정할게 많아 보여서 오히려 불편해.
그리고 하단이 초고 상단이 한이니깐 마상 배치도 초 → 한 순이 아니라, 한 → 초 순서가 더 맞지 않을까 싶어.

장기 앞에도 글자 상하좌우에 작대기가 있는데 없는게 오히려 더 이뻐. 차라리 옵션에 동그라미, 팔각형, 사각형 이렇게 선택할 수 있게 해줘.
장기판 여백이 좀 작아서 알이 넘어가는 것 같은데, 안 넘어가게 해줘.
~~~~

## 현재 결과물에서 확인되는 차이

- 팔각형 기본 장기알과 3D 음영, 한·초 글자색·서체·기물 모양·판 톤 선택
- 시작 전 배치 미리보기와 자주 쓰는 대국 설정을 먼저 보이는 접이식 설정 화면
- 모든 착수의 합성 착수음, 포획 가치에 비례한 파티클·링·합성 효과음, 장군 경고 파동·경고음·기기 진동
- 로컬 2인/AI 대국, 사람이 둔 뒤 1초 후 AI 응수, 난이도별 전적 저장, 초고급 5수 탐색
- 외부 API나 별도 서버 없이 정적 페이지로 실행