왜 안전 영역이 필요할까
요즘 폰은 화면 위에 노치나 카메라 구멍이 있고, 모서리가 둥글며, 아래에는 홈 인디케이터가 있어요. 그 위에 버튼을 두면 가려지거나 시스템 제스처와 겹쳐 눌리지 않아요. 애플(n.d.)은 이런 부분을 피한 영역을 세이프 에어리어라 부르고, 안드로이드(Android Developers, n.d.)는 화면 끝까지 그리면서 시스템 바 인셋만큼 내용을 안쪽으로 미는 엣지투엣지 방식을 권해요. 배경은 끝까지, 내용과 버튼은 안쪽에 두는 게 핵심이에요.
웹과 앱에서 구현하기
모바일 웹에서는 viewport 메타 태그에 viewport-fit=cover를 넣고, MDN(n.d.)이 설명하는 env(safe-area-inset-bottom) 같은 CSS 변수로 여백을 줘요. 고정 하단 버튼과 하단 내비게이션은 이 값을 아래 여백에 더해야 해요. 앱에서는 플랫폼이 주는 인셋 값을 레이아웃에 적용해요. 가로 화면에서는 노치가 옆으로 가서 좌우 인셋이 생기니, WCAG 2.2(W3C, 2023)의 1.3.4 기준처럼 두 방향 모두 확인해야 해요.
버튼 배치와 도달성
인셋을 더하면 하단 버튼이 조금 위로 올라가요. 베르그스트룀-레흐토비르타와 울라스비르타(2014)의 엄지 영역 모델을 보면 이 정도 높이는 여전히 편하게 닿아요. 다만 인셋을 빼느라 버튼 높이를 줄이면 안 되고, 파히와 동료들(2006)의 크기와 터치 타깃 크기 기준을 지켜야 해요. 피츠(1954)의 법칙처럼 작아질수록 누르기 어려워져요. 기기마다 인셋이 다르니 실제 기기와 시뮬레이터 여러 대에서 확인해요.
자주 묻는 질문
- 세이프 에어리어 밖에는 아무것도 그리면 안 되나요?
- 배경색이나 이미지는 화면 끝까지 그려도 돼요. 글자와 버튼처럼 읽고 눌러야 하는 것만 안쪽에 두면 돼요.
- 웹에서 env()가 0으로 나와요.
- viewport 메타 태그에 viewport-fit=cover가 있어야 실제 인셋 값이 들어와요.
출처 검토일: 2026-10-27
참고문헌
- Apple. (n.d.). Layout. Human Interface Guidelines. 노치·홈 인디케이터를 피하는 안전 영역 개념을 설명해, iOS 화면 배치를 정할 때 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.). env(). Mozilla. safe-area-inset 변수를 CSS에서 쓰는 방법이 있어, 모바일 웹에서 노치를 피할 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Display content edge-to-edge in views. 화면 끝까지 그리면서 시스템 바 인셋을 처리하는 방법이라, 안드로이드 레이아웃에 참고하면 도움이 돼요.
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 엄지 도달 영역 모델이라, 하단 버튼을 홈 인디케이터 위로 올려도 닿는지 판단할 때 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 가장자리 근처 버튼 크기를 정할 때 참고하면 도움이 돼요.
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 타깃 크기와 거리의 관계 법칙이라, 인셋 때문에 버튼이 작아지거나 멀어질 때의 비용을 설명할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 가로·세로 방향 고정 금지(1.3.4)와 리플로우(1.4.10) 기준이 있어, 방향마다 달라지는 인셋을 처리할 때 참고하면 도움이 돼요.