kotalk/문서/53-mobile-layout-breakpoint-and-safe-area-spec.md

Mobile Layout Breakpoint And Safe Area Spec

목적

모바일 웹의 첫인상을 무너뜨리는 가장 큰 원인 중 하나는 레이아웃 오버플로와 안전 영역 무시다.
이 문서는 모바일 레이아웃 기준과 브레이크포인트, 안전 영역 규칙을 정리한다.

핵심 원칙

• 가로 스크롤 0
• 주소창 변화에도 레이아웃 안정
• 키보드가 올라와도 입력창 보존
• 상단과 하단 안전 영역 존중

기준 뷰포트

• 360 x 800
• 390 x 844
• 412 x 915
• 430 x 932

체크 항목

• 헤더 버튼 잘림 여부
• 하단 내비와 입력창 충돌 여부
• 대화 목록과 본문 전환 시 폭 유지
• 긴 대화명, 긴 메시지에서 오버플로 여부

완료 기준

• 어떤 대표 뷰포트에서도 메신저 기본 구조가 흐트러지지 않아야 한다.