List
List (목록)
List는 비슷한 항목이나 정보의 모음을 세로로 쌓아 반복해서 보여줘요. 정보를 쉽게 훑어보고 접근할 수 있게 만들 때 목록을 사용하세요.
목록의 항목들은 서로 독립적이에요. 서로 관련된 정보를 열(columns)로 표시해야 한다면 DataGrid나 Table을 시도해 보세요. 목록 안에 중첩 계층이 필요하다면 Tree를 사용해 보세요.
출처: List 문서
본문
Behavior (동작)
Single action (단일 액션)
일부 목록은 목록 항목마다 단일 액션을 포함해요. 사람들은 항목을 클릭하거나, 항목에 포커스가 있을 때 Enter나 Space를 눌러 그 액션을 시작할 수 있어요.
클릭, Enter 또는 Space로 트리거되는 단일 액션
Multiple actions (다중 액션)
보조 액션도 포함하는 목록 항목의 경우, 사람들은 마우스로 호버하거나 Right Arrow 키를 사용해 목록 항목으로 들어가 보조 액션으로 이동할 수 있어요. Space와 Enter 모두 포커스가 있는 액션을 트리거해요.
부모 컨테이너로 돌아가려면 Left Arrow 키나 Esc를 사용하세요.
Selection as primary action (기본 액션으로서의 선택)
많은 시나리오에서 목록 항목은 선택 가능해요. 선택이 유일한 액션이라면, 목록 항목의 아무 곳이나 클릭하는 것과 항목에 포커스가 있을 때 Space·Enter를 누르는 것 모두 선택을 트리거해요.
목록 항목에서 선택이 기본 액션이고 다른 액션도 있다면, 사람들은 부모 컨테이너를 클릭하거나 부모 컨테이너에 포커스가 있을 때 Space나 Enter를 사용해 선택할 수 있어요.
자식 중 하나에 포커스가 있으면 Space와 Enter는 그 액션을 시작해요.
(시각 예시: 목록 항목 호버 → 부모 컨테이너 클릭 시 목록 항목 선택 / 목록 액션 클릭 시 해당 액션 트리거 / 체크박스 호버 → 클릭 시 체크박스 선택 / 목록 항목 선택 표시)
Selection as secondary action (보조 액션으로서의 선택)
선택이 가능하지만 기본 액션이 아니라면, 기본 액션을 트리거하도록 커스텀 클릭 이벤트를 정의하세요. 이렇게 하면 목록 항목에 포커스가 있을 때 클릭과 Enter를 사용하면 기본 액션이 트리거돼요. Space는 계속 선택을 토글해요.
(시각 예시: 부모 컨테이너 클릭 시 기본 액션 트리거(항목 선택 안 함) / 활성 상태 표시 / 체크박스 호버 / 체크박스 클릭 시에만 선택 표시 / 보조 액션은 계속 클릭 가능 / 다른 항목 체크박스를 계속 클릭해 다중 선택(사용 가능 시) / 다른 목록 항목 클릭 시 그 항목의 기본 액션 트리거 및 이전 항목 선택 해제)
Layout (레이아웃)
Structure and placement (구조와 배치)
목록 항목은 하위 수준의 유사 항목을 포함할 수 없어요. 중첩과 계층에는 Tree를 사용하세요. 목록은 페이지 본문에 위치할 수 있어요. 훑어보기와 인지를 돕기 위해 다른 관련 콘텐츠와 시각적으로 그룹화되어야 해요.
Component harmony (컴포넌트 조화)
다른 컴포넌트는 목록 안에 중첩하면 안 돼요. 추가 계층이 필요하면 Tree를 사용하세요. 추가 콘텐츠를 정리하는 데 열이 필요하면 DataGrid를 사용하세요.
Accessibility (접근성)
list, listbox, and grid roles
목록은 서로 다른 aria 역할을 가질 수 있어요. 이 역할들은 목록 콘텐츠와 의도된 기능에 적합한 탐색 모드를 제공해요. Fluent List는 자식 컴포넌트와 상호작용에 따라 사용할 적절한 aria 역할을 추론해요.
내부에 포커스 가능 요소가 없으면 list 또는 listbox가 될 수 있어요. 선택이 필요하면 Fluent 목록은 부모에 listbox 역할을, 목록 항목에 option 역할을 적용해요. 선택이 필요 없으면 list 역할을 적용해야 해요.
grid는 목록에 적절한 역할 옵션이 아니에요. 목록 항목은 다른 목록 항목에 없는 아이콘 버튼이나 액션 버튼을 가질 수 있어, 그리드 구조를 적용하면 빈 셀이 생길 수 있기 때문이에요.
Content (콘텐츠)
Patterns and scannability (패턴과 훑어보기)
목록 항목에 평행 구조를 만들어 콘텐츠 패턴과 시각적 패턴 모두 훑어보기 쉽게 하세요. 단일 목록의 모든 항목을 비슷한 줄 길이로 유지하도록 노력하세요.
목록 항목이 완전한 문장이 아니면 항목 끝에 마침표를 쓰지 마세요. 아주 짧은 완전한 문장이더라도 마찬가지예요.
목록 항목 끝에 세미콜론, 쉼표, 접속사("and"나 "or" 같은)를 쓰지 마세요.
목록에는 빈 항목이나 비활성화된 항목을 포함하면 안 돼요.
Introducing a list (목록 소개)
목록의 목적이 명확한지 확인하세요. 목록을 제목, 완전한 문장, 또는 콜론으로 끝나는 조각으로 소개하세요.
제목으로 목록을 소개한다면, 제목 뒤에 설명 텍스트를 쓰지 마세요. 또한 제목 뒤에 콜론이나 마침표를 쓰지 마세요.
콘텐츠를 지역화할 예정이라면, 아래 목록 항목으로 완성되는 도입 조각이 있는 목록을 피하세요. 번역하기 어려울 수 있어요.
List order (목록 순서)
목록 항목에 순서나 계층을 나타내야 한다면 목록에 번호를 매기는 것을 고려하세요. HTML <ol> 요소와 유사하게, 순서가 있는 목록은 더 많은 구조를 전달하고 목록 상단의 요소에 중요성을 부여해요.
Capitalization (대문자 표기)
특별한 이유가 없으면(예: 항상 소문자인 명령) 목록의 각 항목을 대문자로 시작하세요. 필요하다면 모든 항목이 대문자로 시작하거나 모든 항목이 소문자로 시작하도록 목록 항목을 다시 작성하세요.
더 알아보기 (Learn more)
- List 스토리북 및 React 가이드 확인
- 열 기반 구조에는 DataGrid·Table, 중첩 계층에는 Tree를 함께 참고하세요