5. 디자인 다듬기

시작 상태

npm run build && git status --short

두 번째 명령은 아무것도 찍히지 않아야 합니다. 4단계 커밋을 마친 세션을 그대로 이어서 씁니다. 새 세션을 열지 않습니다. 트리가 깨끗하지 않으면 4. 구현으로 돌아갑니다. /skills에 impeccable 항목이 보여야 합니다. 없으면 준비: 디자인 도구로 돌아갑니다.

이 단계에서 하는 것

critique, 선별, 적용, 재확인 순서로 진행합니다. 리뷰 지적을 그대로 적용하지 않는 이유는 Claude Code를 못 쓰게 만드는 10가지 습관 7번이 다룹니다. 스크린샷이 증거가 되지 않는 이유는 Visual Verification이 다룹니다.

따라하기

npm run dev를 띄워 둔 채로 critique를 돌립니다. 호출 형태는 준비: 디자인 도구에서 본 critique <대상>과 같습니다. 여기서는 대상에 파일 이름 대신 띄워 둔 페이지의 주소를 넣습니다.

/impeccable critique http://localhost:5173

지적을 세 묶음으로 나눕니다. 첫째 묶음은 스펙 범위 안이고 측정 근거가 있는 것입니다. 대비, 터치 영역, 포커스 표시가 여기 듭니다. 둘째 묶음은 스펙 범위 안이지만 인상에 근거한 것입니다. 셋째 묶음은 스펙 범위 밖인 것입니다. 모바일 최적화와 서식이 여기 듭니다. 첫 묶음만 적용합니다.
적용 프롬프트(2번 틀):

다음 지적만 반영해 주세요: <첫 묶음 항목을 붙여넣는다>
완료 기준: npm run lint && npm test && npm run build 가 exit 0이고, 카운터 요소의
data-testid="count" 가 유지된다.
범위: 포함 — CSS와 마크업. 제외 — countChars 로직, 새 기능.

다시 critique를 돌려 첫 묶음 항목이 사라졌는지 봅니다. 나머지 두 묶음은 적용하지 않았으므로 그대로 남아 있어야 합니다.
끝 비용과 컨텍스트 사용률을 읽어 docs/tutorial-log.md의 “5. 디자인” 행에 적습니다. 메모 열에는 첫 묶음을 고른 기준을 한 줄로 적습니다.
변경과 기록표를 함께 커밋합니다.

git add src index.html docs/tutorial-log.md
git commit -m "style: 접근성 지적 반영"

완료 확인

npm run lint && npm test && npm run build; echo "exit=$?"
grep -n 'data-testid="count"' index.html src/*.ts

exit=0이고 data-testid가 그대로 남아 있어야 합니다. 다시 돌린 critique에서는 첫 묶음 항목만 해소돼야 합니다.

계측 기록

값은 5번에서 이미 적었습니다. 시작 상태를 확인한 직후 시작 비용을, 커밋 직전에 끝 비용과 컨텍스트 사용률을 각각 적고 차액으로 읽습니다. 세션 수는 이 단계에서 연 세션 개수입니다. 4단계를 이어받은 같은 세션이면 4단계의 끝 비용이 이 단계의 시작 비용입니다.

어긋났을 때

지적을 전부 적용해 스펙 밖 기능이 들어왔으면 git diff로 범위 밖 변경을 되돌립니다.
스크린샷으로 좋아졌다고 판단하려 하면 Visual Verification의 기준으로 다시 잽니다.