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

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

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

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

출처 – 애플 공개 행사 Keynote


세로 방향에서의 아이폰 X

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

출처 – 애플

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

출처 – 애플


가로 방향에서의 아이폰 X

세로 방향의 모습은 대부분은 예측할 수 있는 모습이었습니다. 그렇다면, 가로방향으로 바뀌게 되었을 때, 한쪽 방향에만 있는 Notch부분이 어떤 작용을 할 지 몇가지 살펴보도록 하겠습니다.

Notch를 타고 흐르는 아이폰의 모습

Notch와 Sidebar가 만나게 되었을 때

가로 모드에서 Notch부분 숨기기

동영상 재생 시

Yahoo Finance columnist, David Pogue에 따르면 기본적으로 Notch부분이 배제된 화면이 동영상 재생시 나온다고 합니다. 하지만, 화면을 더블 탭하는 것으로 Notch를 덮어쓰는 풀스크린으로 바꿀 수 있다고 합니다. 문제는 만약 Notch부분을 배제한 화면을 보게 될 시, 아이폰 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 시연

댓글 남기기