앱 UIUX 설계_🪙🪽

'사용자에게 필요한 정보를 최대한 빠르게 단순하고 직관적이게 제공하는 것'을 이번 프로젝트의 가장 중요한 UX 목표로 설정하였다. 이를 위해서 다양한 UI 방안을 고려해보았는데, 결국 마지막에 반영하게 된 방향은 다음과 같았다:

 

1. 카드 형태의 직관적인 정보

 

가장 중요하게 생각한 것은 직관성이었고, 처음부터 위젯을 고려하며 앱을 설계했기 때문에 위젯과의 연동을 고려해야했다. 특히 위젯 사용은 무조건 편리해야 했기에 앱에서 따로 검색을 하지 않아도 필요한 정보가 늘 위젯에 노출되어 있으면 했다. 하지만, 유저의 개입없이 바로 알 수 있는 정보는 위치 정보 뿐인데, 한 역에도 다양한 호선과 방향의 열차가 존재하기 때문에 작은 위젯 화면에 이 정보를 모두 담을 수도 없었다는 모순을 발견하였다. 

 

이 문제를 해결하기 위해서 열차 정보를 카드 형태로 제작하고, 카드를 열어두기만 하면 해당 정보가 위젯에 뜨도록 설계하였다. 그리고 위젯에서 빠르게 카드를 열 수 있는 UX flow를 고민해야했는데 이 부분은 나중에 서술하도록 하겠다.

 

카드 형태

카드 형태의 디자인이 나오면서 한 화면에 한 열차의 정보만 제공하는 '타이머 형태'의 직관적인 화면을 설계할 수 있었다. 

 

2. 1-depth에 바로 위치 기반 시간 정보를 제공

 

우리의 목표는 우선 사용자가 검색하거나 정보를 저장할 필요 없이 위치 기반으로 필요한 정보를 바로 알려주는 것이었다. 그래서 레퍼런스를 삼은 앱은 다른 교통 앱이 아닌, 실시간 위치를 가장 많이 반영하는 어플인 '날씨 어플'이 되었다. 

애플의 날씨 어플

 

이에 첫 화면에는 오직 '위치'를 기반으로 한 가장 가까운 역에 오는 열차의 정보만을 제공하는 UI를 설계하였다. 하지만 한 역에도 다양한 호선이 존재하고 두 방향으로 가는 열차가 있기 때문에 이 정보를 정리할 필요가 있었다. 이에 따라 가장 단순한 정보 '호선' '방향' '열차 도착 예정 시간'만을 담은 각각의 블록으로 정보를 정리하였고, 블록을 탭하면 상세 카드를 열고 닫을 수 있는 형태로 제작하였다. 

 

블록과 상세 카드

 

이렇게 해서 앱을 열기만 해도 가까운 역의 모든 호선,방향에 따른 도착 정보를 볼 수 있고 내가 이용할 카드를 탭해서 열면 직관적인 타이머 형태로 확인하고 위젯에도 연동되는 flow가 완성되었다. 

 

3. 역 저장하기 (검색과 빠른 추가)

 

비록 실시간 위치를 통해 정보를 알려주는게 가장 큰 기능이었지만, 현재 위치가 아닌 역의 결과를 보고 싶거나 자주 사용하는 역, 호선, 방향 등은 저장해두고 바로 보고 싶을 수 있기 때문에 이 두가지 니즈를 위한 저장 기능을 추가하였다. 

직접 검색하여 저장하는 기능

가까운 역 결과에서 길게 눌러 추가하는 기능

특히 iOS 어플로 만들어졌기 때문에, 다양한 기능을 넣으면서 스와이프, 롱프레스 등 익숙한 동작을 활용해 최대한 단순하지만 편리한 UI를 만들 수 있었다. 

 

(다음에는 위젯 설계와 브랜딩, 개발과 디자인 과정에 대한 내용을 들고 올게요)