Claude Code로 디자인 크리틱하기
1. 리뷰할 자료에 따라 달라지는 검토 범위
Claude Code에는 스크린샷, Figma 링크, 소스 코드를 전달해 디자인 리뷰를 요청할 수 있습니다.
- 스크린샷: 화면의 시각적 위계, 사용성, 접근성을 빠르게 점검할 때 적합합니다.
- Figma 링크: 파일이나 특정 프레임의 상세 디자인 정보를 바탕으로 검토할 수 있습니다.
- 소스 코드: 로컬 미리보기를 실행해 실제 화면과 제품 맥락을 함께 살펴볼 수 있습니다. 저자가 가장 유용하게 꼽는 방식입니다.
2. 목적에 맞게 고르는 다섯 가지 리뷰
무엇을 개선하려는지 구체적으로 지정하면 피드백을 수정 작업으로 연결하기 쉬워집니다.
- UI 평가: 시각적 위계, 간격, 타이포그래피, 색상, 일관성에서 중요한 문제 5개를 영향도순으로 정리합니다.
- UX 평가: 불명확한 상호작용과 불필요한 마찰, 사용자가 망설이거나 실수할 지점을 찾습니다.
- 전환 평가: 랜딩 페이지의 가치 제안, CTA 가시성, 신뢰 요소, 인지 부하 등 전환을 방해할 요소를 점검합니다.
- 온보딩 평가: 불필요한 단계, 이른 정보 요청, 부족한 안내와 피드백을 찾아 사용자가 첫 가치를 경험하기까지의 시간을 줄일 기회를 살펴봅니다.
- 레퍼런스 비교: 참고 디자인과 위계, 레이아웃, 타이포그래피, 간격 등을 비교합니다. 그대로 복제하기보다 현재 디자인의 약점을 찾는 데 초점을 둡니다.
3. 기본 크리틱의 범위도 확인하기
기본 `/design:design-critique`는 전반적 인상, 사용성, 시각적 위계, 접근성을 중심으로 검토합니다.
- 저자의 실험에서는 전환 관점의 평가를 요청해도 일반적인 디자인 리뷰가 돌아왔습니다.
- 전환이나 온보딩처럼 목적이 뚜렷하다면 기본 스킬에 요청을 덧붙이기보다, 해당 평가 기준을 명시한 별도 프롬프트로 시작하는 편이 좋습니다.
