세이프 에어리어

휴대폰 화면이 네모난 사각형이던 동안에는 이 개념이 필요하지 않았습니다. 화면으로 잡힌 자리는 전부 쓸 수 있는 자리였습니다.

기기가 앞면을 화면으로 다 덮으면서 사정이 달라졌습니다. 카메라 자리가 화면 위쪽을 파고들었고, 모서리가 둥글게 깎여 귀퉁이가 잘렸고, 아래쪽에는 쓸어 올려 앱을 닫는 홈 바가 겹쳤습니다. 좌표로는 있는데 보이지 않거나 손이 닿지 않는 자리가 생긴 것입니다.

페이지덱 앱도 그 자리에 걸렸습니다. 민서 시안은 저장 버튼을 화면 맨 아래에 붙여 놓았고, 태오는 시안대로 아래 여백 없이 만들었습니다. 홈 버튼이 있는 기기에서는 괜찮았지만 홈 바가 있는 기기에서는 버튼이 그 띠와 겹쳤습니다. 들어온 문의는 저장이 안 된다는 말이었습니다.

운영체제가 네 방향의 안전 여백 값을 알려 주고, 모바일 앱은 그 값을 배치에 더해 씁니다. 값은 기기와 화면 방향에 따라 다릅니다.

1. 위쪽. 상태 표시줄과 카메라 자리만큼 비웁니다. 노치가 없는 기기에서는 상태 표시줄 높이뿐입니다.
2. 아래쪽. 홈 바만큼 비웁니다. 홈 버튼이 달린 기기에서는 0입니다.
3. 좌우. 세로로 들 때는 0이지만 가로로 눕히면 노치가 옆으로 와 한쪽에만 값이 생깁니다.

이 숫자를 직접 적어 두지 않는 것이 요령입니다. 기기마다 다르고 새 기기가 나오면 또 달라지므로 시스템이 주는 값을 받아 씁니다. 한 번 계산해 고정해 두면 가로로 돌릴 때 어긋납니다.

무엇을 안에 두고 무엇을 밖으로 내보낼지는 성격으로 가릅니다. 버튼과 글자, 입력칸처럼 눌러야 하거나 읽어야 하는 것은 안쪽에 둡니다. 배경색과 사진은 화면 끝까지 채우는 편이 자연스럽습니다. 잘려도 잃는 정보가 없고, 여백을 주면 화면이 좁아 보입니다. 손가락이 닿는 영역을 확보하는 터치 타깃 규칙과 겹쳐 보면, 맨 아래 버튼은 안전 여백 위에 다시 44 안팎의 높이가 필요합니다.

"저장 버튼이 홈 바에 겹칩니다. 세이프 에어리어 값 더해 주세요."

맨 아래에 붙인 요소를 안전 영역 안으로 올리자는 요청입니다.

"배경은 화면 끝까지 채우고 글자만 안쪽으로 밀죠."

가려도 되는 것과 안 되는 것을 갈라 처리하자는 제안입니다.

"가로로 돌렸을 때 왼쪽 메뉴가 노치에 잘립니다."

화면 방향에 따라 값이 바뀌는 것을 반영하지 않았다는 지적입니다.

민서는 이제 앱 시안에 안전 여백을 회색 띠로 그려 넣습니다. 띠 안쪽에는 누르는 것을, 바깥쪽에는 배경과 사진만 놓는다는 약속을 함께 적습니다.

확인은 노치가 있는 기기와 없는 기기, 세로와 가로, 키보드가 올라온 상태로 나눠 합니다. 창 너비에 따라 배치가 바뀌는 반응형 디자인과 성격이 달라서, 넓이만 바꿔 보는 확인으로는 드러나지 않습니다.