정보를 List / Card UI로 정리하는 방법
정보를 시각적으로 그루핑하고, 일반적인 UI로 표현하는 과정
정보정리를 UI 단위로 하는 방법은 없는걸까? 그리고 그 정보정리는 어떤 UI 단위로 처리해야 옳바른 방식인걸까? 사실 이 부분은 '무조건 이게 정답이다' 라고는 말할 수 없는 지점이다. 하지만 보여지는 정보를 '어떻게 구조화, 시각화'할 것인지는 다뤄볼 수 있을 것 같았다. 회사 팀원분이 고민하는 지점이기도 해서, 관련된 자료를 만들어보기로 했다.
1. 주어진 정보를 메인(main)과 서브(sub)로 나누어 시각화하기
대부분의 정보는 대장이라고 할 수 있는 메인 (main) 정보와, 거기에 상대적으로 덜 중요한 서브 (sub) 정보가 있다. 예를 들어서 영화티켓이 있다고 해보자. 영화티켓이 갖고있는 정보는 다음과 같다.
영화티켓
- 영화 이름
- 영화장르
- 영화내용
- 영화관 정보 (층 / 상영관)
- 영화상영 시작 ~ 끝에 대한 시간정보
- 좌석정보
- 가격정보
- 등등...
이중에서 가장 중요한 메인 정보는 무엇일까? 영화 '티켓'이라는 타이틀이 될 것이다. 그 이외의 내용들은 해당 티켓을 설명하는 주요정보들이다.이런 정보들을 시각화하면 다음과 같은 형태가 될 것이다.
UI를 위한 정보정리는 6하 원칙 (언제, 어디서, 누가, 무엇을, 어떻게, 왜) 과는 조금 다르다UI 단위로의 시각화에서는 무엇을 가장 우선적으로 보여줄 것인지가 중요하다. 그리고 '무엇이 가장 중요한가'는 시점에따라서 이야기가 달라진다. 영화를 찾아서 예약하는 단계에서는 영화의 장르나, 상영시간, 근처의 영화관까지 가는 거리, 티켓의 가격 같은 것들이 중요해진다. 하지만 영화를 예약한 이후의 시점에서는 영화의 제목과 상영시간, 좌석정보 같은 것들이 훨씬 중요해진다. 그렇기에 동일한 영화티켓이 갖고있는 정보라해도, 사용자가 정보를 찾는 시점에 따라 다른 접근방식이 필요해진다.
예매 시간 / 티켓번호, 예매번호 등을 우선적으로 정리한 경우UI 디자인은 한가지 방법이 정답이라고 할 수는 없다. 하지만 '어떤 정보가, 왜 강조가 되어야하는지'는 명확한 근거가 있어야한다. 예를 들어 제일 왼쪽의 티켓은 '발급 이후에 영화관에 입장하는 시점'을 중요하게 보고있다. 그래서 입장시간과, 입장시 체크해야할 QR 코드를 가장 크게 강조해두었다. 다만 어디로 가야하는지와, 영화이름이 제대로 보이지 않아 약간 혼란을 주고있다.
두번째 티켓의 경우, 티켓구매 직후의 영수증 화면으로 보인다. 어떤 영화를 예매했는지가 가장 중요하고, 이후 예약에 관련된 정보와 결제수단, 인원수 등이 뒤를 잇고있다. 하지만 크기나 비례에 대한 강조가 되어있지 않아 무슨 정보가 중요한지를 알기가 어렵다. 심지어 3단으로 나누어 1단과 3단을 중앙정렬한 것은, 대체 무슨 의도인지 알 수가 없을 정도다.
세번째 티켓의 경우, 예매상세내역 전체를 - 리스트 형태로 보여주고있다. 이 경우 무슨 영화를 예약한 건지도 알기가 어렵고, 예매번호를 가장 중요한 정보로 두고있다. 이런 경우 고객센터를 통해 예매번호를 체크하는 과정이 가장 중요하게 생각한 것이 아닐까 싶다. 하지만 대부분의 정보를 그루핑 없이 줄줄이 나열하는 바람에, 어떤 정보가 중요한지 전혀 알 수 없는 상태다.
2. 사용자 여정 (Journey map)을 통해, 정보를 확인하는 시점을 생각하기.
UI 디자인이나 설계를 하다보면 각각의 사용자들이 '어떤 시점'에서 정보를 확인하는지. 또 '어떤 기능'을 언제 사용하는지가 상당히 중요해진다. 그렇기에 이른바 서비스 사용과정 / 사용자 여정 (Journey map) 에 대해 분석이 필요해진다.
서비스 사용과정 / 사용자 여정에 대한 분석영화를 찾아서 선택하고, 구매하고, 실제로 보는 과정. 그 과정에서 각 '영화'에 대한 정보는 어떤것들이 더 중요해질까? 시점별로 정리해보면 다음과 같은 정보가 나올 수 있을 거다.
1) 영화를 찾을 때
- 영화의 장르
- 영화의 시나리오 / 시놉시스
- 영화 포스터 이미지
- 영화의 주연배우 / 감독
- 영화 상영횟수 / 예약가능 시점
- 영화의 상영시간 / 길이
- 영화 티켓의 가격
2) 영화 티켓을 구매할때
- 영화 예약가능 시점
- 영화티켓의 가격 / 갯수
- 영화 상영관의 위치 / 나와의 거리
- 영화관으로 가는 이동수단 / 걸리는 시간
- 영화 시작시간 / 종료시간
3) 영화를 보기 위해 입장할 때
- 영화 시작을 위한 입장시간
- 영화 상영관의 위치 / 층수
- 영화 상영관의 좌석위치
동일한 영화티켓이라는 아이템인데도, 시점에 따라서 중요한 정보가 달라질 수 있다. 심지어 다루는 정보가 완전히 달라지거나, 강조해야할 지점이 변하는 경우도 생긴다. 영화를 찾거나 구매할 때는 '어떤 영화인지. 또 언제, 어디서 볼 수 있는지'가 중요하다. 하지만 구매 이후에는 '어디로 가야하는지, 또 언제 들어가야하는지'와 같은 정보가 중요해진다. 결국 사용자가 무슨 판단을 해야하는가가 - 어떤 정보가 중요한지에 대한'논리적 근거'가 된다는 사실을 알 수 있다.
3. 카드 UI와 리스트 UI로 위계를 정리하기
비슷한 위계정보 (Hierarchy)수준의 정보를 정리할 때, 모바일 환경에서는 카드 UI와 리스트 UI가 자주 사용된다. 예를 들어 이런 방식이다.
2023년에 쉴 수 있는 휴일정보
- 삼일절
- 현충일
- 한글날
- 크리스마스
- 등등...
키워드에 '초코'가 들어가는 상품 목록
- 초코 시럽
- 초코맛 우유
- 초코 도넛
- 초코색 장갑
- 등등...
모바일 환경에서는 리스트 List) UI로 담을 수 있는 정보가 한정되어있다. 아무리 많이 넣으려해도 4~5개가 한계다.
테이블 리스트 (Table List) 형태로 정리한 UI. 포함한 아이템이 많아질수록 모바일에서는 사용이 불가능한 형식이다.단순한 타이틀로 개별 아이템을 묶어줄 수 있거나, PC 환경이라면 굳이 카드 UI는 필요가 없다. 그래서 리스트 (list) UI만 사용해도 대부분의 정리가 가능하다. 하지만 개별 정보가 조금 더 복잡해진다면 어떻게될까?
2023년에 쉴 수 있는 휴일정보와, 그 날에 진행되는 이벤트
- 1) 삼일절 :
삼일절 기념 특별전시 / 서울 / 오후 4시 / 삼일절 기념관
나라를 지킨 3인들 다큐멘터리 / SBS / 오후 6시 / TV, 유튜브 라이브
- 2) 현충일 :
한국을 지킨 국가들 다큐멘터리 / KBS / 오후 3시 / TV, VOD
현충일 기념 헌정행사 / 서울 / 오후 2시 / 서울 역사 박물관
등등...
키워드에 '초코'가 들어가는 상품목록과, 브랜드, 상품 정보
- 1) 초코시럽 :
오뚜기 짜먹는 초코시럽 / 500g / 오뚜기 / 15,000원
롯데 부드러운 초코시럽 / 1kg / 롯데제과 / 25,000원
- 2) 초코맛 우유 :
푸르밀 초코맛 우유 / 250ml / 푸르밀 / 1,500원
빙그레 오리지널 초코맛 우유 / 500ml / 빙그레 / 3,000원
등등...
복합적인 정보를 보여줘야하는 상황에는 일반 리스트 UI 보다 카드 UI가 적합한 경우가 많다. 특히 상품을 검색하거나, 재고를 확인하는 등의 경우, 상단에 '주요기능'이 들어가는 화면이 존재하게된다. 이후 나오는 검색결과나 재고 목록 등에서는 일반적인 리스트가 아니라 카드 UI에 가까운 형태를 사용하는 경우가 많다. (예 : B2C 커머스 서비스) 리스트 UI가 아닌 카드 UI가 사용되는 가장 큰 이유는, 개별 아이템을 구분하기가 쉽기 때문이다.
모바일 환경에서 카드 UI를 사용해 각 정보단위를 확실하게 나눠준 사례. 
카드 UI를 사용한 정보정리 사례. 아이템을 좌우 상하로 모두 나열할 수 있고, 각 아이템간 구분도 명확한 편이다.
테두리가 없는 카드 형태로 사용된 화면의 사례정보가 많아질수록 리스트 UI만으로는 해결이 불가능한 지점이 생긴다. 특히 다뤄야하는 정보가 많고, 이미지까지 포함해야하는 경우, 카드 UI를 선택하는 것이 좋다. 가장 큰 이유는 개별 정보들이 나란히 쌓이더라도, '이 정보는 여기까지 한 그룹이야' 라며 - 확실한 구분을 해줄 수 있기 때문이다. 게다가 PC가 아닌 모바일 환경이라면, 개별 아이템들에 '여러 정보를 담고있을 경우' 리스트 UI로는 처리할 수 없는 시점이 생긴다. 그래서 카드 UI를 사용해 확실한 구분을 해주는 방식을 사용하게된다.
모바일 환경에서는 정보를 표현하는 방식이 매우 한정적이다. 그래서 리스트와 카드 UI만으로도 대부분의 정보를 정리할 수 있다. 리스트 UI를 써서 정보를 정리해보고, 이것으로도 해결이 되지 않는다면 카드 UI를 사용해보자. 그리고 카드 UI를 자주 사용하는 서비스 (예 : 비행기 티켓정보나 열차 티켓정보를 보여주는 서비스) 를 찾아보면서 비슷한 단위의 복잡한 정보를 연달아 보여주는 방법을 파악해보면 좋다.
