사용자를 끌어들이는 UX/UI의 비밀

󻱴󺽸󺴬󽴔󺺛󺦳󺋿

330

이번 절에서는 주로 펼쳐진 목록에 관해 이야기했다. 카테고리, 구획, 위계

가 없는 항목들 말이다. 목록을 어떻게 표현하든 간에 더 명료하게 하려면 목

록에 있는 항목을 카테고리로 분류하는 것을 추천한다.

󼍃󼘛󺆯󺹻󺕧󽴔󺆓󼌄󻰋󺴫󽴔󻳤󺹻󺣫󽴔󺽸󺴬󽴔󼤫󻞫󼨧󺋿

제목을 붙인 섹션제목을 붙인 섹션은 하나의 구획에 적합하다. 목록을 제목이 붙은 섹션으로 분

리하고, 사용자가 카테고리 분류를 흐트러뜨리지 않도록 하나의 섹션 안에서

만 항목을 정렬할 수 있도록 하라. 섹션 숫자가 많지 않으면

아코디언아코디언을 사용

해 보라. 이렇게 하면 사용자는 불필요한 섹션을 닫아 놓을 수 있다.

두 단계 이상의 계층 구조에서 기본 ‘트리’는 언제든 쓸 수 있는 방법이다. 일

반적으로 계층 수준이 바뀔 때는 들여쓰기하고 (윈도우에서 흔히 볼 수 있는)

플러스와 마이너스 아이콘 또는 회전하는 삼각형 아이콘을 넣는다. 계층 수준

은 사용자가 필요할 때 열고 닫거나 인터페이스에서 자동으로 여닫을 수 있다.

트리 구현을 제공하는 UI 툴킷이 많다.

다음으로 웹과 모바일 UI에서 실제로 어떻게 목록을 표시하는지 자세히 살

펴보자.

󼟷󼘃

지금까지 목록을 디자인하는 목적을 알아봤다. 이제부터 다음 패턴들을 언제

그리고 어떻게 사용할지 살펴보자.

·· 2분할 패널



또는 분할 화면



·· 단일 화면 상세 진입



·· 포괄 목록



·· 카드



·· 섬네일 그리드 ...