디자인 레퍼런스 전체 색인 · 15/27
2,153개 정의·활용·주의사항·출처를 개별 문서로 제공합니다. 이 색인은 JavaScript 없이 탐색할 수 있습니다.
인터랙션 명세
트리거·상태 전이·응답·예외·입력 규칙을 정의한 문서.
상태 행렬
기본·로딩·빈 값·오류·성공 등 조합별 표현을 정리한 표.
인수 기준
기능·디자인을 완료로 판단하기 위한 관찰 가능한 조건.
시각 회귀 테스트
변경 전후 화면 차이를 비교하여 의도하지 않은 시각 변화를 찾는 검증.
스냅숏 테스트
결과를 기준본과 비교해 구조·출력 변화 여부를 감지하는 테스트.
브라우저 교차 테스트
서로 다른 브라우저에서 기능과 레이아웃 차이를 확인하는 검증.
반응형 검수
기기 폭·높이·배율·입력 방식별로 레이아웃과 기능을 확인하는 검증.
접근성 감사
키보드·보조기술·대비·의미 구조 등 접근성 조건을 체계적으로 점검하는 작업.
인지 부하
과업 수행 중 사용자의 인지 자원에 요구되는 부담.
회상보다 재인
사용자가 기억해내기보다 눈앞의 선택지를 인식하도록 돕는 원칙.
피츠의 법칙
목표까지 거리와 목표 크기가 포인팅 과업 시간에 영향을 준다는 모델.
힉·하이먼 법칙
선택지의 수와 정보량이 특정 선택 과업 시간에 영향을 준다는 모델.
어포던스·시그니파이어
가능한 행동 자체와 그 행동을 알아차리게 하는 단서를 구분하는 개념.
기만적 디자인 패턴
사용자 의사나 이익에 반하는 선택을 유도하도록 설계된 인터페이스 방식.
디자인 부채
단기 타협이나 불일치가 쌓여 이후 변경·사용성 비용을 높이는 상태.
콘텐츠 모델
콘텐츠 종류·필드·관계·검증 규칙을 구조화한 정의.
확장 가능 벡터 그래픽
경로·도형·텍스트 등을 XML 기반으로 기술하는 벡터 이미지 형식.
PNG 이미지
무손실 압축과 투명도 표현에 활용되는 래스터 이미지 형식.
JPEG 이미지
사진 등 연속톤 이미지에 널리 사용하는 손실 압축 이미지 형식 계열.
WebP 이미지
손실·무손실·투명도·애니메이션을 지원하는 이미지 형식.
AVIF 이미지
AV1 기반 압축을 이용하는 이미지 파일 형식.
OpenEXR
고명암비·다채널 렌더 결과 교환에 사용하는 이미지 형식.
glTF
실시간 3D 자산의 전달과 로딩을 목표로 한 Khronos의 형식.
GLB
glTF 자산을 바이너리 컨테이너에 묶는 표현 방식.
FBX
3D 장면·모델·리깅·애니메이션 교환에 사용하는 Autodesk 계열 형식.
OBJ
메시의 위치·UV·법선 등을 표현하는 텍스트 기반 3D 교환 형식.
Universal Scene Description
장면의 구성·계층·변형·협업 데이터를 기술하는 3D 장면 체계.
STL
삼각형 표면으로 형상을 표현하며 3D 프린팅 등에 쓰이는 파일 형식.
3MF
3D 제조용 형상과 재료 등 부가 정보를 패키지로 전달하는 형식.
KTX2
GPU 텍스처 전달과 압축 활용을 위한 컨테이너 형식.
드라코 압축
3D 기하 데이터를 압축하여 전송량 등을 줄이는 기술.
웹GL
브라우저에서 GPU 기반 2D·3D 그래픽을 실행하는 웹 API.
웹GPU
그래픽과 범용 GPU 계산을 위한 현대적 웹 API.
GLSL
OpenGL·WebGL 계열에서 사용하는 셰이더 언어.
WGSL
WebGPU용 셰이더 프로그램을 작성하는 언어.
HLSL
DirectX 등 그래픽 환경에서 사용하는 고수준 셰이더 언어.
OpenXR
VR·AR 등 확장현실 앱과 런타임 사이의 공통 인터페이스 표준.
스프라이트 시트
여러 2D 이미지·프레임을 한 장에 배열한 리소스.
9분할 확대
이미지를 9개 영역으로 나누어 모서리를 유지하면서 UI를 확대하는 기법.
폰트 서브세팅
필요한 글리프만 남겨 글꼴 파일 크기를 줄이는 처리.
Tailwind CSS
단일 목적 유틸리티 클래스를 조합해 스타일을 구성하는 CSS 프레임워크.
Bootstrap
반응형 그리드와 스타일된 UI 컴포넌트를 제공하는 웹 툴킷.
Bulma
CSS 중심으로 레이아웃과 컴포넌트 스타일을 제공하는 프레임워크.
Foundation
반응형 레이아웃과 웹 컴포넌트를 제공하는 프런트엔드 프레임워크.
Pico CSS
시맨틱 HTML 요소에 간결한 기본 스타일을 제공하는 CSS 프레임워크.
UIkit
레이아웃·컴포넌트·상호작용을 묶어 제공하는 웹 UI 툴킷.
daisyUI
Tailwind 기반으로 의미 있는 컴포넌트 클래스와 테마를 제공하는 도구.
Flowbite
Tailwind 스타일의 컴포넌트와 상호작용 구현을 제공하는 도구군.
UnoCSS
규칙과 프리셋을 이용해 필요한 유틸리티 CSS를 생성하는 엔진.
Open Props
색·간격·모션 등을 CSS 사용자 정의 속성으로 제공하는 디자인 토큰 모음.
Sass
변수·믹스인·모듈 등 확장 문법을 CSS로 컴파일하는 스타일시트 언어·도구.
Less
변수·믹스인 등 확장 기능을 갖춘 CSS 전처리 언어·컴파일러.
PostCSS
플러그인으로 CSS 문법 트리를 분석·변환하는 처리 도구.
Lightning CSS
CSS 파싱·변환·번들링·압축을 제공하는 도구.
Autoprefixer
지원 대상 브라우저 정보에 맞춰 CSS 벤더 접두사를 처리하는 플러그인.
styled-components
컴포넌트와 함께 스타일을 정의하는 CSS-in-JS 라이브러리.
Emotion
객체·문자열 기반 스타일 작성과 CSS 생성을 지원하는 라이브러리.
vanilla-extract
타입 있는 스타일 정의를 빌드 시 CSS로 추출하는 도구.
Panda CSS
토큰·레시피 기반 스타일을 분석하여 CSS를 생성하는 스타일 엔진.
Style Dictionary
디자인 토큰을 여러 플랫폼의 스타일 파일로 변환하는 도구.
React
컴포넌트와 상태를 이용해 사용자 인터페이스를 구성하는 라이브러리.
Vue
반응형 상태와 컴포넌트 중심의 웹 UI 프레임워크.
Angular
컴포넌트·라우팅·의존성 주입 등을 제공하는 웹 앱 프레임워크.
Svelte
컴포넌트를 컴파일하여 반응형 UI를 구현하는 프레임워크.
SolidJS
세밀한 반응성 모델로 UI 상태와 DOM 갱신을 연결하는 라이브러리.
Preact
컴포넌트·가상 DOM 기반 UI를 제공하는 React 유사 API 라이브러리.
Lit
표준 커스텀 엘리먼트 기반 컴포넌트를 작성하는 라이브러리.
Alpine.js
HTML 속성에 간단한 상태·이벤트 동작을 선언하는 라이브러리.
htmx
HTML 속성으로 서버 요청과 부분 화면 갱신을 선언하는 라이브러리.
Next.js
라우팅·서버 렌더링·빌드 등을 제공하는 React 애플리케이션 프레임워크.
Nuxt
라우팅·렌더링·빌드 기능을 제공하는 Vue 애플리케이션 프레임워크.
SvelteKit
라우팅·서버 처리·배포 통합을 제공하는 Svelte 앱 프레임워크.
Astro
콘텐츠 중심 사이트와 선택적 인터랙티브 영역을 구성하는 웹 프레임워크.
Qwik
실행 상태를 이어 쓰는 접근을 중심으로 웹 UI를 구성하는 프레임워크.
Ember.js
라우팅·템플릿·규칙 중심의 웹 애플리케이션 프레임워크.
jQuery
DOM 조작·이벤트·요청 등을 통합한 라이브러리.
shadcn/ui
프로젝트 안으로 가져와 수정하는 컴포넌트 코드와 배포 체계.
Radix Primitives
동작·접근성·키보드 처리를 제공하는 저수준 UI 프리미티브.
Radix Themes
Radix 기반의 스타일·테마·컴포넌트를 묶은 UI 구성 도구.
Headless UI
외형보다 UI 동작과 접근성에 초점을 둔 무스타일 컴포넌트.