이 글은 누구를 위한 것인가
- 앱 출시 전 UX 품질을 최종 점검하려는 PM과 디자이너
- 사용자 불만 리뷰를 줄이고 싶은 모바일 개발팀
- 신규 앱 기획 단계에서 UX 기준을 세우고 싶은 팀
들어가며
앱 스토어 리뷰에서 "사용하기 불편하다", "버튼이 작다", "로딩이 너무 길다"는 불만은 UX 체크리스트로 사전에 80% 이상 예방할 수 있다. 문제는 출시 직전 압박 속에서 이런 기본적인 것들을 놓치는 경우가 많다는 것이다.
이 체크리스트는 50개 항목을 8개 카테고리로 정리했다. 출시 전 팀 전체가 공유하고, 각 항목을 실제로 확인하는 것이 목표다.
이 글은 bluefoxdev.kr의 모바일 UX 설계 원칙 을 참고하고, 실무 체크리스트 관점에서 확장하여 작성했습니다.
더 많은 UX 패턴은 bluebutton.kr 에서도 확인할 수 있습니다.
카테고리 1: 터치 인터랙션 (10개)
| # | 항목 | 기준 | 확인 |
|---|
| 1 | 터치 타겟 크기 | 최소 44×44pt (iOS), 48×48dp (Android) | ☐ |
| 2 | 인접 버튼 간격 | 최소 8pt 간격 | ☐ |
| 3 | 스크롤 방향 일관성 | 수평/수직 스크롤 혼재 시 명확한 시각 단서 | ☐ |
| 4 | 스와이프 제스처 | 스와이프 가능한 요소에 시각적 힌트 제공 | ☐ |
| 5 | 롱프레스 기능 | 롱프레스 옵션은 발견 가능성 확보 | ☐ |
| 6 | 더블탭 방지 | 버튼 중복 클릭 시 중복 요청 방지 | ☐ |
| 7 | 스크롤 과관성 | 플랫폼 기본 스크롤 동작 준수 | ☐ |
| 8 | 풀-투-리프레시 | 목록 화면에서 당겨서 새로고침 지원 | ☐ |
| 9 | 뒤로가기 처리 | Android 물리적 뒤로가기, iOS 스와이프 백 일관성 | ☐ |
| 10 | 외부 영역 탭 | 모달/바텀시트 외부 탭으로 닫기 지원 | ☐ |
카테고리 2: 내비게이션 (8개)
| # | 항목 | 기준 | 확인 |
|---|
| 11 | 현재 위치 표시 | 탭바/네비게이션에서 현재 화면 명확히 표시 | ☐ |
| 12 | 뒤로가기 일관성 | 뒤로가기가 항상 이전 화면으로 이동 | ☐ |
| 13 | 딥링크 처리 | 모든 주요 화면에 딥링크 접근 가능 | ☐ |
| 14 | 탭바 아이콘 | 아이콘+텍스트 조합으로 의미 명확화 | ☐ |
| 15 | 화면 전환 애니메이션 | 계층 구조에 맞는 전환 방향 | ☐ |
| 16 | 로그인 필요 화면 | 미로그인 시 명확한 안내 + 로그인 유도 | ☐ |
| 17 | 앱 재시작 시 위치 | 마지막 위치 복원 또는 홈으로 초기화 결정 | ☐ |
| 18 | 브레드크럼 | 3단계 이상 깊이 시 현재 위치 표시 | ☐ |
카테고리 3: 폼과 입력 (8개)
| # | 항목 | 기준 | 확인 |
|---|
| 19 | 키보드 타입 | 숫자: inputMode="numeric", 이메일: keyboardType="email" | ☐ |
| 20 | 자동 대문자 | 이름/주소 필드는 첫 글자 자동 대문자, 비밀번호는 비활성화 | ☐ |
| 21 | 자동완성 힌트 | autocomplete 속성으로 브라우저/OS 자동완성 지원 | ☐ |
| 22 | 인라인 검증 | 포커스 이탈 시 즉시 오류 표시 (제출 후 아님) | ☐ |
| 23 | 오류 메시지 위치 | 오류 발생 필드 바로 아래에 표시 | ☐ |
| 24 | 비밀번호 토글 | 비밀번호 표시/숨김 토글 제공 | ☐ |
| 25 | 키보드 가림 방지 | 입력 시 키보드가 입력 필드를 가리지 않음 | ☐ |
| 26 | 폼 데이터 보존 | 실수로 화면 이탈 시 데이터 보존 옵션 | ☐ |
카테고리 4: 로딩과 피드백 (7개)
| # | 항목 | 기준 | 확인 |
|---|
| 27 | 스켈레톤 UI | 데이터 로딩 중 레이아웃 스켈레톤 표시 | ☐ |
| 28 | 로딩 타임아웃 | 15초 이상 로딩 시 재시도 옵션 제공 | ☐ |
| 29 | 버튼 로딩 상태 | 요청 중 버튼 비활성화 + 로딩 인디케이터 | ☐ |
| 30 | 성공 피드백 | 주요 액션 성공 시 시각/햅틱 피드백 | ☐ |
| 31 | 오류 피드백 | 네트워크 오류 시 재시도 가능한 오류 화면 | ☐ |
| 32 | 무한 스크롤 표시 | 다음 페이지 로딩 중 인디케이터 표시 | ☐ |
| 33 | 업로드 진행률 | 파일 업로드 시 진행률 바 표시 | ☐ |
카테고리 5: 빈 상태와 오류 (5개)
| # | 항목 | 기준 | 확인 |
|---|
| 34 | 빈 목록 | 데이터 없는 목록에 Empty State 디자인 | ☐ |
| 35 | 검색 결과 없음 | 검색 결과 없음 + 추천 검색어 또는 대안 | ☐ |
| 36 | 네트워크 오류 | 오프라인 감지 + 오프라인 배너 표시 | ☐ |
| 37 | 앱 크래시 복구 | 크래시 후 자동 복구 시도 + 친절한 안내 | ☐ |
| 38 | 404 화면 | 존재하지 않는 콘텐츠 접근 시 안내 화면 | ☐ |
카테고리 6: 성능 (5개)
| # | 항목 | 기준 | 확인 |
|---|
| 39 | 앱 시작 시간 | Cold Start 3초 이내 | ☐ |
| 40 | 스크롤 부드러움 | 60fps (또는 120fps) 스크롤 유지 | ☐ |
| 41 | 이미지 최적화 | WebP/HEIC 사용, 디스플레이 크기 맞춤 로딩 | ☐ |
| 42 | 메모리 누수 | 화면 이탈 후 메모리 해제 확인 | ☐ |
| 43 | 배터리 영향 | 백그라운드 작업 최소화, 위치 권한 최적화 | ☐ |
카테고리 7: 접근성 (4개)
| # | 항목 | 기준 | 확인 |
|---|
| 44 | 스크린 리더 | 모든 인터랙티브 요소에 접근성 레이블 | ☐ |
| 45 | 색상 대비 | WCAG AA 기준 (4.5:1 이상) | ☐ |
| 46 | 다이나믹 폰트 | 시스템 폰트 크기 설정 반영 | ☐ |
| 47 | 모션 감소 설정 | "모션 줄이기" 설정 시 애니메이션 비활성화 | ☐ |
카테고리 8: 다크모드와 다국어 (3개)
| # | 항목 | 기준 | 확인 |
|---|
| 48 | 다크모드 지원 | 시스템 다크모드 설정 자동 반영 | ☐ |
| 49 | 텍스트 길이 대응 | 다국어 텍스트 길이 변화에 레이아웃 대응 | ☐ |
| 50 | RTL 레이아웃 | 아랍어/히브리어 RTL 지원 (글로벌 앱) | ☐ |
마무리: 체크리스트 활용 방법
이 50개 항목을 출시 4주 전부터 팀이 분담해서 점검하는 것을 권장한다.
출시 -4주: 카테고리 3~6 점검 (폼, 로딩, 성능)
출시 -2주: 카테고리 1~2, 7~8 점검 (인터랙션, 접근성)
출시 -1주: 전체 재점검 + QA팀 교차 검증
출시 당일: 크리티컬 항목(27, 28, 29, 30, 31) 최종 확인
모든 항목을 100% 만족하지 못해도 괜찮다. 중요한 것은 어떤 항목이 미충족인지 팀이 인지하고, 출시 후 빠른 업데이트 계획을 갖는 것이다.