iPhone X의 디스플레이 돌출부분을 이용한 창조적인 아이디어

Apple Special Event에서 발표 된 신형 iPhone 인 "iPhone X"는, 지금까지의 단말기에는 없었던 "돌출 부분"이 디스플레이 상단에 자리잡고 있다. 이 돌출 부분은, iPhone X의 가장 큰 특징 중 하나 인 얼굴 인식 기능의 "Face ID"용의 TrueDepth 카메라와 각종 센서가 자리잡고 있는데, 앱 개발자들의 경우, UI 디자인의 방해가 되는 요소 인 것은 확실하다.


그러나 많은 개발자들이 iPhone X의 돌출 부분을 창조적으로 해결하려는 아이디어를 만들어내고 있다.



iPhone X의 5.8인치 디스플레이 상단에 나와있는 돌출 부분은, 동영상을 재생하거나 웹 서핑을 할 때 방해가 될 것으로 생각되지만, iOS 앱 개발자들에게는 "iPhone X 전용의 디자인"을 생각해내야 하기 때문에 더 큰 골치거리가 될 것이다. 따라서 Apple은 개발자를 위한 iPhone X용 어플의 휴먼 인터페이스 지침과 응용 디자인의 요점을 정리 한 동영상 Designing for iPhone X 등을 공개하고 있다.


그런 가운데, iPhone X의 돌출 부분을 어떻게 처리할지를 놓고, 개발자들로부터 많은 아이디어가 튀어 나오고 있다는 사실.


▼ 화면의 스크롤과 함께 문자열이 돌출 부분에서 움직이는 아이디어





▼ iPhone X의 돌출 부분을 따라 스크롤 막대를 표시하는 아이디어



▼ Alex Devarty 씨는 iPhone X의 돌출 부분에 2개의 패턴을 준비하고 하나는 가로 세로 두 경우 모두 난간 좌우를 표시하는 방법이고, 다른 하나는 가로 화면시에 활용할 수 없는 난간 좌우의 공간을 깜깜하게 하는 방법



▼ iPhone X의 돌출 부분에 맞게 새로운 디자인을 도입한 개발자가 있으면 다음과 같이 돌출 부분에 간섭하지 않도록 화면의 상하 좌우에 큰 공간을 차지함으로써 무난하게 문제를 해결한다는 개발자도...



▼ 또한 돌출 부분의 좌우에는 시계, 안테나, 배터리 잔량을 표시하고, 그 아래에 공유 버튼과 검색 바 등 지금까지 화면 상단에 표시되어 있었던 요소를 배치한다는 개발자도 있었다.



▼ iPhone X의 돌출부 보다도 큰 디자인 변경을 강요 당했었던 것이 iOS 4의 등장이었다. 하지만 개발자의 에드워드 마크 씨에 의하면, 많은 개발자가 상태 표시줄 및 iOS 4에 대한 창의적인 해결 방안을 생각하고 있었던 것. 그리고 그 해결 방안이라는 것은 흑색의 상태 표시줄과 둥근 모서리를 사용하여 일어나는 "컨텐츠의 경계가 명확하고 표시 영역을 분리 할 수 있었던 것으로 iPhone 어플리케이션의 가용성을 높일 수 있었다"라고 시각 효과가 있었다고 설명하고 있다.




예를 들어 다음의 경우 오른쪽 화면의 상태 표시줄은 배경이 검은 색으로 되어있어, iPhone의 베잴 부분이 녹아있는 것으로 보여, 디스플레이에 표시 된 내용이 더 강조되고 있는 것처럼 보인다.



▼ iOS 4가 등장했을 때 여러 개발자가 도입했었던 이 시각 효과가, iPhone X에서도 유효하다고 해외 뉴스 사이트 9to5Mac은 주장하고 있다.


예를 들면, 다음의 디자인은, iPhone X의 돌출 부분을 상태 표시줄을 새까맣게하여 잘 숨기고, 그 아래에있는 주 내용 표시 영역의 모서리 부분을 둥글게 처리하여 주요 컨텐츠가 떠오르는 것처럼 강조되고 있다.



▼ 개발자의 Carlos Gavina 씨도, iPhone X의 돌출 부분 좌우의 상태 표시줄은 까맣게 되는 것이 좋다고 트위트에서 강조하고 있다.



▼ 또한 Apple Special Event의 프레젠테이션에 비친 Apple의 순정 뮤직 앱도 화면 상단의 상태 표시줄을 새까맣게 하여 iPhone X의 돌출 부분이 눈에 띄지 않게 하고 있다.



▼ iPhone X의 돌출 부분의 영향을 받는 것은 응용 프로그램 개발자뿐만이 아니다. 웹 개발자도 iPhone X에 맞춘 디자인 변경을 하지 않으면 안된다고 생각하고 있었다. 그렇지만, iOS 11에서 특정 코드를 추가하지 않아도, 기본적으로 iPhone X의 화면 좌우 가장 자리에 흰색의 여백이 표시되어, 돌출 부분이 표시 내용에 영향을 미치지 않도록 설계되어 있다고 한다.



▼ 그러나 특정 코드를 사이트에 추가하면, 다음과 같이 돌출 부분을 해결하고, iPhone X의 5.8인치 디스플레이 가득 컨텐츠를 표시 할 수 있다.


또한 9to5Mac에 따르면, "iPhone X용 휴먼 인터페이스 가이드 라인을 읽어보면, Apple이 개발자에 대해 "iPhone X의 돌출 부분을 존재하지 않는 것처럼 응용 프로그램을 개발할 것"을 바라고 있는 것은 명확하다"라고 한다.