디자인 검수·QA 체크리스트 — 납품 전 마지막 점검
“다 됐다” 싶을 때가 가장 위험합니다. 폰트가 한 군데만 다르거나, 모바일에서 가로 스크롤이 생기거나, 깨진 링크가 하나 있으면 전체 완성도가 깎여요. 발행 전 체계적으로 훑는 체크리스트가 있으면 이런 실수를 막습니다.
접근성 상세는 웹 접근성 기초, 속도는 Core Web Vitals에서 다룹니다. 이 글은 발행 전 종합 점검입니다.
왜 QA가 필요한가
- 작업 중엔 한 화면만 보다가 전체 일관성을 놓침
- 데스크탑만 보다가 모바일을 놓침
- 본인 브라우저만 보다가 다른 브라우저를 놓침
- 작은 흠 하나가 신뢰·완성도 전체를 깎음
→ 체크리스트로 빠짐없이 훑는 게 핵심입니다.
1. 디자인 일관성
- 폰트(종류·크기·굵기)가 규칙대로 통일됐는가
- 색이 정해진 팔레트 안에서 쓰였는가 (떠도는 색 X)
- 여백·간격이 일정한가 (4·8 배수)
- 버튼·카드 스타일이 페이지마다 동일한가
- 정렬 기준선이 맞는가
- 제목 위계(H1·H2·H3)가 일관된가
디자인 토큰을 정해뒀다면 위반을 찾기 쉽습니다. (디자인 시스템)
2. 반응형 (기기별)
- 모바일에서 가로 스크롤이 없는가 (가장 흔한 버그)
- 모바일 헤드라인·이미지가 잘리지 않는가
- 태블릿 중간 폭에서 깨지지 않는가
- 터치 영역(버튼·링크)이 충분히 큰가
- 데스크탑 와이드(1920px+)에서 콘텐츠가 늘어지지 않는가
실제 기기 또는 브라우저 개발자도구의 기기 모드로 점검. 대표 폭: 375px(모바일)·768px(태블릿)·1280px(데스크탑).
3. 브라우저 호환
- Chrome / Safari / 삼성 인터넷에서 확인
- iOS Safari (아이폰)에서 확인 — 의외로 차이 많음
- 폰트·레이아웃이 브라우저마다 동일한가
4. 콘텐츠·링크
- 더미 텍스트(Lorem Ipsum)가 남아 있지 않은가
- 모든 링크가 정상 작동하는가 (404 없음)
- 외부 링크가 새 창으로 열리는가 (필요 시)
- 이미지가 다 뜨는가 (깨진 이미지 X)
- 오탈자·띄어쓰기 점검
- 연락처·주소·영업시간이 정확한가
5. 기능
- 문의·예약 폼이 실제로 전송되는가
- 폼 제출 후 완료 메시지·알림이 오는가
- 전화·카카오·지도 버튼이 작동하는가
- 네비게이션 메뉴가 모바일에서 열리는가
- 팝업·슬라이드가 정상 동작하는가
6. 이미지·성능
- 이미지가 최적화됐는가 (WebP·압축·리사이즈)
- 무거운 이미지로 첫 화면이 느리지 않은가
- PageSpeed Insights 모바일 점검
7. 접근성 (기본)
- 이미지에 alt 속성
- 색 대비가 충분한가 (4.5:1)
- 키보드만으로 주요 동작 가능한가
- 폼 입력칸에 라벨이 연결됐는가
상세는 웹 접근성 기초.
8. SEO·메타 (발행 직전)
- 페이지별 title·description이 다른가
- OG 태그(공유 이미지·제목)가 있는가
- favicon이 설정됐는가
- sitemap·robots.txt 점검
- 검색엔진 색인 설정 (개발 중 noindex 해제했는가)
⚠️ noindex 해제 누락이 치명적 실수입니다. 개발 중 막아둔 색인을 발행 시 꼭 풀어야 검색에 노출됩니다.
점검 순서 팁
- 데스크탑 → 모바일 순으로 전 페이지 훑기
- 발견한 문제는 즉시 고치지 말고 목록화 → 한 번에 수정 (흐름 유지)
- 수정 후 재점검 (수정이 다른 걸 깨뜨릴 수 있음)
- 마지막에 실제 기기로 최종 확인
⚠️ 자주 하는 실수 (발행 후 발견되는 것들)
- 모바일 가로 스크롤: 데스크탑만 봐서 놓침
- noindex 안 풂: 발행했는데 검색에 안 뜸
- 폼이 실제로 안 감: 테스트 안 하고 발행
- 더미 텍스트 잔존: “Lorem Ipsum”이 그대로
- iOS Safari 깨짐: 본인 안드로이드만 확인
- 깨진 링크·이미지: 클릭·로딩 안 해봐서
❓ FAQ
Q. 매번 전부 점검해야 하나요? A. 네, 발행 전엔 전체를 훑는 게 안전합니다. 작은 수정도 다른 곳을 깨뜨릴 수 있어요. 체크리스트가 있으면 10~20분이면 핵심을 훑을 수 있습니다.
Q. 가장 자주 발견되는 문제는 뭔가요? A. 모바일 가로 스크롤과 noindex 미해제입니다. 둘 다 데스크탑에서 작업하면 안 보여서 놓치기 쉬워요. 이 둘만 챙겨도 큰 사고를 막습니다.
Q. 실제 기기가 없으면요? A. 브라우저 개발자도구의 기기 모드로 대부분 잡힙니다. 다만 iOS Safari는 실제와 차이가 있어, 가능하면 아이폰 실기기로 한 번은 확인하는 게 좋아요.
Q. 클라이언트에게도 체크리스트를 주나요? A. 콘텐츠·연락처 정확성, 오탈자처럼 의뢰자가 가장 잘 아는 항목은 함께 점검하면 좋습니다. 기술 항목(반응형·성능)은 제작자가 책임지고요.