Safe Area

안전 영역 이해하기Copy Anchor Link

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

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

네 변의 크기는 서로 다를 수 있어요Copy Anchor Link

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

• 세로 화면: 보통 위아래에 inset이 있지만, 기기에 따라 왼쪽이나 오른쪽에도 생길 수 있어요.
• 가로 화면: 카메라나 센서가 좌우에 놓일 수 있어요. 홈 인디케이터가 아래에 있는 기기에서는 하단 inset도 남을 수 있어요.

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

크기는 상황마다 달라져요Copy Anchor Link

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

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

화면을 띄운 뒤에도 달라질 수 있어요Copy Anchor Link

• 크기가 달라지는 경우: 화면 분할 환경에서 앱이 차지하는 영역이 바뀌면 inset이 줄거나 없어질 수 있어요.
• 위치가 달라지는 경우: 가로 화면에서 기기를 반대로 돌리면 카메라를 피하기 위한 inset이 반대쪽으로 옮겨 갈 수 있어요.

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

배치 원칙Copy Anchor Link

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

콘텐츠는 안전 영역 안에Copy Anchor Link

누를 수 있는 요소와, 가려지면 정보나 기능을 조금이라도 잃을 수 있는 콘텐츠는 안전 영역 안에 둬야 해요.

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

여백은 안전 영역 경계부터 재요Copy Anchor Link

요소가 원래 갖는 여백은 화면 끝이 아니라 안전 영역 경계부터 재요.

• 좌우: 화면 여백으로 $dimension.spacing-x.global-gutter 를 쓰는 콘텐츠는 안전 영역 경계에서 그만큼 떨어뜨려요.
• 아래: 하단 고정 바에 버튼이 있다면, 하단 안전 영역 경계에서 바의 안쪽 여백만큼 떨어뜨려요.

안전 영역 inset에 기본 여백을 더하면, 기기나 화면 방향이 달라져도 콘텐츠가 가려지지 않으면서 기본 여백을 유지할 수 있어요.

가운데 정렬은 안전 영역을 기준으로 해요Copy Anchor Link

안전 영역 안의 콘텐츠는 같은 안전 영역을 기준으로 정렬해요. 예를 들어 검색창 아래 검색 결과를 가운데 정렬할 때는 화면 전체가 아니라 검색창이 놓인 안전 영역의 가운데에 맞춰요. 한쪽에만 inset이 있어도 정렬 기준이 어긋나지 않아요.

배경은 화면 끝까지Copy Anchor Link

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

• 섹션과 Page Banner 의 배경: 좌우 화면 끝까지 채우되, 안의 텍스트와 버튼은 안전 영역 안에 둬요.
• 전체 너비 Divider: 좌우를 화면 끝까지 채워요.
• 히어로 이미지처럼 장식으로 쓰는 이미지: 좌우를 화면 끝까지 채워요.
• 지도, 동영상, 전체 화면 이미지 뷰어: 표시 영역의 배경을 네 변 모두 화면 끝까지 채워요.

배경 위의 콘텐츠Copy Anchor Link

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

• 이미지 위에 올린 버튼과 글자는 안전 영역 안에 둬요.
• 이미지 자체에 들어 있는 글자와 주요 피사체도 안전 영역 안에 오도록 구성하고, 가장자리에는 잘려도 괜찮은 부분을 둬요.

스크롤되는 콘텐츠Copy Anchor Link

스크롤되는 항목은 스크롤하는 동안 안전 영역 밖을 지나갈 수 있어요. 가려진 항목을 스크롤해서 다시 안전 영역 안으로 가져올 수 있다면 정보를 잃지 않으므로, 스크롤 영역은 화면 끝까지 넓혀요.

• 가로 스크롤: Tabs, 칩 목록, 캐러셀은 좌우 안전 영역을 지나 화면 밖으로 이어져요.
• 세로 스크롤: 목록은 화면 아래 끝까지 이어져요.

이때 다음 조건을 지켜요.

• 스크롤하지 않은 상태에서는 첫 항목을 다른 콘텐츠와 같은 선에 맞춰요.
• 화면 끝까지 넓히는 것은 스크롤 영역뿐이에요. 화면에 고정된 버튼과 바는 스크롤로 가져올 수 없으므로 안전 영역 안에 둬요.
• 끝까지 스크롤했을 때 마지막 항목 전체가 안전 영역 안에 보여야 해요. 스크롤 콘텐츠 끝에 안전 영역 inset과 기본 여백을 함께 확보해요.

웹에서 구현하기Copy Anchor Link

웹뷰나 PWA에서는 CSS env() 로 현재 안전 영역 inset을 읽어요. 먼저 viewport 메타 태그에 viewport-fit=cover 를 지정해야 값이 채워져요.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

배경은 화면 끝까지 두고, 콘텐츠 여백에만 inset을 더해요. 토큰 여백과 함께 쓰려면 calc() 로 합쳐요.

// 하단 고정 바: 배경은 끝까지, 버튼은 안전 영역 + 기본 여백 안쪽
<div className="fixed inset-x-0 bottom-0 bg-bg-layer-default pt-x3 pb-[calc(var(--rb-dimension-x3)+env(safe-area-inset-bottom))] pl-[calc(var(--rb-dimension-spacing-x-global-gutter)+env(safe-area-inset-left))] pr-[calc(var(--rb-dimension-spacing-x-global-gutter)+env(safe-area-inset-right))]">
  <ActionButton size="large" className="w-full">구매하기</ActionButton>
</div>

Related DocumentsCopy Anchor Link