Tree view
Tree view (트리 뷰)
트리 뷰는 중첩된 탐색 수준을 제공하는 계층 구조예요.
출처: Tree view
본문
개요 (Overview)
트리 뷰는 사용자를 위한 콘텐츠 위계를 만들고 많은 양의 정보 탐색을 돕는 중첩된 제목 수준으로 구성됩니다. 트리 비유에 이어서, 트리 뷰 컴포넌트에는 자식 노드를 드러내거나 숨기기 위해 펼치거나 접을 수 있는 가지 노드(branch node)가 있어요. 트리는 잎 노드(leaf node)를 가질 수도 있습니다. 잎 노드는 트리 위계의 어느 수준에도 나타날 수 있으며 자식 노드를 갖지 않습니다.
언제 사용할까요 (When to use)
- 폴더와 문서로 구성된 파일 시스템 구조를 탐색할 때 자주 사용돼요.
- 여러 수준에 중첩될 수 있는 많은 양의 정보를 정리할 때
언제 사용하지 말아야 할까요 (When not to use)
- 페이지에서 UI 요소나 콘텐츠를 보이거나 숨길 때
- 한 수준의 중첩 정보만 필요할 때. 이 경우에는 한 수준 깊이로 가는 확장 뷰를 위해 아코디언이나 데이터 테이블 같은 다른 컴포넌트를 사용하세요.
- 제품 UI의 기본 내비게이션으로. 대신 제품 내비게이션에는 UI 쉘 왼쪽 패널을 사용하세요. UI 쉘 왼쪽 패널과 브레드크럼 컴포넌트의 조합이 여러 수준 깊이의 정보 구조를 지원할 수 있습니다.
기능 플래그 (Feature flags)
트리 뷰에 기능 플래그가 추가되어 접근성을 개선하고, 시각적 모양이 아닌 일부 기능을 바꿉니다. 코드별 기능 플래그 정보는 Code 탭을 참고하세요. 현재 트리 뷰는 더 이상 사용되지 않지는 않지만, 앞으로는 제품에 기능 플래그 트리 뷰를 사용하도록 권장해요. 향후 다음 메이저 릴리스(v12)가 출시되면 이 기능 플래그가 컴포넌트의 기본 버전이 됩니다.
포맷 (Formatting)
구조 (Anatomy)
트리 뷰는 큰 정보 집합을 중첩하고 정리하도록 설계된 가지와 잎 노드로 구성됩니다.
- 가지 노드(Branch node): 하나 이상의 자식 노드를 가진 노드예요. 자식 노드를 드러내거나 숨기기 위해 펼치거나 접을 수 있습니다.
- 잎 노드(Leaf node): 자식 노드가 없는 노드로, 트리 뷰 위계의 어느 수준에도 나타날 수 있어요. 잎 노드는 가지 노드 아래에 중첩되면 자식 노드라고 불릴 수 있습니다.
- 캐럿 아이콘(Caret icon): 가지 노드를 펼치거나 접는 아이콘이에요.
- 노드 아이콘(Node icon, 선택): 노드 라벨을 시각적으로 나타내고 지원하는 아이콘이며, 사용자가 서로 다른 콘텐츠 유형을 빠르게 훑어보도록 도울 수 있어요.
크기 (Sizing)
작은(small, 기본), 초소형(extra small) 두 가지 노드 크기가 있어요. 두 가지 다른 노드 크기를 지원하면 트리 뷰를 구성할 때 더 많은 유연성을 얻을 수 있습니다. 복잡한 중첩 수준을 가진 트리 구조라면 가능한 한 많은 정보를 뷰에 유지하도록 초소형 노드 크기를 사용하세요. 어떤 크기를 쓸지 확실하지 않으면 기본값인 작은 노드 크기를 사용하세요.
| Node size | Height (px/rem) | Purpose |
|---|---|---|
| Small | 32 / 2 | 기본 크기이며 UI 쉘 왼쪽 내비게이션 패널과 비슷한 형태를 가져 가장 흔히 사용됩니다. |
| Extra small | 24 / 1.5 | 페이지 공간이 제한될 때 그리고/또는 화면에 더 많은 트리 뷰를 보여주는 더 콤팩트한 뷰가 필요할 때 사용하세요. |
정렬 (Alignment)
노드 쌓기 (Stacking nodes)
노드는 서로 사이에 0px 간격으로 직접 위에 쌓여요. 노드가 서로 딱 붙어 있으면 트리 뷰의 각 노드 사이에 일관된 간격과 정렬을 보장합니다.
노드 중첩 (Nesting nodes)
트리 뷰의 중첩 노드는 세로 유형과 아이콘 정렬에 의존해 노드를 시각적으로 그룹화해요. 가지 아이콘과 잎 아이콘은 유형의 왼쪽에 위치하며 세로로 정렬됩니다.
콘텐츠 (Content)
주요 요소 (Main elements)
노드에 라벨을 직접 붙이거나, 라벨이 코드에서 생성될 수도 있어요. 라벨 이름을 제어할 수 있다면 다음 가이드라인을 따르세요.
가지 노드 라벨 (Branch node label)
가지 노드가 어떤 종류의 자식 노드를 담고 있는지 요약하면서 간결하되 명확하게 하세요.
잎 노드 라벨 (Leaf node label)
잎 노드가 담고 있는 정보에 대해 간결하고 설명적으로 하세요.
오버플로 콘텐츠 (Overflow content)
트리 뷰에서 노드 라벨이 한 줄에 맞기 너무 길면 …(줄임표)를 추가하고 브라우저 기반 툴팁과 함께 전체 텍스트 문자열을 보여주세요.
잘림은 선호되지 않지만, 사용자에게 트리 뷰에 유지하는 것이 가장 유용한 정보에 따라 위치를 정해 노드 라벨의 앞줄, 중간줄, 끝줄에 줄임표를 배치해 뷰를 사용자 정의할 수 있어요.
추가 가이드 (Further guidance)
더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.
동작 (Behaviors)
상태 (States)
가지 노드와 잎 노드는 서로 다른 상태에 대해 같은 스타일을 공유해요. 두 구조의 유일한 차이는 가지 노드를 펼치거나 접기 위한 캐럿 아이콘의 추가입니다.
선택 표시 (Selection indicator)
선택된 자식 노드의 가지 노드가 접혀 있으면, 뷰 밖에 있더라도 무엇이 선택되었는지 사용자가 맥락을 잃지 않도록 부모 노드가 선택된 상태를 상속해야 해요.
인터랙션 (Interactions)
포커스 (Focus)
단일 선택 트리가 포커스를 받으면:
- 포커스는 이전에 선택된 노드에 설정됩니다.
- 트리가 포커스를 받기 전에 어떤 노드도 선택되지 않았다면 포커스는 첫 노드에 설정됩니다.
펼치고 접기 (Expanding and collapsing)
- 가지 노드를 펼치거나 접으려면 사용자는 캐럿 아이콘 경계 상자 안의 아무 곳이나 클릭할 수 있어요.
선택 (Selecting)
- 가지 노드를 선택하려면 사용자는 캐럿 아이콘 경계 상자를 제외한 노드의 아무 곳이나 클릭할 수 있어요.
- 잎 노드를 선택하려면 사용자는 노드 컨테이너의 아무 곳이나 클릭할 수 있습니다.
키보드 컨트롤 (Keyboard controls)
| Key | Interaction |
|---|---|
| Right arrow | 닫힌 노드에 포커스가 있을 때 노드를 열고, 포커스는 이동하지 않아요. |
| 열린 노드에 포커스가 있을 때 첫 자식 노드로 포커스를 이동시켜요. | |
| 잎 노드에 포커스가 있을 때 아무것도 하지 않아요. | |
| Left arrow | 열린 노드에 포커스가 있을 때 노드를 닫아요. |
| 잎 노드이거나 닫힌 노드인 자식 노드에 포커스가 있을 때 그 부모 노드로 포커스를 이동시켜요. | |
| 잎 노드이거나 닫힌 노드인 최상위 노드에 포커스가 있을 때 아무것도 하지 않아요. | |
| Down arrow | 노드를 열거나 닫지 않고 다음 포커스 가능한 노드로 포커스를 이동시켜요. |
| Up arrow | 열거나 닫지 않고 이전 포커스 가능한 노드로 포커스를 이동시켜요. |
| Enter | 노드를 활성화합니다. 선택이 포커스를 따르지 않는 단일 선택 트리에서 기본 동작은 일반적으로 포커스된 노드를 선택하는 것입니다. |
수정자 (Modifiers)
노드 아이콘 (Node icons)
작성된 노드 라벨을 시각적으로 나타내고 지원하기 위해 노드 아이콘을 추가할 수 있어요. 모든 가지와 잎 노드에 일관된 아이콘 사용을 권장합니다. 아이콘이 관련된 각 노드를 정확히 나타내는지 확인하세요. 가지 노드에 폴더 아이콘, 잎 노드에 문서 아이콘을 사용하는 것은 트리 뷰 구조에서 흔히 인식되는 아이콘 짝이에요. 개별 노드 데이터를 식별할 수 없다면 아이콘을 표시하지 마세요. 확실하지 않으면 아이콘 없는 노드를 사용하세요.
아이콘 정렬 (Aligning icons)
트리 뷰의 노드에 아이콘을 추가할 때는 모든 노드에 아이콘이 존재하는 것이 중요해요. 모든 가지나 잎 노드에 아이콘이 없으면 정렬 불일치가 생기고 노드 그룹을 시각화하기 어려워질 수 있습니다.
트리 뷰의 각 노드에 아이콘을 일관되게 사용하세요. 트리 뷰에서 텍스트 전용과 아이콘 노드를 섞지 마세요.
관련 (Related)
트리 뷰와 아코디언 (Tree view versus accordion)
한 수준 깊이로만 가는 섹션에서 긴 정보를 정리해야 할 때 아코디언 컴포넌트를 사용하세요. 트리 뷰는 여러 수준의 위계/계층 형태로 정보 카테고리를 중첩하는 데 가장 적합합니다.
트리 뷰와 UI 쉘 왼쪽 패널 (Tree view versus UI Shell left panel)
제품 내비게이션에는 UI 쉘 왼쪽 패널 컴포넌트를 사용하세요. UI 쉘 왼쪽 패널과 브레드크럼 컴포넌트의 조합이 제품의 여러 수준 깊이의 정보 구조를 지원할 수 있습니다. 트리 뷰는 웹사이트나 제품의 구조가 아닌 페이지 내 내비게이션에 가장 적합합니다.
트리 뷰와 데이터 테이블 (Tree view versus data table)
한 뷰에서 가로로 쉽게 훑어볼 수 있는 많은 양의 상세 정보를 표시하려면 데이터 테이블 컴포넌트를 사용하세요. 데이터 테이블 행은 확장될 수 있지만, 행을 한 수준 깊이로만 확장할 것을 권장합니다. 트리 뷰는 컬럼 구조로 정리할 필요가 없는 간결한 라벨로 여러 중첩 수준의 정보를 정리하는 데 사용됩니다.
참고 자료 (References)
- Tree (W3C Recommendation)
- TreeView (W3C Wiki 2012)
- Tree view React app (WKC)
- Tree view specifications (WKC)
- Tree view WAI-ARIA practices (W3C)
더 알아보기 (Learn more)
트리 뷰는 여러 수준으로 중첩되는 계층 구조를 탐색할 때 가장 효과적이에요. 파일 시스템 탐색이나 대량 정보 정리에 쓰되, 한 수준 깊이만 필요하면 아코디언·데이터 테이블을, 제품 전체 내비게이션에는 UI 쉘 왼쪽 패널을 사용하세요. 가지·잎 노드에 아이콘을 쓸 때는 모든 노드에 일관되게 적용하는 게 좋습니다.