List

List (리스트)

리스트는 관련 콘텐츠를 세로로 그룹화한 컴포넌트예요. 리스트 항목은 숫자 또는 불릿으로 시작합니다. 관련 정보를 구조화하고 훑어보기 쉽게 표시하는 데 사용됩니다.

출처: List

본문

개요 (Overview)

리스트 컴포넌트는 관련 콘텐츠를 구조화되고 훑어보기 쉬운 형식으로 표시해요. 사용자가 그룹화된 정보를 쉽게 탐색하고 이해하도록 도와줍니다. 리스트는 콘텐츠 위계와 중요성에 따라 정렬되지 않은(불릿) 또는 정렬된(숫자)으로 스타일링될 수 있어요. 내비게이션 메뉴, 데이터 표시, 폼 관련 요소에 주로 사용됩니다.

UI에서 리스트 컴포넌트 예시

언제 사용할까요 (When to use)

  • 간단하고 관련된 항목 집합을 표시할 때.
  • 콘텐츠에 구조와 명확성을 제공할 때.

언제 사용하지 말아야 할까요 (When not to use)

변형 (Variants)

변형 (Variant) 용도 (Purpose)
Unordered list 특정 순서 없이 같은 중요도의 항목을 표시하는 데 사용.
Ordered list 명확한 순서나 위계를 나타내는 데 사용하며, 종종 지침에 사용.

포맷 (Formatting)

구조 (Anatomy)

정렬되지 않은 리스트와 정렬된 리스트 모두 마커(marker)와 리스트 항목(list item)으로 구성돼요.

정렬되지 않은·정렬된 리스트 변형의 구조

1. Unordered list

A. Marker (level 1) B. Marker (level 2) C. List item (level 1) D. List item (level 2)

2. Ordered list

A. Marker (level 1) B. Marker (level 2) C. List item (level 1) D. List item (level 2)

크기 (Sizing)

리스트는 productive와 expressive 두 가지 타입 크기로 제공돼요. productive 리스트는 $body-01을, expressive 리스트는 $body-02를 사용합니다. productive 리스트는 기능적이고 작업 중심적인 경험에 가장 적합하며, expressive 리스트는 더 시각적이고 매력적인 경험을 위해 설계됐어요. 대부분의 제품 디자인에서는 productive 리스트가 선호될 가능성이 높습니다.

리스트의 productive·expressive 타입 크기

정렬 (Alignment)

리스트는 읽기 쉽고 명확하게 유지하기 위해 보통 세로 형식으로 표시돼요. 개별 리스트 항목을 가로로 배치하면 그리드 정렬이 깨지고 가독성이 떨어지므로 피하세요. 그러나 분리된 리스트 그룹은 그리드 컬럼과 정렬된다면 나란히 배치할 수 있습니다.

많은 수의 리스트 항목을 가진 리스트 예시

명확성을 위해 리스트를 세로로 정렬하세요.

리스트를 가로로 정렬하지 마세요. 가독성이 떨어지기 때문입니다.

두 자리(10+) 이상 숫자가 있는 정렬된 리스트의 경우, 어긋남 없이 명확한 구조를 유지하려면 숫자를 왼쪽 또는 오른쪽 정렬하세요. 기본적으로 숫자는 왼쪽 정렬되지만 두 방식 사이를 전환하는 옵션이 있습니다.

두 자리 이상 항목이 있는 정렬된 리스트의 숫자 정렬.

중첩 항목 (Nested items)

리스트에는 위계나 하위 카테고리를 나타내는 중첩 항목을 포함할 수 있으며, 들여쓰기로 각 레벨을 구분해요.

중첩 항목이 있는 정렬되지 않은·정렬된 리스트

배치 (Placement)

리스트 항목은 구조화된 레이아웃을 유지하도록 그리드 컬럼과 정렬해 간결해야 해요. 과도하게 긴 문장은 피하고, 콘텐츠가 가용 공간을 초과하면 과도한 너비를 강제하는 대신 여러 줄로 줄바꿈해야 해요.

리스트 마커를 그리드에 딱 붙게 정렬하세요.

리스트 마커를 그리드 거터에 걸치게 하지 마세요.

콘텐츠 (Content)

주요 요소 (Main elements)

리스트 항목 (List item)

  • 리스트 안의 개별 항목을 나타내요.
  • 텍스트, 링크 또는 다른 인라인 요소를 포함할 수 있어요.
  • 긴 콘텐츠에 대해 정렬을 유지하면서 여러 줄 줄바꿈을 지원합니다.
  • 리스트는 간단한 정보 조각을 제시해야 해요. 복잡한 데이터에는 데이터 테이블 사용을 고려하세요.
  • 레벨 1 리스트 항목은 주요 구조를 정의하고, 레벨 2(중첩) 리스트 항목은 위계나 하위 카테고리를 제공해요.
  • 정렬된 리스트 항목을 중요도 순위, 높은 값에서 낮은 값, 알파벳·숫자 순서처럼 논리적으로 배열하세요.
  • 일관된 문장 구조를 유지함으로써 리스트 항목이 문법적으로 평행하도록 하세요(예: 수동태와 능동태를 섞지 않기).

마커 (Marker)

  • 마커는 명확성과 일관성을 위해 첫 번째 리스트 항목과 상단 정렬되어야 해요.
  • 정렬되지 않은 리스트의 레벨 1 항목은 엔 대시(en dashes)로, 레벨 2 항목은 사각형으로 표시됩니다.
  • 정렬된 리스트의 레벨 1 항목은 숫자로, 레벨 2 항목은 문자로 표시됩니다.

넘침 콘텐츠 (Overflow content)

리스트의 텍스트는 가독성을 보장하기 위해 첫 번째 리스트 항목과 상단 정렬된 상태를 유지하면서 마커 아래로 줄바꿈되어야 해요. 잘라내기(truncation)는 피하고 텍스트는 여러 줄로 줄바꿈해야 합니다.

정렬되지 않은·정렬된 리스트의 텍스트 줄바꿈

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

Unordered list (정렬되지 않은 리스트)

정렬되지 않은 리스트는 특정 순서 없이 제시되는 항목 모음이에요. 각 리스트 항목은 엔 대시로 시작하며, 순차적이지 않은 콘텐츠에 이상적입니다.

UI에서 정렬되지 않은 리스트 변형 예시

Ordered list (정렬된 리스트)

정렬된 리스트는 특정 순서 없이 제시되는 항목 모음이에요. 리스트 항목은 숫자로 시작해 그 위치를 나타내며, 순차적 콘텐츠에 적합합니다.

UI에서 정렬된 리스트 변형 예시

  • Contained list
  • Data table
  • Structured list

더 알아보기 (Learn more)

리스트는 관련 콘텐츠를 구조화해 보여주는 컴포넌트예요. 순서가 중요하지 않으면 Unordered list를, 순서나 위계가 중요하면 Ordered list를 사용하세요. 항목을 간결하게 유지하고 마커 정렬을 맞추며, 복잡한 데이터나 다중 컬럼이 필요하면 데이터 테이블·구조화된 리스트를 대신 고려하세요.