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

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

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

• 트리맵

  Treemap

  계층 구조의 값을 중첩된 사각형의 면적으로 표현합니다.

• 퍼널 차트

  Funnel Chart

  연속 단계의 사용자 수나 건수를 폭으로 비교합니다.

• 워터폴 차트

  Waterfall Chart

  시작값에서 양수·음수 변화를 누적해 최종값에 도달하는 과정을 표시합니다.

• 게이지

  Gauge

  값이 척도나 목표 구간의 어디에 있는지 바늘이나 호로 표시합니다.

• 차트 툴팁

  Data Tooltip

  표식에 포인터나 포커스를 두었을 때 관측값과 단위를 표시합니다.

• 드릴다운

  Drill-down

  요약 그룹을 선택해 같은 계층의 더 자세한 수준으로 내려갑니다.

• 교차 필터링

  Cross-filtering

  한 시각화의 선택을 다른 시각화의 조회 조건에 반영합니다.

• 전역 검색

  Global Search

  제품 전체 콘텐츠와 리소스를 검색.

• 영역 검색

  Local Search

  현재 화면·목록·폴더 등 한정된 범위에서 검색.

• 검색 자동완성

  Search Autocomplete

  입력 중 검색어의 완성형이나 관련 검색어를 제시.

• 타이프어헤드

  Typeahead

  입력할수록 후보를 즉시 좁혀 보여주는 패턴.

• 최근 검색어

  Recent Searches

  사용자가 전에 조회한 검색어 목록.

• 검색 기록

  Search History

  검색 수행 내역을 보관·재사용할 수 있게 제공.

• 패싯 검색

  Faceted Search

  브랜드·가격·등급 등 여러 속성을 조합해 결과를 좁힘.

• 필터 패널

  Filter Panel

  검색·목록에 적용할 조건을 묶어 제공.

• 필터 드로어

  Filter Drawer

  별도 측면 패널로 검색 필터 제공.

• 정렬 메뉴

  Sort Menu

  최신순·가격순·인기순 등 결과 정렬 기준 선택.

• 검색 제안

  Search Suggestions

  검색창에서 연관 키워드·대상 항목을 추천.

• 검색어 강조

  Search Highlight

  검색 결과 본문에서 일치 부분을 강조.

• 검색 결과 없음 상태

  No Results State

  검색 조건에 맞는 항목이 없음을 안내.

• 저장된 필터

  Saved Filter

  자주 사용하는 검색 조건을 저장·재적용.

• 필터 프리셋

  Filter Preset

  미리 정의된 조건 묶음을 빠르게 적용.

• 쿼리 빌더

  Query Builder

  필드·연산자·값을 조합해 복잡한 조건을 구성.

• 온보딩 흐름

  Onboarding Flow

  첫 사용자가 제품의 핵심 기능을 이해하도록 안내.

• 제품 투어

  Product Tour

  화면을 순회하며 주요 기능을 소개.

• 코치마크

  Coach Mark

  특정 컨트롤을 가리키고 수행 방법을 설명.

• 스포트라이트

  Spotlight

  강조할 UI만 밝게 남기고 주변을 어둡게 처리.

• 단계별 가이드

  Guided Tour

  사용자가 순서를 따라 기능을 학습하도록 구성.

• 워크스루

  Walkthrough

  작업 시나리오를 단계별로 시연하거나 안내.

• 상호작용 튜토리얼

  Interactive Tutorial

  실제 클릭·입력을 통해 기능을 학습.

• 기능 발견

  Feature Discovery

  잘 알려지지 않은 기능을 맥락에 맞게 노출.

• 신기능 안내

  Feature Announcement

  새 기능 출시·변경 사항을 설명.

• 새로운 기능 안내

  What's New

  업데이트 후 바뀐 기능을 모아 보여줌.

• 문맥 도움말

  Contextual Help

  현재 작업 위치에 필요한 설명을 제시.

• 빈 화면 온보딩

  Empty-state Onboarding

  데이터 없는 초기 화면에서 첫 동작을 안내.

• 체크리스트 온보딩

  Checklist Onboarding

  설정 완료에 필요한 작업을 목록으로 제시.

• 점진적 공개

  Progressive Disclosure

  현재 필요한 정보만 보이고 고급 옵션은 뒤에 제공.

• 호버 상태

  Hover State

  포인터가 요소 위에 위치한 상태.

• 포커스 상태

  Focus State

  키보드 등 입력을 현재 받을 대상으로 지정된 상태.

• 눌림 상태

  Pressed State

  버튼을 누르는 중이거나 토글 버튼이 눌린 상태를 나타낸다.

• 활성화 상태

  Active State

  현재 실행·활성 항목을 뜻하는 일반 표현이나 CSS의 작동 중 상태.

• 선택 상태

  Selected State

  목록·탭 등에서 현재 선택된 항목인 상태.

• 드래그 앤 드롭

  Drag and Drop

  대상을 잡아 이동하고 특정 위치에 놓는 방식.

• 스와이프 제스처

  Swipe Gesture

  손가락을 밀어 화면·항목을 이동하거나 동작 실행.

• 길게 누르기

  Long Press

  손가락을 일정 시간 유지해 추가 동작 호출.

• 두 번 탭

  Double Tap

  화면 요소를 빠르게 두 번 터치하는 제스처.

• 핀치 확대·축소

  Pinch to Zoom

  두 손가락 간 거리를 바꿔 화면을 확대·축소.

• 당겨서 새로고침

  Pull to Refresh

  목록을 아래로 당겨 새 데이터를 요청.

• 밀어서 닫기

  Swipe to Dismiss

  알림·카드·패널을 밀어 제거.

• 스와이프 액션

  Swipe Actions

  목록 항목을 밀어 삭제·보관 등 동작 노출.

• 재정렬 목록

  Reorderable List

  드래그로 항목 순서를 변경.

• 드래그 정렬

  Sort by Dragging

  끌어 놓기 방식으로 순서를 지정.

• 키보드 단축키

  Keyboard Shortcut

  키 조합으로 명령을 빠르게 실행.

• 문맥 동작

  Contextual Actions

  현재 선택한 대상과 관련된 명령만 표시.

• 마이크로인터랙션

  Microinteraction

  하나의 작은 과업·상태 변화에 대한 제한된 상호작용과 피드백.

• 호버 시 노출

  Hover Reveal

  마우스 오버 때 숨겨진 보조 액션을 표시.

• 실행 취소·다시 실행

  Undo / Redo

  이전 변경을 되돌리거나 재적용.

• 확인 패턴

  Confirmation Pattern

  위험한 명령 실행 전에 재확인하는 흐름.

• 디바운스

  Debounce

  연속 입력 뒤 일정 시간 지나 마지막 작업만 처리하는 전략.

• 스로틀

  Throttle

  짧은 시간에 반복되는 작업의 최대 실행 빈도를 제한하는 처리.

• 트랜지션·전환

  Transition

  한 상태에서 다른 상태로 넘어가는 변화 과정.

• 등장 애니메이션

  Entrance Animation

  요소가 나타날 때의 모션.

• 퇴장 애니메이션

  Exit Animation

  요소가 사라질 때의 모션.

• 페이드 인·아웃

  Fade In / Out

  불투명도를 변경해 나타나거나 사라짐.

• 슬라이드 인·아웃

  Slide In / Out

  화면 안팎으로 미끄러져 이동.

• 스케일 애니메이션

  Scale Animation

  요소의 크기 비율을 시간에 따라 바꾸는 표현.

• 스프링 애니메이션

  Spring Animation

  질량·강성·감쇠 등 스프링 모델을 이용한 움직임.

• 이징

  Easing

  진행률에 따라 값의 변화 속도를 조절하는 방식.

• 가속·감속 이징

  Ease-in / Ease-out

  시작이나 종료 구간에 속도 변화를 부여.

• 시간차 애니메이션

  Staggered Animation

  요소별 시작 시간을 조금씩 어긋나게 하는 방식.

• 공유 요소 전환

  Shared Element Transition

  두 화면에서 동일한 대상을 연결해 위치·크기가 이어지는 것처럼 표현하는 전환.

• 모핑

  Morphing

  한 형태를 다른 형태로 연속 변형하는 표현.

• 패럴랙스

  Parallax

  서로 다른 요소가 다른 속도로 이동해 깊이를 느끼게 하는 표현.

• 스크롤 트리거 애니메이션

  Scroll-triggered Animation

  특정 스크롤 위치에 도달하면 재생을 시작하는 방식.

• 로티 애니메이션

  Lottie Animation

  벡터 기반 JSON 애니메이션을 UI에 표시하는 방식.

• 라이브 애니메이션

  Rive Animation

  상태 기계와 연동하는 실시간 인터랙티브 애니메이션.

• 블러 효과

  Blur Effect

  요소를 흐리게 처리해 시각적 초점을 조정.

• 배경 블러

  Backdrop Blur

  반투명 전경 뒤쪽 콘텐츠를 흐리게 처리.

• 글래스모피즘

  Glassmorphism

  반투명·배경 흐림·하이라이트로 유리 질감을 표현.

• 뉴모피즘

  Neumorphism

  낮은 대비의 입체 그림자로 표면 돌출·함몰을 표현.