Overview + Detail

설명 / Description

전체+세부 뷰는 동일한 데이터의 두 뷰를 동시에 제시하는 다중 스케일 내비게이션 패턴입니다: 데이터 공간의 전체 범위를 보여주는 작은 개요 뷰와, 확대된 부분을 보여주는 더 큰 세부 뷰입니다. 개요 위에 보이는 표시기(사각형, 하이라이트된 영역)는 세부 뷰에 현재 표시되고 있는 데이터의 부분을 나타냅니다. 사용자는 개요에서 이 표시기를 드래그하여 탐색하거나, 세부 뷰에서 줌과 팬으로 직접 상호작용할 수 있습니다.

Overview+detail is a multi-scale navigation pattern that presents two simultaneous views of the same data: a small overview showing the full extent of the data space, and a larger detail view showing a zoomed-in portion. A visible indicator on the overview (a rectangle, a highlighted region) shows which portion of the data is currently displayed in the detail view. The user can drag this indicator on the overview to navigate, or interact directly with the detail view via zoom and pan.

이 패턴은 코크번, 칼슨, 베더슨(Cockburn, Karlson & Bederson, 2009)이 다중 스케일 인터페이스에 대한 서베이 논문에서 정식화했으며, 여기서 이들은 전체+세부 뷰를 초점+맥락(두 스케일을 하나의 뷰로 통합하는 방식)과 줌-앤-팬(한 번에 하나의 스케일만 보여주는 방식)과 대비했습니다. 전체+세부 뷰의 핵심 장점은 사용자가 방향 감각을 잃지 않는다는 것입니다 — 개요가 지속적인 공간적 기준점을 제공하고, 세부 뷰가 가독성을 제공합니다. 대가는 화면 공간입니다: 두 개의 뷰는 하나보다 더 많은 공간을 필요로 합니다.

This pattern was formalized by Cockburn, Karlson, and Bederson (2009) in their survey of multi-scale interfaces, where they contrast overview+detail with focus+context (which integrates both scales into a single view) and zoom-and-pan (which shows only one scale at a time). The key advantage of overview+detail is that the user never loses their bearings — the overview provides a persistent spatial reference, while the detail view provides legibility. The cost is screen real estate: two views require more space than one.

대표적인 예는 지도 애플리케이션, 코드 편집기, 이미지 뷰어에서 사용되는 내비게이터/미니맵 패턴입니다. 데이터 시각화에서 이 패턴은 시계열 데이터에서 가장 흔히 볼 수 있는데, 하단의 작은 영역 차트가 전체 타임라인을 보여주고 브러시로 메인 차트에 표시할 시간 구간을 선택할 수 있게 합니다. 블룸버그 단말기, 주식 거래 플랫폼, 그리고 Observable Plot의 Plot.frame()에 포커스 영역을 결합한 도구들이 모두 이 패턴을 구현합니다.

The canonical example is the navigator/minimap pattern used in mapping applications, code editors, and image viewers. In data visualization, the pattern is most common with time-series data, where a small area chart at the bottom shows the full timeline and a brush allows the user to select the time window shown in the main chart. Bloomberg terminals, stock trading platforms, and tools like Observable Plot's Plot.frame() with a focus area all implement this pattern.

Overview And Detail — try it yourself

언제 사용하나 / When to Use

데이터가 넓은 범위(긴 시계열, 넓은 지리적 영역, 큰 네트워크)에 걸쳐 있어 전체 해상도로 표시하면 가독성이 떨어질 때.
When the data spans a large range (long time series, large geographic area, big network) and showing it all at full resolution is not legible.
사용자가 전역적 맥락을 유지하면서 동시에 국소적 세부를 살펴봐야 할 때.
When the user needs to both maintain global context and examine local detail.
줌-앤-팬만으로 탐색하면 사용자가 데이터 공간 안에서 위치를 잃게 되는 경우.
When navigation via zoom-and-pan alone would cause the user to lose their position in the data space.
사용자가 시간 구간을 선택해야 하는 시계열 데이터 대시보드에서.
In dashboards with time-series data where the user needs to select a time window.
개요 자체가 (예: 전체 추세를 보여주는) 별도의 분석적 가치를 지닐 때, 세부 뷰와는 별개로.
When the overview itself carries analytical value (e.g., showing the overall trend) separate from the detailed view.

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

화면 공간이 제한적일 때(모바일, 작은 임베디드 위젯)이라서 두 뷰가 공존할 수 없는 경우.
When screen space is limited (mobile, small embedded widgets) and two views cannot coexist.
데이터가 단일 스케일에 편안하게 들어맞을 때 -- 개요를 추가하는 것은 공간 낭비입니다.
When the data fits comfortably at a single scale — adding an overview is wasted space.
초점+맥락 접근(피시아이, 왜곡)이 사용자가 기대하는 단일 뷰 경험을 더 잘 보존하는 경우.
When a focus+context approach (fisheye, distortion) better preserves the single-view experience the user expects.
개요가 너무 작아 쓸모가 없어질 경우(10,000개 노드 네트워크를 100x50 픽셀 미니맵에 표시하려는 시도).
When the overview would be too small to be useful (trying to show a 10,000-node network in a 100x50 pixel minimap).

작동 방식 / How It Works

개요가 작은 크기로 렌더링되어 데이터의 전체 범위를 보여줍니다. 사각형 브러시나 하이라이트된 영역이 현재 세부 뷰포트를 나타냅니다.
The overview is rendered at a small size showing the full extent of the data. A rectangular brush or highlighted region indicates the current detail viewport.
세부 뷰가 더 큰 크기로 렌더링되어 표시된 영역 내의 데이터만을 더 높은 해상도로 보여줍니다.
The detail view is rendered at a larger size showing only the data within the indicated region, at higher resolution.
사용자가 개요 위의 브러시를 드래그하여 탐색합니다. 세부 뷰는 실시간으로 갱신되어 해당 데이터를 보여줍니다.
The user drags the brush on the overview to navigate. The detail view updates in real time to show the corresponding data.
또는 사용자가 세부 뷰에서 줌/팬을 하면, 개요의 브러시가 자동으로 갱신되어 새 뷰포트를 반영합니다.
Alternatively, the user zooms/pans in the detail view, and the overview brush automatically updates to reflect the new viewport.
개요에서 브러시 크기를 조정하면 세부 뷰의 줌 레벨이 바뀝니다(브러시가 넓을수록 = 더 많은 데이터 표시 = 낮은 줌).
Resizing the brush on the overview changes the zoom level of the detail view (wider brush = more data shown = lower zoom).
두 뷰는 항상 동기화된 상태를 유지합니다 — 한쪽의 변화는 즉시 다른 쪽에 반영됩니다.
Both views remain synchronized at all times — any change in one is immediately reflected in the other.

변형 / Variations

스택형 개요: 개요가 세부 뷰의 바로 위나 아래에 배치되어 동일한 수평 축을 공유합니다. 시계열(예: 주식 차트)에서 가장 흔합니다.
Stacked overview: The overview is placed directly above or below the detail view, sharing the same horizontal axis. Most common for time series (e.g., stock charts).
코너 미니맵: 세부 뷰의 모서리에 작은 인셋으로 개요를 표시합니다. 지도와 네트워크 시각화에서 흔합니다.
Corner minimap: A small inset in the corner of the detail view shows the overview. Common in maps and network visualizations.
나란히 배치: 개요와 세부 뷰를 비슷한 크기로 나란히 배치합니다. 개요 자체가 분석적으로 중요할 때 사용됩니다.
Side-by-side: Overview and detail are placed next to each other at comparable sizes. Used when the overview itself is analytically important.
접을 수 있는 개요: 필요하지 않을 때 화면 공간을 확보하기 위해 개요를 켜고 끌 수 있습니다.
Collapsible overview: The overview can be toggled on/off to reclaim screen space when not needed.
다중 세부 뷰: 하나의 개요가 여러 세부 뷰에 데이터를 공급하며, 각각이 비교를 위해 서로 다른 확대 영역을 보여줍니다.
Multi-detail: One overview feeds multiple detail views, each showing a different zoomed-in region for comparison.
시맨틱 개요: 개요가 세부 뷰와 다른, 더 단순한 시각적 인코딩을 사용합니다(예: 개요는 밀도 히트맵을 보여주고, 세부는 개별 점을 보여줌).
Semantic overview: The overview uses a different, simpler visual encoding than the detail view (e.g., overview shows a density heatmap, detail shows individual points).

코드 레퍼런스 / Code Reference

// D3.js overview + detail for a time series
const brushOverview = d3.brushX()
  .extent([[0, 0], [overviewWidth, overviewHeight]])
  .on("brush end", ({ selection }) => {
    const [x0, x1] = selection.map(overviewXScale.invert);
    detailXScale.domain([x0, x1]);
    detailPath.attr("d", lineGenerator.x(d => detailXScale(d.date)));
    detailXAxis.call(d3.axisBottom(detailXScale));
  });

overviewSvg.append("g").call(brushOverview)
  .call(brushOverview.move, overviewXScale.range());