아이폰 X(iPhone X)의 M 탈모 상단 노치 부분 정리

아이폰 X가 공식적으로 공개되기 이전(9/12)부터 말이 많던 ‘M’ 탈모 환경에서의 비디오, 사진 디스플레이에 관한 정리입니다. 상단에 위치하고 상단 디스플레이를 양옆으로 가르는 부분을 노치(Notch), 그리고 양옆에 튀어 나온 부분을 귀(Ear)라고 사용했습니다.

노치 부분에 아무것도 표시되지 않는 이유는 12일 공개행사에서도 밝혔듯이 아래와 같은 기능들이 담겨 있기 때문입니다. 안면인식과 TrueDepth 카메라 시스템을 구현하기 위한 장비들, 그리고 스피커, 마이크 등이 담겨 있습니다.

노치 부분에 담긴 기능

  • Infrared Camera
  • Flood illuminator
  • Proximity sensor
  • ambient light sensor
  • Speark
  • Microphone
  • Front camera
  • Dot projector

출처 – 애플 공개 행사 Keynote


세로 방향에서의 아이폰 X

기본(세로) 모드에서 아이폰의 디스플레이는 아래와 같습니다. 왼쪽 귀 부분에는 시간을 표시하고 오른쪽 귀 부분에는 Carrier, Wifi 시그널 그리고 배터리 잔량을 표시해줍니다.

출처 – 애플

사진을 보게 되었을 때는 양옆의 갈라진 부분까지 사진을 표시해, 어떻게 보면 가운데가 홈이 파진 사진의 모습을 보게 됩니다.

출처 – 애플


가로 방향에서의 아이폰 X

세로 방향의 모습은 대부분이 예측할 수 있는 모습이었습니다. 가로 방향으로 바뀌게 되었을 때, 한쪽 방향에만 있는 노치 부분이 어떤 작용을 할 지에 대해 몇가지 정리해보았습니다.

 

노치를 타고 흐르는 아이폰의 모습 ▼

노치와 사이드바가 만나게 되었을 때 ▼

가로 모드에서 노치 부분 숨기기 ▼

동영상 재생 시 ▼

동영상 재생 시에 기본적으로 노치 부분이 배제된 화면이 동영상 재생시 나오게 됩니다. 화면을 ‘핀치 아웃’하는 것으로 노치 부분을 덮어쓰는 풀스크린으로 변경할 수 있습니다. 문제는 노치 부분을 배제한 화면을 보게 될 시에 아이폰 X의 화면(5.8″)이 아이폰 8(4.7″)의 가로 화면보다 더 좁은 수직 공간을 가진다는 점입니다.

사파리의 모습 ▼

좌우를 비움으로써 의미없는 하얀 화면이 문제가 되어 대두되고 있습니다. 웹페이지 개발자가 body 배경화면색깔을 검은색으로 했을 경우, 자연스럽게 렌딩되겠지만 그렇지 않을 경우 아래와 같이 불편한 화면이 나오게 됩니다.

사실 위 문제는 이미 해결책들이 쏟아져 나오고 있습니다. 혹, 웹개발을 하고 계시거나 궁금하시다면 아래 링크를 참조해주시기 바랍니다.

출처 – stephenradford

  1. background-color : body 태그에 background-color를 바꿔서 자연스럽게 바꾸기
  2. meta tag에 viewport-fit = cover를 추가하기
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

이상입니다.

참조

참고 영상 – 아이폰 X 시연

댓글 남기기