'아이폰 위젯'으로 살펴본 서비스별 주요 기능
위젯에서 발견한 정보 구조의 간결함
어떤 것에 집중하고, 어떤 것을 덜어내고자 했을까?
보여주고 싶고 담고 싶은 것들은 너무 많은데 다 보여주자니 지저분해지는 고민을 프로덕트 디자이너라면 한 번쯤은 해봤을 것 같은데요. 이 고민의 힌트를 아이폰 위젯에서 얻을 수 있었어요.
아이폰 위젯 기능이 생기면서 마치 안드로이드처럼, 홈 화면에 위젯을 추가하여 쉽게 서비스에 접근할 수 있게 되었는데요.
홈 화면에 추가되는 기능인만큼 간결하게 / 한눈에 빠르게 어떤 기능을 사용할 수 있는지, 어떤 정보를 읽을 수 있는지가 가장 중요하다고 생각됐어요.
(*참고로, 애플 widgets 개발자 문서에 가장 많이 등장한 단어는 'Read at a glance'였습니다.)
마치 사용자가 날씨 앱을 누르는 가장 주된 이유는 현재 날씨가 몇 도인지, 어떤지 확인하고자 하는 것처럼요.
그렇기에 각 서비스들은 주요 기능을 임팩트 있게 담아내려고 했죠. 브랜드 아이덴티티를 살려서 브랜드의 컬러, Typo, 아이콘, 그래픽 요소들을 활용해서 디자인하기도 했어요.
하지만 이 글 작성을 위해 수집한 위젯들을 보니 가장 중요하게 디자인되어야 했던 부분은, 정보의 배치 그리고 밀도라고 생각돼요.
1. 애플 iOS
아이폰 내 기본 기능들의 위젯들의 대부분은 사용자가 간편하게 정보를 확인할 수 있도록 했어요.
각 어플 별로 가지고 있는 컬러들을 활용했고, 텍스트를 적절하게 배치했죠.
위젯이 tap과 click만 되는 것이 아니라, interaction이 될 수 있으면 더 좋겠죠. 예를 들면, 미리 알림 위젯같이 task를 완료했으면 버튼 터치 시 사라지는 것처럼 말이죠.
그중 제가 가장 한눈에 인지하기 좋았던 디자인은 배터리 위젯이에요. 아이폰에 연결된 액세사리들의 배터리 정보를 bar를 통해 표현하고, 어떤 기기인지는 아이콘을 통해 바로 알아차릴 수 있도록 만들었죠.
2. 카카오페이
카카오페이는 결제, 만보기, 멤버십, 금융캘린더 이렇게 4가지 기능을 위젯으로 만들었어요.
결제 위젯은 제가 자주 사용하는 위젯이에요. 자주 사용하는 카드로 빠르게 결제할 수 있었기 때문이었죠. 실제 사용하고 있는 카드 이미지를 심플하게 위젯 안에 담았다는 것도 좋았어요.
멤버십 바코드로 포인트를 사용하고 적립할 수 있기 때문에 바코드를 크게 강조했고, 금융 캘린더는 날짜별/금액별로 텍스트 밀도를 높이지 않고 깔끔하게 디자인했죠.
신기했던 점은 금융서비스들은 만보기 위젯에 집중했어요. 만보기 위젯을 통해 사용자의 리텐션을 높이기 위함이겠죠? 카카오페이의 만보기는 바 그래프를 사용하여 걸음수를 보여주는 데에 집중하지 않고 특이하게 대결하기라는 기능을 강조해서 제작했어요.
3. 네이버
네이버는 날씨 정보, 만보기, 검색, 네이버페이, 출입증 총 5가지의 기능을 만들었어요.
날씨와 만보기 같은 정보 확인 기능들은 작은 사이즈로 만들어도 충분히 정보를 읽을 수 있으니 작게, 검색/네이버페이와 같은 주요 기능들은 중간 사이즈의 크기로 제작했어요.
각 기능에 적합한 크기로 하나의 위젯을 만드는 것이 중요하다는 걸 보여주고 있어요.
검색하기 위한 기능을 빠르게 접근하게 하기 위해 검색창을 강조하고, 그와 관련된 주요 기능을 위젯 안에 담았어요.
네이버페이 위젯은 중요하게 생각하는 것을 네이버 포인트 확인이라고 생각하고 많은 여백을 주어 디자인한 모습이에요. 하지만 현장 결제 / 멤버십카드/ 주문하기 와 같은 실질적인 기능들은 잘 보이지 않아 아쉬움이 남아요.
4. 토스
토스는 송금, 이자받기, 만보기, 머니팁, 토스모바일 총 5가지 기능을 위젯으로 만들었어요.
송금을 하면서 우리가 첫 번째로 하는 것은 송금할 계좌 입력이죠. 송금할 계좌 입력의 위계를 높이고, 그다음 순서인 잔액확인과 더치페이가 있었어요.
송금하기 전에 내 계좌에 잔액이 충분한지 먼저 확인하는 사용자들의 습관을 고려하여 배치했다고 생각돼요. 더치페이는 송금할 일이 있을 때 자주 쓰이는 기능이기에 두 개의 기능(잔액확인/더치페이)에 별다른 디자인을 더하지 않고도 텍스트로만 표현했어요.
걸음수를 바 그래프를 통해 나타낸 점은 비슷했어요. 그리고 머니팁은 원체 기사이기 때문에 글이 많을 수밖에 없는데요. 타이틀 아래 작은 본문 텍스트는 과연 위젯에 적합한 디자인이 맞았을까 싶은 아쉬움이 남아요. 또 하나의 아쉬움은 맨 그래픽으론만 표현한 위젯 기능이에요. 딱 보면 어떤 위젯인지 알 수 있나요? 저는 잘 모르겠습니다. 어떤 기능이었는지는 직관적으로 알기는 어려웠어요.
5. 나이키런클럽
나이키런클럽은 러닝 하기 전/후에 집중해 위젯을 디자인했어요. 러닝 하기 전엔 시작 버튼에 집중했다면, 러닝 후엔 뛰었던 거리/페이스/시간 등의 정보를 넣었죠. 가장 눈에 띄었던 부분은 기능이 많지 않은 서비스임에도 다양한 사이즈별로 정보의 시각화를 알맞게 위젯 속에 담아냈다는 점이었어요.
제일 중요한 정보들은 볼드체로, 나이키런클럽의 브랜드 컬러인 노란색을 사용해서 디자인한 점이 흥미로웠어요.
6. 유튜브 • 스타벅스
유튜브는 탭 메뉴들을 위젯 안에 담았어요. 위젯의 위계를 통해 유튜브에선 검색 기능이 자주 쓰인다는 것을 유추해 볼 수 있었어요.
스타벅스 위젯은 자주 사용하는 기능들 4가지를 위젯에 담았어요. 스타벅스에서 중요하게 생각하는 기능은 사이렌오더 그리고 페이, 쿠폰, 온라인 스토어 순이라고 이해할 수도 있겠네요. 스타벅스도 유튜브 위젯처럼 아이콘과 텍스트의 그룹화를 했으면 좀 더 한눈에 기능들이 묶여 보이지 않았을까 하는 아쉬움이 남았어요.
[참고]
