# Safe Area
URL: /foundations/safe-area
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/safe-area.mdx

화면 가장자리는 시스템 UI나 기기 형태에 가려질 수 있습니다. 요소를 가려지지 않는 안전 영역(Safe Area) 안에 둘지, 화면 끝까지 채울지 정하는 기준을 설명합니다.

## 안전 영역 이해하기

안전 영역(Safe Area)은 화면에서 시스템 UI나 기기의 형태에 가려지거나 잘리지 않는 영역입니다. 안전 영역 밖은 다음 요소에 의해 가려지거나 잘릴 수 있습니다.

- 상태 표시줄, 홈 인디케이터처럼 화면 위에 겹쳐 표시되는 시스템 UI
- 디스플레이 컷아웃(카메라나 센서를 위해 화면의 일부가 비워진 부분)
- 화면의 둥근 모서리

![같은 기기의 세로 화면과 가로 화면에서 안전 영역 밖을 반투명 면으로 표시한 그림](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/fc27826b-ef39-48c4-a367-629516dc2a77)

### 네 변의 크기는 서로 다를 수 있습니다

안전 영역의 inset은 위아래에만 있지 않습니다.

- 세로 화면: 일반적으로 상하에 안전 영역 inset이 존재하나, 기기 형태에 따라 왼쪽이나 오른쪽에도 inset이 생길 수 있습니다.
- 가로 화면: 카메라나 센서가 좌우에 놓일 수 있습니다. 홈 인디케이터가 아래쪽에 표시되는 기기에서는 하단 inset도 남을 수 있습니다.

**네 변의 inset은 서로 독립적입니다.** 위와 아래, 왼쪽과 오른쪽의 값이 같다고 가정하지 않습니다.

### 크기는 상황마다 달라집니다

안전 영역의 크기는 기기, OS, 화면 방향, 시스템 UI의 표시 상태에 따라 달라질 수 있습니다. 네 방향의 inset이 모두 0일 수도, 일부만 0이 아닐 수도, 모두 0이 아닐 수도 있습니다.

특정 방향이 항상 0이라고 가정하거나, 특정 기기나 상황에서 확인한 값을 모든 화면에 고정값으로 적용하지 않습니다.

### 화면을 띄운 뒤에도 달라질 수 있습니다

화면이 이미 띄워진 상태에서도 안전 영역의 크기나 위치가 달라질 수 있습니다. 예를 들면 다음과 같습니다.

- 크기가 달라지는 경우: 화면 분할을 지원하는 환경에서는 앱이 화면에서 차지하는 영역이 달라지면서 각 변의 inset이 줄어들거나 없어질 수 있습니다.
- 위치가 달라지는 경우: 가로 화면에서 기기를 반대 방향으로 돌렸을 때 화면도 함께 회전하면, 카메라를 피하기 위한 inset이 반대쪽으로 옮겨 갈 수 있습니다.

화면 회전이나 분할로 안전 영역이 달라져도 콘텐츠가 가려지지 않도록, \**항상 현재의 안전 영역을 기준으로 배치합니다.*\*

## 배치 원칙

요소가 **가려지거나 잘렸을 때 정보나 기능을 잃는지**에 따라 배치 범위를 정합니다. 스크롤되는 요소는 가려진 부분을 안전 영역 안으로 가져올 수 있는지도 확인합니다.

### 콘텐츠는 안전 영역 안에

누를 수 있는 요소 및 가려지거나 잘렸을 때 정보나 기능을 조금이라도 잃을 수 있는 콘텐츠는 안전 영역 안에 두어야 합니다.

- 누를 수 있는 요소: 버튼, 링크, 입력 필드, 탭 등
- 읽어야 하는 정보: 텍스트, 아이콘, 가격, 배지, 의미를 전달하는 이미지 등

<DoImage body="텍스트와 버튼은 안전 영역 안에 배치합니다." alt="가로 화면의 목록과 우측 하단 자료 추가 FAB가 안전 영역 안에 배치되고, FAB와 안전 영역 경계 사이에 기본 여백을 확보한 모습" />

<DontImage body="콘텐츠를 화면 끝부터 배치하면 카메라나 홈 인디케이터와 겹칠 수 있습니다." alt="가로 화면의 목록이 카메라와 겹치고, 화면 끝부터 여백을 잰 자료 추가 FAB가 오른쪽 안전 영역 밖에 걸친 모습" />

#### 여백은 안전 영역 경계부터 잽니다

요소가 원래 갖는 여백은 **화면 끝이 아니라 안전 영역 경계부터** 잽니다. 예를 들면 다음과 같습니다.

- 좌우: 화면 여백으로 [`$dimension.spacing-x.global-gutter`](/foundations/spacing#global-gutter)를 쓰는 콘텐츠는 안전 영역 경계에서 그만큼 떨어뜨립니다.
- 아래: 하단 고정 바에 버튼이 있다면, 버튼을 하단 안전 영역 경계에서 바의 안쪽 여백만큼 떨어뜨립니다.

여백을 화면 끝부터 재면, 안전 영역의 inset이 여백보다 큰 곳에서 콘텐츠가 가려질 수 있습니다. 안전 영역의 inset에 기본 여백을 더하면, 콘텐츠가 가려지는 것을 피하면서 기기나 화면 방향이 달라져도 콘텐츠 주변의 기본 여백을 유지할 수 있습니다.

![가로 화면의 왼쪽 가장자리를 확대해 안전 영역 경계와 콘텐츠 사이의 $dimension.spacing-x.global-gutter를 표시한 그림. 배너 배경은 화면 끝까지 이어집니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9af75871-5399-4b51-81cd-bad07b3b4cd5)

#### 가운데 정렬은 안전 영역을 기준으로 합니다

안전 영역 안에 배치하는 콘텐츠는 \**같은 안전 영역을 기준으로 정렬합니다.*\* 예를 들어 검색창 아래에 검색 결과를 가운데 정렬할 때는 화면 전체가 아니라 검색창이 놓인 안전 영역의 가운데에 맞춥니다. 이렇게 하면 한쪽에만 inset이 있어도 검색창과 결과의 정렬 기준이 일치합니다.

<DoImage body="검색창과 검색 결과, 하단 버튼을 같은 안전 영역 기준으로 정렬합니다." alt="오른쪽에 inset이 있는 화면에서 검색 결과 없음 Result Section을 검색창과 모든 자료 보기 버튼의 가운데에 맞춘 모습. 결과 위의 기준선은 중심 양쪽의 길이가 같습니다." />

<DontImage body="검색 결과만 화면 전체의 중심에 맞추면 주변 콘텐츠와 정렬이 어긋납니다." alt="검색창과 모든 자료 보기 버튼은 안전 영역 안에 있지만, 검색 결과 없음 Result Section만 화면 중심에 맞춰 오른쪽으로 치우친 모습. 결과 위의 기준선은 중심 오른쪽이 왼쪽보다 짧습니다." />

### 배경은 화면 끝까지

가려지거나 잘려도 잃는 것이 없는 요소는 안전 영역 밖까지, 화면 끝까지 채웁니다. 배경이 안전 영역에서 멈추면 안전 영역 밖이 빈 띠로 남아 화면이 좁아 보이고, 화면을 가로지르는 요소가 중간에 끊겨 보입니다.

- [Page Banner](/components/page-banner) 등 섹션과 배너의 배경: 좌우 화면 끝까지 채우되, 안의 텍스트와 버튼은 안전 영역 안에 배치합니다.
- [Full-width Divider](/components/divider): 좌우를 화면 끝까지 채웁니다.
- 히어로 이미지처럼 장식으로 쓰는 이미지: 좌우를 화면 끝까지 채웁니다.
- 지도, 동영상, 전체 화면 이미지 뷰어: 표시 영역의 배경을 네 변 모두 화면 끝까지 채웁니다. 이미지나 동영상 자체의 비율과 잘림 여부는 콘텐츠의 목적에 맞게 정합니다.

<DoImage body="배너 배경과 탭의 스크롤 영역은 화면 끝까지 이어지게 합니다." alt="가로 화면에서 Page Banner의 배경과 탭 목록이 좌우 화면 끝까지 이어지고 배너 글자는 안전 영역 안에 있는 모습" />

<DontImage body="배경과 스크롤 영역을 안전 영역 경계에서 끊지 않습니다." alt="Page Banner 양옆에 빈 띠가 남고 탭 목록이 오른쪽 안전 영역 경계에서 잘린 모습" />

#### 배경 위의 콘텐츠

배경과 콘텐츠가 한 요소에 함께 있으면 부분마다 따로 적용합니다. **배경은 화면 끝까지 채우고, 그 위의 콘텐츠는 안전 영역 안에** 둡니다.

- 이미지 위에 올린 버튼과 글자: 안전 영역 안에 둡니다.
- 이미지 자체에 들어 있는 글자와 주요 피사체: 안전 영역 안에 오도록 이미지를 구성합니다. 가장자리에는 가려지거나 잘려도 괜찮은 부분을 둡니다.

<DoImage body="표지 이미지와 본문 배경은 화면 끝까지 채우고, 글과 확대 버튼은 안전 영역 안에 둡니다." alt="아티클 화면에서 계단 표지 사진과 흰색 본문 배경은 오른쪽 끝까지 이어지고, 제목과 본문, 사진 오른쪽 아래의 확대 버튼은 붉게 표시된 오른쪽 inset을 피해 배치된 모습" />

<DontImage body="배경과 함께 글과 버튼의 배치 범위까지 화면 끝으로 늘리지 않습니다." alt="같은 아티클 화면에서 글과 확대 버튼을 화면 끝을 기준으로 배치해 본문의 오른쪽 부분과 사진 오른쪽 아래의 버튼이 붉게 표시된 오른쪽 inset과 겹치는 모습" />

표지 이미지가 보이지 않을 때까지 스크롤해도 본문은 안전 영역 안에 있어야 합니다.

<DoImage body="스크롤한 뒤에도 본문이 카메라와 시스템 인디케이터를 피해 읽히도록 합니다." alt="표지가 사라질 때까지 스크롤한 아티클의 상단 확대. 본문이 오른쪽 안전 영역을 피해 줄바꿈되어 문장 끝까지 보입니다." />

<DontImage body="본문을 화면 끝까지 펼치면 글자가 카메라와 시스템 인디케이터에 가려집니다." alt="같은 본문을 스크롤한 아티클의 상단 확대. 오른쪽으로 이어진 글자가 카메라와 시스템 인디케이터 뒤에 가려집니다." />

### 스크롤되는 콘텐츠

스크롤되는 항목은 스크롤하는 동안 안전 영역 밖을 지나갈 수 있습니다. 가려진 항목을 **스크롤해서 안전 영역 안으로 다시 가져올 수 있다면** 정보나 기능을 잃지 않으므로, 스크롤 영역은 화면 끝까지 넓힙니다. 스크롤 영역을 안전 영역에서 자르면 항목이 화면 안쪽에서 잘려 보입니다.

- 가로 스크롤: [Tabs](/components/tabs), 칩 목록, 캐러셀은 좌우 안전 영역을 지나 화면 밖으로 이어집니다.
- 세로 스크롤: 목록은 화면 아래 끝까지 이어집니다. 하단 inset이 있는 환경에서는 스크롤하는 동안 항목이 안전 영역 밖을 지나갈 수 있습니다.

이때 다음 조건을 지킵니다.

- 스크롤하지 않은 상태에서는 첫 항목을 다른 콘텐츠와 같은 선에 맞춥니다. 예를 들어 다른 콘텐츠가 화면 여백으로 `$dimension.spacing-x.global-gutter`를 쓴다면, 가로 스크롤의 첫 항목도 안전 영역 경계에서 그만큼 떨어뜨립니다.
- 화면 끝까지 넓히는 것은 스크롤 영역뿐입니다. 화면에 고정된 버튼과 바는 스크롤해서 가져올 수 없으므로 안전 영역 안에 둡니다.

![레퍼런스 동영상 탭이 선택된 같은 가로 화면의 스크롤 전후 비교. 스크롤 전에는 첫 탭이 왼쪽 안전 영역 안에서 시작하고, 끝까지 스크롤하면 마지막 탭인 모은 스티커 뒤에 오른쪽 inset과 기본 여백이 남습니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4b05268b-e5bb-4f3a-923f-f8d58b407aab)

<DoImage body="목록은 하단 안전 영역을 지나 화면 끝까지 이어지게 합니다." alt="세로 화면의 하단을 확대한 모습. 점선으로 표시한 안전 영역 경계 아래에도 목록 항목이 이어집니다." />

<DontImage body="스크롤 영역을 하단 안전 영역 경계에서 자르지 않습니다." alt="같은 스크롤 위치에서 목록의 글자가 안전 영역 경계의 점선에 걸려 잘리고, 그 아래는 빈 공간으로 남은 모습" />

끝까지 스크롤한 상태에서는 **마지막 항목 전체가 안전 영역 안에** 보여야 합니다. 스크롤 콘텐츠의 끝에 안전 영역 inset과 기본 여백을 함께 확보합니다.

<DoImage body="끝까지 스크롤하면 마지막 항목과 기본 여백이 안전 영역 안에 남도록 합니다." alt="끝까지 스크롤한 목록의 하단. 마지막 읽기 목록 행의 제목, 보조 글자, 화살표가 모두 안전 영역 경계 위에 있고 행 아래에도 여백이 남습니다." />

<DontImage body="끝까지 스크롤해도 마지막 항목이 안전 영역 밖에 남지 않도록 합니다." alt="하단 여백 없이 끝까지 스크롤한 목록. 마지막 읽기 목록 행의 보조 글자와 화살표가 안전 영역 경계에 걸려 홈 인디케이터 영역에 남습니다." />