모바일 세이프 디자인

1) 이동 안전 원칙

1. 엄지 우선: 행동 영역-엄지 손가락 내에서 (하단 탐색, 아래 오른쪽에서 FAB/기본).
2. 터치 친화적 인: 필드가있는 40-48 px 이상을 대상으로합니다. 거리 이상 8-12 px.
3. 설계 상 안전 영역: 컷 아웃/제스처 영역 ('env (safe-area-inset-)') 을 고려합니다.
4. 속도는 "아름다움" 보다 중요합니다: LCP 5 초, INP 1 (p75).
5. 제한: 최소 모달, 최소 형태, 최대 자동 완성.
6. 네트워크 및 배터리: 경제적 인 트래픽, 오프라인 모드, 유능한 배신.

2) 그리드, 중단 점 및 안전 지역

중단 점: λ480 (모바일), 481-768 (수직 태블릿), 769-1024 (수평 태블릿).
최대 너비의 유연한 카드 1-2 열이있는 컨테이너.
제스처 탐색을위한 패널 이하 56 px, 재고.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) 텍스트, 버튼 및 상호 작용

텍스트: 16-18 px베이스, 라인 투 라인 1. 4–1. 6, 줄 길이 40-70 자.
버튼: 높이 44-52 px, 명확한 초점/자산/비활성화; 아이콘 + 텍스트뿐만 아니라 아이콘.
제스처에는 항상 대안이 있습니다 (버튼/메뉴/핫스팟).
애니메이션은 '변환/불투명도' 에 있으며 '선호 감소 모션' 을 존중합니다.

4) 양식, 키보드 및 자동 완성

필드를 최소화하고 입력 모드/유형을 사용하며 자동 완료하십시오

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

마스크가 부드럽습니다 (형식을 표시하지만 입력을 중단하지는 않습니다).

5) 탐색 및 화면 아키텍처

하단 탐색 (최대 5 점) + "뒤" 제스처.
대상 동작까지 최대 3-5 개 탭합니다.
중요한 섹션에 대해서는 "햄버거" 를 피하십시오. 사용/분할 탭.
UI 상태: '로딩/빈/오류/성공' -작업 및 설명과 함께 명시 적입니다.

6) 성능 및 절약

코드 분할 및 게으른 위젯; 차트/카드는 "주문형" 으로드됩니다.
중요한 자원- '미리로드', 나머지- '연기 '/' 게으른'.
AVIF/WebP 이미지 + 'srcset/sizes', 'loading = "gazer"'.
글꼴: 1 개의 변수 WOFF2, '글꼴 표시: 교환', 기본 사전 부하 만.
서비스 작업자 (PWA) 를 통한 캐싱 및 오프라인, '부실한 상태'.

7) 네트워크, 오프라인 및 배상

중요한 데이터 캐시 및 동기화 대기열이있는 오프라인 화면

3G/높은 대기 시간 친근감: 요청 제한, 버칭, 지터 백오프.
데이터 경제 존중: 클라이언트 힌트/저장 데이터 → 가벼운 이미지, 자동 비디오 없음.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) 모바일의 가용성 (A11y)

전체 키보드/스위치 제어 및 읽을 수있는 초점.
WCAG AA, 대체 텍스트 ('alt', 'aria-lable') 를 대조하십시오.
큰 대상과 일시 정지 애니메이션; 제스처는 버튼으로 복제됩니다.
다이어그램의 경우-짧은 텍스트 요약 및 데이터 테이블.

9) 어두운 테마, 밝기 및 합성

어두운 주제는 단순한 반전이 아닙니다. 대비 및 색상 악센트를 확인하십시오.
시스템 테마를 존중하십시오 ('선호하는 색상 체계').
Haptics-복용 (성공/오류), 비활성화 기능.

10) 개인 정보 보호, 허가 및 보안

값의 순간에만 권한 (카메라 → 문서 스캔).
"왜" 설명 및 허가없이 대체.
암호 대신 WebAuthn/생체 인식; 암호 관리자가 지원됩니다.
접을 때 민감한 필드를 숨깁니다. 경고 시간 초과.

11) 알림 및 배경 작업 푸시

빈번하지 않은 명확한 가치 시나리오; 조용한 시간.
원탭 수신 거부 및 선호 센터.
배경 타박상-배터리/네트워크 제한이있는 작은 부분입니다.

12) 이미지, 미디어 및 적응성

크기 지정 자리 표시자 → 0 CLS.
자막과 컨트롤이있는 자동 재생없이 기본적으로 비디오; 적응 형 비트 레이트.
아이콘 - 벡터 (SVG) 또는 스프라이트; 1MB 세트를로드하지 마십시오.

13) 스니펫 및 설정

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) 테스트 계획 (최소)

장치: 1 iOS + 1 Android (소형/중형/대형 화면), 세로/가로.
네트워크: 오프라인, 3G, 4G (스로틀); 저장 데이터를 활성화하십시오.
가용성: VoiceOver/TalkBack 스크립트, 키보드 패스, 대비.
성능: Web-Vitals (RUM), 프로파일 러; 큰 목록, 타이핑/스크롤/제스처.
안정성: 회전, 접기/반환, 프로세스 죽이기 → 상태 복원.
보안: 권한, 세션 타임 아웃, 개인 데이터 숨기기, 생체 인식.

15) 모바일 안전 지표

LCP/INP/CLS (p75, 모바일 전용).
동작 시간 (기본 대상 클릭 전).
정확도를 누릅니다 (가까운 요소의 잘못된 탭의 공유).
충돌없는 세션/ANR 요금 (응용 프로그램/웹뷰).
세션 당 데이터 및 배터리 영향.
옵트 인/옵트 아웃 보풀 및 참여.

16) 반 패턴

버튼 28-32 px, 밀도가 높은 목록, 필드가없는 "카드" 가 누락되었습니다.
밝은 회색 배경에 텍스트 12-14 px.
모달에 대한 모달; 제스처만으로 닫기.
3G/Save-Data의 자동 플레이 비디오/애니메이션.
제스처 전용 기능, 버튼/메뉴 없음.
안전 영역 → "bangs" 또는 스 와이프 패널과 겹치는 내용을 설명하지 않았습니다.

17) 화면 점검표

• 48 px, 8-12 px 목표
• 안전 영역 계수 ('viewport-fit = cover', 'env (safe-area-inset-)')
• 텍스트 이하 16 px, 대비 AA, 초점/자산 표시
• 양식: 올바른 '유형/입력 모드/자동 완료', 자동 완료 작업
• LCP 계정 2. 5 초, INP 1 (모바일)
• 게으른 무거운 블록, 다운 샘플링 목록
• 오프라인 화면, 백오프, 저장 데이터 모드로 다시 트레이
• 유동성 및 허가-요청시 설명 및 거부
• 어두운 테마 및 감소 모션 지원
• 테스트: iOS/Android, 세로/풍경, 3G/오프라인, SR 패스

18) 구현 계획 (3 회 반복)

• 그리드 및 안전 지역, 48 px 대상, 키보드 유형/자동 완성, 기본 웹 바이탈, 게으른 이미지, 어두운 테마.

• 코드 분할, 컨텐츠 가시성, 오프라인 + SW, 저장 데이터 모드, 재 트레이/대기열, 상태 복구, A11y 감사.

• RUM 보드, 트래픽/배터리 분석, 합성, 권한 스크립트, 목록 개선 (가상화), 모바일 네트워크의 정규 게임 일.

19) 미니 -FAQ

별도의 "모바일 메뉴" 가 필요합니까?
예, 그러나 우선 순위는 3-5 포인트의 하단 탐색입니다. 햄버거-2 차.

버튼 누락을 줄이는 방법?
목표를 48 px로 늘리고, 필드를 추가하고, 수직으로 퍼지고, "성공/오류" 를 위해 haptic을 사용하십시오.

오프라인 필요?
중요한 시나리오의 경우 예: 캐시, 동작 대기열 및 사용자에게 정직한 프롬프트.

결과

모바일 안전 설계는 터치 인체 공학, 안전 영역 회계, 성능, 가용성 및 그리드/배터리 저항의 조합입니다. 체크리스트를 따르고 실제 사용자와 함께 웹 바이탈을 측정하고 개인 정보 보호 및 시스템 설정을 존중하며 모든 모바일 장치에서 인터페이스가 편리하고 안정적입니다.