선택이 힘든 당신을 위한 완벽한 매뉴를 준비했습니다!
1. 목록의 유스케이스
- 유저는 어떨 때 목록을 사용하려고 할까?
- 전반적인 개요
- 전체적인 페이지의 인상을 한 번에 파악할 수 있다.
- 항목 브라우징
- 어떻게 메뉴를 정렬해서 볼지 결정할 수 있다. 혹은, 뒤로 돌아가는 등의 다른 항목으로의 이동할 때 도 사용할 수 있다.
- 특정 항목의 검색
- 무언가 기능을 찾을 때 사용한다. 유저의 액션을 줄여 최대한 빠르고 정확하게 메뉴를 보여주는 것도 중요하다.
- 정렬과 필터링
- 요소들의 정렬이나 필터로 필요한 항목을 빠르게 찾을 수 있게 만든다.
- 항목 재정렬, 추가, 삭제
- 유저의 저장목록을 보여주거나, 선택과 추가, 혹은 삭제가 필요할 때도 유용하다. 음악 재생앱의 플레이 리스트를 생각하자!
2. 정보의 구조 떠올리기
- 매뉴를 구성하고자 할 때, 생각해야 할 것들에 대해 알아보자
- 길이
- 메뉴의 사이즈가 요소들을 다 넣을 수 있는가? 혹은, 잘리는 부분도 있을까?
- 그렇다면, 페이지에서 메뉴의 사이즈는 어떤가? 너무 크지는 않을까?
- 순서
- 알파벳순이나 숫자, 수정시간 등 정렬하는 방식이 있나?
- 정렬되는 규칙은 유저가 필요하고 찾는 기능에 맞게 되어있는가?
- 그룹 핑
- 요소들이 한 번에 알아보기 쉽게 묶여있을까?
- 계층들이 나눠져서 카테고리를 알아보기도 편할까?
- 항목의 종류
- 유저가 찾는 종류의 카테고리가 다 있는가?
- 이미지 등으로 카테고리를 한 번에 구분이 가능한가?
- 너무 복잡하지 않은가?
- 인터랙션
- 항목을 전부 다 보여줄 것인가? 아니면 가려서 대표적인 것만 일단 노출시킬 것인가?
- 유저의 쓰임에 따라 버튼이 편할까? 링크가 편할까?
- 동적 행동
- 유저는 목록의 변화를 실시간으로 볼 수 있나?
3. 패턴
- 2 분할(Two-Panel Selector) 또는 분할 화면(Split View)
- 무엇인가요?
- 화면을 두 개로 갈라버린다. 가로든 새로든 상관없다.
- 목록과 선택한 항목을 중요하게 보여줘야 할 때 사용할 수 있다. 예를 들어, 음악 재생 앱의 경우 노래를 클릭하면 그 노래에 앨범 아트와 다른 쪽에는 내가 듣고 있는 플레이 리스트를 함께 보여주는 경우가 이에 해당한다.
- 관행적인 디자인이다. 그만큼 친숙하다.
- 유저가 시선을 빠르게 바꾸기 용의 하다.
- 어떻게 활용할까요?
- 선택할 수 있는 목록은 상단이나 왼쪽에, 상세 내용은 하단이나 오른쪽에 배치한다. 왼쪽에서 오른쪽으로 언어를 읽고 사용하는 수많은 국적의 유저들이 그것이 친숙하기 때문이다.
- 시각적으로 보기 편하게 만드는 것이 좋다. 배경색과 너무 반전되는 색을 사용하거나 하면 잘 안 뜨인다.
- 단일 화면 상세 진입(One-Window-Drilldown)
- 무엇인가요?
- 하나의 화면에서 목록을 보여주고, 목록을 선택하면 큰 화면으로 새부사항을 보여준다.
- 목록과 상새화면이 나눠져 있지 않다. 예를 들어, E-mail을 생각하면 정확하다.
- 모바일 화면을 디자인할 때 유용하다. 모바일 디바이스의 작은 화면에서 모든 정보를 한 번에 보기 쉽지 않기 때문이다.
- 어떻게 활용할까요?
- 최신의 디자인이 유리하다. 요즘은 섬네일 그리드나 인스타그렘의 피드 같은 형식이 많은 유저들에게 친숙하다.
- 꼭 뒤로 가기와 취소 버튼을 만들자. 없으면 슬프다.
- 위계를 유용하게 사용할 수 있다. 내부에 들어가거나 혹은 평행으로 이동하여 계층적인 효과를 활용할 수 있다.
- 포괄 목록(List Inlay)
- 무엇인가요?
- 한 줄에 모든 요소를 넣는다.
- 목록 하나에 많은 정보를 담을 수 있다. 예를 들어, 대중교통 예매를 할 때 다양한 정보를 한 번에 담아서 시간별로 펼쳐 목록으로 보여주는 모습을 볼 수 있다.
- 어떻게 활용할까요?
- 2 분할 계층과 같이 사용해서 3분할로 사용도 가능하다.
- 햄버거 버튼 등을 이용해 목록을 펼쳤다가 접었다가 하면 더 깔끔할 수 있다.
- 이때, 전환 애니메이션으로 유저의 방향 감각을 유지시켜 주자.
- 카드(Cards)
- 무엇인가요?
- 가장 인기 있는 UI.
- 사이즈가 반응형으로 조절되고 이미지를 크게 보여줄 수 있는 예를 들어, 우리 휴대폰에 있는 사진첩을 생각하면 된다.
- 어떻게 활용할까요?
- 전부 비슷한 동작이 필요한 요소들이 있을 때 유리하다. 사진을 누르면 크게 볼 수 있으며, 전부 비슷한 사이즈의 텍스트가 있고, 세부적으로 조절할 수 있는 편집기능이 있는 것이 모든 사진이 같으므로 유리한 디자인이라고 할 수 있다.
- 사이즈가 요소별로 다르더라도 조절해서 나열할 수 있다.
- 사용자의 액션을 생각해서 가장 빠르고 정확히 원하는 일을 할 수 있게 만들어야 한다.
- 가로나 세로배치 혹은, 텍스트의 길이 등을 고려한 요소의 정렬이 중요하다. 시각적으로 보여주는 부분이 큰 패턴이기 때문이다.
- 섬네일 그리드
- 무엇인가요?
- 이미지를 특정한 기준에 따라 정렬하고 N X M의 배열로 보여준다.
- 이것도 카드와 비슷하지만 정렬하는 기준이 조금 다르다. 예를 들어, 사진첩에서 찍은 날짜나 찍은 장소별로 정렬하면 섬네일 그리드로 패턴이 바뀐다.
- 어떻게 활용할까요?
- 정렬 기준이 명확할 때 사용하기 좋다.
- 꽤 많은 항목을 표현하기 유리하다. 정렬되는 이미지의 사이즈가 같기 때문이다.
- 그렇기 때문에 모바일에서도 누르기 쉽다.
- 세로, 가로의 크기가 동일할 때 사용하기 좋다. 아니면 이미지가 어색하게 잘리거나 할 수 있다.
- 캐러셀(Carousel)
- 무엇인가요?
- 시각적으로 표현해야 할 것이 있을 때, 이미지를 앞, 뒤로 당겼다가 밀면서 스와이프 할 수 있는 패턴이다.
- 목록에 시각적으로 대표적으로 보여줄 수 있는 시각적 표현이 있을 때 사용하기 좋다. 예를 들어, OTT 서비스의 영화나 드라마의 포스터라거나 음악 앱의 앨범 아트 등을 밀면서 선택도 가능한 패턴을 생각하면 좋다.
- 어떻게 활용할까요?
- 일단 보기 예쁘다. 요소를 매력적으로 표현하기 좋다.
- 다음 항목이나 이전 항목을 함께 볼 수 있다.
- 공간이 좁으면 쓰기 좋다. 밀고 당기면 계속 요소들을 보여줄 수 있다.
- 세로 비율이 길어야 한다. 가로가 길면 어색해 보인다.
- 가로 스크롤이 있는 위젯은 섬네일은 가로로 배치한다.
- 페이지네이션(Pagination)
- 무엇인가요?
- 매우 긴 목록을 보여줄 때 유리하다. 예를 들어, 인터넷 게시판 등의 글 목록을 말한다.
- 검색 기능이 거의 필수이다. 요소가 많을 때 사용하기 때문이다.
- 서버 쪽의 통신에도 유리하다. 조금씩만 정보를 가져와서 일단 보여주고 다음 유저의 행동에 의해 다음 정보를 요청하기 때문이다.
- 어떻게 활용할까요?
- 일단 몇 개의 요소를 보여줄지 정하는 것이 중요하다.
- 그러므로, 유저가 사용하는 기기의 사이즈가 또 중요하다. 가독성이 떨어지면 의미가 없다.
- 어떻게 유저의 액션에 따라 다음 페이지로 넘어갈 수 있을지를 확실히 보여주고 간단한 액션으로 넘길 수 있게 한다.
- 가장 중요한 것은 '첫 화면'이다. 처음 화면에서 유저가 머무는 시간이 많기 때문이다. 그래서 처음 화면에서 필요한 정보를 찾을 수 있게 하는 것이 유리하다.
- 항목으로 즉시 이동하기(Jump to Item)
- 무엇인가요?
- 최상단에 input을 만들어 검색을 가능하게 하고 한쪽 목록에서 요소를 누르면 한 번에 이동하게 한다.
- 예를 들어, 액셀이나 VS code의 파일 탐색기를 생각하면 좋다.
- 많은 목록들을 보여주고, text나 제목의 중요성이 있을 때 사용하기 좋다.
- 어떻게 활용할까요?
- 많은 목록을 보면서 정확한 요소를 찾을 때 즉, 전문가들이 사용하기 좋은 패턴이다.
- 키보드에서 모든 작업을 가능하게 한다.