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

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

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

• 호버 리프트 카드

  Hover Lift Card

  호버 또는 키보드 포커스에서 요소가 위로 이동하고 그림자가 깊어집니다.

• 호버 투명도 페이드

  Hover Opacity Fade

  호버·포커스·탭에 반응해 불투명도를 전환합니다.

• 호버 정보 펼침

  Hover Reveal Panel

  호버와 포커스에서 보조 설명을 펼치며 터치에서는 탭으로 전환합니다.

• 링크 밑줄 드로잉

  Animated Link Underline

  호버와 포커스에서 밑줄이 왼쪽부터 확장됩니다.

• 포인터 스포트라이트

  Pointer Spotlight Surface

  표면 안의 포인터 좌표를 따라 방사형 조명이 이동합니다.

• 포인터 반응형 테두리 발광

  Pointer Reactive Border Glow

  포인터 위치에 따라 테두리 주변 발광의 방향이 달라집니다.

• 마그네틱 버튼

  Magnetic Button

  버튼이 포인터 방향으로 제한된 거리만 이동하고 이탈하면 복귀합니다.

• 지연형 포인터 추종

  Eased Pointer Follower

  보간 지연이 있는 원형 요소가 포인터를 따라갑니다. 시스템 커서는 유지합니다.

• 포인터 잔상 트레일

  Pointer Trail Dots

  포인터 경로에 짧은 수명의 점을 생성하고 종료된 점은 제거합니다.

• 포인터 레이어 패럴랙스

  Pointer Layer Parallax

  평면 레이어마다 다른 이동 비율을 주어 상대적인 깊이를 표현합니다.

• 클릭 원점 리플

  Click Origin Ripple

  누른 좌표에서 파문이 퍼집니다. 키보드 실행은 버튼 중심에서 시작합니다.

• 클릭 컨페티 버스트

  Click Confetti Burst

  클릭으로 여러 색의 조각을 방출하고 애니메이션 종료 후 제거합니다.

• 클릭 팝 피드백

  Click Pop Feedback

  클릭마다 확대·축소 반동을 한 번 재생하여 실행을 피드백합니다.

• 방사형 클릭 버스트

  Radial Click Burst

  클릭하면 입자가 일정한 각도 간격으로 퍼집니다.

• 눌림 깊이 버튼

  Pressed Button Depth

  누를 때 버튼이 내려가고 하단 그림자가 줄어듭니다.

• 탄성 스프링 이동

  Elastic Spring Return

  상태 전환 시 오버슈트 곡선으로 이동하고 다음 실행에서 복귀합니다.

• 애니메이션 스위치 컨트롤

  Animated Switch Control

  포인터·키보드 조작과 aria-checked, 손잡이 위치를 동기화합니다.

• 애니메이션 정보 펼침

  Animated Disclosure Panel

  접힌 본문과 aria-expanded를 함께 갱신합니다.

• 액션 토스트 피드백

  Action Toast Feedback

  실행 결과를 상태 메시지로 표시하고 보조기술에도 알립니다.

• 상태 전환 진행 막대

  Interactive Progress Fill

  가상 진행률 25%와 100%를 전환하고 접근성 값을 갱신합니다.

• 드래그 스냅 컨트롤

  Drag and Snap Control

  수평 드래그 후 가까운 정지점에 고정합니다. 방향키도 지원합니다.

• 스와이프 액션 노출

  Swipe Reveal Action

  수평 스와이프로 보조 액션을 드러냅니다. 실제 데이터를 삭제하지 않습니다.

• WebGL 포인터 틸트 카드

  WebGL Pointer Tilt Card

  Three.js 메시·카메라·조명으로 두께가 있는 카드를 포인터에 따라 회전합니다.

• WebGL 플립 카드

  WebGL Flip Card

  앞뒷면 재질과 두께를 가진 카드를 클릭·키보드로 뒤집습니다.

• WebGL 오빗 조작

  WebGL Orbit Interaction

  드래그·방향키로 카메라를 물체 주위에서 회전하고 확대 버튼으로 거리를 바꿉니다.

• WebGL 입체 큐브

  WebGL Solid Cube

  면·모서리·조명을 가진 실제 3D 큐브를 회전하여 공간 방향을 확인합니다.

• WebGL 토러스 매듭

  WebGL Torus Knot

  토러스 매듭 메시의 곡면과 금속성 조명 반응을 실시간으로 관찰합니다.

• WebGL 입체 파티클 필드

  WebGL Particle Field

  3D 위치를 가진 점 구름을 회전하고 클릭으로 확산 범위를 바꿉니다.

• WebGL 입체 레이어 스택

  WebGL Layer Depth Stack

  실제 z축 간격을 가진 판 다섯 장을 회전하고 클릭으로 분리합니다.

• WebGL 와이어프레임 전환

  WebGL Wireframe Toggle

  다면체 메시의 와이어프레임과 면 렌더링을 전환합니다.

• WebGL 포인터 조명

  WebGL Pointer Lighting

  포인터로 실제 점광원 위치를 바꿔 구 표면의 조명을 변화시킵니다.

• WebGL 지오메트리 전환

  WebGL Geometry Switcher

  클릭으로 구·상자·토러스·다면체·원뿔을 바꾸고 이전 지오메트리는 해제합니다.

• 스피너

  Spinner

  완료 비율을 모를 때 반복 회전으로 작업이 진행 중임을 나타냅니다.

• 스켈레톤 화면

  Skeleton Screen

  콘텐츠가 들어올 레이아웃을 빈 블록으로 먼저 보여줍니다.

• 진행 바

  Progress Bar

  작업의 알려진 완료 비율을 선형 트랙의 길이로 표시하는 확정형 예시입니다.

• 진행 링

  Progress Ring

  단일 작업의 알려진 완료 비율을 원형 트랙의 채워진 호로 표시합니다.

• 원형 진행 표시기

  Circular Progress Indicator

  원형으로 작업 상태를 나타내는 표시기 계열입니다. 완료율을 알면 확정형, 모르면 불확정형을 사용합니다.

• 선형 진행 표시기

  Linear Progress Indicator

  가로 트랙을 사용하는 진행 상태 계열로 확정형과 불확정형을 포함합니다.

• 확정형 로딩

  Determinate Loading

  전체 작업량 대비 완료량을 알 수 있을 때 진행률을 표시하는 방식입니다.

• 불확정형 로딩

  Indeterminate Loading

  완료량의 비율을 알 수 없을 때 처리 중이라는 사실만 알리는 방식입니다.

• 단계 표시기

  Stepper / Step Indicator

  다단계 프로세스의 현재·완료·남은 단계를 표시.

• 로딩 버튼

  Loading Button

  실행 후 버튼 자체에서 진행 상태를 보여주는 컴포넌트.

• 인라인 로더

  Inline Loader

  페이지 전체가 아니라 특정 영역에서만 로딩을 표시.

• 전체 화면 로더

  Full-screen Loader

  화면 전체 사용을 일시적으로 막으면서 작업 중임을 표시.

• 시머

  Shimmer

  요소 표면을 따라 밝은 띠가 흐르는 반복 애니메이션입니다.

• 펄스 로딩

  Pulse Loading

  투명도나 크기가 주기적으로 변화하는 로딩 애니메이션.

• 블러업 이미지

  Blur-up Image

  저해상도·흐릿한 이미지를 선제 표시한 뒤 원본으로 교체.

• 지연 로딩

  Lazy Loading

  필요한 시점에 콘텐츠나 리소스를 불러오는 전략.

• 점진적 로딩

  Progressive Loading

  우선순위에 따라 콘텐츠를 부분적으로 먼저 표시.

• 미리 가져오기

  Prefetching

  다음에 필요할 가능성이 높은 데이터를 사전 요청.

• 낙관적 UI

  Optimistic UI

  서버 성공 응답 전에 화면에 결과를 반영하고 실패 시 복구.

• 보수적 UI

  Pessimistic UI

  서버 응답 후에만 화면 상태를 확정해 반영하는 방식.

• 스트리밍 텍스트

  Streaming Text

  새 텍스트 데이터가 도착하는 대로 점진적으로 표시하는 방식.

• 무한 스크롤 로딩

  Infinite Scroll Loading

  스크롤 위치에 따라 목록의 다음 데이터를 추가 로드.

• 재시도 상태

  Retry State

  실패 후 사용자가 로딩 작업을 다시 실행할 수 있는 상태.

• 토스트

  Toast

  주 흐름을 막지 않고 잠시 나타나는 간단한 상태 메시지입니다.

• 스낵바

  Snackbar

  작업 결과와 선택적 후속 동작을 짧게 보여주는 비모달 메시지입니다.

• 배너 알림

  Banner

  화면 상단이나 콘텐츠 영역에 넓게 배치하는 공지형 메시지.

• 인라인 알림

  Inline Notification

  관련 작업 영역 안에 표시하여 맥락을 유지하는 알림.

• 경고·알림

  Alert

  위험·오류·주의·중요 정보 등 사용자 인지가 필요한 메시지.

• 성공 메시지

  Success Message

  저장·전송·처리 완료를 알려주는 긍정적 피드백.

• 경고 메시지

  Warning Message

  손실 가능성이나 주의가 필요한 상황을 알리는 메시지.

• 오류 메시지

  Error Message

  실패 원인과 가능한 해결 방향을 알리는 메시지.

• 정보 메시지

  Info Message

  결과와 무관한 맥락·상태 정보를 전달.

• 알림 센터

  Notification Center

  여러 알림을 모아 보관하고 확인하는 공간.

• 알림 배지

  Notification Badge

  새 알림 존재나 미확인 수를 표시하는 배지.

• 배지

  Badge

  대상 주변에 붙여 짧은 정보·상태·개수를 표시하는 작은 표식.

• 상태 점

  Status Dot

  온라인·오프라인·경고 같은 상태를 작은 점으로 표시.

• 상태 칩

  Status Chip

  짧은 상태 라벨을 작은 캡슐·칩 형태로 묶어 표시한다.

• 메시지 바

  Message Bar

  영역 전체 폭을 사용해 중요 상태를 안내하는 가로 메시지.

• 콜아웃

  Callout

  본문에서 중요한 맥락이나 참고사항을 지속적으로 강조.

• 플래그 알림

  Flag Notification

  화면 가장자리에 뜨는 비차단형 피드백 메시지.

• 액션형 알림

  Actionable Notification

  메시지 안에 이동·승인·복구 등 실행 동작을 포함.

• 실시간 영역 안내

  Live Region Announcement

  화면 변화 내용을 보조기기에 자동 전달하는 접근성 피드백.

• 햅틱 피드백

  Haptic Feedback

  진동과 촉각 신호로 동작 수행·상태를 전달.

• 모달 대화상자

  Modal Dialog

  배경과 상호작용을 막고 현재 작업에 집중시키는 창.

• 비모달 대화상자

  Non-modal Dialog

  열린 상태에서도 배경 영역과 상호작용할 수 있는 창.

• 경고 대화상자

  Alert Dialog

  중요한 메시지나 결정에 사용되는 대화상자.

• 확인 대화상자

  Confirmation Dialog

  삭제·전송 등 실행 전 의도를 재확인하는 창.

• 바텀시트

  Bottom Sheet

  화면 하단에서 나타나는 선택·정보·동작 패널.