디자인 검수·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 모바일 점검

이미지 최적화·Core Web Vitals 참고.

7. 접근성 (기본)

• [ ] 이미지에 alt 속성
• [ ] 색 대비가 충분한가 (4.5:1)
• [ ] 키보드만으로 주요 동작 가능한가
• [ ] 폼 입력칸에 라벨이 연결됐는가

상세는 웹 접근성 기초.

8. SEO·메타 (발행 직전)

• [ ] 페이지별 title·description이 다른가
• [ ] OG 태그(공유 이미지·제목)가 있는가
• [ ] favicon이 설정됐는가
• [ ] sitemap·robots.txt 점검
• [ ] 검색엔진 색인 설정 (개발 중 noindex 해제했는가)

noindex 해제 누락이 치명적 실수입니다. 개발 중 막아둔 색인을 발행 시 꼭 풀어야 검색에 노출됩니다.

점검 순서 팁

1. 데스크탑 → 모바일 순으로 전 페이지 훑기
2. 발견한 문제는 즉시 고치지 말고 목록화 → 한 번에 수정 (흐름 유지)
3. 수정 후 재점검 (수정이 다른 걸 깨뜨릴 수 있음)
4. 마지막에 실제 기기로 최종 확인

자주 하는 실수 (발행 후 발견되는 것들)

• 모바일 가로 스크롤: 데스크탑만 봐서 놓침
• noindex 안 풂: 발행했는데 검색에 안 뜸
• 폼이 실제로 안 감: 테스트 안 하고 발행
• 더미 텍스트 잔존: “Lorem Ipsum”이 그대로
• iOS Safari 깨짐: 본인 안드로이드만 확인
• 깨진 링크·이미지: 클릭·로딩 안 해봐서

FAQ

Q. 매번 전부 점검해야 하나요?
A. 네, 발행 전엔 전체를 훑는 게 안전합니다. 작은 수정도 다른 곳을 깨뜨릴 수 있습니다. 체크리스트가 있으면 10~20분이면 핵심을 훑을 수 있습니다.

Q. 가장 자주 발견되는 문제는 뭔가요?
A. 모바일 가로 스크롤과 noindex 미해제입니다. 둘 다 데스크탑에서 작업하면 안 보여서 놓치기 쉽습니다. 이 둘만 챙겨도 큰 사고를 막습니다.

Q. 실제 기기가 없으면요?
A. 브라우저 개발자도구의 기기 모드로 대부분 잡힙니다. 다만 iOS Safari는 실제와 차이가 있어, 가능하면 아이폰 실기기로 한 번은 확인하는 게 좋습니다.

Q. 클라이언트에게도 체크리스트를 주나요?
A. 콘텐츠·연락처 정확성, 오탈자처럼 의뢰자가 가장 잘 아는 항목은 함께 점검하면 좋습니다. 기술 항목(반응형·성능)은 제작자가 책임집니다.

관련 가이드

• 웹 접근성 기초
• 이미지·미디어 최적화
• 기술 SEO 체크리스트
• 모바일 우선 디자인
• 기업 홈페이지 제작 가이드 — 페이지 구성과 콘텐츠 설계 기준