시니어 QA 시각 및 상호작용 감사 프롬프트

# QA 감사 보고서 ## 입력 요약 - **페이지/구현:** [명시 필요] - **디자인 레퍼런스:** [Figma 링크 / 디자인 시스템 / CLAUDE.md / 스크린샷] - **테스트 브라우저:** [예: Chrome, Safari, Firefox 최신 버전 + Safari iOS + Chrome Android] - **테스트 브레이크포인트:** [예: 375px, 768px, 1024px, 1280px, 1440px, 1920px] - **우선 순위 영역:** [선택 입력] --- ## 감사 체크리스트 결과 ### 1. 시각적 정합성 (Visual Fidelity) | 항목 | 상태 | 비고 | |------|------|------| | 간격이 디자인 토큰과 일치 | ☐ | 상세 내역 필요 | | 타이포그래피 (폰트/크기/줄높이/색상) | ☐ | 상세 내역 필요 | | 색상이 디자인 토큰과 정확히 일치 | ☐ | 상세 내역 필요 | | 모서리 라운드 값 | ☐ | 상세 내역 필요 | | 그림자 | ☐ | 상세 내역 필요 | | 아이콘 크기/정렬 | ☐ | 상세 내역 필요 | | 이미지 비율/크롭 | ☐ | 상세 내역 필요 | | 투명도 값 | ☐ | 상세 내역 필요 | ### 2. 반응형 동작 (Responsive) | 항목 | 상태 | 의견 | |------|------|------| | 브레이크포인트별 레이아웃 안정성 | ☐ | 상세 내역 필요 | | 텍스트 가독성 | ☐ | 상세 내역 필요 | | 터치 타겟 44x44 이상 | ☐ | 상세 내역 필요 | | 가로 스크롤 방지 | ☐ | 상세 내역 필요 | | 이미지 비율 유지 | ☐ | 상세 내역 필요 | | 모바일 내비게이션 | ☐ | 상세 내역 필요 | | 모달/오버레이 뷰포트 대응 | ☐ | 상세 내역 필요 | | 테이블 모바일 전략 | ☐ | 상세 내역 필요 | ### 3. 인터랙션 품질 (Interaction) | 항목 | 상태 | 의견 | |------|------|------| | 호버 상태 존재 | ☐ | 상세 내역 필요 | | 호버 전환 부드러움 | ☐ | 상세 내역 필요 | | 포커스 상태 (키보드) | ☐ | 상세 내역 필요 | | 활성/누름 피드백 | ☐ | 상세 내역 필요 | | 비활성 상태 구분 | ☐ | 상세 내역 필요 | | 로딩 상태 표시 | ☐ | 상세 내역 필요 | | 애니메이션 부드러움 | ☐ | 상세 내역 필요 | | 스크롤 위치 트리거 | ☐ | 상세 내역 필요 | | 페이지 전환 부드러움 | ☐ | 상세 내역 필요 | ### 4. 콘텐츠 엣지 케이스 (Content) | 항목 | 상태 | 의견 | |------|------|------| | 긴 텍스트 처리 | ☐ | 상세 내역 필요 | | 짧은 텍스트 처리 | ☐ | 상세 내역 필요 | | 이미지 누락 폴백 | ☐ | 상세 내역 필요 | | 빈 목록/그리드 상태 | ☐ | 상세 내역 필요 | | 단일 항목 표시 | ☐ | 상세 내역 필요 | | 100+ 항목 처리 | ☐ | 상세 내역 필요 | | 특수 문자 렌더링 | ☐ | 상세 내역 필요 | ### 5. 접근성 (A11y) | 항목 | 상태 | 의견 | |------|------|------| | 이미지 alt 텍스트 | ☐ | 상세 내역 필요 | | 색 대비 4.5:1/3:1 | ☐ | 상세 내역 필요 | | 폼 라벨 연결 | ☐ | 상세 내역 필요 | | 스크린리더 오류 안내 | ☐ | 상세 내역 필요 | | 탭 순서 논리적 | ☐ | 상세 내역 필요 | | 모달 포커스 트랩 | ☐ | 상세 내역 필요 | | Skip-to-content 링크 | ☐ | 상세 내역 필요 | | 색상 단독 정보 전달 | ☐ | 상세 내역 필요 | ### 6. 성능 영향 (Performance) | 항목 | 상태 | 의견 | |------|------|------| | CLS(레이아웃 시프트) | ☐ | 상세 내역 필요 | | 이미지 프로그레시브 로딩 | ☐ | 상세 내역 필요 | | 폰트 FOUT/FOIT | ☐ | 상세 내역 필요 | | 최초 렌더링 속도 | ☐ | 상세 내역 필요 | | 중저가 기기 프레임 드랍 | ☐ | 상세 내역 필요 | --- ## 이슈 보고서 | # | 페이지 | 이슈 | 카테고리 | 심각도 | 브라우저/기기 | 스크린샷 설명 | 수정 제안 | |---|--------|------|----------|--------|--------------|---------------|-----------| | 1 | | | Visual/Responsive/Interaction/A11y/Performance | Critical/High/Medium/Low | | | | --- ## 요약 통계 - 총 이슈 수: X - Critical: X | High: X | Medium: X | Low: X - 카테고리별: Visual: X | Responsive: X | Interaction: X | A11y: X | Performance: X - 우선 수정 5대 이슈: 1. [핵심 이슈 - 영향 가장 큼] 2. ... 3. ... 4. ... 5. ... ## 심각도 정의 - **Critical:** 기능 파손 또는 사용을 막는 레이아웃 문제 - **High:** 명확히 사용자 경험을 떨어뜨리는 문제 - **Medium:** 자세히 보면 인지되는 정도, 사용을 차단하지 않음 - **Low:** 세부 보고 필요 없는 마이너 폴리시 개선