Notch, 조롱당하다가 표준이 된 화면 위의 그 검은 공간

한 줄로

2017년 iPhone X가 화면 맨 위에 검은 홈을 파면서 노치(notch)가 등장했습니다. 처음에는 모두가 조롱했습니다. 5년 뒤 모든 안드로이드 폰이 따라 했습니다.

어디서 왔나

2017년 9월 12일, Apple은 iPhone X를 발표했습니다. 10년 만에 처음으로 홈 버튼을 없애고 전면 디스플레이를 도입한 모델. 그런데 화면 맨 위 가운데에 검은 사각 홈이 파여 있었습니다. 그 안에 카메라, Face ID 센서, 스피커가 들어갔습니다.

이 홈에 영어로 "notch"라는 이름이 붙었습니다. "노치, 홈, 톱니의 한 칸"이라는 뜻. 한국에서는 그대로 "노치"라 불렀고, 일부는 "M자 탈모"라는 별명도 붙였습니다.

발표 직후의 반응은 거의 다 부정적이었습니다. 트위터에 "Apple이 디자인을 망쳤다", "최악의 결정", "이걸 보고 못 산다"는 글이 쏟아졌습니다. 안드로이드 진영의 비웃음이 절정에 달했습니다.

그리고 1년 후, 모든 안드로이드 제조사가 노치를 따라 만들었습니다. 화웨이, OPPO, 샤오미, 심지어 구글의 Pixel 3 XL까지. 이유는 단순했습니다. 전면 카메라를 화면에 통합하면서 디스플레이 비율을 키우는 데 노치가 가장 합리적인 해법이었습니다.

이후 노치는 다양한 형태로 진화했습니다.

물방울 노치: 더 작은 U자.
펀치홀: 카메라 자리만 동그란 구멍.
다이나믹 아일랜드: Apple이 2022년 노치를 기능으로 바꾼 진화형.

지금 우리가 쓰는 방식

CSS에서 노치는 직접 다뤄야 하는 대상이 됐습니다.

safe-area-inset-top: 노치 아래 안전 영역.
safe-area-inset-bottom: 홈 인디케이터 위 안전 영역.
viewport-fit=cover: 노치 영역까지 화면 채우기.

웹 디자인에서 모바일을 디자인할 때 이제는 노치 영역을 무시할 수 없습니다.

바이브 메이커가 챙길 한 가지

처음 비웃음당한 디자인이 표준이 되는 경우는 의외로 많습니다. iPhone 1세대(2007)도 키보드 없이 출시했을 때 비웃음당했습니다. 햄버거 메뉴도 처음에는 "사용자가 못 찾을 거다"고 비판받았습니다.

비웃음에 흔들리지 않는 게 디자이너의 일입니다. 단, 본인이 비웃음당하고 있다는 것은 정확히 알아야 합니다.

관련

Dynamic Island · Safe area · iPhone X