디자인 레퍼런스 전체 색인 · 27/27

2,153개 정의·활용·주의사항·출처를 개별 문서로 제공합니다. 이 색인은 JavaScript 없이 탐색할 수 있습니다.

직접 조작 가능한 레퍼런스 291개 보기

• 혼합 차트

  Combo Chart

  막대와 선 등 서로 다른 표식을 하나의 좌표계에 결합합니다.

• 캔들스틱 차트

  Candlestick Chart

  기간의 시가·고가·저가·종가를 몸통과 심지로 표현합니다.

• OHLC 차트

  OHLC Chart

  수직 범위선과 좌우 눈금으로 시가·고가·저가·종가를 표시합니다.

• 간트 차트

  Gantt Chart

  작업별 시작과 종료 시점을 시간축 위의 가로 막대로 표시합니다.

• 이벤트 타임라인

  Event Timeline

  시간축에 사건의 시점과 내용을 표시합니다.

• 히스토그램

  Histogram

  연속 수치를 구간으로 나누고 구간별 관측 빈도를 표시합니다.

• 상자수염 그림

  Box Plot

  중앙값과 사분위 범위, 수염, 이상치를 요약합니다.

• 바이올린 플롯

  Violin Plot

  추정 분포 밀도를 좌우 폭으로 나타내는 대칭 도형입니다.

• 밀도 곡선

  Density Plot

  수치 분포의 추정 확률 밀도를 연속 곡선으로 보여줍니다.

• 경험적 누적분포

  ECDF Plot

  어떤 값 이하인 관측치의 비율을 누적해서 표시합니다.

• 스트립 플롯

  Strip Plot

  개별 관측치를 한 수치축 위에 점으로 배치합니다.

• 비스웜 플롯

  Beeswarm Plot

  수치 위치는 유지하면서 점이 겹치지 않도록 옆으로 분산합니다.

• 리지라인 플롯

  Ridgeline Plot

  여러 그룹의 분포 곡선을 세로로 겹쳐 비교합니다.

• 오차 막대 차트

  Error Bar Chart

  점 추정치 주변에 불확실성 구간을 선으로 표시합니다.

• 신뢰구간 밴드

  Confidence Band

  추정 선 주변에 불확실성 범위를 띠로 보여줍니다.

• 버블 차트

  Bubble Chart

  산점도의 점 면적에 세 번째 변수의 크기를 추가합니다.

• 연결 산점도

  Connected Scatterplot

  두 변수의 관측 위치를 시간 순서로 연결합니다.

• 상관행렬

  Correlation Matrix

  변수 쌍의 상관계수를 대칭 행렬로 보여줍니다.

• 산점도 행렬

  Scatterplot Matrix

  변수의 모든 조합을 작은 산점도로 나눠 배치합니다.

• 평행좌표

  Parallel Coordinates

  각 변수를 평행축으로 배치하고 한 관측치를 여러 축을 잇는 선으로 표시합니다.

• 레이더 차트

  Radar Chart

  여러 지표를 방사형 축에 배치하고 값을 다각형으로 연결합니다.

• 와플 차트

  Waffle Chart

  같은 크기의 격자 셀을 채워 전체 대비 비율을 보여줍니다.

• 선버스트 차트

  Sunburst Chart

  계층의 깊이를 동심 고리로, 구성비를 각도로 표시합니다.

• 아이시클 차트

  Icicle Chart

  계층 깊이에 따라 사각형 띠를 층층이 쌓습니다.

• 원 패킹

  Circle Packing

  계층의 포함 관계를 중첩된 원으로 표현합니다.

• 생키 다이어그램

  Sankey Diagram

  노드 사이를 이동하는 양을 흐름 띠의 폭으로 나타냅니다.

• 앨루비얼 다이어그램

  Alluvial Diagram

  여러 범주 단계 사이에서 집단이 분할·결합되는 흐름을 보여줍니다.

• 코드 다이어그램

  Chord Diagram

  원 둘레의 그룹 사이 관계 크기를 내부 연결 띠로 표현합니다.

• 네트워크 그래프

  Network Graph

  대상은 노드로, 관계는 연결선으로 표현합니다.

• 노드 링크 트리

  Node-link Tree

  루트에서 자식으로 이어지는 계층을 연결선으로 보여줍니다.

• 캘린더 히트맵

  Calendar Heatmap

  달력의 날짜 셀에 값의 크기를 색으로 표시합니다.

• 코호트 리텐션 히트맵

  Cohort Retention Heatmap

  같은 시기에 유입된 집단의 경과 기간별 유지율을 보여줍니다.

• 2차원 히스토그램

  2D Histogram

  두 수치축을 구간화하고 각 격자의 관측 빈도를 보여줍니다.

• 헥스빈 플롯

  Hexbin Plot

  수치 평면을 육각형 구간으로 나눠 관측 밀도를 집계합니다.

• 목표 대비 실적

  Target vs Actual

  설정한 목표와 현재 실적을 같은 척도에서 비교합니다.

• 스몰 멀티플

  Small Multiples

  같은 형태의 작은 차트를 그룹마다 반복해 비교합니다.

• 벤치마크 기준선

  Benchmark Line

  목표·평균·기준값을 차트 위에 참조선으로 표시합니다.

• 이상치 주석

  Anomaly Annotation

  추세에서 벗어난 관측값에 설명과 근거를 붙입니다.

• 데이터 최신성 표시

  Data Freshness Indicator

  마지막 수집·갱신 시점을 표시해 데이터의 시의성을 알립니다.

• 차트 빈 상태

  Empty Chart State

  조회 조건에 맞는 데이터가 없음을 차트 영역 안에서 설명합니다.

• 오래된 데이터 상태

  Stale Data State

  갱신 실패나 지연 시 마지막 성공 데이터를 경고와 함께 유지합니다.

• 인터랙티브 범례

  Interactive Legend

  범례에서 계열을 강조하거나 표시·숨김할 수 있게 합니다.

• 십자선 커서

  Crosshair Cursor

  같은 좌표를 따라 수평·수직 기준선을 표시합니다.

• 브러시 선택

  Brushing

  차트 위에 영역을 그려 범위 안의 관측값을 선택합니다.

• 연결 강조

  Linked Highlighting

  한 차트의 선택 대상을 다른 차트에서도 강조합니다.

• 드릴스루

  Drill-through

  선택한 대상의 조건을 유지하며 별도 상세 보고서로 이동합니다.

• 포커스와 컨텍스트

  Focus + Context

  확대한 상세 차트와 전체 범위의 축소 뷰를 함께 표시합니다.

• 지표 선택기

  Metric Selector

  차트에 사용할 수치 지표를 변경하는 컨트롤입니다.

• 차원 선택기

  Dimension Selector

  국가·채널·상품처럼 데이터를 나누는 기준을 바꿉니다.

• 집계 선택기

  Aggregation Selector

  합계·평균·중앙값 등 값의 요약 방식을 선택합니다.

• 비교 기간 전환

  Comparison Period Toggle

  직전 기간·전년 동기 등 비교 기준을 바꿉니다.

• 차트 유형 전환기

  Chart Type Switcher

  같은 데이터에 적합한 여러 시각화 형태를 전환합니다.

• 차트 데이터 표

  Chart Data Table

  시각화에 쓰인 수치를 표로 확인할 수 있게 합니다.

• 피벗 테이블

  Pivot Table

  행·열 차원을 교차해 집계값을 계산하는 요약 표입니다.

• 조건부 서식

  Conditional Formatting

  값이나 규칙에 따라 셀의 배경·막대·아이콘을 달리합니다.

• 직접 레이블

  Direct Labeling

  계열 이름을 범례가 아닌 표식 가까이에 표시합니다.

• 색각 다양성 대응 차트

  Color-safe Chart

  색 외에 선 종류·기호·텍스트를 함께 써 계열을 구분합니다.

• 결측값 간격

  Missing Data Gap

  관측이 없는 구간을 선의 끊김이나 별도 표식으로 표현합니다.

• 0 기준선

  Zero Baseline

  길이로 값을 인코딩하는 차트에서 0의 위치를 분명하게 표시합니다.

• 로그 척도

  Logarithmic Scale

  같은 비율 변화가 같은 거리를 갖도록 축을 배치합니다.

• 데이터 불확실성 표시

  Data Uncertainty Display

  점 추정치만이 아니라 범위·표본수·품질 정보도 함께 보여줍니다.

• 요청 취소 컨트롤러

  AbortController

  AbortSignal을 통해 지원되는 비동기 작업의 취소 의사를 전달하는 브라우저 API입니다.

• 요청 응답 순서 경합

  Request Race Condition

  비동기 응답 도착 순서가 요청 순서와 달라 오래된 응답이 최신 화면을 덮는 문제입니다. 요청 번호 비교나 취소로 방지할 수 있습니다.

• 입력기 조합 중 전송 방지

  IME Composition Guard

  한글·일본어 등 입력기 조합 중인 Enter를 제출로 처리하지 않도록 조합 이벤트와 isComposing을 확인하는 입력 처리 패턴입니다.

• 이동식 탭 인덱스

  Roving tabindex

  복합 위젯 안에서 한 요소만 tabindex=0으로 두고 방향키 이동 시 탭 진입점을 옮기는 포커스 관리 방식입니다.

• 영역 업데이트 중 상태

  aria-busy

  요소가 업데이트 중임을 보조기술에 알리고 여러 변경이 끝난 뒤 내용을 제공하도록 돕는 WAI-ARIA 상태입니다.

• 이벤트 위임

  Event Delegation

  자식별 리스너 대신 상위 요소에서 버블링 이벤트를 받아 대상 요소를 판별해 처리하는 패턴입니다.

• URL 검색 매개변수 상태

  URLSearchParams State

  URLSearchParams로 검색·필터 상태를 쿼리 문자열로 직렬화하고 다시 복원하는 방식입니다.

• 읽기 스트림 배압

  ReadableStream Backpressure

  소비 속도에 맞춰 생산 속도를 조절하도록 큐의 여유량과 pull 요청을 사용하는 스트림 흐름 제어입니다.

• 병렬 작업의 전체 결과 수집

  Promise.allSettled()

  여러 Promise가 모두 이행 또는 거부될 때까지 기다린 뒤 입력 순서대로 각 결과를 제공하는 메서드입니다.

• DOM 변경 관찰자

  MutationObserver

  설정한 DOM 하위 노드·속성·문자 데이터의 변경을 비동기 콜백으로 관찰하는 API입니다.

• 요소 크기 관찰자

  ResizeObserver

  관찰 대상 요소의 콘텐츠·테두리 박스 등 크기 변화를 전달하는 API입니다.

• 교차 영역 관찰자

  IntersectionObserver

  대상 요소와 스크롤 컨테이너 또는 뷰포트가 교차하는 비율의 변화를 비동기로 관찰하는 API입니다.