리스트 요소 싹 다 파헤치기

리스트의 사용방법과 좋은 사례

리스트의 구성

리스트(List)는 유사한 구조의 항목들을 세로로 나열하여 정보를 효율적으로 제공하는 컴포넌트입니다. 리스트는 텍스트, 아이콘을 비롯하여 다음과 같이 다양한 요소로 구성되어 있습니다. 본 글에서는 리스트 요소의 사용방법과 좋은 사례에 대해 알아보도록 하겠습니다. 

❶ 컨테이너 (Container)

❷ 선행 미디어 (Image · Video, Leading meadia)

❸ 타이틀 (Headline)

❹ 보조 텍스트 (Supporting text)

❺ 후행 텍스트 (Trailing supporting text)

❻ 선행 아이콘 (Leading icon)

❼ 후행 아이콘 (or Icon button, Trailing icon)

❽ 선행 아바타 (Leading avatar)

❾ 후행 선택 컨트롤러 (Checkbox · Radio button · Handle 등, Trailing selection control)

❿ 디바이더 (Divider, Optional)

---

리스트 구성요소별 사용방법

리스트의 구성요소별 사용방법을 먼저 알아보겠습니다. 

컨테이너

리스트 컨테이너는 모든 리스트 항목과 그 안의 요소들을 포함합니다. 리스트 항목의 크기는 해당 항목 내에서 가장 높은 요소에 따라 결정됩니다.

타이틀 및 보조 텍스트

타이틀 텍스트는 리스트 항목의 주제를 전달하며, 예를 들어 사진 앨범 이름이나 기사 제목 등이 해당됩니다. 보조 텍스트는 본문 내용을 포함하며, 기사 요약이나 식당 설명과 같은 정보가 여기에 해당됩니다.

선행 아이콘(Leading icon)

리스트 항목에는 앞쪽에 위치한 선행 아이콘을 포함할 수 있습니다.

후행 아이콘(Trailing icon)

리스트 항목에는 뒤쪽에 위치한 후행 아이콘을 포함할 수 있습니다.

주요 미디어 또는 아바타

리스트 항목에는 이미지, 비디오, 아바타를 포함할 수 있습니다. 시각 요소는 리스트의 시작 부분(선행 방향)에 고정하여 사용자가 빠르게 훑어볼 수 있도록 해야 합니다.

썸네일과 같은 보조 시각 요소를 행의 선행 방향(앞쪽)에 정렬하여 고정함으로써 인식 가능성을 높일 수 있습니다. 보조 시각 요소를 행의 중앙에 배치하면 주요 콘텐츠와 보조 콘텐츠 간의 관계를 파악하기 어려워질 수 있습니다.

이미지 : 리스트 항목에는 사진, 일러스트, 기타 그래픽을 포함할 수 있습니다.

비디오 : 리스트 항목에는 사진, 일러스트, 날씨 아이콘과 같은 그래픽 요소를 포함할 수 있습니다.

아바타

리스트 항목에는 사람이나 개체를 나타내기 위해 원형으로 크롭된 이미지를 포함할 수 있습니다.

후행 보조 텍스트

후행 보조 텍스트는 인라인 보조 텍스트 외에 가격, 콘텐츠 수, 기타 세부 정보와 같은 리스트 항목의 메타 정보를 전달하는 데 사용될 수 있습니다.

선택 컨트롤러

컨트롤은 리스트 항목에 대한 정보와 동작을 표시합니다. 이들은 리스트 항목의 앞쪽(선행) 또는 뒤쪽(후행)에 정렬될 수 있습니다.

체크박스(Checkbox)

체크박스는 하나 이상의 리스트 항목을 선택할 때 사용할 수 있습니다.

스위치(Switch)

스위치는 리스트 항목의 제어 기능을 켜거나 끌 수 있는 토글 방식의 컨트롤입니다.

핸들(Handle)

보통 편집 모드에서 나타나며, 리스트 항목을 드래그해서 다른 위치로 옮길 수 있도록 해줍니다. 이 재정렬 아이콘은 리스트 항목의 보조 액션(secondary action)입니다.

디바이더

디바이더는 더 큰 리스트 항목들을 구분하는 데 사용할 수 있습니다. 두 줄 또는 세 줄로 구성된 리스트처럼 콘텐츠가 많은 행 사이에는 디바이더를 배치하는 것을 권장합니다. 우측과 같은 경우 리스트 항목 간에 충분한 여백을 유지하여 각 행을 구분해야 합니다.

항목 간 구분이 잘 된다면 디바이더를 반드시 사용할 필요는 없으며, 컨테이너를 활용하여 구분할 수도 있으니 이러한 의도를 잘 참고하시면 좋겠습니다. 

---

리스트의 사용방법

리스트의 전반적인 사용방법을 알아보겠습니다.  

리스트는 텍스트와 이미지로 구성된 수직 정렬 그룹입니다. 읽기 이해도를 높이기 위해 최적화된 리스트는 하나의 연속적인 열로 구성되며, 각 행은 하나의 리스트 항목을 나타냅니다. 리스트 항목은 아이콘과 텍스트로 표현되는 주요 액션과 보조 액션을 포함할 수 있습니다.

리스트는 쉽게 훑어볼 수 있어야 하며, 리스트의 어떤 요소든 항목 콘텐츠를 고정하고 정렬하는 기준으로 사용할 수 있어야 합니다. 보조 시각 요소나 주요 텍스트와 같은 요소들이 리스트 항목마다 일관된 위치에 배치되면 인식 가능성이 향상됩니다.

❶ 리스트 예시

❷ 행 내의 콘텐츠 배치

❸ 쉽게 훑어볼 수 있도록 정렬된 보조 시각요소

❹ 쉽게 인식할 수 있도록 정렬된 주요 텍스트

리스트 항목은 세 가지 크기로 제공됩니다:   

한 줄형 (One-line) : 한 줄형 리스트 항목은 최대 한 줄의 텍스트만 포함합니다.

두 줄형 (Two-line) : 두 줄형 리스트 항목은 최대 두 줄의 텍스트를 포함합니다.

세 줄형 (Three-line) : 세 줄형 리스트 항목은 최대 세 줄의 텍스트를 포함합니다.

간격

리스트 항목에서 가장 중요한 부분, 일반적으로 주요 액션 영역이나 핵심 콘텐츠에 시선을 집중시키기 위해 간격(여백)을 활용해야 합니다.

주요 액션은 대부분의 공간을 차지합니다.

❶ 주요 액션 영역

❷ 보조 액션 영역

가장 눈에 띄는 콘텐츠를 왼쪽에, 덜 눈에 띄는 콘텐츠를 오른쪽에 정렬함으로써 명확한 계층 구조가 형성됩니다.

❸ 더 눈에 띄는 콘텐츠

❹ 덜 눈에 띄는 콘텐츠

행 길이

반응형 레이아웃에서 컨테이너나 텍스트 중심의 컴포넌트를 확장할 때는 지나치게 긴 텍스트 줄을 피하세요. 이를 위해 컨테이너가 커질수록 마진이나 타이포그래피 속성을 조정하는 것이 일반적입니다.

텍스트의 이상적인 줄 길이는 일반적으로 40~60자 사이이지만, 큰 화면 장치에서는 한 줄에 최대 120자까지 허용할 수 있습니다. 텍스트 줄이 120자에 가까워질 경우, 가독성을 높이기 위해 줄 간격(line height)을 늘리는 것을 고려해야 합니다.

텍스트 길이와 같은 화면의 다른 요소들을 조정하지 않은 채 컴포넌트를 단독으로 확대하거나 축소하지 마세요. 그렇게 하면 텍스트 줄 길이가 너무 길어져 읽기 어렵게 될 수 있습니다. 리스트 컨테이너의 너비는 텍스트 줄 길이에 따라 조정하거나, 다단 레이아웃으로 전환하여 조절할 수 있습니다.

다단 레이아웃은 필요할 때 콘텐츠를 나누는 데 도움이 될 수 있습니다.

작은 창 크기(예: 모바일)에서는 세 줄로 표시되는 리스트가, 넓은 창 크기(예: 데스크톱)에서는 두 줄 리스트로 표시될 수 있습니다.

다단 레이아웃은 필요할 때 콘텐츠를 분산시키는 데 도움이 될 수 있습니다.

컴포넌트 조정
모바일의 텍스트 리스트는 태블릿처럼 큰 화면에 맞춰 마진, 세로 간격, 밀도 등을 조절하여 더 알맞게 표시될 수 있습니다.

컴포넌트 전환
리스트와 카드(Card) 컴포넌트는 다양한 유형의 콘텐츠를 지원해야 하므로, 큰 화면에서 두 컴포넌트 간 전환을 할 때는 주의가 필요합니다. 화면 크기가 커질수록 텍스트와 이미지를 조합할 수 있는 기회가 생기며, 중간 또는 확장된 창 크기에서는 이미지와 텍스트에 더 넉넉한 공간을 활용할 수 있습니다.

---

리스트의 좋은 사례

리스트의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.

Speak

Free Talk 탭의 리스트 항목을 디바이너 없이 컨테이너별로 묶어 구분하였습니다. 이러한 표현은 선행 아이콘과 함께 각 항목을 서로 다른 대화방으로 인지시켜 효과적으로 분리하고 있습니다.  

Luma

현재 해당하는 항목 내용은 다른 내용과 달리 추가적인 항목을 노출시켜, 현재 실행해야 하는 내용을 강조하고 필요한 액션을 할 수 있도록 보조하고 있습니다. 

iOS 18

리스트 컨테이너를 크게 두 개로 분리하여 위는 언어, 아래는 단위로 구분하였습니다. 유사한 항목 간에는 디바이더를, 큰 항목 간에는 컨테이너로 분리하여 항목을 직관적으로 파악할 수 있습니다. 상단에는 후행 아이콘 자리에 핸들을 배치하여 리스트 간 순서 변경을 할 수 있도록 하였습니다. 

iOS 18

리스트에 슬라이더와 스위치와 같은 컨트롤러를 배치하였습니다. 그럼에도 텍스트와의 정렬 및 마진을 시각적으로 보기 좋게 유지하였습니다. 

iOS 18

리스트를 컨테이너로 상단과 하단으로 분리하였으며, 상단에는 Wi-Fi에 대한 설명, 스위치 기능, 현재 적용된 Wi-Fi를 배치함으로써 시각적으로 높은 위계를 가지도록 하였습니다. 

 

---

마치며

리스트는 관련 정보를 세로로 정렬해 한눈에 보기 쉽게 만들어주므로, 콘텐츠를 빠르게 훑고 비교하기에 매우 효율적이고 필수적인 컴포넌트입니다. 

반면, 리스트 항목이 너무 많거나 반복적인 구조만 나열되면 사용자가 피로감을 느끼기 쉽고, 정보의 우선순위나 중요도가 묻히기 쉽습니다. 콘텐츠가 많다고 해서 모두 리스트에 욱여넣기보다는, 사용자의 읽는 흐름을 고려한 배치가 중요할 것입니다. 데스크톱과 같이 큰 화면에서는 카드와 같은 컴포넌트를 사용하는 것도 좋은 방법입니다. 

리스트에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다. 

Lists – Material Design 3

Lists and tables | Apple Developer Documentation