Safe Area
화면 가장자리는 시스템 UI나 기기 형태에 가려질 수 있습니다. 요소를 가려지지 않는 안전 영역(Safe Area) 안에 둘지, 화면 끝까지 채울지 정하는 기준을 설명합니다.
안전 영역 이해하기
안전 영역(Safe Area)은 화면에서 시스템 UI나 기기의 형태에 가려지거나 잘리지 않는 영역입니다. 안전 영역 밖은 다음 요소에 의해 가려지거나 잘릴 수 있습니다.
- 상태 표시줄, 홈 인디케이터처럼 화면 위에 겹쳐 표시되는 시스템 UI
- 디스플레이 컷아웃(카메라나 센서를 위해 화면의 일부가 비워진 부분)
- 화면의 둥근 모서리
네 변의 크기는 서로 다를 수 있습니다
안전 영역의 inset은 위아래에만 있지 않습니다.
- 세로 화면: 일반적으로 상하에 안전 영역 inset이 존재하나, 기기 형태에 따라 왼쪽이나 오른쪽에도 inset이 생길 수 있습니다.
- 가로 화면: 카메라나 센서가 좌우에 놓일 수 있습니다. 홈 인디케이터가 아래쪽에 표시되는 기기에서는 하단 inset도 남을 수 있습니다.
네 변의 inset은 서로 독립적입니다. 위와 아래, 왼쪽과 오른쪽의 값이 같다고 가정하지 않습니다.
크기는 상황마다 달라집니다
안전 영역의 크기는 기기, OS, 화면 방향, 시스템 UI의 표시 상태에 따라 달라질 수 있습니다. 네 방향의 inset이 모두 0일 수도, 일부만 0이 아닐 수도, 모두 0이 아닐 수도 있습니다.
특정 방향이 항상 0이라고 가정하거나, 특정 기기나 상황에서 확인한 값을 모든 화면에 고정값으로 적용하지 않습니다.
화면을 띄운 뒤에도 달라질 수 있습니다
화면이 이미 띄워진 상태에서도 안전 영역의 크기나 위치가 달라질 수 있습니다. 예를 들면 다음과 같습니다.
- 크기가 달라지는 경우: 화면 분할을 지원하는 환경에서는 앱이 화면에서 차지하는 영역이 달라지면서 각 변의 inset이 줄어들거나 없어질 수 있습니다.
- 위치가 달라지는 경우: 가로 화면에서 기기를 반대 방향으로 돌렸을 때 화면도 함께 회전하면, 카메라를 피하기 위한 inset이 반대쪽으로 옮겨 갈 수 있습니다.
화면 회전이나 분할로 안전 영역이 달라져도 콘텐츠가 가려지지 않도록, 항상 현재의 안전 영역을 기준으로 배치합니다.
배치 원칙
요소가 가려지거나 잘렸을 때 정보나 기능을 잃는지에 따라 배치 범위를 정합니다. 스크롤되는 요소는 가려진 부분을 안전 영역 안으로 가져올 수 있는지도 확인합니다.
콘텐츠는 안전 영역 안에
누를 수 있는 요소 및 가려지거나 잘렸을 때 정보나 기능을 조금이라도 잃을 수 있는 콘텐츠는 안전 영역 안에 두어야 합니다.
- 누를 수 있는 요소: 버튼, 링크, 입력 필드, 탭 등
- 읽어야 하는 정보: 텍스트, 아이콘, 가격, 배지, 의미를 전달하는 이미지 등
여백은 안전 영역 경계부터 잽니다
요소가 원래 갖는 여백은 화면 끝이 아니라 안전 영역 경계부터 잽니다. 예를 들면 다음과 같습니다.
- 좌우: 화면 여백으로
$dimension.spacing-x.global-gutter를 쓰는 콘텐츠는 안전 영역 경계에서 그만큼 떨어뜨립니다. - 아래: 하단 고정 바에 버튼이 있다면, 버튼을 하단 안전 영역 경계에서 바의 안쪽 여백만큼 떨어뜨립니다.
여백을 화면 끝부터 재면, 안전 영역의 inset이 여백보다 큰 곳에서 콘텐츠가 가려질 수 있습니다. 안전 영역의 inset에 기본 여백을 더하면, 콘텐츠가 가려지는 것을 피하면서 기기나 화면 방향이 달라져도 콘텐츠 주변의 기본 여백을 유지할 수 있습니다.
가운데 정렬은 안전 영역을 기준으로 합니다
안전 영역 안에 배치하는 콘텐츠는 같은 안전 영역을 기준으로 정렬합니다. 예를 들어 검색창 아래에 검색 결과를 가운데 정렬할 때는 화면 전체가 아니라 검색창이 놓인 안전 영역의 가운데에 맞춥니다. 이렇게 하면 한쪽에만 inset이 있어도 검색창과 결과의 정렬 기준이 일치합니다.
배경은 화면 끝까지
가려지거나 잘려도 잃는 것이 없는 요소는 안전 영역 밖까지, 화면 끝까지 채웁니다. 배경이 안전 영역에서 멈추면 안전 영역 밖이 빈 띠로 남아 화면이 좁아 보이고, 화면을 가로지르는 요소가 중간에 끊겨 보입니다.
- Page Banner 등 섹션과 배너의 배경: 좌우 화면 끝까지 채우되, 안의 텍스트와 버튼은 안전 영역 안에 배치합니다.
- Full-width Divider: 좌우를 화면 끝까지 채웁니다.
- 히어로 이미지처럼 장식으로 쓰는 이미지: 좌우를 화면 끝까지 채웁니다.
- 지도, 동영상, 전체 화면 이미지 뷰어: 표시 영역의 배경을 네 변 모두 화면 끝까지 채웁니다. 이미지나 동영상 자체의 비율과 잘림 여부는 콘텐츠의 목적에 맞게 정합니다.
배경 위의 콘텐츠
배경과 콘텐츠가 한 요소에 함께 있으면 부분마다 따로 적용합니다. 배경은 화면 끝까지 채우고, 그 위의 콘텐츠는 안전 영역 안에 둡니다.
- 이미지 위에 올린 버튼과 글자: 안전 영역 안에 둡니다.
- 이미지 자체에 들어 있는 글자와 주요 피사체: 안전 영역 안에 오도록 이미지를 구성합니다. 가장자리에는 가려지거나 잘려도 괜찮은 부분을 둡니다.
표지 이미지가 보이지 않을 때까지 스크롤해도 본문은 안전 영역 안에 있어야 합니다.
스크롤되는 콘텐츠
스크롤되는 항목은 스크롤하는 동안 안전 영역 밖을 지나갈 수 있습니다. 가려진 항목을 스크롤해서 안전 영역 안으로 다시 가져올 수 있다면 정보나 기능을 잃지 않으므로, 스크롤 영역은 화면 끝까지 넓힙니다. 스크롤 영역을 안전 영역에서 자르면 항목이 화면 안쪽에서 잘려 보입니다.
- 가로 스크롤: Tabs, 칩 목록, 캐러셀은 좌우 안전 영역을 지나 화면 밖으로 이어집니다.
- 세로 스크롤: 목록은 화면 아래 끝까지 이어집니다. 하단 inset이 있는 환경에서는 스크롤하는 동안 항목이 안전 영역 밖을 지나갈 수 있습니다.
이때 다음 조건을 지킵니다.
- 스크롤하지 않은 상태에서는 첫 항목을 다른 콘텐츠와 같은 선에 맞춥니다. 예를 들어 다른 콘텐츠가 화면 여백으로
$dimension.spacing-x.global-gutter를 쓴다면, 가로 스크롤의 첫 항목도 안전 영역 경계에서 그만큼 떨어뜨립니다. - 화면 끝까지 넓히는 것은 스크롤 영역뿐입니다. 화면에 고정된 버튼과 바는 스크롤해서 가져올 수 없으므로 안전 영역 안에 둡니다.
끝까지 스크롤한 상태에서는 마지막 항목 전체가 안전 영역 안에 보여야 합니다. 스크롤 콘텐츠의 끝에 안전 영역 inset과 기본 여백을 함께 확보합니다.
Last updated on