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

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

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

• 하단 내비게이션

  Bottom Navigation

  모바일 화면 아래에 주요 목적지들을 표시.

• 탭 바

  Tab Bar

  관련 목적지나 뷰를 탭으로 전환하는 UI.

• 탭

  Tabs

  동일 맥락의 콘텐츠 패널들을 전환.

• 내비게이션 레일

  Navigation Rail

  중간 폭 화면에 적합한 좁은 세로 이동 영역.

• 내비게이션 드로어

  Navigation Drawer

  접히거나 펼쳐지는 측면 탐색 메뉴.

• 사이드바

  Sidebar

  화면 옆에 유지되는 탐색·도구·정보 영역.

• 브레드크럼

  Breadcrumb

  상위 페이지에서 현재 위치까지의 경로를 표시.

• 페이지네이션

  Pagination

  여러 페이지의 목록을 번호로 나눠 탐색.

• 무한 스크롤

  Infinite Scroll

  스크롤할수록 다음 콘텐츠를 자동 추가.

• 더 보기

  Load More

  명시적 버튼을 누를 때 콘텐츠를 추가.

• 앵커 내비게이션

  Anchor Navigation

  같은 페이지의 특정 제목이나 섹션으로 이동하는 탐색 방식.

• 목차

  Table of Contents (TOC)

  긴 문서의 섹션 구조와 바로가기 제공.

• 메가 메뉴

  Mega Menu

  여러 계층의 목적지를 넓은 패널에 정리.

• 햄버거 메뉴

  Hamburger Menu

  세 줄 아이콘으로 주요 메뉴를 숨겨 제공.

• 오버플로 메뉴

  Overflow Menu

  공간 부족으로 노출하지 않은 동작을 담은 메뉴.

• 트리 뷰

  Tree View

  폴더·조직도 같은 계층 구조를 확장·축소.

• 아코디언 내비게이션

  Accordion Navigation

  탐색 카테고리를 접고 펼치는 메뉴.

• 페이지 헤더

  Page Header

  화면 제목과 주요 설명·액션을 담는 상단 영역.

• 뒤로 이동

  Back Navigation

  이전 탐색 맥락이나 화면으로 돌아가는 동작.

• 딥 링크

  Deep Link

  앱의 특정 화면·상태를 바로 여는 주소.

• 카드

  Card

  하나의 주제·항목·행동을 묶어 표시하는 컨테이너.

• 타일

  Tile

  그리드 안에서 콘텐츠·지표를 담는 독립 영역.

• 패널

  Panel

  관련 정보나 컨트롤을 묶는 영역.

• 섹션

  Section

  하나의 주제 아래 정보와 UI를 조직한 구획.

• 컨테이너

  Container

  콘텐츠 너비와 배치를 제한하는 구조 단위.

• 그리드 레이아웃

  Grid Layout

  행·열을 기준으로 요소를 정렬하는 방식.

• 열 레이아웃

  Column Layout

  콘텐츠를 세로 열 단위로 배치.

• 메이슨리 레이아웃

  Masonry Layout

  높이가 서로 다른 항목을 벽돌처럼 촘촘히 배치.

• 스택 레이아웃

  Stack Layout

  요소를 수직이나 수평으로 일정 간격 쌓아 배치.

• 분할 보기

  Split View

  화면을 둘 이상 영역으로 나눠 동시에 표시.

• 마스터·상세 보기

  Master-detail View

  목록과 선택 항목의 상세 정보를 함께 표시.

• 크기 조절 패널

  Resizable Panel

  경계선을 움직여 패널 너비·높이를 조정.

• 구분선

  Divider / Separator

  콘텐츠·컨트롤 그룹을 시각적으로 분리.

• 간격 요소

  Spacer

  컴포넌트 사이의 빈 공간을 유지.

• 아코디언

  Accordion

  제목을 선택해 관련 내용을 접거나 펼침.

• 디스클로저

  Disclosure

  추가 정보·하위 내용을 필요할 때 확장.

• 캐러셀

  Carousel

  여러 항목을 좌우 또는 자동 전환하여 표시.

• 가로 스크롤 목록

  Horizontal Scroller

  가로 방향으로 여러 카드·미디어를 탐색.

• 고정 헤더

  Sticky Header

  스크롤해도 화면 상단에 남는 헤더.

• 고정 섹션

  Sticky Section

  특정 위치에서 스크롤 중 영역이 고정되는 패턴.

• 푸터

  Footer

  페이지 맨 아래의 보조 탐색·정책·정보 영역.

• 아바타

  Avatar

  사람·팀·에이전트의 프로필을 이미지나 이니셜로 표현.

• 아바타 그룹

  Avatar Group

  여러 사용자 프로필을 겹치거나 나란히 표시.

• 썸네일

  Thumbnail

  원본 미디어를 대표하는 작은 미리보기 이미지.

• 이미지 갤러리

  Image Gallery

  여러 이미지를 하나의 탐색 묶음으로 표시.

• 이미지 뷰어

  Image Viewer

  확대·이동·회전 등의 이미지 보기 기능.

• 동영상 플레이어

  Video Player

  재생·일시정지·탐색 등을 제공하는 미디어 UI.

• 오디오 플레이어

  Audio Player

  재생 위치·음량 등을 조절하는 오디오 UI.

• 미디어 컨트롤

  Media Controls

  재생·탐색·소리 등을 제어하는 공통 조작 모음.

• 자막

  Caption / Subtitle

  미디어의 음성·설명을 화면에 텍스트로 제공.

• 대본·전사문

  Transcript

  오디오·영상 내용을 시간 순서의 텍스트로 제공.

• 콘텐츠 미리보기

  Content Preview

  파일·문서·미디어를 열기 전 주요 내용을 보여줌.

• 더 읽기·축약

  Read More / Truncation

  긴 콘텐츠를 일부만 노출하고 확장하도록 함.

• 말줄임

  Ellipsis

  폭을 넘는 텍스트를 …으로 잘라 표시.

• 리치 콘텐츠 카드

  Rich Content Card

  제목·이미지·설명·액션을 함께 담은 카드.

• 미디어 오브젝트

  Media Object

  이미지 옆에 텍스트를 배치하는 반복 패턴.

• 히어로 섹션

  Hero Section

  페이지 초반에서 핵심 가치·이미지·주요 행동을 강조하는 큰 영역.

• 타임라인

  Timeline

  시간 순서의 이벤트·이력을 선 또는 목록으로 표시.

• 활동 피드

  Activity Feed

  사용자·시스템의 최신 활동을 연속 목록으로 표시.

• 데이터 테이블

  Data Table

  행과 열로 값을 읽고 비교하는 표입니다.

• 데이터 그리드

  Data Grid

  정렬·선택·편집 등 셀 중심 상호작용을 제공하는 데이터 표입니다.

• 트리 그리드

  Treegrid

  계층형 행을 펼치고 접을 수 있는 다열 데이터 구조입니다.

• 정렬 가능한 열

  Sortable Column

  열의 값에 따라 행 순서를 바꾸는 표 머리글입니다.

• 열 너비 조절

  Resizable Column

  머리글 경계를 끌어 열의 너비를 바꿉니다.

• 고정 열

  Sticky Column

  가로 스크롤 중 특정 열을 화면에 남겨둡니다.

• 고정 표 머리글

  Frozen Header

  세로 스크롤 중 열 제목을 계속 표시합니다.

• 행 선택

  Row Selection

  행을 선택해 상세 확인이나 일괄 작업의 대상을 정합니다.

• 인라인 편집

  Inline Editing

  별도 화면 없이 셀이나 항목 안에서 값을 수정합니다.

• 일괄 작업

  Bulk Actions

  선택된 여러 행에 같은 동작을 적용합니다.

• KPI 카드

  KPI Card

  핵심 지표의 값과 목표·비교 기준을 짧게 요약합니다.

• 통계 카드

  Stat Card

  단일 통계값과 단위를 간결하게 표시합니다.

• 스파크라인

  Sparkline

  표나 지표 옆에 넣는 아주 작은 추세선입니다.

• 선 차트

  Line Chart

  순서가 있는 관측값을 선으로 이어 변화 추세를 보여줍니다.

• 막대 차트

  Bar Chart

  범주별 값을 공통 기준선에서 시작하는 막대의 길이로 비교합니다.

• 누적 막대 차트

  Stacked Bar Chart

  세부 계열을 쌓아 범주별 합계와 구성을 함께 보여줍니다.

• 영역 차트

  Area Chart

  선 아래를 기준선까지 채워 추세와 크기를 강조합니다.

• 파이 차트

  Pie Chart

  전체에 대한 구성비를 원의 부채꼴 각도로 나타냅니다.

• 도넛 차트

  Donut Chart

  파이의 중앙을 비워 전체의 구성비를 고리로 나타냅니다.

• 산점도

  Scatter Plot

  관측치마다 두 수치 변수의 값을 가로·세로 위치에 대응시킵니다.

• 히트맵

  Heatmap

  두 차원의 셀마다 값을 색 강도로 표시합니다.