brunch

매거진 filament lab

라이킷 35 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by FILAMENT Aug 19. 2017

Shape of Display .02

새로운 디스플레이가 GUI에 미치는 영향

디스플레이의 형태. 즉 판형이 바뀌면 UX 전체에 큰 영향을 주게 됩니다. 그게 비록 모서리가 둥글어진 정도라도 실제로 제조사 레벨의 Basic GUI를 만들기 위해서 고려해야 하는 것은 한두 가지가 아니게 되는데요.(디자이너들 야근하는 소리가 들리는 것 같습니다..) 간단한 예로 Notification pop-up을 한번 살펴보겠습니다.

화면이 커지면서 조금씩 늘어가는 여백.

iOS는 버전 7의 큰 변화(Flat design) 이래로 자잘한 업데이트를 계속해 나가고 있습니다. 눈치채고 계신 분들도 많을 듯합니다만 iOS는 버전 10 이후로 Pop-up, Drawer, Control Panel 등의 요소를 모두 Rounded Rectangle의 형태로 바꾸어 나가고 있습니다. 이것이 어떤 의도를 가지고 디자인된 것인지 섣불리 추측할 수는 없지만, 루머로 돌고 있는 새로운 iPhone 8의 둥근 디스플레이와 제품의 외형에 잘 어울려 보입니다. 사실 이러한 변화가 일어날 수 있었던 이유는 바로 커진 디스플레이 덕분입니다.

양장본은 문고본보다 더 크고 두꺼운만큼 더 많은 사진을 여백과 함께 담을 수 있다. / by pitis.eu

기존의 3-4인치 급의 디스플레이에서 공간의 낭비는 죄악이었습니다. iPhone 8 의 경우 루머대로라면 5.8인치의 대형 디스플레이가 탑재되게 되는데요, 이는 책으로 치면 문고본 에서 양장본이 된 정도의 변화라 할 수 있습니다.(예시로 넣은 하라 켄야의 '디자인의 디자인'은 특별판이 나오면서 시원시원한 레이아웃과 다양한 콘텐츠를 추가하여 출간되었습니다. 네, 예전 책을 산 저는 호구가 되었습니다..) 실제로 5-6인치 이상의 디스플레이에서는 콘텐츠의 양을 희생하지 않더라도 여백을 활용할만한 충분한 여유가 있었습니다. 그리고 이 여백은 잘 사용하면 심미적인 안정감과 콘텐츠에의 몰입감을 느낄 수 있도록 도와줄 수 있습니다.

둥근 디스플레이에는 둥근 팝업이 와따임다

루머로 유출된 iPhone 8 디스플레이 외경의 R값은 상당히 큰 편입니다.(유출된 도면상으로 약 74pt) 만약 iOS 10에서 제공하는 팝업의 R값(26pt)을 활용하여 Notification panel을 만든다면 위 이미지와 같이 좀 더 넓은 여백을 갖는 편이 안정적입니다. 만약 여기서 더 작은 R값의 팝업을 쓰게 된다면 더 큰 여백을 활용해야 하기 때문에 공간의 낭비가 더 심해질 우려가 있습니다. 물론 가로폭 전체를 사용하는 Full-Bleed도 좋은 대안입니다만 Notification Popup의 특성을 고려하면, 좀 더 쉽게 사라지거나 가볍게 움직일 것 같아 보이는 Rounded rectangle 형태가 좋아 보입니다.

iPad도 곧 이런 모습으로 찾아올지도 몰라요

iOS 11에 오면서 Notification뿐만 아니라 Control Panel도 모두 둥근 모서리를 갖게 되었습니다. 특히 iPad에 적용된 모습을 보면 어느 곳 하나 각진 곳이 없습니다. 새로운 Dock 콘셉트도 둥근 모서리를 강조하고 있습니다. 이는 iOS에서 새롭게 보여주고자 하는 비주얼 콘셉트이라 생각할 수도 있습니다만, 새로운 디스플레이를 의식한 밑밥 깔기가 아닐지 살짝 의심해 볼 수 있습니다. (물론 심증이 있다는 것일 뿐 확증은 없습니다..)

당신은 M자 탈모빔을 맞았습니다

루머 중 가장 아쉬운 부분인 스피커 및 센서부에 대해 이야기를 안 하고 넘어갈 수는 없겠네요. 올해에 출시한 Samsung Galaxy S8의 경우 위와 아래의 베젤을 동일하게 주어 이 부분을 해결했습니다. 또한 뒤판의 컬러가 다르더라도 전면에는 모두 블랙 베젤을 적용하여 새롭게 추가된 여러 센서를 가려주는 센스를 발휘했었죠. 하지만 iPhone 8은 센서부를 파먹는 모험을 감행했습니다. 물론 잘 뽑아 줄거라 믿습니다만, 아래와 같이 3가지 모드를 제공한다면 전 인디케이터를 메우는 옵션으로만 쓸 것 같습니다. 너무 거슬리거든요..

3가지 타입의 디스플레이 모드를 제공한다는 루머도 있길래 만들어 보았습니다.

그리고 새로운 디스플레이는 제조사(Apple)만의 문제가 아닙니다. 지금 스토어에 있는 무수한 애플리케이션들은 이 새로운 디바이스를 위해 또 한 번 업데이트를 해야 하겠죠. 모서리 구석에 아이콘을 박아두었던 앱들은 살짝 여백을 두어 이동해야 할 것이고, 새로운 비율에 맞춘 레이아웃도 고민해야 할 것입니다. 물론 시스템 단에서 업데이트가 되지 않은 기존 앱들을 위 마지막 이미지처럼 가상의 베젤을 제공하여 표현할 것으로 생각이 됩니다만, 유저들은 새로운 아이폰에 대응하지 않는 앱들에는 아쉬움을 표현할 것입니다.

네. 이 업계에 계시는 수많은 디자이너, 개발자 분들께서 일을 더 하셔야 한다는 말씀입니다.

~~일거리가 없어서 굶어 죽지는 않겠네요!~~

Shape of Display .03에서 이어집니다.

keyword