디자인 기초
디바이스별 안전 영역과 화면 비율 정리
아이폰과 안드로이드의 안전 영역, 노치, 다이내믹 아일랜드, 펀치홀까지 — 스크린샷에서 잘리지 않게 카피를 배치하는 데 필요한 모든 수치를 정리합니다.
스크린샷 카피가 잘려서 보이는 가장 흔한 원인은 디자인 미숙함이 아니라 안전 영역(Safe Area)을 지나서 카피가 들어가는 것입니다. 디바이스마다 노치, 다이내믹 아일랜드, 펀치홀, 홈 인디케이터의 위치가 다르고, 그만큼 각 화면의 "자유롭게 쓸 수 있는 영역"의 크기도 다릅니다. 이 글은 디바이스별 안전 영역 수치와 카피 배치 가이드를 한 페이지로 정리합니다.
iPhone — 디스플레이 카테고리별 안전 영역
iPhone은 디스플레이 사이즈와 노치/다이내믹 아일랜드 유무에 따라 안전 영역이 다릅니다. 현재 시점에서 가장 보편적인 4가지 카테고리의 핵심 수치는 다음과 같습니다.
- iPhone 16 Pro / 15 Pro (6.1"): 상단 안전 영역 약 59pt (다이내믹 아일랜드 포함), 하단 약 34pt
- iPhone 16 Pro Max / 15 Pro Max (6.7"): 상단 약 59pt, 하단 약 34pt
- iPhone 14 / 13 (6.1", 노치 모델): 상단 약 47pt, 하단 약 34pt
- iPhone SE (3세대, 4.7"): 상단 약 20pt, 하단 0pt (홈 버튼)
Android — 펀치홀과 시스템 바
Android는 OEM과 모델별 변동 폭이 훨씬 큽니다. 일반적인 기준으로 다음 수치를 참고하면 안전합니다.
- Pixel 8 Pro / Galaxy S24 Ultra (6.7~6.8"): 상단 약 24~32dp, 하단 제스처 바 약 16~24dp
- 미들·로우엔드 폰: 상단 펀치홀 위치는 좌측·중앙·우측으로 다양 — 카피는 상단 8% 안쪽에서 시작하지 마세요
- 폴더블 외부 디스플레이: 비율이 21:9에 가까워 좌우 여백이 더 넉넉히 필요
실무에서 쓸 수 있는 단순 규칙
디바이스별 정확한 수치를 모두 외우는 건 비효율적입니다. 다음 두 가지 단순 규칙만 지켜도 거의 모든 디바이스에서 카피가 잘리지 않습니다.
- 카피와 핵심 시각 요소는 캔버스 가장자리에서 8% 이상 안쪽에 둡니다 (1290 × 2796 캔버스 기준 약 100~110px).
- 상단 카피는 디바이스 노치/펀치홀과 겹치지 않도록 추가로 5% 정도 더 여유를 둡니다.
비율(Aspect Ratio) 정리
디바이스 비율은 다음 5가지가 사실상 전부를 커버합니다.
- 19.5 : 9 — 최신 iPhone 대다수 (12 ~ 16 시리즈)
- 16 : 9 — 안드로이드 폰 대부분
- 4 : 3 — iPad 대부분 (가로 방향), 세로 방향에서는 3 : 4
- 21 : 9 — 일부 시네마 폰, 폴더블 외부 디스플레이
- 1 : 1 — 스마트워치, Apple Watch (앱 자체에는 거의 사용 안 됨)
한 마스터로 여러 비율을 다루는 방법
여러 디바이스 비율을 한 마스터로 다루려면 가장 큰 비율(19.5:9, 1290 × 2796)을 기준으로 디자인하고, 그보다 짧은 비율은 안전 영역만 점검한 채 위·아래로 잘라 내는 방식이 안정적입니다.
반대 방향은 매우 위험합니다. 16:9 마스터에서 19.5:9로 늘리면 위·아래 빈 공간이 그대로 남아 어색하게 보입니다. 항상 "큰 비율 → 작은 비율" 방향만 유효합니다.
SSHOT은 마스터 캔버스의 안전 영역을 디바이스 사이즈가 바뀌어도 자동으로 유지해 줍니다. 카피와 화면을 한 번 정렬하면 다른 비율 출력 시에도 같은 안전 영역 안에 머무릅니다.
안전 영역은 외워서 쓰는 정보가 아니라 한 번 규칙을 잡고 그 다음부터는 디자인 시스템이 알아서 지켜 주도록 만드는 게 정답입니다. "8% 안쪽" 규칙 하나만 지켜도 다양한 디바이스에서 카피가 잘리는 사고는 거의 사라집니다.