Expand / Collapse

설명 / Description

확장/축소는 계층 데이터를 위한 인터랙션 패턴으로, 사용자가 노드를 클릭하여 하위 항목을 드러내거나(확장) 숨길(축소) 수 있게 합니다. 트리 다이어그램에서는 부모 노드를 클릭하면 하위 트리가 열리고, 다시 클릭하면 접힙니다. 트리맵에서는 범주를 클릭하면 하위 범주를 보여주도록 확장될 수 있습니다. 이 패턴은 사용자가 언제든 얼마나 많은 세부 정보를 볼지 제어할 수 있게 하여, 관심 있는 가지만 열어두고 나머지 계층은 압축된 상태로 유지할 수 있게 합니다.

Expand / collapse is an interaction pattern for hierarchical data that lets users click on a node to reveal its children (expand) or hide them (collapse). In a tree diagram, clicking a parent node opens its subtree; clicking again folds it back. In a treemap, clicking a category might expand it to show subcategories. The pattern gives users control over how much detail is visible at any time, letting them open only the branches they care about while keeping the rest of the hierarchy compact.

이는 컴퓨팅에서 가장 오래된 인터랙션 패턴 중 하나입니다 — 모든 파일 관리자, 모든 DOM 인스펙터, 모든 목차가 확장/축소를 사용합니다. 데이터 시각화에서는 조직 계층, 파일 시스템, 분류 체계, 중첩 범주 같은 트리 구조 데이터에 가장 자연스럽습니다. 이 인터랙션은 (전체 뷰를 하위 레벨로 교체하는) 드릴다운보다 맥락을 더 잘 보존하는데, 확장된 노드와 축소된 노드가 같은 뷰에 공존하여 사용자가 형제 노드와 부모 노드의 맥락 속에서 초점 가지를 볼 수 있기 때문입니다.

This is one of the oldest interaction patterns in computing — every file manager, every DOM inspector, and every table of contents uses expand/collapse. In data visualization, it is most natural for tree-structured data: organizational hierarchies, file systems, taxonomies, and nested categories. The interaction preserves context better than drill-down (which replaces the entire view with a sub-level) because expanded and collapsed nodes coexist in the same view, letting the user see the focal branch in the context of its siblings and parents.

확장/축소의 시각적 디자인은 보통 공개 삼각형, 더하기/빼기 아이콘, 또는 쉐브런을 사용하여 노드가 확장 가능한지와 현재 상태를 나타냅니다. 애니메이션 전환 — 가지가 바깥으로 자라나거나 자식이 서서히 나타나는 등 — 은 사용자가 무엇이 바뀌었는지 추적하는 데 도움을 줍니다. 새로 보이게 된 자식들을 수용하기 위해 레이아웃이 재배치되어야 하는데, 부드럽게 애니메이션되지 않으면 방향 감각을 잃게 하는 점프를 유발할 수 있습니다. 포스 디렉티드 트리 레이아웃은 물리 시뮬레이션이 새 노드를 위한 공간을 자연스럽게 찾아주기 때문에 이를 우아하게 처리합니다.

The visual design of expand/collapse typically uses disclosure triangles, plus/minus icons, or chevrons to indicate whether a node can be expanded and its current state. Animated transitions — branches growing outward, children fading in — help the user track what changed. The layout must reflow to accommodate newly visible children, which can cause disorienting jumps if not animated smoothly. Force-directed tree layouts handle this gracefully because the physics simulation naturally finds room for new nodes.

Expand / Collapse — try it yourself

언제 사용하나 / When to Use

데이터가 계층적이고 전체 트리가 한 번에 표시하기에 너무 클 때.
When the data is hierarchical and the full tree is too large to display at once.
사용자가 나머지 계층을 보이되 압축된 상태로 유지하면서 특정 가지를 자세히 탐색해야 할 때.
When users need to explore specific branches in detail while keeping the rest of the hierarchy visible but compact.
계층의 깊이가 다양하여 일부 가지가 다른 가지보다 훨씬 깊을 때.
When the depth of the hierarchy varies and some branches are much deeper than others.
조직도, 파일 탐색기, 분류 체계 탐색기, 중첩 범주 뷰에서.
In organizational charts, file browsers, taxonomy explorers, and nested category views.
맥락이 중요할 때 — 사용자가 확장된 가지를 형제 및 부모와의 관계 속에서 봐야 할 때.
When context matters — the user needs to see the expanded branch relative to its siblings and parents.

이럴 땐 피하세요 / When NOT to Use

계층이 얕을 때(2단계뿐) — 확장/축소 없이도 모든 자식을 한 번에 보여줄 수 있습니다.
When the hierarchy is shallow (only 2 levels) — all children can be shown at once without needing expand/collapse.
사용자가 모든 수준의 전체 구조를 동시에 봐야 할 때 — 정적 트리나 트리맵이 더 낫습니다.
When the user needs to see the full structure at all levels simultaneously — a static tree or treemap is better.
계층의 분기 계수가 극도로 높을 때(노드당 수백 개의 자식) — 노드 하나를 확장하는 것만으로도 뷰가 압도당합니다.
When the hierarchy has an extremely high branching factor (hundreds of children per node) — expanding one node would overwhelm the view.
데이터가 계층적이지 않을 때 — 확장하거나 축소할 것이 없습니다.
When the data is not hierarchical — there is nothing to expand or collapse.
드릴다운이 더 적절할 때 — 사용자가 하위 가지에만 완전히 집중하고 싶어하며 형제 맥락이 필요 없을 때.
When drill-down is more appropriate — the user wants to focus entirely on a sub-branch and does not need sibling context.

작동 방식 / How It Works

자식이 있는 노드는 확장 표시기를 보여줍니다 — 삼각형, 더하기 아이콘, 또는 쉐브런.
Nodes that have children display an expand indicator — a triangle, plus icon, or chevron.
사용자가 표시기나 노드 자체를 클릭하여 확장합니다.
The user clicks the indicator or the node itself to expand it.
애니메이션 전환이 자식 노드를 드러냅니다: 서서히 나타나거나, 부모에서 슬라이드되어 나오거나, 제자리로 자라납니다.
An animated transition reveals the child nodes: they fade in, slide out from the parent, or grow into position.
레이아웃이 재배치되어 새 노드를 수용합니다 — 형제 가지가 공간을 만들기 위해 이동하거나, 전체 트리가 커집니다.
The layout reflows to accommodate the new nodes — sibling branches shift to make room, or the overall tree grows.
확장 표시기가 축소 표시기로 바뀝니다(삼각형이 회전하거나, 더하기가 빼기로 바뀜).
The expand indicator changes to a collapse indicator (triangle rotates, plus becomes minus).
표시기를 다시 클릭하면 축소되어, 역방향 애니메이션과 함께 자식을 숨깁니다.
Clicking the indicator again collapses the node, hiding its children with a reverse animation.
깊이 중첩된 확장은 서로 독립적입니다 — 사용자는 노드 B의 상태에 영향을 주지 않고 노드 A의 자식을 확장할 수 있습니다.
Deeply nested expansions are independent — the user can expand node A's children without affecting node B's state.

변형 / Variations

트리 노드 확장: 고전적인 형태입니다. 노드-링크 트리의 각 노드가 독립적으로 확장하거나 축소할 수 있습니다. 파일 탐색기와 조직도에서 사용됩니다.
Tree node expand: The classic form. Each node in a node-link tree can independently expand or collapse. Used in file browsers and org charts.
아코디언: 한 번에 하나의 섹션만 확장할 수 있으며, 새 섹션을 확장하면 이전 섹션이 축소됩니다. 설정 패널과 FAQ 목록에서 흔합니다.
Accordion: Only one section can be expanded at a time; expanding a new section collapses the previous one. Common in settings panels and FAQ lists.
트리맵 줌-확장: 트리맵 사각형을 클릭하면 뷰를 채우도록 확장되어 자식을 보여줍니다. 내비게이션을 위해 브레드크럼 트레일과 자주 결합됩니다.
Treemap zoom-expand: Clicking a treemap rectangle expands it to fill the view, showing its children. Often combined with a breadcrumb trail for navigation.
점진적 공개: 콘텐츠가 단계적으로 드러납니다 — 먼저 요약, 그다음 세부 정보, 그다음 원시 데이터 — 각 단계는 명시적인 확장 동작을 필요로 합니다.
Progressive disclosure: Content is revealed in stages — first a summary, then details, then raw data — each requiring an explicit expand action.
모두 확장 / 모두 축소: 전체 트리를 지정된 깊이까지 확장하거나 축소하는 일괄 버튼입니다. 개요/세부 전환을 빠르게 할 때 유용합니다.
Expand-all / collapse-all: Bulk buttons that expand or collapse the entire tree to a specified depth. Useful for quick overview/detail switching.
지연 확장: 사용자가 노드를 확장할 때만 서버에서 자식을 가져옵니다. 매우 큰 계층 구조에 필수적입니다.
Lazy expand: Children are fetched from a server only when the user expands a node. Essential for very large hierarchies.

코드 레퍼런스 / Code Reference

// D3.js collapsible tree
function toggle(d) {
  if (d.children) {
    d._children = d.children;  // hide children
    d.children = null;
  } else {
    d.children = d._children;  // show children
    d._children = null;
  }
  update(d);
}

function update(source) {
  const treeData = treeLayout(root);
  const nodes = treeData.descendants();
  const links = treeData.links();

  // Animated node enter/update/exit
  const node = svg.selectAll(".node")
    .data(nodes, d => d.data.id);

  node.enter().append("g")
    .attr("class", "node")
    .attr("transform", `translate(${source.y0},${source.x0})`)
    .on("click", (event, d) => toggle(d))
    .append("circle")
    .attr("r", 6)
    .style("fill", d => d._children ? "#4a90d9" : "#fff");

  node.transition().duration(500)
    .attr("transform", d => `translate(${d.y},${d.x})`);
}