Tree
Tree (트리)
트리는 중첩된 데이터의 계층적 구조를 한눈에 보여주는 컴포넌트예요. 메뉴 구조, 폴더 계층, 중첩 카테고리를 표현할 때 유용하죠. 각 트리는 부모 노드와, 펼치거나 접을 수 있는 한 단계 이상의 자식 노드로 이뤄져요. 이 페이지에서는 트리의 아이템 유형, 확장·접기·다중 선택 같은 상호작용 모드, 레이아웃, 접근성, 콘텐츠 기준까지 자세히 알아볼게요.
출처: 문서
본문
트리는 중첩된 데이터의 계층적 뷰를 표시하는 데 사용돼요. 메뉴 구조, 폴더 계층, 중첩 카테고리를 한눈에 보여주는 데 유용하죠. 각 트리에는 부모 노드와, 펼치거나 접을 수 있는 한 단계 이상의 자식 노드가 있어요.
계층과 무관하게 정보를 보여주거나 숨기려면 accordion을 대신 사용하세요. 더 단순한 구조로 정리된 정보라면 list나 테이블을 고려해 보세요.
유형 (Types)
기본 트리 (Basic tree)
기본 트리 아이템은 텍스트와 아이콘을 표시하며, 마우스를 올리면 상호작용 버튼이 나타날 수 있어요.
피르소나 트리 (Persona tree)
피르소나 트리 아이템은 텍스트 옆에 아바타나 이미지를 표시하고, 때로는 추가 메타데이터를 포함해요.
아이템 유형 (Item types)
트리의 각 아이템은 하나의 데이터 지점을 나타내요. 트리 내 위치에 따라 브랜치(부모) 또는 리프(자식)로 분류돼요.
브랜치는 항상 부모이며, 때로는 자식이기도 해요
브랜치를 사용해 관련 아이템을 계층적 트리 구조 안의 카테고리와 하위 카테고리로 묶으세요. 브랜치는 항상 일부 아이템의 부모지만, 다른 아이템의 자식이 될 수도 있어요.
리프는 자식일 뿐이에요
리프는 그 아래에 다른 자식 아이템을 포함하지 않는 자식 아이템이에요. 리프 아이템은 분기 경로의 끝을 의미해요.
동작 (Behavior)
상호작용 모드 (Interaction modes)
펼치기·접기만 (Expand-and-collapse only)
펼치기·접기 전용 모드는 정보가 어떻게 조직되어 있는지 보여주는 데 유용해요. 사람들은 아무 브랜치나 선택해 자식 노드를 펼치거나, 다시 선택해 숨길 수 있어요. 이 모드는 정보 제공용이므로 항목을 선택해도 다른 곳으로 이동하지 않아요.
내비게이션 (Navigation)
내비게이션 모드에서도 사람들은 캐럿(chevron)을 선택해 항목을 펼치고 접을 수 있어요. 하지만 항목을 선택해 다른 표면에서 상세 뷰를 볼 수도 있죠. 예를 들어 파일 구성을 보여주는 트리라면, 항목을 선택하면 패널에 파일이나 폴더 상세 정보가 드러나요.
다중 선택 (Multiselect)
다중 선택 모드는 삭제나 이동 같은 여러 항목에 대한 배치 작업이나, 여러 항목을 한 번에 선택해 보거나 편집하는 데 유용해요.
부모 아이템을 선택하면 그 자식도 모두 선택돼요. 자식 아이템을 선택 해제하면 부모 체크박스는 혼합 선택 상태를 보여줘요.
리플로와 오버플로 (Reflow and overflow)
기본적으로 각 트리 아이템의 콘텐츠는 줄바꿈돼요. 최대 너비는 그것이 놓인 컨테이너에 의해 정해져요.
하지만 트리 아이템의 동작을 줄바꿈에서 텍스트 잘림(truncate)으로 바꿀 수 있어요. 잘린 항목들이 여전히 한눈에 서로 쉽게 구분될 때만 이 옵션을 선택하세요. 이 경우 구분되는 단어가 각 라벨의 앞부분에 오도록 해야 해요. 또한 잘린 라벨의 전체 이름은 hover 시 툴팁으로 반드시 보여주세요.
레이아웃 (Layout)
트리 아이템에는 아이콘, 배지, 빠른 동작(quick actions) 같은 여러 선택적 추가 요소가 있어요.
아이콘 (Icons)
단순하고 알아보기 쉬운 아이콘을 사용하세요. 사용자를 혼란스럽게 할 수 있는 복잡하거나 추상적인 아이콘은 피하세요. 앞쪽 아이콘(leading icons)은 어떤 유형의 항목이 표현되는지 시각적 단서를 주는 데 도움이 돼요. 필요하다면 제품 아이콘도 포함할 수 있어요. 뒤쪽 아이콘(trailing icons)은 항목에 적용된 구성을 강조하는 데 가장 적합해요.
배지 (Badges)
배지는 노드에 대한 더 많은 정보를 제공하거나 상태를 표시하는 데 사용할 수 있어요. 예를 들어 읽지 않은 메시지, 최근 업데이트, 주의 필요, 또는 노드가 포함한 자식 노드의 수를 나타낼 수 있죠. 일반적으로 배지는 정보를 압축된 형태로 즉시 전달하는 유용한 방법이에요.
각 배지는 hover 시 툴팁으로 텍스트 등가물을 제공해요.
이 트리 아이템에는 주의가 필요하다는 것(!)과 새 알림 하나(1)를 나타내는 배지가 있어요.
빠른 동작 (Quick actions)
빠른 동작은 트리 아이템에 추가해서 UI를 어수선하게 만들거나 사용자가 노드를 클릭하지 않고도 상황에 맞는 정보와 기능을 제공할 수 있어요. 예를 들어 빠른 동작은 노드의 속성 편집이나 삭제 같은 동작을 수행할 수 있는 팝업 메뉴를 트리거할 수 있어요.
트리 노드에 배지와 빠른 동작이 모두 있을 때 기본 동작은 빠른 동작이 배지를 대체하는 것이에요. 하지만 hover 중에 배지를 계속 보이게 해야 한다면 빠른 동작을 위해 옆으로 밀어낼 수 있어요.
접근성을 위해 이런 동작들이 툴바나 메뉴 같은 더 눈에 띄는 방법으로도 이용 가능하도록 하세요. 빠른 동작의 수는 최대 한두 개로 제한하세요.
들여쓰기 (Indentation)
트리의 계층을 시각적으로 표현하고 탐색을 쉽게 하기 위해 자식 아이템을 들여쓰세요.
부모 아이템에서의 들여쓰기는 중간(medium) 크기 항목이 24픽셀, 작은(small) 항목이 12픽셀이에요. 자식 아이템이 리프라면, 캐럿이 차지할 공간을 위해 (크기와 무관하게) 추가로 24픽셀이 더해져요.
접근성 (Accessibility)
아이콘의 트리 아이템 앞·뒤 배치 같은 사용자 지정 옵션은 슬롯 속성을 통해 스크린 리더 사용자에게 전달돼요.
스크린 리더가 트리 전체의 목적을 이해하도록, aria-label을 사용해 트리에 접근 가능한 이름을 제공하세요.
빠른 동작은 탐색에는 접근 가능하지만 WAI-ARIA에 따르면 예상 밖의 패턴이에요. 이를 완화하려면 모든 빠른 동작이 툴바나 메뉴 같은 대체 방법으로도 이용 가능하도록 하세요.
콘텐츠 (Content)
트리 아이템의 라벨은 짧고 명확해야 하며 일관된 문법 패턴을 따라야 해요. 예를 들어 트리의 자식 아이템은 모두 동작이거나, 모두 설명어이거나, 모두 객체여야 하며 이들을 섞지 말아야 해요.
라벨은 짧고 명확하게 유지하세요.
배지나 빠른 동작을 사용한다면 각 배지나 동작에 대해 짧고 명확한 tooltip을 포함하세요.
문장형 대문자(sentence case)를 사용하세요—첫 단어만 대문자로 표기해요. 자세한 내용은 Microsoft Writing Style Guide의 대문자 표기를 참고하세요.