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

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

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

• 모달 바텀시트

  Modal Bottom Sheet

  배경과의 상호작용을 차단하는 하단 시트.

• 지속형 바텀시트

  Persistent Bottom Sheet

  배경 콘텐츠와 함께 유지되는 하단 패널.

• 드로어

  Drawer

  화면 측면에서 열리는 내비게이션 또는 콘텐츠 패널.

• 사이드 시트

  Side Sheet

  현재 화면 옆에 펼쳐지는 상세 정보·편집 패널.

• 팝오버

  Popover

  관련 요소 가까이에 띄우는 작은 정보·입력·액션 패널.

• 툴팁

  Tooltip

  마우스 오버나 키보드 포커스 등에 나타나는 짧은 설명.

• 토글팁

  Toggletip

  클릭 등 명시적 동작으로 여닫는 짧은 도움말 패널.

• 컨텍스트 메뉴

  Context Menu

  우클릭·길게 누르기 등으로 현재 항목의 동작을 표시.

• 드롭다운 메뉴

  Dropdown Menu

  선택한 버튼에서 펼쳐지는 명령 목록.

• 액션 시트

  Action Sheet

  모바일에서 관련 명령을 묶어 제시하는 시트.

• 라이트박스

  Lightbox

  이미지·동영상 등을 배경 위에 확대 표시.

• 스크림·백드롭

  Scrim / Backdrop

  대화상자 뒤 배경을 어둡게 만드는 반투명 레이어.

• 오버레이

  Overlay

  원래 화면 위에 일시적으로 올리는 UI 레이어의 통칭.

• 명령 팔레트

  Command Palette

  검색으로 애플리케이션 명령을 탐색·실행하는 패널.

• 주요 버튼

  Primary Button

  화면의 가장 중요한 실행 동작을 강조하는 버튼.

• 보조 버튼

  Secondary Button

  주요 행동을 지원하는 두 번째 우선순위 버튼.

• 3차 버튼

  Tertiary Button

  시각적 강조가 낮은 부가 실행 버튼.

• 고스트 버튼

  Ghost Button

  채움 배경 없이 텍스트·아이콘 중심으로 표현한 버튼.

• 아웃라인 버튼

  Outlined Button

  테두리로 버튼 영역을 나타내는 스타일.

• 텍스트 버튼

  Text Button

  버튼의 배경·테두리를 최소화하고 텍스트로 실행.

• 아이콘 버튼

  Icon Button

  아이콘을 주요 내용으로 사용하는 조작 가능한 버튼.

• 플로팅 액션 버튼

  Floating Action Button (FAB)

  화면 위에 떠 있는 형태로 핵심 생성 동작 등을 강조.

• 분할 버튼

  Split Button

  기본 실행 동작과 추가 옵션 메뉴를 분리한 버튼.

• 메뉴 버튼

  Menu Button

  클릭 시 명령 목록을 여는 버튼.

• 버튼 그룹

  Button Group

  관련 행동을 나란히 묶은 컨트롤 그룹.

• 세그먼트 버튼

  Segmented Button

  서로 관련된 선택지를 분절된 버튼 형태로 표현.

• 토글 버튼

  Toggle Button

  누름·해제 상태를 유지하며 설정이나 모드를 전환.

• 파괴적 버튼

  Destructive Button

  삭제·영구 제거 등 되돌리기 어려운 동작을 실행.

• 비활성 버튼

  Disabled Button

  조건 미충족 등의 이유로 실행할 수 없는 버튼.

• 고정형 CTA

  Sticky CTA

  스크롤 중에도 화면 가장자리에 유지되는 행동 유도 버튼.

• 더보기 버튼

  Overflow Button

  화면에 드러내지 않은 나머지 명령을 메뉴로 제공.

• 맨 위로 이동 버튼

  Back-to-top Button

  긴 화면의 상단으로 빠르게 복귀시키는 버튼.

• 텍스트 필드

  Text Field

  한 줄의 문자·숫자 등을 입력받는 컨트롤.

• 텍스트 영역

  Text Area

  여러 줄의 긴 문장을 입력받는 필드.

• 비밀번호 필드

  Password Field

  비밀 문자를 가려 표시하는 입력 필드.

• 검색 필드

  Search Field

  검색어 입력에 맞춰 설계된 입력 컨트롤.

• 입력 레이블

  Label

  입력 항목의 의미를 명시하는 텍스트.

• 플레이스홀더

  Placeholder

  아직 입력되지 않은 필드 안에 보이는 예시 문구.

• 도움말 텍스트

  Helper Text

  입력 규칙·형식·보조 설명을 안내하는 텍스트.

• 인라인 오류

  Inline Error

  문제가 있는 필드 인근에 나타나는 구체적 오류 설명.

• 필드 유효성 검증

  Field Validation

  개별 입력값이 규칙을 충족하는지 확인.

• 실시간 검증

  Real-time Validation

  입력 과정 중 적절한 시점에 규칙 충족을 확인.

• 폼 수준 검증

  Form-level Validation

  제출 시 여러 입력값을 종합 검증.

• 오류 요약

  Error Summary

  폼의 모든 오류를 상단 등 한곳에 모아 제공.

• 필수 입력 표시

  Required Field Indicator

  필수 입력 항목을 별표·텍스트 등으로 나타냄.

• 글자 수 카운터

  Character Counter

  입력한 문자 수 또는 남은 허용 글자 수를 표시.

• 입력 마스크

  Input Mask

  전화번호·날짜 등의 입력 형식을 제한·안내.

• 입력 접두·접미

  Input Prefix / Suffix

  원·%·URL 등 단위나 고정 기호를 필드 앞뒤에 표시.

• 자동완성

  Autocomplete

  입력 중 예상 값을 제안하거나 완성.

• 자동 제안

  Autosuggest

  입력어에 연관된 검색어·항목을 제안.

• 일회용 코드 입력

  OTP Input

  인증번호처럼 정해진 자리수의 코드를 입력.

• 숫자 입력 필드

  Number Input

  숫자값을 입력하고 경우에 따라 증감 조작 제공.

• 날짜 선택기

  Date Picker

  달력 등의 UI에서 날짜를 선택.

• 시간 선택기

  Time Picker

  시각을 선택할 수 있는 입력 도구.

• 날짜 범위 선택기

  Date Range Picker

  시작일과 종료일을 함께 선택.

• 파일 업로더

  File Uploader

  파일을 선택하고 전송 상태를 관리하는 입력 컴포넌트.

• 드래그 업로드 영역

  Drag-and-drop Upload Zone

  파일을 끌어 놓아 추가하는 영역.

• 리치 텍스트 에디터

  Rich Text Editor

  서식이 포함된 텍스트를 편집하는 입력기.

• 폼 마법사

  Form Wizard

  복잡한 입력을 여러 단계로 나누어 안내하는 흐름.

• 체크박스

  Checkbox

  여러 항목을 독립적으로 선택하는 컨트롤.

• 라디오 버튼

  Radio Button

  하나의 그룹에서 하나만 선택하는 컨트롤.

• 스위치

  Switch / Toggle Switch

  설정의 켜짐·꺼짐 상태를 즉시 전환.

• 선택 목록

  Select

  정해진 옵션 중 하나를 선택하는 입력 컨트롤.

• 콤보박스

  Combobox

  입력 또는 선택과 팝업 옵션 목록을 결합한 컨트롤.

• 다중 선택

  Multi-select

  여러 개의 값을 동시에 선택할 수 있는 방식.

• 칩

  Chip

  작은 캡슐형 요소로 선택·입력·필터·동작을 표현.

• 필터 칩

  Filter Chip

  필터 조건의 적용·해제를 빠르게 전환.

• 입력 칩

  Input Chip

  선택된 키워드·수신자 등 사용자가 입력한 개별 값을 표시.

• 선택 칩

  Choice Chip

  짧은 후보 중 원하는 값을 선택.

• 태그

  Tag

  콘텐츠의 분류·속성을 간결하게 표시.

• 슬라이더

  Slider

  연속 범위의 숫자값을 드래그해 조정.

• 범위 슬라이더

  Range Slider

  최솟값과 최댓값을 함께 지정하는 컨트롤.

• 평점 선택기

  Rating Control

  별 등급 등의 평가값을 입력.

• 색상 선택기

  Color Picker

  팔레트·스펙트럼에서 색상을 지정.

• 트리 선택기

  Tree Select

  계층 구조에 있는 항목을 선택.

• 이동 목록

  Transfer List

  미선택·선택 목록 사이에서 항목을 옮기는 UI.

• 이중 목록 상자

  Dual Listbox

  두 목록 간 항목 선택·이동을 제공하는 컨트롤.

• 선택 도구 모음

  Selection Toolbar

  여러 항목 선택 시 삭제·내보내기 등 일괄 작업 제공.

• 상단 앱 바

  Top App Bar

  제목·뒤로가기·주요 명령이 놓이는 상단 영역.

• 내비게이션 바

  Navigation Bar

  앱이나 사이트의 주요 이동 경로를 제공하는 영역.