모바일 화면 패턴
폰 브라우저와 홈 화면 앱(767px 이하)에서 쓰는 패턴이에요. 태블릿(768-1023px)도 같은 틀을 넓게 써요.
가로로 미는 칩·탭 줄#
고를 것이 폭보다 많으면 줄을 바꾸지 않고 가로로 밀어요. 스크롤 막대는 숨겨요.
폰에서는 탭과 칩의 여백이 커져요. 보이는 크기를 바꾸지 않고 누르는 칸만 넓힌 곳도 있어요 - 누르는 영역.
위·아래 고정 막대#
위 막대에는 로고와 지금 자리, 아래 막대에는 자주 가는 곳을 둬요. 콘텐츠는 막대 밑으로 흘러요.
- 위 막대는 노치·상태 표시줄 아래부터 그려요(안전 영역 위쪽만큼 띄워요).
- 막대는 반투명 유리 면이라 아래 콘텐츠가 비쳐요.
- 단지 상세 같은 깊은 화면도 같은 전체 화면 틀로 열려요 - 레이아웃.
아래에서 올라오는 시트#
목록·필터·목차처럼 잠깐 열었다 닫는 것은 아래에서 올라오는 시트로 열어요.
- 올라올 때는 시트 전용 이징(--ease-drawer)을 써요.
- 바깥을 누르거나 닫기 버튼, Esc로 닫혀요. 열린 동안 뒤 화면은 스크롤되지 않아요.
- 이 사이트의 폰 ‘목차’가 같은 패턴이에요.
글자는 한 단계 크게#
폰에서는 본문 14 → 16px처럼 글자 역할이 한 단계 커져요. 역할 이름은 그대로라 화면 코드를 따로 쓰지 않아요 - 타이포그래피.