디자이너 관점에서 본 WWDC 20
조금 늦은 감이 있지만, 6월에 발표한 WWDC를 보고 디자이너 관점에서 정리해보려고 한다.
이번 발표를 보니, 애플에서 제공하는 모든 OS에서 많은 변화가 있었다.
OS별로 디테일하게 정리하면 좋겠지만, 우선은 내 업무와 연관이 많고 동시에 애플 제품 중 내가 가장 많이 사용하고 있는 iOS에서 UX/UI가 어떻게 업데이트 되었는지 알아보았다.
iOS 14에서는 위젯, 메시지, 시리, 지도 등에서 눈에 띄는 변화가 있었고 카플레이에 스마트 키 추가, PIP, 앱 클립스, 그리고 번역 기능이 새롭게 추가되었다.
디자인 세션에서는 위젯, 메뉴와 픽커 UI가 달라졌고, SF Symbol과 UI 타이포그라피가 디벨롭되었다. 앱 아이콘 부분에서는 플랫한 스타일을 탈피해가는 느낌이었다.
발표를 보고, 아래 4가지 키워드로 정리할 수 있었다.
01. Multi-tasking
02. Customizing
03. Accessibility
04. Sophiscated UI
01. Multi-tasking
iOS는 한 가지 기능에 집중할 수 있는 환경을 제공했다면, 이제는 한 가지 이상의 기능을 동시에 수행할 수 있도록 변화하는 것 같다. PIP, Call, Siri 등이 대표적인 사례이다.
· PIP(Picture In Picture)
PIP에 대해 간단히 설명하자면, 영상이 플레이되고 있는 상태에서 홈으로 이동하거나 다른 앱을 켰을 때 영상이 꺼지지 않고 플로팅되어 계속 플레이되는 기능이다. 안드로이드에서는 이미 제공하고 있는 기능인데, iOS에서도 이번에 적용된다고 한다. 머지 않아 유튜브 영상을 보다가 다른 앱을 실행해도 영상을 계속 볼 수 있게 될 것이다.
· Call
아이폰으로 무언가를 하고 있을 때 전화가 오면, 하고 있던 것을 완벽히 차단하고 전화를 받을지 거절할지를 선택할 수 있었다. 하지만 iOS14 이후에는 상단에 토스트 형태의 UI로 전화가 들어 온 것을 알려 기존에 하던 작업을 방해하지 않도록 개선될 예정이다. 가장 불편하다고 생각했던 부분이었는데 개선이 된다고 하니 기대가 된다.
· Siri
Siri도 Call 기능과 마찬가지로, 기존에는 Siri를 키면 화면 전체를 덮어서 불편함을 느낄 때가 있었다. 하지만 전화올 때와 비슷하게 Siri도 원래 하던 일에 대한 차단 없이 플로팅 방식으로 개선된다고 한다.
02. Customizing
아이폰과 안드로이드의 가장 큰 차이는 커스터마이징의 제약이 아닐까 싶다. 아이폰 홈 화면을 보면 느낄 수 있지만, 아이폰 유저들은 홈 화면에서 배경화면과 폴더링, 폴더명만 수정할 수 있다. 간혹, 이에 답답함을 느끼는 유저들은 탈옥을 하여 다양한 스타일로 커스텀해서 사용하기도 한다.
· Widget
두 번째 키워드로 Customizing을 쓴 것은 Widget의 변화 때문이다. 당장은 애플에서 제공하는 서비스에 한정되겠지만, 앞으로는 더 다양한 앱의 위젯을 사용하게 될 것이고 유저별로 원하는 위젯을 활용하여 자기만의 아이폰 홈을 만들 수 있을 것이라 생각되어 Customizing 키워드를 추가했다.
✔️위젯 디자인 확인하고 가기
위젯 UI는 이번에 처음 나와서 간략하게 정리했다.
Flow
플로우는 현재 홈에서 보이는 내용을 상세히 볼 수 있는 화면으로 이동을 하게 된다.
Size
위젯 사이즈는 스몰, 미듐, 라지 3가지로 되어있고, 사이즈에 따라 정보를 더 많이 노출되게끔 구성해야 한다.
03. Accessibility
iOS의 일부 UI 컴포넌트 스타일의 접근성이 개선되었다.
· Menu UI
지금은 메뉴가 액션시트와 팝오버 형태로 나왔는데 iOS 14에서는 사용자가 메뉴 버튼을 탭하면, 버튼 근처에 세부 메뉴가 나와서 하위 메뉴를 조금 더 빠르게 선택할 수 있게 바뀔 예정이다.
아이패드에서는 이미 이와 같은 메뉴 스타일을 적용중인데 단순히 iPad UI와 스타일을 맞추기 위해 바꾸는 것 같진 않고, iphone X 이상의 디바이스에서 메뉴를 사용해보면 위 아래로 왔다 갔다 하는 과정에서 상대적으로 손을 많이 움직여 불편함을 느낄 때가 있는데 이런 부분을 개선하기 위해서 바뀌는 게 아닐까 싶다.
✔️ 메뉴 디자인 확인하고 가기
메뉴도 스타일이 달라졌기 때문에 간략하게 정리했다.
Style
타이틀이 있는 케이스, 타이틀 없는 케이스, 그리고 하위 메뉴가 많아 디바이더로 리스트를 분리한 케이스가 있으니 상황에 맞게 적용하면 될 것 같다.
Tip
추가로 삭제와 같이 신중함이 필요한 케이스에서는 액션 시트로 적용해야 한다고 하니 참고하는 게 좋을 것 같다.
· Date Picker UI
Date Picker에는 날짜, 시간, 날짜+시간 결합형이 3가지 스타일이 개선되었다.
꽤 오랫동안 유지되던 일명 통돌이(?) 친구가 사라지고, 현재를 기준으로 월별 캘린더가 나와서 날짜를 고르게 된다. 하지만 연도나 월을 변경할 때는 통돌이 형태로 나와서 과거 혹은 미래의 날짜를 선택할 수 있다. 또, 시간을 설정할 때는 숫자 패드가 나와서 입력이 가능하다.
· Color Picker UI
컬러 픽커는 세 가지 컬러 타입으로 컬러를 선택할 수 있으며, 상단에 아이픽커가 위치하여 언제든 이용할 수 있다. 발표보면서 처음 알게 된 사실인데, 이번에 스위프트에 Color Picker를 제공하는 UI를 제공한다고 한다. UI 컬러 웰로 찾아서 쉽게 적용할 수 있다고 하니 개발자들도 알아두면 좋을 것 같다.
04. Sophiscated UI
UI에 쓰이는 심볼과 Typography가 보다 더 정교해졌다.
· SF Symbol 2
SF 심볼은 이번이 2번째 업데이트였는데 종류가 추가됐고 일부 심볼은 컬러풀해졌다. 또, 아이콘 스타일에 따라 LTR 케이스도 추가가 되어서 용이하게 쓸 수 있을 것 같다. 또한, 심볼과 텍스트를 함께 활용할 때 align 안 맞는 디테일을 개선하여 애플에서 제공하는 어떤 폰트에서든지 안정감 있게 사용할 수 있게 되었다.
· UI Typography
타이포그라피는 OS 별로 폰트를 최적화하여 적용할 수 있도록 정교화했다. 타입별로 사이즈, 두께, 자간, 행간 등을 디벨롭했다.
마치며
최근 업데이트된 iOS 버전들을 보면서 느낀거지만, iOS도 점점 안드로이드화 되어 가는 것 같다. 또한, 위젯은 앞으로 디벨롭되어 향후에는 아이폰의 커스터마이징이 더 자유로워지지 않을까 예상된다.
아쉬운 점은 메신저나 지도 앱 기능을 지역&문화적인 한계로 제대로 이용하기 어려운 점이다. 아이폰 쓰는 친구들끼리라도 iMessage를 자주 써보면서 어떤 점들이 편리한지 분석해봐야겠다.
