iOS14 Beta '디자인' 리뷰
디자이너의 관점에서 바라본 iOS14 Beta 리뷰
저는 iOS14 Beta 버전을 미리 사용한 후기를 사용자의 관점에서 바라본 기능 리뷰와 디자이너의 관점에서 바라본 디자인 리뷰 두 가지로 나누어서 이야기해보려 합니다. 이번 글에서는 디자인에 관한 이야기를 해보려 합니다.
디자인을 보면 애플은 플랫디자인에서 다시 스큐어모피즘으로 돌아가려 하는 느낌을 받습니다. 새로운 iOS는 아직 플랫디자인이 많이 유지되지만 외관은 더 많은 그림자, 질감 및 3D 모양을 가지고 있으며 새로운 macOS 'Big Sur'에서는 좀 더 직설적으로 스큐어모피즘 디자인으로 가려는 방향성을 느낄 수 있었습니다.(이것은 최근에 화재 된 뉴피즘(뉴스큐어모피즘)으로 정의하기에는 차이가 있습니다.)
또한 iOS14는 시각적 복잡성을 줄이고 디자인을 더욱 최소화하였습니다. 일부 요소는 더 평평하지만 느낌은 반대입니다. 우리는 애플이 내놓은 디자인에서 미니멀리즘이 어떻게 공간을 확보하는지 그림자와 백그라운드 블러 효과가 시각적 계층을 어떻게 구축하는지 관찰할 수 있습니다.
앞으로 중요해질 위젯 디자인
기존에는 iOS에서는 앱의 아이콘만 제작하면 되었지만 이제는 사용자의 편리를 위해 위젯의 디자인도 매우 중요해질 것으로 보입니다. UI 디자이너라면 사용자가 앱에 접근하지 않고 정보를 얻기 위해 직관적인 위젯 디자인에 대해 고민해봐야 합니다.
GIF가 자주 끊기더라고요. 클릭해서 봐주세요 (사진출처 - Apple)위젯은 어플 하나에 소, 중, 대 3가지의 크기로 제공하고 있으며 굳이 어플을 들어가지 않아도 필요한 기능을 사용할 수 있게 해 줍니다. 이전의 날씨를 보려면 날씨 어플을 들어가서 날씨를 확인해야 됐지만 이제는 아래의 첫 번째 이미지처럼 날씨를 그냥 홈 화면에서 볼 수 있습니다. 캘린더도 마찬가지로 오늘의 일정도 굳이 앱을 열지 않아도 간단하게 볼 수 있었습니다.
위젯을 적용한 바탕화면 1, 2번 이미지와 위젯 추가 PIcker화면 3번 이미지전 세계의 유명한 어플들은 과연 이 단순한 위젯 디자인을 어떻게 표현하여 내놓을지 정말 기대되는 부분입니다. 이전부터 watchOS에 관심을 가지고 있었는데 중간 사이즈의 위젯은 watchOS 디자인에서 많은 방향성을 가질 수 있지 않을까 하는 생각이 듭니다.
훌륭한 'UI 교과서' 지도 앱
애플의 지도는 우리나라에서 잘 사용하지는 않지만 이론적인 측면에서는 매우 훌륭하다고 생각합니다. 우리는 한 손으로 스마트폰을 들고 앱을 사용할 때 터치율이 가장 높은 스크린의 위치는 좌측 하단부터 우측 상단이라고 합니다.(오른손잡이 기준) 그런데 생각해보면 가장 베스트는 하단의 중앙이 가장 터치하기 편합니다.
애플과 카카오의 지도앱 메인화면사용자가 지도를 실행하는 이유는 무엇일까요? 가장 큰 목적은 장소를 검색하는 이유가 가장 클 것으로 예상됩니다. 그러면 검색 서치 바가 가장 터치하기 편한 위치에 있으면 더욱 좋은데 이점은 애플 지도에서 확인할 수 있습니다.
Apple은 iOS13부터 bottom sheet 디자인을 많이 사용해왔는데 서치바와 다른 메뉴들을 분리하는 게 아닌 Picker에 포함하면서 하단의 중앙에 배치하여 정보성 카테고리를 하나의 그룹으로 만들고 지도의 영역을 최대한 넓게 활용하였습니다.
왼쪽부터 순서대로 1, 2, 3 단계로 구성애플의 지도 앱을 실행하면 Picker가 총 3단계로 구성되는데 첫 번째는 화면의 5/6를 차지하며 먼저 검색을 유도하게 합니다. Picker를 드래그를 하면 메인화면인 Picker가 화면의 2.5/6를 차지하게 해 서치바를 하단 중앙에 위치하게 하였습니다. 그다음은 단순히 지도를 볼 수 있는 3단계인 화면의 1/6을 차지하는 사용자의 목적에 따른 구성을 이루고 있습니다.
경로의 경사도를 표현한 애플지도 (사진출처 - Apple)경로 안내면에서도 변화가 있었는데 가장 눈에 띄는 점은 바로 경사도를 막대그래프로 시각적으로 표현한 점입니다. 같은 거리여도 경사도에 따라오고 가는 시간의 차이가 있는데 단면적인 거리가 아닌 경사면을 고려할 수 있다는 점은 굉장히 훌륭한 점인 거 같습니다. 하지만 아직 사이트의 이미지처럼 표현되고 있지 않아 정식버전 출시 후 확인이 가능할 것 같습니다.
지도의 확대와 회전에서도 차이를 보여줍니다. 애플 지도는 한 번의 드래그로 360회전과 확대를 동시에 지원합니다. 반면 카카오 지도는 회전과 확대를 분리하여서 두 번 터치해야 되는 차이가 있습니다.(모르는 분이 많은데 두 손가락 드래그로 시점의 각도도 변경 가능합니다.)
날짜를 더욱 빠르게 선택
날짜 선택하는 UI는 굉장히 다양하게 사용되고 있습니다. 애플은 그동안 사용하던 카운트다운 형식의 날짜 선택 UI를 사용하였는데 이번 iOS14에서는 캘린더 형식의 날짜 선택 UI를 선택하였습니다. 시간과 날짜를 더 빠르게 입력할 수 있는 스타일로 변화되었습니다.
왼쪽은 기존의 카운트다운 형식, 오른쪽은 변경된 캘린더 형식의 UI이전의 스크롤 형식은 올바른 날짜를 선택하기 위해 너무 많은 스크롤을 해야 했는데 날짜 오전,오후 시간과 분같이 너무 많은 설정을 선택해야하는 부분에서는 그다지 좋은 UI라고 생각하지 않았는데 애플은 마침내 좀 더 편리한 날짜 선택 UI를 제공하기 시작하였습니다. Human Interface에서 제공하는 iOS14 Beta Kit에서 변화된 날짜 선택 UI의 적용 방안을 제공하고 있습니다.
iOS14 Beta Kit에서 확인 가능한 더욱 간편해진 Data Picker백그라운드 블러 효과를 사용한 사파리
아직 iOS14 Beta 버전에서는 디자인적으로 바뀐 모습은 확인이 안 되지만 macOS에서는 커스텀 된 홈 화면을 볼 수 있습니다. 애플은 백그라운드 블러 효과를 사용해 각 요소들을 디자인한 것을 볼 수 있으며 이러한 효과는 Microsoft의 Fluent Design에서도 많이 활용되고 있습니다.
커스텀이 더욱 다양해진 홈 화면 (사진출처 - Apple)백그라운드 블러는 불투명도 또는 그림자 아래에 숨기는 대신 흐림 효과를 주어서 그러데이션을 만드는 것입니다. 애플이 적용한 백그라운드 블러 효과는 이미지와 혼합하여 사용하기 최적화된 디자인이라고 생각합니다. 이러한 효과를 웹사이트에서도 활용하는 것도 괜찮을 것 같다는 생각이 듭니다.
콤팩트해진 Siri
Siri의 모습은 새롭게 바뀌었습니다. 전체화면을 뒤덮지 않는 완전히 새로워진 디자인 덕분에 사용자는 더욱 편리하게 다양한 작업을 할 수 있게되었습니다. 하단의 3D모형의 시리아이콘이 뜨면서 요청한 내용도 상단의 알림으로 바뀌었습니다.
새롭게 바뀐 Siri의 UI화면 (사진출처 - Apple)Siri는 작동상태일때 심볼안의 입체그래픽이 계속 움직이면서 사용자에게 실행되고 있다는 인식을 주고 있습니다. 또한 알림 팝업도 더욱 다양하게 변경되었습니다.
모서리를 더욱 둥글게
대부분의 매체에서는 버튼과 알림은 일반적으로 날카로운 모서리를 사용하는 것보다 둥근 모서리를 사용하는 것이 더 잘 보인다고 말하고 있습니다. 애플은 대부분의 버튼과 팝업 등에 모서리를 둥글게 사용해왔습니다. 애플은 모서리를 더욱더 둥글게 사용하기 시작하였습니다. 이러한 부분은 무언가의 연결되면 뜨는 팝업인 리케이션 팝업과 macOS의 앱 아이콘들이 더욱 둥글어지는 부분에서 확인 가능합니다.
그런데 간혹 둥근 버튼을 동작 버튼으로 사용하는 경우가 있는데 휴먼 인터페이스에서는 둥근 버튼을 동작 버튼에 사용하지 않도록 권장하고 있습니다. 정말 둥근 버튼은 일반적으로 '알림'과 '라디오 버튼'에서 사용하는 것을 권장합니다.
아이콘 다시 '스큐어모피즘'으로...?
일단 iOS14의 아이콘은 기존과 크게 차이가 있지 않습니다. 하지만 macOS의 'Big Sur'에서는 다릅니다. 그래서 아이콘은 새로운 macOS 'Big Sur'에서 대해서 먼저 이야기해보려 합니다. 아이콘을 보면 플랫 디자인을 버리고 다시 스큐어모피즘으로 돌아갔습니다.
지난 몇 년 동안, macOS 스타일은 앱 아이콘을 평평하게 하고 심볼을 주로 원형으로 둘러쌌습니다. 이제 대부분의 아이콘이 “iOS와 비슷한”모양을 얻었지만 평평하지는 않게 바뀌었습니다.
macOS 'Big Sur'의 새로운 스큐어모피즘 아이콘새로운 아이콘 디자인을 주의 깊게 볼 필요가 있습니다. 그림자 및 그라디언트가 'Big Sur' 아이콘 스타일에 평평한 iOS 아이콘의 느낌을 어떻게 변화시키는지 관찰해보고 앞으로 아이콘의 트렌드가 애플이 제시하는 스큐어모피즘으로 다시 돌아갈지 지켜볼 필요가 있는 것 같습니다.
더욱 다양해진 애니모티콘 '미모지'
출시 동시에 큰 파장을 일으켰던 애니모티콘 '미모지'의 옵션이 추가되었습니다. 특히 이번 코로나 사태에 애플은 마스트를 자체 생산하는 등 적극적인 사회활동을 하고 있는데 미모지에서도 마스크 아이콘이 추가되고 더욱 다양한 인종을 표현할 수 있게 옵션들이 추가되었습니다.
iOS14의 더욱 다양해진 미모지메시지에도 기능적으로 큰 변화를 주었는데 미모지를 프로필 이미지로 사용하는 메시지 앱에 애플은 점점 신경을 쓰고 있는 변화라고 생각합니다.
궁금하면 꼭 '백업'하고 체험해보시길!
훌륭한 디자이너들과 만날 기회가 없다면 그들의 작품들을 하나하나 다 뜯어보고 왜 이렇게 사용하였는지를 아는 것이 디자인실력 향상에 굉장히 큰 도움이 된다고 생각합니다. 베타 버전을 통해서 체험해보고 iOS Kit를 다운로드하여서 다 뜯어보고 어떻게 디자인하였는지 따라 해 보는 것을 추천드립니다.
백날 글로 읽고 영상을 봐도 자기가 경험해보지 못하면 알지 못합니다. 그래서 저는 베타를 체험해보는 것이고요. 또한 이번 베타 버전은 여태껏 나온 베타 버전 중 버그가 없다고 커뮤니티에서는 평가하고 있습니다.
iOS14 베타를 만약 체험해보고 싶으신 분이 있다면 꼭 아이튠즈나 맥에 백업을 진행하고 업데이트하시길 바랍니다.
일반 사용자를 위한 버전이 아닌 버전이 업데이트되면서 앱 개발자들에게 앱의 오류들을 수정하도록 하기 위해 베포 하는 목적이므로 일부 어플들에 튕김 현상이 있어 사용하는데 불편하실 것이므로 꼭 백업을 하시고 업데이트하시길 바랍니다.
iOS14 베타를 체험해보고 싶으신 분은 하단에 iOS 베타 다운로드 링크를 첨부해 놓도록 하겠습니다.
- iOS 14 Beta 다운링크
- iOS 14 Beta Kit 다운링크
https://developer.apple.com/design/resources/
