모바일 UX 플레이북: 버튼 44px · 라인 1.6 · 지연로딩
모바일에서 UX는 곧 전환입니다. 이 플레이북은 레드버스가 실제 운영에서 검증한 터치 타깃 44px, 라인하이트 1.6, 지연로딩(lazy)을 핵심 축으로, 네비게이션·카드·타이포그래피·성능·접근성을 한 번에 정리합니다.
1) 목표 & KPI
- 목표: 한 화면 탐색, 오클릭(오동작) 최소화, 첫 유효 클릭까지의 시간(TTC) 단축
- KPI: 상단 CTR, TTC, 스크롤 심도, CLS/LCP/INP, 이탈률
2) 터치 타깃: 버튼 높이 44px+
- 버튼/링크: 높이 ≥ 44px, 좌우 패딩 12~16px, 요소 간 간격 8~12px
- 아이콘 버튼: 최소 44×44 박스에 배치, 터치 영역은 시각 요소보다 넓게
- 실수 방지: 파괴적 액션은 2단 확인(모달/스낵바 ‘되돌리기’)
3) 타이포그래피: 라인하이트 1.6
- 본문: 폰트 크기 16px 기준, line-height: 1.6 권장
- 제목: H1/H2는 1.25~1.35, 카드 캡션은 1.4 내외
- 문단 폭: 45~75자(영문 기준) 또는 16~24자(한글 단위) 가독 영역
4) 이미지 지연로딩(성능 핵심)
- 필수 속성:
width/height명시 +loading="lazy"+decoding="async" - 포맷: WebP 우선, 포스터/커버는 16:9 고정 비율
- 프리로드: Above the Fold 1~2장만
fetchpriority="high"
5) 네비게이션 & 점프링크
- 상단 고정: 홈/카테고리/링크모음/FAQ 3~5개로 간결하게
- 점프링크: #카테고리 #하이라이트 #FAQ를 상/하단 중복 배치
- 활성 상태: 현재 위치를 컬러/언더라인/두께로 명확히
6) 카드 & 그리드
- 그리드: 모바일 2열, 태블릿 3열 권장(자동 반응형)
- 썸네일: 16:9 통일, 세로형(9:16)은 ‘세로’ 배지로 구분
- 메타: 제목 2줄 + 보조 1줄(출처/장르/길이/OTT/상태)
- 액션: 썸네일 전체를 원클릭 링크, 보조로 ‘바로보기’ 버튼
7) 검색/폼 UX
- 입력 영역: 높이 44px, 플레이스홀더와 라벨을 분리
- 자동완성: 최근 검색/카테고리 제안, 오탈자 교정
- 키보드 타입: URL/이메일/숫자 등 적절한 키패드 지정
8) 성능 최적화 체크
- 이미지: 사이즈 매칭, 응답형(
srcset) 활용 - 스크립트: 지연 로딩(
defer), 사용률 낮은 라이브러리 제거 - 캐시: 정적 자원 캐시 헤더, ETag/Last-Modified, gzip/br
9) 접근성(A11y)
- 대체 텍스트: 썸네일 의미 설명, 아이콘 버튼은
aria-label - 키보드 포커스: 순서/가시성 보장, 포커스 트랩 금지
- 명도 대비: 텍스트 4.5:1 이상(굵은 대문자/큰 텍스트 3:1)
10) 운영 체크리스트(요약 표)
| 항목 | 체크 | 권장값 |
|---|---|---|
| 버튼 | 터치 타깃 | 높이 ≥ 44px, 간격 8~12px |
| 본문 | 가독성 | 라인하이트 1.6 |
| 이미지 | 지연로딩 | width/height + lazy + WebP |
| 그리드 | 반응형 | 모바일 2열 / 태블릿 3열 |
| 접근성 | 라벨/포커스 | aria-label, 포커스 링 표시 |
11) 자주 하는 실수와 해결
- 터치 미스 → 버튼 44px, 인접 요소 간격 8~12px 확보
- 텍스트 압축 → 본문 1.6, 제목/캡션 별도 라인하이트
- CLS 발생 → 이미지 width/height 고정, 폰트 지연 로딩 관리
- 느린 첫 렌더 → Above the Fold만 프리로드, 나머지 lazy
12) 예시 배치(스켈레톤)
헤더: 로고 · 공지/업데이트 · 검색(선택)
상단 버튼: [한국] [일본] [서양] [중국] [쇼츠]
그리드: 대표 카드 12 (2~3열)
보조: 하이라이트 6, FAQ 3
푸터: 가이드/문의/정책 링크FAQ (요약)
왜 44px인가요?
휴먼 팩터와 주요 OS 가이드라인을 기준으로 오클릭을 줄이는 최소 높이입니다.
라인하이트 1.6이 꼭 필요한가요?
가독성과 스크롤 리듬을 동시에 확보하는 안전한 기본값입니다.
lazy만으로 충분한가요?
Above the Fold는 프리로드/우선순위를, 나머지는 lazy로 혼합 운용하세요.