31 lines
852 B
Markdown
31 lines
852 B
Markdown
|
# Mobile Layout Breakpoint And Safe Area Spec
|
||
|
|
|
||
|
|
## 목적
|
||
|
|
|
||
|
|
모바일 웹의 첫인상을 무너뜨리는 가장 큰 원인 중 하나는 레이아웃 오버플로와 안전 영역 무시다.
|
||
|
|
이 문서는 모바일 레이아웃 기준과 브레이크포인트, 안전 영역 규칙을 정리한다.
|
||
|
|
|
||
|
|
## 핵심 원칙
|
||
|
|
|
||
|
|
- 가로 스크롤 0
|
||
|
|
- 주소창 변화에도 레이아웃 안정
|
||
|
|
- 키보드가 올라와도 입력창 보존
|
||
|
|
- 상단과 하단 안전 영역 존중
|
||
|
|
|
||
|
|
## 기준 뷰포트
|
||
|
|
|
||
|
|
- 360 x 800
|
||
|
|
- 390 x 844
|
||
|
|
- 412 x 915
|
||
|
|
- 430 x 932
|
||
|
|
|
||
|
|
## 체크 항목
|
||
|
|
|
||
|
|
- 헤더 버튼 잘림 여부
|
||
|
|
- 하단 내비와 입력창 충돌 여부
|
||
|
|
- 대화 목록과 본문 전환 시 폭 유지
|
||
|
|
- 긴 대화명, 긴 메시지에서 오버플로 여부
|
||
|
|
|
||
|
|
## 완료 기준
|
||
|
|
|
||
|
|
- 어떤 대표 뷰포트에서도 메신저 기본 구조가 흐트러지지 않아야 한다.
|