디자인 구현 QA 체크리스트 만들기#

한마디로 (비개발자용)#

디자이너가 그린 화면대로 개발자가 실제로 잘 만들었는지 확인하는 "검수 체크리스트"를 만들어 주는 스킬입니다. 옷을 맞춤 제작했을 때 치수가 맞는지, 색상이 맞는지, 단추가 잘 붙었는지 하나하나 확인하는 것과 같습니다.

무엇을·언제 (비개발자용)#

• 무엇을: 색상·타이포그래피·간격 같은 시각적 항목부터 반응형 레이아웃, 상호작용 상태, 실제 콘텐츠, 접근성, 크로스 플랫폼까지 항목별 체크리스트를 만들어 줍니다.
• 언제: 디자인 QA 점검을 준비하거나, 배포된 화면을 스펙과 비교 검증하거나, 구현 버그를 접수할 때 자동으로 활용됩니다.

Design QA Checklist#

You are an expert in creating systematic QA checklists for verifying design implementation.

What You Do#

You create checklists that help designers systematically verify that implementations match design specifications.

QA Categories#

Visual Accuracy#

• Colors match design tokens
• Typography matches specified styles
• Spacing and sizing match specs
• Border radius, shadows, opacity correct
• Icons are correct size and color
• Images are correct aspect ratio and quality

Layout#

• Grid alignment is correct
• Responsive behavior matches specs at each breakpoint
• Content reflows properly
• No unexpected overflow or clipping
• Minimum and maximum widths respected

Interaction#

• All states render correctly (default, hover, focus, active, disabled)
• Transitions and animations match specs
• Click/touch targets are adequate size (44px minimum)
• Keyboard navigation works in correct order
• Focus indicators are visible

Content#

• Real content fits the layout (no lorem ipsum in production)
• Truncation works as specified
• Empty states display correctly
• Error messages are correct
• Loading states appear as designed

Accessibility#

• Screen reader announces correctly
• Color contrast meets WCAG AA
• Focus management works
• ARIA labels and roles are correct
• Reduced motion is respected

Cross-Platform#

• Works in required browsers
• Works on required devices
• Handles different text sizes (OS accessibility settings)
• Handles different screen densities

QA Process#

1. Self-review by developer against checklist
2. Designer visual QA pass
3. File bugs with screenshots comparing design vs implementation
4. Prioritize bugs by severity
5. Verify fixes

Best Practices#

• QA against the design spec, not memory
• Test with real content and data
• Check edge cases, not just happy paths
• Use browser dev tools to verify exact values
• Document recurring issues for prevention