Safe Area
안전 영역 — 상태 표시줄 · 홈 표시줄 · 노치에 가릴 수 있는 화면 가장자리
화면 가장자리는 상태 표시줄 · 홈 표시줄 · 카메라 자리(노치) · 둥근 모서리에 가릴 수 있다. 무엇을 안전 영역 안에 두고 무엇을 화면 끝까지 채울지 정한다 — 당근 SEED 의 Safe Area 패턴을 들인다(사용자 결정 2026-10-04, 화면 틀 · 이동 비교 페이지 "따라오는 것"). 출처: seed-design.io Patterns › Safe Area(Apache-2.0).
요소가 가려지거나 잘렸을 때 정보나 기능을 잃는지에 따라 배치 범위를 정합니다. — SEED
안과 끝
| 무엇 | 어디까지 | 예 |
|---|---|---|
| 누르는 것 · 읽는 것(버튼 · 링크 · 입력칸 · 탭 · 글 · 아이콘 · 배지 · 뜻이 있는 그림) | 안전 영역 안 | 상단 바의 버튼 · 제목, 탭 바의 칸, 떠 있는 버튼, 바닥 버튼 |
| 배경 · 장식 | 화면 끝까지 | 상단 바 · 바닥 바의 바탕, Page Banner 의 바탕, 화면 폭 Divider, 장식 그림 |
| 스크롤 영역 | 화면 끝까지 — 스크롤하면 가려진 것을 안으로 가져올 수 있다 | 목록(아래 끝까지), 가로 칩 줄 · Tabs(좌우 끝까지) |
| 고정된 바 · 버튼 | 안전 영역 안 — 스크롤로 가져올 수 없다 | 탭 바 · 바닥 버튼 · 떠 있는 버튼 |
- 네 변의 안전 영역은 따로다 — 한 방향이 늘 0 이라고 가정하지 않고 늘 지금 값을 쓴다(웹
env(safe-area-inset-*)· 앱MediaQuery.viewPadding). - 한 요소에 바탕과 내용이 함께 있으면 부분마다 따로 — 바탕은 끝까지, 내용은 안.
여백은 안전 영역 경계부터
- 좌우 여백(본문
spacing-global-gutter24 · 상단 바의 6)은 화면 끝이 아니라 안전 영역 경계에서 잰다 — 안전 영역 + 여백. - 바닥에 고정한 바의 버튼은 아래 안전 영역 경계에서 바의 안쪽 여백만큼 띄운다.
- 가운데 정렬은 안전 영역을 기준으로 한다 — 왼쪽 · 오른쪽 안전 영역이 다르면 화면 가운데가 아니다.
- 끝까지 스크롤하면 마지막 항목 전체가 안전 영역 안에 보이게, 스크롤 내용의 끝에 안전 영역 + 기본 여백을 둔다.
- 떠 있는 탭 바는 바의 아래 여백 6 만 홈 표시줄 영역에 걸치고 누르는 칸은 그 위에서 끝난다(Bottom Navigation).
부품이 스스로 반영하는 방향
| 부품 | 반영하는 방향 |
|---|---|
| Top Navigation | 위(바가 그만큼 높아진다) · 좌우 |
| Bottom Navigation | 아래 · 좌우 |
| Bottom Sheet · Menu Sheet | 아래 |
| Side Panel | 위(머리) · 아래(패널 내용 끝) · 붙은 쪽(폭에 더한다) |
| Snackbar | 좌우 · 아래 |
| Floating Action Button | 오른쪽 · 아래 |
| 화면 본문 | 좌우 · 아래(스크롤 내용 끝) |
웹 — viewport-fit=cover
안전 영역 값을 받으려면 문서의 viewport 메타에 viewport-fit=cover 를 둔다 — 없으면 iOS 사파리가 env(safe-area-inset-*) 를 0 으로 계산한다(SEED). 지금 두 웹 모두 없다 — 앱 적용 때 넣는다.