Structured list

Structured list (구조화된 리스트)

구조화된 리스트는 용어와 정의처럼 비슷하거나 관련된 콘텐츠를 그룹화해 보여주는 컴포넌트예요. 여러 행에 걸쳐 항목이 많은 단순한 리스트를 정리할 때 유용하게 씁니다.

출처: Structured list

본문

개요 (Overview)

구조화된 리스트는 여러 행에 걸쳐 상당한 수의 항목을 담는 단순한 리스트를 보여줘요. 그룹으로 묶인 정보를 논리적이고 훑어보기 쉬운 패턴으로 구성하고 정리하는 데 도움을 줍니다. 리스트 안의 콘텐츠는 쌓아서 데이터 안에 위계를 만들 수 있어요. 구조화된 리스트는 읽기 전용(read-only)이거나 선택 가능한(selectable) 행을 가질 수 있습니다.

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

  • 가장 단순한 형태로 그룹 안의 정보를 훑어보거나 특정 정보를 선택할 때
  • 설명과 상세 정보를 보거나, 기능을 소개하거나, 가격 플랜을 비교할 때

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

  • 항목을 중첩하는 것은 권장하지 않아요. 구조화된 리스트는 단순한 데이터를 보여주는 용도니까요. 보여줘야 할 복잡한 콘텐츠가 있다면 항목 중첩을 지원하고 더 큰 콘텐츠 집합을 보여주는 데이터 테이블을 고려하세요.
  • 전체 페이지가 아니라 작거나 한정된 공간에 항목 리스트를 써야 한다면 컨테이너드 리스트 (contained list)를 대신 고려해 보세요.

변형 (Variants)

Variant Purpose
Default 사용자가 데이터 그룹 안의 정보를 빠르게 훑어보고 볼 수 있게 해요.
Selectable 사용자가 데이터 그룹 안에서 원하는 옵션을 선택할 수 있게 해요. 이 변형에는 사용 가능한 기능 플래그(feature flag)가 있어요.

기능 플래그 (Feature flags)

구조화된 리스트의 선택 가능한 변형에 기능 플래그가 추가되어 접근성을 개선하고, 기능이 아닌 시각적 모양만 바꿉니다. 코드별 기능 플래그 정보는 Code 탭을 참고하세요. 현재 선택 가능한 구조화된 리스트는 더 이상 사용되지 않지는 않지만, 앞으로는 제품에 기능 플래그 구조화된 리스트를 사용하도록 권장해요. 향후 다음 메이저 릴리스(v12)가 출시되면 이 기능 플래그가 컴포넌트의 기본 버전이 됩니다.

기능 플래그로 변경된 사항은 다음과 같아요.

  • 아이콘이 체크마크(checkmark) 아이콘에서 라디오 버튼(radio button) 아이콘으로 바뀌었고, 선택을 하기 전 호버에서만 보이던 것이 활성(enabled) 상태에서 보이게 됐어요.
  • 아이콘 위치가 컴포넌트 오른쪽이 아닌 왼쪽에 나타나요.

포맷 (Formatting)

크기 (Sizing)

구조화된 리스트는 기본(default)과 압축형(condensed) 두 가지 높이 크기로 제공됩니다. 구조화된 리스트의 너비는 콘텐츠와 레이아웃에 따라 달라져요.

정렬 (Alignment)

구조화된 리스트는 행 걸침(hang)과 플러시(flush) 두 가지 정렬 스타일로 제공됩니다. 플러시 정렬은 선택 가능한 기능과 함께 제공되지 않아요.

콘텐츠 (Content)

행 텍스트 (Row text)

  • 행마다 최대 세 개의 문단 텍스트를 권장해요.
  • 행 텍스트는 문장형 대문자(sentence-case)를 사용해야 합니다.

컬럼 헤더 제목 (Column header titles)

  • 컬럼 헤더 제목은 짧고 명확해야 하며, 해당 컬럼의 데이터를 설명하는 한두 단어로 유지하세요.
  • 컬럼 헤더 제목이 너무 길면 텍스트를 두 줄로 감싸고 나머지는 줄임 처리해요. 전체 텍스트는 호버 시 보여줘야 합니다.
  • 컬럼 헤더 제목은 문장형 대문자를 사용해야 해요.

추가 가이드 (Further guidance)

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

기본 (Default)

기본 구조화된 리스트는 사용자에게 단순한 정보를 보여주는 데 사용해요. 이런 리스트는 보통 읽기 전용 정보로 구성되며 행을 선택할 수 없습니다.

구조 (Anatomy)

  • 컬럼 헤더(Column header): 각 컬럼 헤더에 제목 텍스트를 표시해요.
  • 데이터 행(Data row): 각 행에 다양한 유형의 데이터를 담아요. 행은 선택적 배경색을 갖도록 수정할 수 있습니다.

상태 (States)

기본 구조화된 리스트는 마우스나 키보드로 조작할 수 없기 때문에 활성(enabled) 상태와 스켈레톤(skeleton) 상태만 있고 인터랙션 상태는 없어요. 기본 구조화된 리스트 상태에 대한 자세한 내용은 Style 탭을 참고하세요.

선택 가능 (Selectable)

선택 가능한 구조화된 리스트는 가격 플랜 집합처럼 선택을 위해 옵션을 순서대로 제시할 때 잘 어울려요.

선택 가능한 구조화된 리스트에는 사용 가능한 기능 플래그가 있어요.

구조 (Anatomy)

  • 컬럼 헤더(Column header): 각 컬럼 헤더에 제목 텍스트를 표시해요.
  • 데이터 행(Data row): 각 행에 다양한 유형의 데이터를 담아요. 행은 배경색을 갖도록 수정할 수 있습니다.
  • 아이콘(Icon): 행이 선택 가능함을 나타내는 아이콘이에요.

상태 (States)

선택 가능한 구조화된 리스트에는 활성, 호버, 포커스, 선택됨(selected), 비활성(disabled), 스켈레톤 상태가 있어요. 자세한 내용은 Style 탭을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

  • 선택 가능한 구조화된 리스트는 개별 행을 클릭해 선택하거나 선택 해제하는 방식으로 마우스를 사용할 수 있어요.
  • 행은 기본적으로 선택 해제 상태이며, 한 번에 한 행만 선택할 수 있습니다.
  • 제품 팀은 사용 사례에 따라 행의 사전 선택(프리셀렉션) 로직을 만들 수 있어요. 여러 행 선택이 필요하다면 데이터 테이블을 대신 사용하세요.

키보드 (Keyboard)

  • Tab 키는 포커스를 다음 행으로 이동시켜요.
  • Space 키는 행을 선택합니다.
  • Up/Down 화살표 키는 포커스를 이전/다음 행으로 이동시켜요.

클릭 영역 (Clickable areas)

선택 가능한 구조화된 리스트의 행은 클릭 가능해요. 행의 아무 곳이나 클릭해 선택할 수 있습니다.

수정자 (Modifiers)

배경 (Background)

구조화된 리스트는 배경색 옵션을 가질 수 있어요. 배경색 옵션은 행 걸침(hang) 정렬에서만 사용할 수 있습니다.

  • 아코디언 (Accordion)
  • 컨테이너드 리스트 (Contained list)
  • 데이터 테이블 (Data table)
  • 리스트 (List)

더 알아보기 (Learn more)

구조화된 리스트는 여러 행의 단순한 정보를 그룹으로 묶어 훑어보기 쉽게 만들 때 가장 효과적이에요. 읽기 전용이냐 선택 가능이냐에 따라 역할이 갈리는데, 선택이 필요한 경우에는 기능 플래그를 켜서 개선된 선택형 리스트를 활용하는 걸 권장해요. 복잡한 중첩 데이터가 필요하다면 데이터 테이블을, 좁은 공간이면 컨테이너드 리스트를 대신 고려하세요.