I. 위젯이 가장 중요해!
먼저 지하철 앱이라고 했을 때 가장 중요한 것은 실시간성과 빠른 확인이라고 생각했고 결국 이걸 가장 잘 구현할 수 있는 건 위젯이라고 결정했다. 특히, 코인이 iOS 개발자로서 위젯에 익숙했기 때문에 수월하게 아이디어를 주고받으며 다듬어갈 수 있었고, 나도 최대한 많은 어플의 위젯 기능을 사용해보며 가장 편한 사용성을 고민했다.
먼저, iOS의 경우 홈 위젯, 잠금화면 위젯이 있고 위젯의 크기에 따라서도 제공되는 기능이나 정보의 양이 상이한다.
A. 잠금 화면 위젯 디자인
잠금 화면에 위젯을 추가하려고 하면 보이는 화면이다. 대부분의 앱이 잠금 위젯을 지원하고 있고, 최상단 한줄 그러니까 최대 4개의 위젯만 설정할 수 있기 때문에 유저의 입장에서도 매우 신중하게 고르게 되는 영역이다.
잠금 위젯의 사이즈는 두가지이고, 크기에 따라 정보량과 용도가 달라진다. 특히, 색 사용이 불가능하고 글씨를 넣기 매우 작은 사이즈이기 때문에 정보를 전달하는 인포그래픽이 매우 중요하다.
그래서 이 수면 위젯처럼 다양한 그래픽으로 정보를 보여주는 예시를 볼 수 있다.
B. 홈 화면 위젯 디자인
반면 홈 화면 위젯은 크기도 2배로 크고 디자인에 제약도 없으며, 사용자도 한도 없이 추가할 수 있기 때문에 다양한 디자인이 나와있다.
듀오 링고처럼 캐릭터를 활용한 재치있는 다양한 디자인 예시가 있다.
II. 우리 위젯의 용도와 개발가능한 범위
시티타이머가 제공하는 정보를 정리했을 때, 위치 기반과 저장 상세 카드가 있고, 또 위치 기반으로 바로 타이머를 보여줄 수 있는게 아니라 호선과 방향을 선택해야 그 열차 정보를 보여줄 수 있기 때문에 위젯에 바로 필요한 정보를 띄울 수 없는 구조였다.
A. 초기 아이디어
그래서 초기 와이어프레임은 앱과 동일하게 위치 기반과 저장 카드를 스와이프로 이동하고, 열차 정보를 선택해서 상세 정보를 보는 것이었지만.. 당연히 초기 설계는 구현 가능 여부를 고려하지 못한 아이디어였다.
먼저, 위젯 안에서 스와이프가 불가능했고, 또 위젯의 특성상 앱에서처럼 실시간 위치에 따른 역 정보를 계속 업데이트해 불러올 수 없다는 개발자의 피드백을 들었다.
그래서 최적의 방안을 생각하기 위해 그때그때 개발 가능 여부와 iOS 위젯의 특성을 확인하며 시나리오를 만들어나갔다.
B. 솔루션
위치 기반으로만 띄우면 상세를 선택할 수 없어서 선택하기 버튼으로 앱에 들어가서 단 한 단계만 거치면 정보가 보이도록 하였다. 즉, 선택하기를 누르면 앱이 실행되고 현재 위치 열차 중 원하는 정보를 선택하면 이 정보가 바로 위젯에 노출되도록 하였다. 앱을 거치는 한 단계가 추가되었지만, 가장 최적의 방법이었다.
그래서 최종 디자인으로는 현재 위치를 알려주되, 위젯으로 앱을 실행하고 원하는 열차 정보 카드를 열어두면 해당 열차의 정보가 위젯에 바로 노출되도록 하였다.
특히, 현재 위치에서의 거리에 따라 바뀌는 색상을 그대로 구현할 수 있었고 새로고침 버튼을 넣어서 실시간성에 대한 신뢰도를 높이고 안정적으로 실시간 타이머 연동이 구현되도록 디자인하였다.
잠금 화면의 경우에도 해당 시나리오를 적용하여 간단하게 디폴트 디자인을 만들고, 앱을 실행한 이후에는 바로 직관적인 타이머가 보일 수 있도록 디자인하였다. 큰 위젯에서는 호선과 방향 등의 다양한 정보를 전달하면서 중요도에 따라 크기나 볼드을 통해 위계를 설정했고, 가장 작은 사이즈의 위젯의 경우 문구를 넣기 어렵기 때문에 가장 중요한 정보인 타이머만 유지하는 등 정보 전달에 대한 고민을 많이 해볼 수 있는 기회였다.
C. 최종 디자인
'시티타이머 > 회고' 카테고리의 다른 글
| iOS 위젯 타이머: 기술적 도전과 구현 과정🪙 (3) | 2024.10.10 |
|---|---|
| 지하철 도착 정보 수집과 예외 처리 과정_🪙 (0) | 2024.09.30 |
| 앱 UIUX 설계_🪙🪽 (0) | 2024.09.30 |
| 리서치 및 아이데이션_🪙🪽 (2) | 2024.09.22 |
| 프로젝트 시작 계기_엔제이🪽 (1) | 2024.08.04 |