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

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

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

• 리플 효과

  Ripple Effect

  입력 위치에서 원형 파동이 퍼지는 피드백.

• 컨페티 애니메이션

  Confetti Animation

  색종이나 작은 조각이 흩날리는 축하 효과.

• 빈 상태

  Empty State

  표시할 데이터가 없을 때 이유와 다음 행동을 안내.

• 초기 빈 상태

  First-use Empty State

  아직 데이터 생성 전인 첫 이용 화면의 상태.

• 필터 결과 없음 상태

  Filter Empty State

  적용한 필터 조합에 맞는 항목이 없을 때 조건 수정을 제안.

• 오류 상태

  Error State

  작업이나 데이터 요청이 실패했음을 표시.

• 로딩 상태

  Loading State

  작업 처리 중임을 보여주는 UI 상태.

• 성공 상태

  Success State

  요청한 동작이 성공했음을 알리는 UI 상태.

• 경고 상태

  Warning State

  위험 가능성이나 주의 필요를 알려주는 상태.

• 비활성 상태

  Disabled State

  현재 컨트롤을 사용할 수 없도록 제한된 상태.

• 읽기 전용 상태

  Read-only State

  내용을 확인할 수 있으나 변경은 제한되는 상태.

• 오프라인 상태

  Offline State

  인터넷·서버 연결이 없는 상황을 나타냄.

• 연결 끊김 상태

  Connection Lost

  기존 연결이 중단됐음을 알려주는 상태.

• 재연결 상태

  Reconnecting State

  중단된 세션·서버 연결을 복구하고 있는 상태.

• 권한 부족 상태

  Permission Denied

  접근 권한이 없어 볼 수 없거나 실행 불가한 상황.

• 세션 만료

  Session Expired

  인증 세션이 종료돼 재로그인이 필요한 상태.

• 점검 상태

  Maintenance State

  서비스 유지보수로 접근이 제한된 상태.

• 찾을 수 없음

  Not Found / 404

  요청한 대상이나 주소가 존재하지 않는 상태.

• 호출 제한 상태

  Rate Limit State

  요청 횟수 제한으로 잠시 실행할 수 없는 상태.

• 충돌 상태

  Conflict State

  동시 수정 등으로 저장 결과가 충돌한 상황.

• 재시도 동작

  Retry Action

  실패한 요청을 다시 실행하는 명령.

• 롤백

  Rollback

  실패한 변경을 이전의 정상 상태로 복원.

• 저장되지 않은 변경 확인

  Unsaved Changes Prompt

  저장 없이 나갈 때 변경 손실을 경고.

• 반응형 디자인

  Responsive Design

  화면 폭 등 조건에 따라 레이아웃을 유연하게 변경.

• 적응형 디자인

  Adaptive Design

  정해진 화면·기기 환경별로 다른 레이아웃 구성.

• 모바일 우선 설계

  Mobile-first Design

  작은 화면부터 핵심 구조를 설계하고 확장.

• 브레이크포인트

  Breakpoint

  레이아웃·스타일이 변경되는 화면 너비 기준.

• 유동 레이아웃

  Fluid Layout

  콘텐츠 너비가 화면 크기에 비례해 바뀌는 방식.

• 고정 레이아웃

  Fixed Layout

  콘텐츠 너비를 특정 값에 고정하는 방식.

• 안전 영역

  Safe Area

  노치·시스템 바 등을 피해 콘텐츠를 배치할 영역.

• 터치 대상

  Touch Target

  손가락으로 누를 수 있도록 확보한 인터랙션 영역.

• 엄지손가락 조작 영역

  Thumb Zone

  한 손 조작 시 손가락이 편하게 닿는 화면 범위.

• 뷰포트

  Viewport

  사용자가 현재 볼 수 있는 표시 영역.

• 반응형 그리드

  Responsive Grid

  화면 크기에 맞춰 열 개수·간격을 변경.

• 탐색 레일 전환

  Navigation Rail Adaptation

  모바일 하단 탐색을 넓은 화면에서 세로 레일로 전환.

• 화면 방향 전환

  Orientation Change

  가로·세로 방향 변경에 레이아웃이 적응.

• 화면 밀도

  Density

  정보와 인터랙션 요소가 일정 공간에 차지하는 정도.

• 압축 모드

  Compact Mode

  좁은 공간에서 간격·레이아웃을 축소한 UI.

• 여유 모드

  Comfortable Mode

  정보 간 간격을 넓혀 읽기 쉬운 UI.

• 다크 모드

  Dark Mode

  어두운 표면과 명도 대비를 중심으로 구성한 테마.

• 라이트 모드

  Light Mode

  밝은 표면을 중심으로 구성한 테마.

• 웹 콘텐츠 접근성 지침

  WCAG

  디지털 접근성 판단에 사용하는 국제 표준 지침.

• 접근성 리치 인터넷 애플리케이션

  ARIA

  보조 기술에 UI 역할·상태·속성을 전달하는 명세.

• 접근 가능한 이름

  Accessible Name

  보조기술이 컨트롤이나 요소를 식별하는 데 사용하는 이름.

• 의미론적 HTML

  Semantic HTML

  요소 역할에 맞는 HTML 태그를 사용하는 방식.

• 키보드 탐색

  Keyboard Navigation

  마우스 없이 키보드만으로 UI를 조작하는 방식.

• 포커스 순서

  Focus Order

  Tab 등으로 이동할 때 포커스가 진행되는 논리적 순서.

• 포커스 트랩

  Focus Trap

  모달 등에서 키보드 초점이 지정한 영역에 머무르게 함.

• 포커스 표시기

  Focus Indicator

  현재 키보드 조작 대상을 시각적으로 표시.

• 스크린 리더

  Screen Reader

  화면과 UI 정보를 음성 등으로 읽어주는 보조 기술.

• 명도 대비비

  Contrast Ratio

  전경과 배경의 명도 차이를 수치화한 값.

• 색상 외 정보 제공

  Color Independence

  색상만이 아닌 텍스트·아이콘으로 상태를 전달하는 원칙.

• 대체 텍스트

  Alt Text

  이미지의 기능·의미를 텍스트로 설명.

• 자막

  Captions

  소리 정보를 문자로 제공하는 접근성 요소.

• 모션 감소

  Reduced Motion

  비필수 움직임을 줄이거나 다른 표현으로 대체하는 접근성 대응.

• 고대비 모드

  High Contrast Mode

  전경·배경을 분명하게 구별하도록 구성한 표시 모드.

• 본문 바로가기 링크

  Skip Link

  반복 내비게이션을 건너뛰어 본문으로 이동.

• 터치 접근성

  Touch Accessibility

  접촉 대상 크기·간격·대체 동작을 고려한 설계.

• 오류 예방

  Error Prevention

  잘못된 입력·실행을 설계 단계에서 방지하는 원칙.

• 오류 식별

  Error Identification

  오류 항목과 원인을 사용자가 알 수 있게 표시.

• 점진적 향상

  Progressive Enhancement

  기본 기능이 동작하는 기반 위에 지원 환경별 고급 기능을 더하는 방식.

• 디자인 시스템

  Design System

  디자인 원칙·토큰·컴포넌트·패턴·문서의 일관된 체계.

• 컴포넌트 라이브러리

  Component Library

  재사용할 UI 부품을 모아놓은 컬렉션.

• 패턴 라이브러리

  Pattern Library

  반복되는 사용자 과제의 UI 해결 방식들을 모은 문서.

• 디자인 토큰

  Design Token

  색·크기·간격 등 디자인 값을 이름으로 관리하는 단위.

• 의미 기반 토큰

  Semantic Token

  색상 값 대신 목적을 기준으로 이름 붙인 토큰.

• 색상 팔레트

  Color Palette

  제품에서 사용할 색들의 체계.

• 타이포그래피 스케일

  Typography Scale

  제목·본문·보조 텍스트의 글자 크기 체계.

• 타이포그래피 위계

  Type Hierarchy

  글자 크기·굵기·간격으로 중요도를 구분하는 방법.

• 간격 스케일

  Spacing Scale

  일정 규칙에 따른 여백·간격 값의 체계.

• 표면 높이 위계

  Elevation

  그림자·레이어로 요소의 깊이와 우선순위를 표현.

• 그림자 토큰

  Shadow Token

  일관된 그림자 표현을 재사용하는 설정값.

• 모서리 곡률

  Border Radius

  요소 모서리의 둥근 정도.

• 선·테두리

  Stroke / Border

  경계나 구조를 표시하는 획 스타일.

• 불투명도

  Opacity

  요소의 투명·불투명 정도.

• 아이코노그래피

  Iconography

  아이콘의 의미·형태·굵기·사용법을 일관되게 설계하는 체계.

• 일러스트레이션 시스템

  Illustration System

  제품 내 그림 스타일·구성 규칙.

• 디자인 변형

  Design Variant

  하나의 컴포넌트를 용도에 맞게 바꾸는 형태.

• 컴포넌트 상태

  Component State

  기본·호버·포커스·선택·오류 등 컴포넌트 상태 정의.

• 아토믹 디자인

  Atomic Design

  작은 부품에서 큰 UI 구조로 조합하는 설계 관점.