brunch

매거진 매거진 목요일

라이킷 257 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티몬 디자인스토리 Apr 13. 2017

앱디자인의 절반이상

리스트 디자인에 관한 리서치

티몬의 UX랩에서는 다양한 연구과제를 진행하고 있습니다. 그 중, 서비스 선행프로젝트나 진행중인 프로젝트와 같이 즉시 공개가 곤란한 내용도 있지만, 나누면 좋은 정보 모음들을 꾸준히 공유하고자 합니다.

모바일 애플리케이션은 굉장히 다양한 디자인 요소로 구성 되어 있지만, 티몬의 UX랩에서는 [HOME] / [LIST] / [VIEW] 이렇게 크게 세가지의 기준으로 구분하며 자료를 분류하고 있습니다. 본 레포트는 연구 과제 중 [리스트] 디자인에 관한 리서치 내용입니다.

리서치는 런칭 된 앱과 컨셉 디자인을 7:3의 비율로 진행했습니다.

자료는 시각적인 측면에서 [요소]/[UI] 형태로, 성격적인 측면에서 [분야]로 분류해보았습니다. 동일한 자료를 다른 방식으로 나누어서 각각 어떤 특징과 공통점을 가지고 있는지 알아보기 위함이었습니다.

요소

그래서 시각적인 면에서 텍스트, 텍스트_아이콘, 텍스트_이미지, 이미지 리스트 등 요소 별로 정리를 했고, 요소 별로 정리한 내용에서 이미지 리스트의 경우 대부분 모듈 그리드를 사용한다는 특징을 발견할 수 있었습니다.

모듈그리드를 사용한 이미지 리스트

UI

두 번째로 UI의 형태에 따라 크게 페이지형 리스트/카드형 리스트로 분류하고, 카드형 리스트는 인터랙션에 따라 Scroll/Swipe 카드 리스트로 세분화하였습니다. 이 가운데서 2열의 카드 리스트 사용이 가장 두드러진 것을 볼 수 있었고, 많은 리스트들 가운데 에어비앤비 리스트의 사례가 가장 인상적이었습니다.

출처 : 에어비앤비

위의 이미지는 에어비앤비 메인화면의 여행 탭에서 볼 수 있는 체크인 리스트입니다. 텍스트나 이미지를 클릭하면 시간 순에 따라 여행 히스토리를 확인할 수 있습니다. 1열의 카드형 리스트를 사용하고 있으며, 넉넉한 여백과 함께 과거 여행 리스트를 마치 사진첩의 형태로 보여주고 있습니다. 다른 숙박 앱이나 여행 앱에서 찾아볼 수 없는 체크인 리스트의 모습이라 신선했습니다.

출처 : 에어비앤비

그리고 숙소를 지도와 함께보는 UI도 매우 편리했습니다. 숙박시설을 선택할 때 위치를 중요시하는 사용자인 저는 지도를 보기 위해 보통 1뎁스를 추가해야만 했습니다. 하지만 에어비앤비는 숙소를 서치하는 기존 리스트에서 아이콘 클릭 시 지도가 함께 보이는 카드 스와이프 형태의 리스트로 전환됩니다. 한 화면안에 위치 확인과 숙박시설 이미지, 그리고 가격까지 확인할 수 있어 좋았습니다.

분야

다음에는 리스트를 분야별로 묶어보고 어떤 특징이 있는지 분석해보았습니다. 음악, 매거진, 뉴스 등 각 카테고리로 분류하고 나니 메타포를 차용하거나 사물을 그대로 사용하여 리스트의 성격을 드러내는 사례가 많았습니다. 뉴스에서는 종이신문의 마감 처리를 구분선으로 사용했고, 음악이나 책 분야에서는 CD와 책의 형태를 그대로 가져온 사례를 볼 수 있었습니다.

그리고 음악 카테고리의 리스트를 정리하여 보니, 큰 이미지를 리스트로 사용하는 경우가 없었습니다. 음악컨텐츠는 이미지로 사용자를 유혹하기보다 아티스트의 인지도와 노래의 대중성에 큰 영향을 받기 때문이며, 여러 개의 컨텐츠를 보여주고 다양한 선택을 도와주기 위해서라는 생각이 들었습니다.

반면, 커머스에서는 판매하는 상품군 별로 이미지의 크기가 달랐습니다. 상품 디자인이 판매의 영향을 미치는 척도에 따라 이미지의 크기를 달리하여 적용시켰기 때문입니다. 그래서 식품은 2열에서 3열카드 리스트까지 사용할 정도로 크지 않은 이미지를 사용했지만, 의류 잡화의 경우 화면의 절반 이상을 차지하는 상품 이미지도 많이 볼 수 있었습니다.

리스트를 리서치하면서 일반적이기보다는 재미있고, 파격적인 리스트도 있었습니다. 그중, 일정한 그리드를 따르지 않거나 인터랙션이 독특했던 리스트 사례를 공유합니다.

아이폰 음악 앱 선호 카테고리/아티스트 선택 리스트입니다. For you 탭에서 확인할 수 있고, 스와이프를 하며 추가 버블을 볼 수 있습니다. iOS 8.4. 와 함께 나온 지 벌써 1년 반이나 된 리스트이지만, 아직도 재미있는 사례라고 생각되어 가져오게 되었습니다.

운동계획을 짜기 위해 원하는 운동을 탭 하는 리스트와 사진을 공유하는 리스트입니다. 두 가지 모두 버블 형태의 리스트 화면으로 전자는 텍스트로만 이루어져 있고, 후자는 나와 가까운 인물들의 이미지를 버블로 크게 보여줍니다. 아이폰 음악 앱과 비슷한 버블 형태이나 움직임과 구성이 보다 역동적입니다.

사물을 그대로 차용한 리스트들도 있었습니다. 카드 선택 리스트는 실물 카드를 보여주고, 비행기 좌석 선택 리스트는 비행기 단면을 사용하여 직관적인 이해를 가능하게 했습니다.(고속버스 앱의 좌석 선택의 경우도 버스의 단면을 보여주어서 편리했지만, 좌석 영역의 크기가 조금 커서 스크롤을 길게 내려야 했기에 불편했습니다. ) 또한, 이미지와 일러스트를 복잡하지 않고 깔끔하게 사용하여 그것이 리스트임을 인지할 수 있게 해주었던 점이 좋았습니다.

사례 출처 :

아이폰 음악앱 https://www.apple.com/

버블리스트1 https://www.behance.net/gallery/27399145/Workout-Book-workout-tracking-app-concept

버블리스트2 https://dribbble.com/shots/2988440-Favorite-People

카드 리스트 http://collectui.com/

비행기 리스트 https://dribbble.com/shots/3001324-Adjust-date-flow-for-Tinder-Travel-by-fantasy