UI 컴포넌트
도감

한 장에 컴포넌트 하나 — 정확한 이름으로 에이전트에게 지시한다.

구성 요소(Anatomy) · 동작 이름(Interaction) · 변형(Variants) · 쓰임새, 그리고 그 이름을 그대로 넣은 프롬프트 예시까지.

미리보기

태그 ×3

🔍검색...

버튼 · 토글 · 칩 · 배지 · 검색창 ...

모호한 지시

"그 위에 뜨는 거 좀 고쳐줘" — 에이전트는 팝오버/툴팁/모달/드롭다운 중 무엇인지 추측한다.

정확한 지시

"Toast의 auto-dismiss를 5초로, dismiss 버튼을 우측 상단에" — 한 번에 정확히 고친다.

각 슬라이드는 이렇게 읽는다

구성 요소 — 컴포넌트를 이루는 부분의 이름 (한글 + 영문 원어)
동작 — 사용자 조작과 그 이벤트 이름(hover/click/toggle...)
변형 — 디자인하면 나오는 변종(variant)
쓰임새 — 언제/어디에 쓰는가
➤ 에이전트에게 — 그 이름을 그대로 넣은 프롬프트 예시

목표 — 에이전트에게 부품 이름을 정확히 불러 주어, 만들고 고치는 왕복을 줄인다. 좌측 데모는 실제 웹 UI 톤(슬라이드 테두리와 별개).

live demo

🖱️

기본 → hover(가리킴) → press(누름) → click → ripple 번짐

구구성 요소 Anatomy

레이블 Label무슨 행동을 하는 버튼인지 알려주는 글자
아이콘 Leading / Trailing Icon글자 앞/뒤에 붙어 의미를 보조
컨테이너 Container / Surface클릭 영역이 되는 배경 면
상태 레이어 State layer / Ripplehover/press를 색/물결로 피드백

동동작 Interactions

가리킴 hover · 초점 focus
누름 press / :active
클릭 click / tap
비활성 disabled · 로딩 loading

변변형 Variants

Primary / Secondary / Tertiary
Outline · Ghost · Link
Destructive · Icon · FAB
크기 sm/md/lg · 전체폭(block)

쓰쓰임새 Usage

화면당 주요 행동 1개 = Primary
보조 행동 = Secondary / Ghost
폼 제출 = type="submit"
위험 행동엔 Destructive

Primary 버튼에 leading 아이콘을 넣고, 클릭하면 loading 상태(스피너)로 바뀌게. 옆에 Ghost 변형 취소 버튼도 같이.

live demo

업무 이메일 *

✉️

기본 → 초점(focus) → 입력(input) → 유효성 검사(validation) → 오류 상태(error)

구구성 요소 Anatomy

레이블 Label이 칸에 무엇을 적는지 알려주는 제목
입력 영역 Control실제로 글자를 타이핑하는 칸
플레이스홀더 Placeholder비었을 때 보이는 예시 안내문
도움말/오류 Helper / Error text밑에 뜨는 설명이나 오류 메시지

동동작 Interactions

입력 input / change
초점 focus / blur
유효성 검사 validation
지우기 clear

변변형 Variants

Outlined / Filled / Underlined
비밀번호(가리기 toggle) · 아이콘형
크기 sm/md/lg · 읽기전용/비활성
오류 상태 error state

쓰쓰임새 Usage

한 줄 자유 입력
이메일 / 이름 / 검색어
type=email/tel/url 로 키보드 최적화

Text Field를 outlined로 만들고 leading icon과 helper text를 붙여 줘. 형식이 틀리면 error state로 바뀌면서 오류 메시지를 보여 줘.

live demo

리뷰 작성

입력(input) → 내용 늘면 자동 높이 조절(auto-resize) → 글자수 카운터 증가, 우하단 리사이즈 핸들

구구성 요소 Anatomy

입력 영역 Control / Field여러 줄 글자를 적는 큰 칸
리사이즈 핸들 Resize handle (grip)끌어서 칸 크기를 늘리는 모서리
글자수 카운터 Character counter지금까지 쓴 글자 수 표시
플레이스홀더 Placeholder비었을 때 보이는 예시 안내문

동동작 Interactions

입력 input
자동 높이 조절 auto-resize / auto-grow
수동 리사이즈 resize (drag)
초점 focus / blur

변변형 Variants

고정 높이 vs 자동 확장
글자수 제한 max-length + 카운터
초기 줄 수 지정 rows
읽기전용 / 비활성

쓰쓰임새 Usage

여러 줄 텍스트 입력
메모 / 리뷰 / 코멘트
긴 설명 / 문의 내용

Textarea를 auto-resize로 만들고 우하단 resize handle은 막아 줘. max-length 200자에 글자수 character counter를 같이 표시해.

live demo

전화번호

자동 서식

금액

₩

숫자 입력 → 구분자 자동 삽입 → "010-1234-5678" / "₩ 1,250,000"

구구성 요소 Anatomy

입력 Input사용자가 숫자를 치는 칸
마스크 패턴 Mask pattern정해진 형식 틀 (000-0000-0000)
자리표시 문자 Placeholder chars아직 안 채운 자리 표시
접두/접미 Prefix / Suffix (₩ / %)값 앞뒤에 붙는 기호

동동작 Interactions

자동 서식 auto-format (구분자 삽입)
허용 문자 제한 restrict
붙여넣기 정리 sanitize
커서 점프 caret jump

변변형 Variants

전화 / 카드번호 / 날짜 / 시간
통화 currency · 퍼센트 percent
사용자 정의 패턴 custom pattern

쓰쓰임새 Usage

정해진 형식으로 입력받기
전화 / 카드 / 금액 입력
오타 줄이고 보기 좋게

전화번호 칸에 Mask pattern "000-0000-0000"을 적용해서 입력하는 대로 auto-format 되게. 금액 칸은 currency 마스크로 "₩" prefix와 천 단위 콤마를 붙여 줘.

live demo

👁

강도:

✓ 8자 이상 ✓ 대/소문자 포함 ✓ 숫자 + 기호 포함

입력 → 강도 평가(약함→보통→강함) → 표시/숨김 토글 → 요건 충족 체크

구구성 요소 Anatomy

입력 Input비밀번호를 받는 칸(가려 표시)
표시숨김 토글 Reveal toggle눈 아이콘으로 글자 보기/숨기기
강도 막대 Strength meter얼마나 안전한지 색/길이로 표시
요건 체크리스트 Requirements checklist조건을 충족하면 체크로 표시

동동작 Interactions

입력 input
표시 전환 toggle visibility
강도 평가 strength evaluate
요건 충족 validate

변변형 Variants

강도바(약함/보통/강함 색)
요건 리스트 checklist
생성기 generate
일치 확인 confirm

쓰쓰임새 Usage

회원가입 비밀번호 설정
비밀번호 변경
약한 비밀번호 사전 차단

비밀번호 입력에 Reveal toggle(눈 아이콘)과 Strength meter를 붙이고, 약함/보통/강함을 색으로 표시해. Requirements checklist로 8자/대소문자/기호 충족도 보여 줘.

live demo

활성 칸 커서 → 숫자 입력 → 다음 칸 자동 이동 → 6자리 완료 시 자동 제출

구구성 요소 Anatomy

자리 칸 Digit cell / box한 글자가 들어가는 칸 하나
활성 칸 Active cell지금 입력 받는 칸(커서 표시)
입력 숫자 Digit칸에 채워지는 숫자 한 자
구분 Separator자리 묶음을 나누는 하이픈

동동작 Interactions

다음 칸 자동 이동 auto-advance
붙여넣기 분배 paste-split
지우기 backspace (이전 칸)
완료 시 제출 auto-submit

변변형 Variants

4자리 / 6자리
숫자 전용 / 영숫자
마스킹 (●)
박스형 vs 밑줄형

쓰쓰임새 Usage

2단계 인증(2FA) 코드 입력
이메일/문자 코드 확인
결제 PIN 입력

6자리 OTP 입력을 만들고, auto-advance(다음 칸 자동 이동)와 paste-split(붙여넣기 분배)을 넣어. 6자리 다 채워지면 auto-submit 되게.

live demo

🔍 ×⌘K

🔍 리액트 입문최근

🔍 리액트 훅

🔍 리액트 라우터

입력(type) → 디바운스 → 실시간 제안(suggestions) → 지우기(×) → 다시 입력

구구성 요소 Anatomy

검색 아이콘 Search icon검색 입력임을 알리는 돋보기
입력 / 지우기 Input / Clear검색어 입력칸과 비우기 버튼
제안 목록 Autosuggest입력에 맞춰 뜨는 추천 목록
단축키 힌트 Shortcut hint빠른 호출 키 안내

동동작 Interactions

입력 type / input
제출 submit (Enter) · 지우기 clear
실시간 제안 live suggestions
호출 지연 debounce

변변형 Variants

인라인 / 확장형 expandable
범위 필터 scope
최근 검색 recent
음성 검색 voice

쓰쓰임새 Usage

대량 콘텐츠를 빠르게 탐색
키워드로 좁혀 찾기
전역 검색(⌘K 팔레트)

Search Bar에 debounce 300ms를 걸고, 입력 중 Autosuggest 드롭다운을 띄워 줘. 값이 있으면 Clear 버튼(×)도 보이게.

live demo

전체 약관에 동의합니다

서비스 이용약관 (필수)

마케팅 정보 수신 (선택)

해제(uncheck) → 체크(check, 체크표시 그려짐) → 중간 상태(indeterminate, dash) 순환

구구성 요소 Anatomy

박스 Box눌러서 켜고 끄는 네모 칸
체크 표시 Checkmark / Tick선택됐을 때 그려지는 V 표시
중간 상태 표시 Indeterminate (dash)일부만 선택됐을 때 보이는 가로줄
레이블 Label무엇에 동의/선택하는지 적은 글자

동동작 Interactions

체크 toggle / check
해제 uncheck
중간 상태 indeterminate
초점 focus

변변형 Variants

단일 / 그룹 single / group
전체선택(부모 = indeterminate)
스위치형 switch-style
비활성 / 오류 상태

쓰쓰임새 Usage

다중 선택 (여러 개 동시 가능)
약관 동의 / 필터
전체선택 + 개별선택 묶음

약관 동의 Checkbox 그룹을 만들고, 맨 위 전체선택은 일부만 체크되면 indeterminate로, 다 체크되면 check로 바뀌게. 각 항목엔 Label을 붙여 줘.

live demo

배송 방법

일반 배송 (2-3일)

빠른 배송 (익일)

매장 픽업

그룹 안에서 선택 점(dot)이 한 항목씩 이동 — 항상 하나만 선택(select / change)

구구성 요소 Anatomy

바깥 원 Outer circle누르는 동그란 테두리
선택 점 Dot / Inner circle선택되면 안에 채워지는 점
레이블 Label각 보기가 무엇인지 적은 글자
라디오 그룹 Radio group하나만 고르게 묶은 보기 묶음

동동작 Interactions

선택 select / change
그룹 내 하나만 (상호배타)
키보드 이동 arrow keys
초점 focus

변변형 Variants

세로 / 가로 그룹
카드형 radio card
세그먼트 대체 segmented
비활성 / 오류 상태

쓰쓰임새 Usage

보기 2-5개 중 하나 선택
상호배타 옵션
배송 방법 / 결제 수단

배송 방법을 Radio group으로 만들어 줘. 항상 하나만 select되고, arrow keys로 이동 가능하게. 보기가 3개 이하라 radio card 형태로 보여 줘.

live demo

다크 모드

푸시 알림 (켜짐)

이메일 수신 (꺼짐)

노브(thumb)가 좌우로 미끄러지며 켜기/끄기(on/off) → 트랙 색 전환, 즉시 적용(instant commit)

구구성 요소 Anatomy

트랙 Track노브가 미끄러지는 배경 막대
노브/엄지 Thumb / Knob좌우로 움직이는 동그란 손잡이
켜짐/꺼짐 상태 On / Off state색과 위치로 켜짐/꺼짐 표시
(선택) 레이블 Label무엇을 켜고 끄는지 적은 글자

동동작 Interactions

전환 toggle
켜기/끄기 on / off
즉시 적용 instant commit (저장 없음)
초점 focus

변변형 Variants

아이콘 표시 with icons (✓/✕)
레이블형 labeled
크기 sm/md/lg
로딩 / 비활성

쓰쓰임새 Usage

즉시 적용되는 on/off 설정
알림 / 다크 모드
저장 버튼 없이 바로 반영

알림 설정에 Toggle / Switch를 써 줘. thumb가 슬라이드되며 track 색이 바뀌고, 누르면 저장 없이 instant commit으로 바로 반영되게.

live demo

지도

캘린더

세그먼트 선택(select/change) → 선택 표시기(pill)가 슬라이딩 이동

구구성 요소 Anatomy

세그먼트 Segment고를 수 있는 보기 한 칸
선택 표시기 Indicator (pill)현재 선택을 가리키는 흰 알약
구분선 Divider세그먼트 사이를 나누는 선
레이블 / 아이콘 Label / Icon각 칸의 글자나 아이콘

동동작 Interactions

선택 select / change
표시기 이동 indicator slide
키보드 이동 arrow keys
한 번에 하나만 활성 (상호배타)

변변형 Variants

2 ~ 5 세그먼트
아이콘만 icon-only
전체폭 full-width
탭 대체 tab alternative

쓰쓰임새 Usage

상호배타 보기 전환
목록 / 지도, 일 / 주 / 월
보기 2 ~ 5개의 즉시 토글

Segmented Control로 일 / 주 / 월 전환을 만들고, selected indicator가 슬라이딩하게. full-width로 늘리고 키보드 arrow keys도 지원해 줘.

live demo

▼

일본

대한민국

미국

트리거 클릭 → 리스트박스 펼침(open) → 옵션 강조(highlight) → 선택(select) → 닫힘

구구성 요소 Anatomy

트리거 Trigger / Control눌러서 목록을 여는 본체 버튼
표시값/플레이스홀더 Value / Placeholder현재 선택값(없으면 안내 문구)
꺾쇠 Chevron / Caret펼침 가능을 알리는 화살표
리스트박스 · 옵션 Listbox · Option펼쳐지는 보기 목록과 각 항목

동동작 Interactions

펼침/닫힘 open / close · toggle
강조 이동 highlight (↑↓)
선택 select / change
바깥클릭 닫기 dismiss

변변형 Variants

단일 / 다중 선택 multi-select
검색형 searchable / Combobox
옵션 그룹 optgroup · 아이콘
네이티브 <select> vs 커스텀

쓰쓰임새 Usage

정해진 보기 중 하나 고르기
보기 5개 이상일 때(이하 = Radio)
국가/카테고리/상태 선택

Select를 searchable(콤보박스)로 바꾸고, multi-select + 선택값을 Chip으로 표시. 옵션은 optgroup으로 묶어 줘.

live demo

🔎

서울특별시

서귀포시

서산시

입력(type) → 필터링(filter) → 일치 강조(match highlight) → 강조 이동(↑↓) → 선택(select)

구구성 요소 Anatomy

입력 필드 Input검색어를 입력하는 칸
리스트박스/옵션 Listbox / Option아래로 펼쳐지는 후보 목록
일치 강조 Match highlight입력과 겹친 글자를 표시
빈/로딩 상태 Empty / Loading결과 없음/불러오는 중 표시

동동작 Interactions

입력 필터링 filter / type-ahead
강조 이동 highlight (↑↓)
선택 select
펼침/닫힘 open / close

변변형 Variants

단일 / 다중 tag chips
자유 입력 허용 free-solo
비동기 검색 async
옵션 그룹 grouped

쓰쓰임새 Usage

옵션이 많아 검색하며 고를 때
주소/도시/사용자 찾기
태그 입력 + 새 값 추가

Combobox로 도시를 입력하며 검색하고, 결과는 async로 불러와 match highlight를 표시해. 결과 없으면 empty state를 보여 줘.

live demo

▼

전자기기 ›

의류 ›

식품 ›

노트북 ›

스마트폰 ›

태블릿 ›

게이밍

사무용

초경량

컬럼1 선택 → 컬럼2 펼침 → 컬럼3 펼침 → 경로 "전자기기 > 노트북 > 게이밍" 완성 반복

구구성 요소 Anatomy

트리거/입력 Trigger눌러서 단계 패널을 여는 본체
단계 패널 Column panels레벨별로 펼쳐지는 컬럼
옵션 / 펼침 화살표 Option / Expand arrow각 항목과 다음 단계 표시
선택 경로 Selected path고른 단계들을 이어 보여줌

동동작 Interactions

펼침 open
단계 선택 select-level
경로 확정 confirm
검색 search

변변형 Variants

컬럼형 / 중첩 메뉴 nested
단일 / 다중 선택
잎 노드만 선택 leaf-only
동적 로드 lazy

쓰쓰임새 Usage

계층형 선택
국가 > 도시
카테고리 > 하위 분류

Cascader를 만들어 줘. Column panels로 단계별 펼침, select-level하면 다음 컬럼이 뜨고 Selected path("전자기기 > 노트북")를 보여 줘. lazy 로드도.

live demo

기획 × 프론트엔드 × 백엔드 × 디자인 ×

디자인

데브옵스

입력 후 Enter → 토큰(칩) 생성 → 칩이 누적 → ×로 하나 삭제(remove) → 자동완성 제안

구구성 요소 Anatomy

입력 Input새 값을 타이핑하는 칸
토큰/태그 칩 Token / Tag chip확정된 값(레이블 + × 삭제)
자동완성 제안 Suggestions입력 중 뜨는 후보 목록
플레이스홀더 Placeholder비었을 때 안내 문구

동동작 Interactions

추가 add (Enter / comma)
삭제 remove (× / Backspace)
자동완성 선택 select
중복 방지 dedupe

변변형 Variants

자유입력 vs 정해진 보기
최대 개수 max items
색 태그 color tags
붙여넣기 분리 paste split

쓰쓰임새 Usage

여러 값 입력(메일 수신자)
태그/스킬/키워드 모으기
필터 조건 쌓기

스킬 입력을 Token Field로. Enter로 add, ×나 Backspace로 remove, 타이핑 중 Suggestions 자동완성. 같은 값은 dedupe로 막아 줘.

live demo

가리킴 미리보기(왼→오 채움) → 선택 확정(4.0) → 반별(4.5) → 리셋

구구성 요소 Anatomy

별 아이콘 Star icon점수 한 칸을 나타내는 별
채움 / 빈 상태 Filled / Empty채운 별과 비어 있는 별
부분 채움 Half / Partial반쪽만 채운 소수점 표현
값 레이블 Value label선택된 점수를 글자로 표시

동동작 Interactions

가리킴 미리보기 hover preview
선택 select / rate
반별 half-step
읽기 전용 readonly

변변형 Variants

5점 / 10점 척도
반별 허용 half-step
하트 / 이모지 아이콘
표시 전용 display-only (평균)

쓰쓰임새 Usage

리뷰 평점 입력
평균 평점 표시
제품 / 콘텐츠 만족도

Star Rating를 5점으로 만들고, hover preview로 별이 왼쪽부터 채워지게. half-step(반별) 허용하고, 평균은 readonly로 표시해 줘.

live demo

0255075100

핸들 끌기(drag) → 채움(fill) 늘어남 → 값 말풍선(tooltip) 따라옴 → 눈금(ticks)에 맞춤

구구성 요소 Anatomy

트랙 Track값이 움직이는 전체 길
채움 Fill / Active track선택값까지 색이 채워진 구간
핸들/엄지 Thumb / Handle끌어서 값을 바꾸는 손잡이
눈금/말풍선 Ticks / Tooltip기준선과 현재값을 보여줌

동동작 Interactions

끌기 drag
클릭 점프 click-to-set
키보드 단계 arrow / step
두 손잡이 range

변변형 Variants

단일 / 범위 2 thumbs
단계 / 연속 step / continuous
수직 vertical
눈금 라벨 marks

쓰쓰임새 Usage

범위 안의 수치 고르기
볼륨/밝기/줌 조절
가격대 필터(범위)

Range 슬라이더(두 thumb)로 가격대를 고르게 하고, step을 1000으로. 끌 때 각 핸들 위에 value tooltip을 띄워 줘.

live demo

−

개

+ 버튼(increment) 강조 → 값 1→2→3 증가(step up) → 직접 입력(type) → min/max 한계(clamp)

구구성 요소 Anatomy

입력 필드 Input현재 숫자를 보여주고 입력
증감 버튼 Spinner buttons+/- 로 값을 올리고 내림
증가/감소 단위 Increment / Decrement한 번에 바뀌는 폭(step)
단위 Suffix / Unit개/원 같은 뒤에 붙는 라벨

동동작 Interactions

증가/감소 step up / down
직접 입력 type
길게 눌러 연속 press-and-hold
최소/최대 clamp (min/max)

변변형 Variants

가로 / 세로 버튼
단위 표시 suffix
수량 선택기 quantity picker
소수/정수 step

쓰쓰임새 Usage

수량/개수 정밀 조정
장바구니 수량 선택기
인원수/단위 입력

Stepper로 수량을 고르게 하고 min 1 / max 99로 clamp해. + 버튼을 press-and-hold하면 연속 증가하도록.

live demo

‹2026년 7월›

일월화수목금토

트리거 클릭 → 달력 팝업(popover) 펼침 → 월 이동(nav) → 날짜 칸(day cell) 선택(pick)

구구성 요소 Anatomy

입력 트리거 Input / Trigger눌러서 달력을 여는 칸
달력 팝업 Calendar popover위로 떠오르는 달력 패널
월 이동/요일 Month nav / Weekday달을 넘기고 요일을 표시
날짜 칸/오늘 Day cell / Today고르는 날짜와 오늘 강조

동동작 Interactions

펼침 open
월 이동 navigate (prev/next)
날짜 선택 select / pick
범위 선택 range select

변변형 Variants

단일 / 범위 range
날짜+시간 datetime
인라인 vs 팝업 inline / popup
비활성 날짜 min / max

쓰쓰임새 Usage

날짜/기간 선택
예약/체크인/마감일
기간 필터(시작~종료)

Date Picker를 range select로 만들어 체크인~체크아웃을 고르게 하고, 오늘 이전 날짜는 min으로 비활성화. popover로 띄워 줘.

live demo

🕑

오전오후

시간 칸 클릭 → 시/분 컬럼 열림(open) → 값이 선택 강조 줄로 스크롤(scroll) → 오전/오후 토글

구구성 요소 Anatomy

입력 트리거 Input / Trigger시각을 보여주고 누르면 열림
시/분 컬럼 Hour / Minute columns시와 분을 고르는 세로 목록
오전오후 AM / PM12시간제에서 오전/오후 전환
선택 표시 Selected현재 고른 값 강조 줄

동동작 Interactions

열기 open
시/분 선택 select
스크롤 scroll
단위 step (5 / 15분)

변변형 Variants

리스트형 vs 휠 spinner
아날로그 시계형 clock
12 / 24시간제
분 단위 step 제한

쓰쓰임새 Usage

시각 지정(예약/알람)
회의 시간 고르기
날짜 선택기와 함께 쓰기

예약 폼에 Time Picker를 추가해. Hour / Minute columns를 휠(spinner)로 보이고, 분은 step 15분 단위, AM/PM 토글이 있는 12시간제로.

live demo

견본 클릭 → 팔레트 열림(open) → 채도명도 영역에서 픽(pick) + 색조 슬라이더 조절 → hex 값 갱신

구구성 요소 Anatomy

색상 견본 Swatch / Trigger현재 색을 보여주고 누르면 열림
팔레트 팝업 Palette popover색을 고르는 떠오르는 패널
채도명도 · 색조 SV area · Hue slider색을 고르는 면과 색조 막대
입력 · 스포이드 Hex/RGB · Eyedropper값 직접 입력과 화면 색 추출

동동작 Interactions

열기 open
색 선택 pick (drag)
색조 조절 hue drag
값 입력 input

변변형 Variants

견본형(고정 팔레트)
자유 선택 free pick
hex / rgb / hsl 표기
알파(투명도) 유무

쓰쓰임새 Usage

색 지정(테마 설정)
디자인 도구의 색 고르기
라벨/카테고리 색 부여

테마 색 설정에 Color Picker를 붙여. Swatch를 누르면 Palette popover가 열리고, Hue slider로 색조 조절 + hex 직접 입력도 되게.

live demo

⬆️여기로 끌어다 놓거나 찾아보기

🖼️

photo.png · 1.2MB

파일 끌어옴 → 드롭 영역 강조(dragover) → 놓음(drop) → 파일 칩 생성 → 진행 막대(progress) 채움

구구성 요소 Anatomy

드롭 영역 Dropzone파일을 끌어다 놓는 점선 박스
찾아보기 버튼 Browse눌러서 파일 탐색기 열기
파일 칩 File chip이름/크기/삭제를 담은 항목
진행 막대/미리보기 Progress / Thumbnail업로드 진행과 썸네일

동동작 Interactions

끌어다 놓기 dragover / drop
파일 선택 browse / select
업로드 upload
삭제 remove

변변형 Variants

단일 / 다중 multiple
이미지 미리보기 preview
드래그 강조 active / hover
유형 제한 accept

쓰쓰임새 Usage

첨부/이미지 업로드
프로필 사진/문서 제출
다중 파일 일괄 업로드

Dropzone를 만들어 이미지를 drag-and-drop으로 받고, 끌어오면 active 강조. 각 파일은 file chip에 progress bar와 썸네일로 보여 줘.

live demo

가능 (3)

읽기

쓰기

삭제

→

←

선택됨

관리

쓰기

항목 선택 → → 버튼 누름(move) → 항목이 왼쪽에서 오른쪽으로 이동 반복

구구성 요소 Anatomy

좌/우 목록 Source / Target list후보 목록과 선택된 목록
항목 Item옮길 수 있는 한 줄
이동 버튼 Move buttons→ ← 로 좌우 이동
검색 / 선택 체크 Search / Checkbox필터 입력과 항목 선택

동동작 Interactions

선택 select
이동 move (→ / ←)
전체 이동 move-all
검색 필터 filter · 더블클릭 이동

변변형 Variants

검색 포함 searchable
전체이동 버튼 move-all
드래그 이동 drag
트리 트랜스퍼 tree

쓰쓰임새 Usage

후보 → 선택 집합 구성
권한 / 멤버 배정
표시 열(column) 선택

Transfer(dual listbox)를 만들어 줘. Source / Target list에 Move buttons(→ ←), 항목 Checkbox 선택 + 검색 필터(searchable)까지.

live demo

B I U 🔗 ☰

오늘 회의에서 핵심 결정을 정리했습니다.

일정 확정
담당자 배정

툴바 B 누름 → 단어 굵게(format) → ☰ 누름 → 글머리 목록(block) 생성

구구성 요소 Anatomy

툴바 Toolbar (B/I/U, 목록, 링크)서식 버튼이 모인 위쪽 띠
편집 영역 Editable area (contenteditable)글을 직접 쓰는 본문 칸
서식 버튼 Format buttons굵게/기울임 등 적용 버튼
블록 메뉴 Block menu제목/목록 같은 덩어리 선택

동동작 Interactions

서식 적용 format (bold/italic)
블록 전환 block type (제목/목록)
링크 삽입 insert-link
실행취소 undo/redo · slash

변변형 Variants

클래식 툴바 / 인라인 버블 / 블록(노션형)
마크다운 단축 markdown shortcut
협업 커서 collab cursor

쓰쓰임새 Usage

서식 있는 글 작성 (게시글/문서/메일)
평문은 Textarea
서식이 필요하면 RTE

게시글 작성에 Rich Text Editor를 넣어 줘. Toolbar에 B/I/U와 목록 버튼, Editable area는 contenteditable로. slash 명령으로 블록 전환되는 노션형이면 좋겠어.

live demo

이름 *

박지훈

이메일 *

jihoon@

올바른 이메일 형식이 아닙니다

✓ 사용 가능

제출

제출(submit) → 이메일 칸 오류(빨강) 표시 → 수정 → 통과(초록 체크)

구구성 요소 Anatomy

폼 Form입력들을 묶어 제출하는 틀
필드 그룹 Field / Form group레이블+입력 한 묶음
레이블 / 필수 표시 Label / Required (*)칸 이름과 꼭 채울 표시
오류 메시지 Error / Validation message왜 틀렸는지 알려주는 글

동동작 Interactions

검증 validate (on blur/submit)
제출 submit
오류 표시 show errors
초기화 reset

변변형 Variants

세로 / 가로 / 인라인 레이아웃
섹션/스텝 · 인라인 vs 요약 error summary
자동저장 autosave

쓰쓰임새 Usage

데이터 입력/제출 (가입/결제/설정)
입력 컴포넌트를 담는 컨테이너
검증 규칙을 얹는 곳

가입 Form을 만들어 줘. 각 Field group에 Label과 Required (*)를 두고, submit 시 validate해서 틀리면 칸 아래 Validation message를 빨갛게 보여 줘.

live demo

Acme

홈제품가격

🔍U

활성 링크 순환(홈→제품→가격) → 잉크바 밑줄이 그 아래로 슬라이딩 + 글자색 동기화

구구성 요소 Anatomy

브랜드 / 로고 Brand / Logo홈으로 가는 서비스 이름
내비 링크 Nav links주요 섹션으로 가는 메뉴
활성 표시 Active indicator지금 보는 메뉴를 알리는 밑줄
액션 / 햄버거 Actions / Hamburger검색/계정과 모바일 메뉴 버튼

동동작 Interactions

이동 navigate
활성 표시 active state
모바일 토글 toggle menu
스크롤 고정 / 축소 sticky / shrink

변변형 Variants

상단 / 하단 top / bottom
고정 sticky / fixed
투명 → 솔리드 on scroll
중앙 로고 centered

쓰쓰임새 Usage

최상위 전역 내비게이션
모든 화면 공통 상단
브랜드 + 주요 섹션 진입

Navbar를 sticky로 두고, 스크롤하면 shrink로 줄어들게. 현재 링크에 active indicator 밑줄을 붙이고, 모바일은 hamburger로 접어 줘.

live demo

메인

📊대시보드

📁프로젝트

설정

⚙️환경설정

👥멤버

펼침/접기(expand/collapse) → 아이콘 레일(mini/rail)로 축소 → 활성 항목 강조 유지

구구성 요소 Anatomy

패널 / 섹션 Panel / Section메뉴를 담는 면과 묶음 제목
내비 항목 Nav item아이콘과 레이블로 된 메뉴
활성 항목 Active item지금 머무는 화면 강조
접기 / 하위메뉴 Collapse / Submenu너비 축소와 펼침 하위 메뉴

동동작 Interactions

펼침 / 접기 expand / collapse
이동 navigate
활성 표시 active state
모바일 오버레이 overlay / scrim

변변형 Variants

고정 vs 오버레이 overlay
접힘(아이콘만) mini / rail
다단계 nested
좌측 / 우측 배치

쓰쓰임새 Usage

앱 좌측 주 내비게이션
대시보드 / 관리자 화면
섹션 많은 앱의 계층 탐색

Sidebar를 collapse 토글로 mini / rail(아이콘만)로 줄였다 펼치게 하고, 현재 active item은 계속 강조. 모바일은 overlay / scrim으로 띄워 줘.

live demo

현재 화면

🏠홈

🔍검색

🔔3알림

👤프로필

아이콘+레이블 4탭 → 탭 선택(navigate) → 활성 항목 강조 순환 → 알림에 배지 표시

구구성 요소 Anatomy

바 Bar화면 맨 아래 고정된 막대
탭 항목 Tab item아이콘 + 레이블 한 칸
활성 항목 Active지금 보는 화면을 강조 표시
배지 Badge새 알림 개수를 작은 점/숫자로

동동작 Interactions

이동 navigate / select
활성 표시 active
배지 표시 badge
같은 탭 재탭 scroll-to-top

변변형 Variants

3~5개 항목
레이블 표시 / 숨김
가운데 FAB
떠있는 floating

쓰쓰임새 Usage

모바일 앱 주요 화면 전환
홈/검색/알림/프로필
최상위 3~5개 목적지만

모바일 Bottom Navigation을 만들어. 탭 항목 4개(아이콘+레이블)를 두고, Active 항목을 강조하고 알림 탭에 Badge(3)를 띄워 줘.

live demo

파일 편집 보기 도움말

실행 취소 Ctrl+Z

다시 실행 Ctrl+Y

복사 Ctrl+C

붙여넣기 Ctrl+V

최상위 "편집" 클릭(open) → 드롭다운 펼침 → 좌우 이동(roving) → 항목 실행

구구성 요소 Anatomy

메뉴바 Menubar상단에 가로로 놓인 명령 막대
최상위 메뉴 Top-level menu파일/편집/보기 같은 분류
드롭다운 / 항목 Menu / Item펼쳐지는 목록과 명령 한 줄
단축키 Shortcut항목 옆 키 조합 안내

동동작 Interactions

열기 open (click)
좌우 이동 roving (←→)
실행 activate
하위 펼침 submenu

변변형 Variants

데스크톱 앱 메뉴바
가로형 horizontal
컴팩트(아이콘)
단축키 표시 포함

쓰쓰임새 Usage

데스크톱형 앱 전역 명령 모음
편집기/문서 도구
Navbar(이동 링크)와 구분 = 명령 메뉴

Menubar를 만들어. 최상위 메뉴 파일/편집/보기를 두고, "편집" 클릭 시 드롭다운(Menu)이 열리며 각 항목(Item)에 단축키를 표시해 줘.

live demo

개요

통계

설정

📋 개요

지난달 대비 꾸준히 성장 중입니다. 핵심 지표를 한눈에 봅니다.

📊 통계

월

화

수

⚙️ 설정

알림 받기

다크 모드

탭 선택 → 아래 패널 내용이 그 탭에 맞게 바뀐다

구구성 요소 Anatomy

탭 목록, 탭 Tab list, Tab전환할 보기를 고르는 버튼들
활성 표시기 Active indicator / Ink bar지금 선택된 탭을 가리키는 밑줄
탭 패널 Tab panel선택한 탭의 내용이 나오는 영역
오버플로 More / Scroll탭이 많으면 스크롤하거나 접음

동동작 Interactions

전환 select / switch
표시기 이동 indicator slide
키보드 이동 arrow keys
패널 표시 show panel

변변형 Variants

밑줄형 / 알약형 / 박스형 underline/pills/enclosed
스크롤형 scrollable
세로 탭 vertical
아이콘 탭

쓰쓰임새 Usage

같은 맥락의 보기를 한 화면에서 전환
섹션이 3~7개일 때 적합
설정/상세/대시보드 분류

Tabs를 밑줄형(underline)으로 만들고 활성 탭에 ink bar가 슬라이드하게. 탭 수가 넘치면 scrollable로.

live demo

🏠 홈 › 카테고리 › 현재 페이지

현재 위치 표시 → 상위 항목 가리킴(hover) → 상위 이동(navigate up)

구구성 요소 Anatomy

항목 Crumb / Item상위 단계로 가는 링크
구분자 Separator (/ or ›)단계 사이를 나누는 기호
현재 위치 Current page (non-link)지금 보는 페이지(링크 아님)
축약 Collapsed (...)길면 가운데를 접어 표시

동동작 Interactions

상위 이동 navigate up
축약 펼치기 expand
가리킴 hover
현재 항목은 링크 비활성

변변형 Variants

구분자 종류 (/ › >)
아이콘 (홈)
드롭다운 축약
모바일 단축형

쓰쓰임새 Usage

계층 위치 표시 + 상위 이동
폴더/카테고리 깊은 구조
전자상거래 카테고리 경로

Breadcrumbs의 구분자(separator)를 ›로 하고, 길어지면 가운데를 축약(collapsed ...)해. 현재 위치(current)는 링크 빼고.

live demo

개요

설치

사용법

FAQ

개요

설치

사용법

FAQ

스크롤 추적(scrollspy) → 현재 섹션의 링크가 active로 강조 + 좌측 바 이동

구구성 요소 Anatomy

링크 목록 Anchor links각 섹션으로 가는 항목들
활성 링크 Active link현재 보고 있는 섹션 표시
표시자 Indicator좌측 바로 위치를 알림
중첩 Nested소제목을 들여써 계층 표현

동동작 Interactions

클릭 점프 jump / scroll-to
스크롤 추적 scrollspy (active 갱신)
부드러운 스크롤 smooth scroll
현재 위치 강조 highlight

변변형 Variants

세로 사이드 / 가로 상단
중첩 단계 multi-level
진행 표시 progress
고정 sticky 사이드

쓰쓰임새 Usage

긴 문서/랜딩의 섹션 이동
우측 목차(읽는 위치 표시)
문서/가이드/약관 페이지

우측에 목차(Table of Contents)를 고정하고, scrollspy로 현재 섹션 active link를 강조해 줘. 소제목은 nested로 들여쓰기.

live demo

‹ 1 2 3 4 ... 12 ›

페이지 이동(go to page) → 현재 페이지 강조(active) → 이전/다음(prev/next)

구구성 요소 Anatomy

페이지 번호 Page item눌러서 그 페이지로 이동
이전/다음, 처음/끝 Prev/Next, First/Last한 칸 또는 양끝으로 이동
생략 부호 Ellipsis (...)중간 번호를 접어 숨김
현재 페이지 Current / Active지금 보는 페이지 강조

동동작 Interactions

이동 go to page
이전/다음 prev / next
점프 jump
경계 비활성 disabled

변변형 Variants

번호형 / 이전다음만
무한 스크롤 대체
페이지 크기 선택
축약형 compact

쓰쓰임새 Usage

긴 목록을 분할해 탐색
검색 결과 / 표 / 게시판
현재 위치와 전체 분량 표시

Pagination을 번호형으로, 가운데는 생략 부호(ellipsis)로 접고 이전/다음(prev/next) 버튼 추가. 현재 페이지(active)는 강조.

live demo

⋯

트리거 펼침(open) → 항목 강조 이동(highlight ↑↓) → 실행(activate) → 닫힘(dismiss)

구구성 요소 Anatomy

트리거, 메뉴 Trigger, Menu누르면 열리는 버튼과 패널
메뉴 항목 Menu item하나의 행동을 실행하는 줄
구분선 Divider / Separator항목 묶음을 시각적으로 나눔
아이콘/단축키, 하위메뉴 Submenu의미 보조와 펼쳐지는 하위 목록

동동작 Interactions

펼침/닫힘 open / close
강조 이동 highlight (↑↓)
실행 activate / select
바깥클릭 닫기 dismiss

변변형 Variants

컨텍스트 메뉴 context menu (우클릭)
분할 버튼 split button
중첩 하위메뉴 nested submenu
체크/라디오 항목 checkable

쓰쓰임새 Usage

한 트리거에 묶은 행동 목록(더보기 ⋯)
폼 값이 아닌 행동(action) 실행
편집/공유/삭제 등 보조 명령

⋯ 트리거(trigger)를 누르면 Menu가 열리고, 구분선(divider) 아래 삭제는 위험색. 항목엔 단축키(shortcut)도 표시해.

live demo

대상 위에서 우클릭 🖱️

대상 위 우클릭 → 포인터 위치에 메뉴 열림 → 항목 강조 → 하위메뉴 펼침 → 실행

구구성 요소 Anatomy

메뉴 Menu우클릭 시 뜨는 명령 묶음 판
메뉴 항목 Item눌러서 실행하는 명령 한 줄
구분선 / 단축키 Divider / Shortcut묶음 분리선과 키 안내
하위메뉴 Submenu항목에서 더 펼쳐지는 메뉴

동동작 Interactions

우클릭 열기 open (contextmenu)
강조 highlight
실행 / 펼침 activate / submenu
바깥클릭 닫기 dismiss

변변형 Variants

우클릭 vs 길게누르기(모바일)
중첩 submenu
체크 항목 checkable
아이콘 + 단축키

쓰쓰임새 Usage

대상에 종속된 행동(파일/캔버스 우클릭)
포인터 위치에 뜸(드롭다운은 버튼에 고정)
에디터/파일 탐색기 명령

파일 항목에 Context Menu를 달아. 우클릭(contextmenu)으로 포인터 위치에 열고, Divider로 묶고 "공유"는 Submenu로 펼쳐 줘.

live demo

B I U ≡ ≣ ⋯

🖱️

B / I 토글 버튼이 눌림(pressed) 상태로 켜짐 → 정렬 그룹에서 단일 선택 → 반복

구구성 요소 Anatomy

툴바 컨테이너 Toolbar도구들을 한 줄에 담는 본체
도구 버튼 Tool button아이콘 한 개짜리 실행 버튼
버튼 그룹 / 토글 Button group / Toggle묶음 + 눌림 상태가 있는 버튼
구분자 / 오버플로 Separator / More영역 나누기와 넘침 모음(⋯)

동동작 Interactions

실행 activate / click
토글 toggle (pressed)
그룹 단일선택 single-select
넘침 펼침 overflow

변변형 Variants

텍스트 에디터 툴바
가로 / 세로 방향
고정 / 플로팅
컴팩트 compact

쓰쓰임새 Usage

관련 액션을 한 줄로 묶기
에디터 / 표 / 캔버스 도구 모음
자주 쓰는 명령을 손닿는 곳에

Toolbar에 toggle button(B/I/U)을 두고, 정렬은 button group 단일선택으로. 넘치는 항목은 overflow(⋯) 메뉴로 접어 줘.

live demo

🔍 ⌘K

파일

📄 새 파일 만들기 ⌘N

📂 파일 열기 ⌘O

이동

⚡ 설정으로 이동

열기 open(⌘K) → 검색 필터(fuzzy filter) → 강조 이동(↑↓) → 실행(run) / 닫기 Esc

구구성 요소 Anatomy

오버레이 Overlay / Backdrop화면을 덮는 어두운 배경
검색 입력 Search input명령을 좁히는 입력창
명령 목록, 항목 Command list, item실행 가능한 명령들
그룹 헤더, 빈 상태 Group, Empty분류 제목과 결과 없음 안내

동동작 Interactions

열기 open (⌘K / Ctrl+K)
검색 fuzzy filter
강조 이동 highlight (↑↓)
실행 run · 닫기 Esc

변변형 Variants

전역 / 페이지 범위
최근/추천 항목
중첩 페이지 nested
액션 + 탐색 혼합

쓰쓰임새 Usage

키보드로 빠른 명령/이동
생산성 앱 · 에디터
마우스 없이 전 기능 접근

Command Palette를 ⌘K로 열고, 검색 입력(search input)으로 fuzzy filter해서 명령 목록을 좁혀. 항목엔 단축키 kbd 표시.

live demo

1✓

배송 정보

2✓

결제 수단

주문 확인

현재 단계 강조 → 다음(next) → 완료 단계는 체크로 변하고 연결선이 채워짐 → 마지막 단계 활성

구구성 요소 Anatomy

단계 Step전체를 나눈 하나의 진행 칸
단계 표시기 Step indicator번호/아이콘이 든 동그라미
연결선 Connector단계 사이를 잇는 선(진행 채움)
레이블 · 현재/완료 Label · Active / Completed단계 이름과 현재/완료(체크) 상태

동동작 Interactions

다음/이전 next / back
단계 이동 go-to-step
완료 표시 complete
유효성 검사 validate

변변형 Variants

가로 / 세로 horizontal / vertical
번호형 / 점형 / 아이콘형
선형 vs 비선형(클릭 이동)
설명 포함 description

쓰쓰임새 Usage

여러 단계 폼/온보딩(결제/가입)
긴 작업을 단계로 쪼개 안내
Progress=연속 비율
Steps=이산 단계 구분

결제 화면을 가로 Stepper로 만들고, next/back으로 단계 이동. 완료한 단계는 Completed(체크)로 바꾸고, 단계마다 validate 통과해야 다음으로 넘어가게.

live demo

변경 사항 저장✕

저장하지 않은 내용이 있습니다. 저장할까요?

스크림 페이드인 → 다이얼로그 확대/상승(open) → 흐름 차단 → 닫힘(close)

구구성 요소 Anatomy

오버레이/스크림 Scrim / Backdrop뒤 화면을 덮어 흐름을 막는 막
다이얼로그 패널 Dialog / Panel내용이 담기는 떠 있는 상자
제목/본문 Title / Body무엇을 묻는지와 설명
푸터/닫기 Footer / Close확인/취소 버튼과 닫기 (✕)

동동작 Interactions

열기/닫기 open / close
초점 가두기 focus trap
바깥/Esc 닫기 dismiss (backdrop · Esc)
스크롤 잠금 scroll lock

변변형 Variants

확인/경고 confirm / alert dialog
폼 모달 form modal
전체화면 fullscreen
강제형 non-dismissable

쓰쓰임새 Usage

흐름을 차단하고 집중 결정
확인/삭제 확정, 폼 입력
한 번에 하나만 (중첩 지양)

확인 다이얼로그(confirm)를 띄우고, backdrop 클릭과 Esc로 닫히게. 열린 동안 focus trap과 scroll lock을 적용해 줘.

live demo

필터

스크림 위로 패널이 가장자리에서 슬라이드인(open) → 바깥클릭/스와이프 닫힘(close)

구구성 요소 Anatomy

패널/스크림 Panel / Scrim가장자리에서 나오는 면과 뒤 막
드래그 핸들 Drag handle잡고 끌어 여닫는 손잡이
헤더/본문 Header / Body제목 줄과 내용 영역
닫기 Close패널을 닫는 ✕ 버튼

동동작 Interactions

열기/닫기 open / close (slide-in)
가장자리 스와이프 swipe
바깥클릭 닫기 dismiss
스냅 지점 snap points

변변형 Variants

측면 드로어 side (left/right)
하단 시트 bottom sheet
임시/고정 temporary / persistent
크기 단계 sm/md/lg

쓰쓰임새 Usage

보조 패널/모바일 시트
필터, 상세, 장바구니
모달보다 가벼운 곁 작업

오른쪽에서 들어오는 side drawer로 필터 패널을 만들고, scrim 바깥클릭과 swipe로 닫히게. 모바일은 bottom sheet + snap points로.

live demo

가격 범위

최소최대

앵커 클릭 → 옆에 컨텐츠 패널 열림(open, flip 배치) → 상호작용 → 바깥클릭 닫힘

구구성 요소 Anatomy

앵커/트리거 Anchor / Trigger팝오버를 여는 기준 버튼
컨텐츠 면 Content / Surface내용이 담기는 작은 패널
화살표 Arrow / Beak앵커를 가리키는 뾰족한 표시
배치 Placement위/아래 등 열리는 방향

동동작 Interactions

열기/닫기 open / close (click)
위치 잡기 positioning / flip
바깥클릭 닫기 dismiss
제어 controlled

변변형 Variants

클릭 vs hover 열림
화살표 유무 with/without arrow
메뉴/폼 담기 interactive
제어형 controlled

쓰쓰임새 Usage

앵커 옆 작은 상호작용 패널
필터, 프로필 카드, 인라인 폼
입력 가능 = 툴팁과 구별

버튼을 anchor로 화살표(arrow) 달린 popover를 띄우고, 안에 입력 폼을 넣어 줘. 공간 부족하면 flip으로 위치 잡고 바깥클릭에 닫히게.

live demo

⚠️정말 삭제할까요?
이 작업은 되돌릴 수 없어요.

삭제 버튼 클릭 → 위에 팝오버 열림(open) → 취소(dismiss) 또는 삭제(confirm)

구구성 요소 Anatomy

트리거 Trigger팝오버를 여는 본체(보통 위험 버튼)
팝오버 · 메시지 Popover · Message버튼 옆에 뜨는 작은 확인 문구
확인/취소 버튼 Confirm / Cancel행동을 실행하거나 그냥 닫기
화살표 Arrow어느 버튼에서 나왔는지 가리킴

동동작 Interactions

열기 open (클릭)
확인 confirm
취소 cancel / dismiss
바깥클릭 닫기 dismiss

변변형 Variants

위험(빨강) 확인 danger
아이콘(경고) 유무
인라인 vs 모달 대체
커스텀 버튼 문구/색

쓰쓰임새 Usage

되돌리기 어려운 행동의 가벼운 재확인
삭제 버튼 바로 옆
모달=전체 차단
Popconfirm=가벼운 인라인 확인

삭제 버튼에 Popconfirm을 붙여 줘. 위쪽으로 뜨고 Arrow 포함, Confirm은 빨강(danger), 바깥클릭(dismiss)으로 닫히게.

live demo

설정 (Settings)

🖱️

아이콘에 가리킴(hover/focus) → 지연(delay) 후 텍스트 말풍선 표시(show) → 떠나면 숨김(hide)

구구성 요소 Anatomy

트리거 대상 Trigger / Target가리키면 툴팁이 뜨는 대상
말풍선 Tooltip bubble짧은 설명이 담긴 작은 상자
화살표 Arrow대상을 가리키는 꼬리
배치 Placement위/아래 등 뜨는 방향

동동작 Interactions

표시 show (hover / focus)
지연 delay (enter / leave)
숨김 hide
비상호작용 non-interactive

변변형 Variants

위치 4방향 placement
즉시/지연 instant / delayed
텍스트 전용 vs rich
항상 표시 always-on

쓰쓰임새 Usage

짧은 보조 설명 (텍스트 전용)
아이콘 버튼 의미 알리기
입력 불가 = 팝오버와 구별

아이콘 버튼에 tooltip을 붙여 hover/focus로 뜨게 하고, enter delay를 300ms 주고 위쪽 placement에 화살표를 달아 줘. 텍스트만.

live demo

✔ 변경 사항이 저장되었습니다 실행취소 ✕

모서리에서 슬라이드인(enter) → 타이머 막대 진행 → 자동 사라짐(auto-dismiss) → 슬라이드아웃

구구성 요소 Anatomy

컨테이너/메시지 Container / Message알림 상자와 안내 문구
상태 아이콘 Icon성공/오류를 알리는 그림
액션 Action (Undo)실행취소 같은 즉시 버튼
닫기/타이머 Dismiss / Progress✕와 자동 사라짐 막대

동동작 Interactions

등장 enter (slide/fade)
자동 사라짐 auto-dismiss (timeout)
스와이프 닫기 swipe-to-dismiss
쌓임 stacking / queue

변변형 Variants

상태 success/error/info/warning
액션 포함 with action
위치 상단/하단
지속형 persistent

쓰쓰임새 Usage

비차단 알림 (저장됨/오류)
잠깐 떴다 사라짐
떠 있음 = 얼럿과 구별

저장 성공 시 하단에 toast를 slide-in으로 띄우고, 3초 auto-dismiss에 타이머 막대를 보여 줘. 실행취소(Undo) 액션 버튼과 큐 stacking도.

live demo

⚠️

저장 공간 부족남은 용량이 5% 미만입니다.

페이지 흐름 안 인라인 표시(show) → 색 띠로 심각도 강조 → 닫기(dismiss), 비차단

구구성 요소 Anatomy

아이콘/제목 Icon / Title심각도 그림과 한 줄 제목
메시지 Message상황을 설명하는 본문
액션/링크 Action / Link해결로 이어지는 버튼/링크
색 띠/닫기 Accent bar / Dismiss왼쪽 색 띠와 닫기 ✕

동동작 Interactions

표시 show
닫기 dismiss
펼치기 expand (상세)
인라인 고정 non-floating

변변형 Variants

심각도 success/info/warning/error
인라인 vs 페이지 배너
제목 유무 with/without title
닫기 가능 dismissible

쓰쓰임새 Usage

맥락 안 상태/경고 메시지
흐름을 차단하지 않음
인라인 고정 = 토스트와 구별

폼 위에 warning 심각도의 인라인 alert(banner)를 두고, 왼쪽 색 띠(accent bar)와 아이콘/제목을 넣어 줘. dismissible로 닫기 ✕도.

live demo

🔔

알림모두 읽음

👤민수님이 댓글을 남겼어요

2분 전

⭐PR이 승인됐어요

10분 전

📦배포가 완료됐어요

1시간 전

벨 클릭 → 패널 열림(open) → 항목 읽음 처리(mark-read) → 배지 3 → 2 반복

구구성 요소 Anatomy

벨 아이콘 Bell trigger눌러서 패널을 여는 진입점
개수 배지 Count badge안 읽은 알림 수를 보여줌
드롭다운 패널 Panel알림 목록이 펼쳐지는 면
알림 항목 / 읽음 표시 Item / Unread dot아바타/내용/시간 + 안읽음 점

동동작 Interactions

열기 open · 항목 클릭 navigate
읽음 처리 mark-read
모두 읽음 mark-all-read
삭제 dismiss

변변형 Variants

드롭다운 / 전체 패널 drawer
탭 (전체 / 안읽음)
그룹 묶음 grouped
실시간 푸시 realtime

쓰쓰임새 Usage

인앱 알림 모음
소셜 / 협업 앱 활동 피드
안 읽음 개수 노출

Notification Center를 만들어 줘. Bell trigger에 안읽음 Count badge, 클릭하면 Panel이 열리고 항목별 mark-read + 전체 mark-all-read.

live demo

📭

아직 항목이 없어요

첫 항목을 추가하면 여기에 목록이 표시됩니다.

＋ 추가하기 샘플 불러오기

아이콘 + 제목 + 설명 + 주 행동(CTA) 버튼이 부드럽게 맥동하며 다음 행동을 유도

구구성 요소 Anatomy

일러스트 / 아이콘 Illustration / Icon비어 있음을 한눈에 알리는 그림
제목 Title왜 비었는지 한 줄로
설명 Description다음에 무엇을 할지 안내
주 행동 / 보조 링크 Primary CTA / Secondary바로 누를 버튼 + 보조 선택

동동작 Interactions

행동 유도 click CTA
맥락별 표시 render-by-context
초기 / 검색없음 / 오류 분기

변변형 Variants

첫 사용 onboarding
검색결과 없음 no-results
오류 error
권한없음 no-permission

쓰쓰임새 Usage

데이터가 없을 때 화면 채우기
막다른 화면 대신 다음 행동 안내
리스트 / 검색 / 대시보드 초기

리스트가 비면 Empty State를 보여 줘. icon + 제목 + 설명에 primary CTA(추가하기) 버튼, 검색결과 0건일 땐 no-results 변형으로.

live demo

✓

결제가 완료됐어요

영수증을 이메일로 보내 드렸어요.
주문 내역은 마이페이지에서 확인할 수 있어요.

영수증 보기홈으로

성공 상태 진입 → 체크 아이콘 팝(pop) → 제목/설명/주 행동 노출 반복

구구성 요소 Anatomy

아이콘/일러스트 Icon / Illustration상태를 한눈에 알리는 그림
상태 제목 Title성공/오류/404 한 줄 요약
설명 Description무슨 일인지 보충 안내
주/보조 행동 Primary / Secondary action다음에 할 일 버튼

동동작 Interactions

행동 클릭 action
상세 펼침 expand details
재시도 retry
이동 navigate

변변형 Variants

성공 / 오류 success / error
404 / 403 not-found
경고 warning
일러스트 유무

쓰쓰임새 Usage

작업 완료 안내 (전체 화면)
오류 / 없는 페이지 안내
빈 목록(Empty State)과 구분

Result Page를 만들어 줘. 결제 성공 success 상태에 Title/설명, Primary action(영수증 보기) 버튼. error/404 변형도.

live demo

새 글

🔔

기능 안내

여기서 새 글을 써요

1 / 4다음

딤 오버레이 + 스포트라이트가 대상을 강조 → 툴팁 카드 안내 → 다음(next) 단계로 이동

구구성 요소 Anatomy

스포트라이트 Spotlight / Highlight구멍 뚫린 오버레이로 대상만 밝힘
툴팁 카드 Tooltip card대상 옆에 붙는 설명 말풍선
단계 표시 Step counter (1/4)지금 몇 번째인지 알려줌
다음/이전/건너뛰기 Next / Prev / Skip투어를 앞뒤로 옮기거나 끝냄

동동작 Interactions

시작 start
다음/이전 next / prev step
대상 강조 spotlight target
건너뛰기 skip / finish

변변형 Variants

스포트라이트 vs 단순 툴팁
다단계 multi-step
자동 진행 auto-advance
비콘(점) beacon

쓰쓰임새 Usage

첫 사용자 온보딩
새 기능 안내
핵심 화면 한 바퀴 소개

첫 로그인 때 Tour를 띄워 줘. Spotlight로 대상을 강조하고 툴팁 카드에 Step counter(1/4)와 다음/건너뛰기(Skip) 버튼을 넣어.

live demo

글쓰기✏️

문의💬

맨 위로⬆️

우하단 고정 FAB → hover/클릭하면 액션들이 위로 펼침(speed dial) → 다시 접힘

구구성 요소 Anatomy

떠있는 버튼 Floating button (FAB)화면 위에 고정된 둥근 단축 버튼
주 액션 아이콘 Main icon대표 행동을 나타내는 가운데 아이콘
펼침 액션 Speed-dial actions눌렀을 때 부채처럼 펴지는 보조 버튼
맨 위로 Back-to-top긴 페이지를 단번에 위로 올림

동동작 Interactions

클릭 액션 action
펼침 expand (speed dial)
스크롤 시 표시 show-on-scroll
맨 위로 scroll-to-top

변변형 Variants

단일 FAB vs 스피드다이얼
맨 위로 버튼 back-to-top
채팅/도움말 버튼
아이콘+라벨 확장형

쓰쓰임새 Usage

화면 위 고정 단축 액션
글쓰기/맨 위로/문의
모바일 주요 행동 1개

우하단에 Float Button(FAB)을 두고, 클릭하면 Speed dial로 글쓰기/문의/맨 위로 액션이 위로 펼쳐지게. show-on-scroll로 스크롤하면 나타나게 해 줘.

live demo

신상품

무선 헤드폰

노이즈 캔슬링, 30시간 재생

🖱️

표면(surface) + 미디어 + 헤더/본문 + 액션 → 가리킴 시 떠오름(hover elevation)

구구성 요소 Anatomy

표면/컨테이너 Container / Surface내용을 한 묶음으로 감싸는 면
미디어 / 헤더 Media / Header대표 이미지와 제목 영역
본문 Body / Content설명과 메타 정보가 들어감
액션 Actions / Footer하단의 버튼/링크 영역

동동작 Interactions

전체 클릭형 click / navigate
가리킴 떠오름 hover elevation
더보기 expand
액션 버튼 click

변변형 Variants

기본 / 아웃라인 / 엘리베이션 elevated
가로형 horizontal
클릭형 actionable
미디어 위치 위/옆

쓰쓰임새 Usage

관련 정보를 한 묶음으로
상품/게시글/프로필 카드
그리드로 나열해 비교

엘리베이션 카드에 상단 미디어와 헤더/본문, 하단 액션 영역을 넣고, 가리킴(hover) 시 그림자가 올라오게.

live demo

김하늘

안녕하세요, 회의 자료...

›

박서준

내일 일정 공유드립니다

›

이도윤

감사합니다 :)

›

선행 아바타 + 주/보조 텍스트 + 후행 아이콘 → 가리킴 강조(hover)가 항목 따라 내려감

구구성 요소 Anatomy

리스트 / 항목 List / Item항목을 세로로 쌓은 묶음
선행 요소 Leading앞쪽 아바타/체크 자리
주/보조 텍스트 Primary / Secondary제목과 부가 설명 두 줄
후행 요소 / 구분선 Trailing / Divider뒤쪽 아이콘과 항목 사이 선

동동작 Interactions

선택 select · 클릭 navigate
스와이프 액션 swipe actions
끌어 정렬 drag-reorder
가리킴 강조 hover

변변형 Variants

단일 / 2줄 / 3줄 행
아바타 리스트
체크 / 스위치 리스트
섹션 헤더 grouped

쓰쓰임새 Usage

동질 항목을 세로로 나열
설정 / 대화 / 연락처
스크롤 가능한 긴 목록

리스트 항목에 선행 아바타와 주/보조 텍스트, 후행 아이콘을 넣고, 끌어 정렬(drag-reorder)도 되게 해 줘.

live demo

이름

점수▲

가나다

마바사

아자차

헤더 행 클릭 → 정렬 아이콘 토글(asc/desc) → 행 재정렬(reorder)

구구성 요소 Anatomy

헤더 / 행 / 셀 Header / Row / Cell데이터를 가로세로로 담는 칸
정렬 아이콘 Sort indicator어느 열로 정렬됐는지 표시
선택 체크박스 Row selection여러 행을 골라 일괄 처리
페이지네이션 / 툴바 Toolbar검색/필터/쪽 넘김 영역

동동작 Interactions

정렬 sort (asc/desc)
선택 select rows · 필터 filter
열 크기조절 resize
행 펼침 expand · 가상 스크롤

변변형 Variants

기본 table vs 데이터 그리드 inline edit / 고정열
줄무늬 striped
고정 헤더 sticky header
밀도 density

쓰쓰임새 Usage

행/열 구조의 데이터
목록 / 관리자 대시보드
정렬/필터로 탐색

데이터 그리드에 정렬(sort) 가능한 헤더와 선택 체크박스를 넣고, 고정 헤더(sticky header)로 스크롤되게 해 줘.

live demo

이름홍길동

이메일hong@example.com ⧉ 복사

상태활성

레이블(dt) : 값(dd) 쌍을 행으로 나열 → 행에 마우스를 올리면(hover) 값 복사(copy) 아이콘 등장

구구성 요소 Anatomy

목록 Description list (dl)속성 쌍들을 감싸는 본체
용어 / 레이블 Term / Key (dt)왼쪽 항목 이름
값 Description / Value (dd)레이블에 대응하는 내용
행 Row레이블+값 한 줄 묶음

동동작 Interactions

표시 render (static)
값 복사 copy
인라인 편집 inline-edit

변변형 Variants

가로(레이블:값) / 세로
2열 그리드
편집 가능 editable
카드 내 메타

쓰쓰임새 Usage

속성 / 상세 정보 표시
프로필 상세 / 주문 요약
스펙 / 메타데이터

프로필 상세를 Description List(dl/dt/dd)로. 각 row의 값에 hover하면 copy 버튼, 권한 있으면 inline-edit도.

live demo

배송은 얼마나 걸리나요?▼

평균 2~3일 소요되며, 주말/공휴일은 제외됩니다.

교환/반품 정책▼

결제 수단▼

헤더(트리거) 클릭 → 꺾쇠 회전(rotate) + 패널 펼침(expand) → 다시 접힘(collapse)

구구성 요소 Anatomy

항목 Item접고 펴는 한 단위
헤더/트리거 Header / Trigger눌러서 여닫는 제목 줄
펼침 아이콘 Chevron열림/닫힘을 알리는 꺾쇠
패널/본문 Panel / Content펼쳐지면 보이는 내용

동동작 Interactions

펼침/접힘 expand / collapse
토글 toggle
아이콘 회전 rotate
단일 개방 single-open vs 다중

변변형 Variants

단일 디스클로저 vs 아코디언(그룹)
아이콘 위치
테두리형 bordered
밋밋형 flush

쓰쓰임새 Usage

긴 내용을 접어 두기
FAQ / 설정 섹션
화면 공간 절약

아코디언을 단일 개방(single-open)으로 만들고, 트리거 클릭 시 꺾쇠가 회전(rotate)하며 패널이 펼쳐지게 해 줘.

live demo

🔔 필터: 신상품 ×

활성 #디자인 #개발

배지=개수/점 표시(count) · 칩=선택/삭제 가능 · 태그=분류 라벨

구구성 요소 Anatomy

배지 Badge개수나 점을 덧붙여 표시
칩 / 태그 Chip / Tag선택/분류를 담는 작은 라벨
선행 아이콘 Leading / Avatar라벨 앞 아이콘이나 사진
삭제 버튼 / 점 Remove / Dot지우기 버튼과 상태 점

동동작 Interactions

표시 display (count)
선택/토글 select / toggle
삭제 remove / dismiss
입력 칩 생성 create (Enter)

변변형 Variants

배지: 숫자 / 점
칩: input / filter / choice / action
태그: 분류 라벨
색 상태 · 삭제 가능

쓰쓰임새 Usage

상태/개수 표시 = 배지
선택/필터/입력 = 칩
분류 라벨 = 태그

알림 아이콘에 개수 배지(Badge)를 붙이고, 선택한 필터는 삭제 가능한 필터 칩(filter chip)으로, 분류는 태그(Tag)로 표시해 줘.

live demo

KM3 이 +3

이미지 → 폴백(이니셜) → 상태 점(online) 깜빡임 → 그룹 겹침 + "+N"

구구성 요소 Anatomy

이미지/폴백 Image / Initials사진, 없으면 이니셜로 대체
상태 점 Status dot / Presence접속 상태를 점으로 표시
배지 Badge알림 수 등을 모서리에 표기
그룹(겹침) Avatar group / Stack여러 명을 겹쳐 묶어 보여줌

동동작 Interactions

이미지 로드 실패 → fallback
클릭 → 메뉴 open menu
가리킴 → 툴팁 hover / tooltip
"+N" 클릭 → 나머지 펼침

변변형 Variants

원형 / 사각 / 라운드
크기 xs - xl
상태 표시 online / away / busy
그룹 겹침 overflow "+N"

쓰쓰임새 Usage

사용자/엔터티 식별
프로필 / 댓글 / 멤버 목록
접속 상태를 점으로 함께

Avatar group로 멤버 5명을 겹쳐 보여 주고, 6명 이상이면 "+N" overflow로. 각 아바타에 presence 상태 점, 이미지 깨지면 이니셜 폴백으로.

live demo

업로드 중

선형 바 채움(0 → 100%) + 퍼센트 레이블 갱신 + 원형 스피너 회전(불확정)

구구성 요소 Anatomy

트랙 Track진행이 채워질 빈 바탕
채움 Fill / Indicator진행한 만큼 차오르는 막대
퍼센트 레이블 Value label현재 진행률을 숫자로 표시
회전자/링 Spinner / Ring길이 모를 때 도는 표시

동동작 Interactions

진행 갱신 update (0 → 100%)
불확정 표시 indeterminate
완료 complete
aria-valuenow 동기화

변변형 Variants

선형 linear / 원형 circular / 스피너
확정 determinate vs 불확정 indeterminate
레이블 동반 with label
버퍼 / 단계 buffer / steps

쓰쓰임새 Usage

작업 진행 상태 표시
업로드 / 로딩 / 설치
길이 모름 = 불확정(스피너)

파일 업로드에 determinate 선형 바를 붙이고 퍼센트 레이블도. 응답 대기엔 indeterminate 스피너, 끝나면 complete 상태로 체크 표시.

live demo

카드 모양 스켈레톤(원형 + 텍스트 줄)에 셰머 그라데이션이 좌 → 우로 쓸고 지나감(loop)

구구성 요소 Anatomy

스켈레톤 블록 Blocks줄/원/사각의 회색 자리표시
셰머 효과 Shimmer / Pulse로딩 중임을 알리는 빛 쓸기
레이아웃 미러 Layout mirror실제 콘텐츠와 같은 배치

동동작 Interactions

로딩 중 표시 show while loading
데이터 도착 → 교체 swap to content
셰머 애니메이션 shimmer

변변형 Variants

pulse vs shimmer (wave)
카드 / 리스트 / 텍스트 모양
반복 횟수 count
최종 레이아웃과 동일 형태

쓰쓰임새 Usage

로딩 중 최종 레이아웃 암시
체감 속도 개선
스피너 대체

목록 로딩 중에 Skeleton으로 카드 3개를 띄워(layout mirror) 자리를 잡고, shimmer 애니메이션. 데이터 오면 swap to content로 교체.

live demo

이메일로 로그인

계정 비밀번호 입력

또는

소셜 계정으로 계속

구글 / 깃허브

프로필

알림

보안

위/아래 두 블록을 가로 구분선(가운데 "또는" 레이블)으로 분리 + 세로 구분선 예시, 은은한 강조 반복

구구성 요소 Anatomy

선 Line / Rule콘텐츠를 가르는 얇은 선
레이블(선택) Inset label선 가운데 들어가는 글자("또는")
여백 Spacing선 위아래 숨 쉴 간격
방향 Orientation수평/수직 어느 쪽으로 가르나

동동작 Interactions

시각 분리(정적, 상호작용 없음)
의미 부여 role="separator"
방향 알림 aria-orientation
장식용은 aria-hidden

변변형 Variants

수평 / 수직 horizontal / vertical
실선 / 점선 solid / dashed
텍스트 포함("또는")
inset / full-width

쓰쓰임새 Usage

콘텐츠 그룹 시각 분리
목록/섹션/메뉴 구간 나누기
"또는"으로 선택지 가르기

로그인 폼 두 구역을 Divider로 나눠. 가운데 "또는" Inset label을 넣고, 메뉴 사이엔 vertical 세로 구분선을. 장식용 선은 role="separator" 없이.

live demo

‹

›

슬라이드가 수평으로 넘어가며(next) 점 표시기 갱신 + 좌/우 화살표, 무한 루프

구구성 요소 Anatomy

뷰포트/트랙 Viewport / Track보이는 창과 그 안을 흐르는 줄
슬라이드 Slide한 번에 한 장씩 보이는 항목
이전/다음 Prev / Next arrows좌우로 넘기는 화살표
점 표시기 Dots / Pagination현재 몇 번째인지 점으로 표시

동동작 Interactions

넘기기 next / prev / slide
스와이프 swipe / drag
점 클릭 go-to · 자동재생 autoplay
무한 루프 loop

변변형 Variants

단일 / 멀티 per view
무한 infinite vs 유한
화살표 / 점 유무
페이드 fade vs 슬라이드

쓰쓰임새 Usage

한 공간에서 여러 항목 순환
배너 / 갤러리 / 추천
미디어 순환(목록 페이지 ≠ Pagination)

배너 Carousel를 autoplay + 무한 루프(loop)로. 하단 점 표시기(dots)로 현재 위치 표시하고 모바일에선 swipe로 넘기게.

live demo

‹

›

배경(backdrop) 어둡게 → 가운데 이미지 → 다음(next) 누르면 이미지 슬라이드 + 카운터 갱신

구구성 요소 Anatomy

배경/이미지 Backdrop / Image어두운 막과 확대 이미지
이전/다음 Prev / Next arrows좌우 이동 화살표
닫기 Close (×)뷰어를 닫는 버튼
카운터/썸네일 Counter / Thumbnails"2 / 5" 위치와 미리보기

동동작 Interactions

열기 open (썸네일 클릭)
다음/이전 navigate
줌/팬 zoom / pan
닫기 dismiss (Esc / 배경)

변변형 Variants

단일 / 갤러리
썸네일 스트립 thumbnail strip
캡션 caption
줌 / 회전 zoom / rotate

쓰쓰임새 Usage

이미지 확대 보기
갤러리 탐색
상품 사진/포트폴리오

썸네일을 클릭하면 Lightbox가 열리게 하고, Prev/Next arrows로 갤러리를 넘기게 해 줘. Counter("2 / 5")와 Backdrop 클릭 닫기도.

live demo

노을 풍경

3열 메이슨리(높이 제각각) → 타일 가리킴(hover) → 오버레이 캡션 노출

구구성 요소 Anatomy

그리드 Grid타일을 정렬하는 전체 격자
타일/항목 Tile / Item개별 이미지 한 칸
메이슨리 열 Masonry columns높이가 가변인 벽돌식 열
오버레이 캡션 Overlay caption타일 위에 겹쳐 뜨는 설명

동동작 Interactions

클릭 확대 open (lightbox)
가리킴 오버레이 hover overlay
무한 스크롤 infinite-scroll
필터 filter

변변형 Variants

균일 그리드 vs 메이슨리 (높이 제각각)
정사각 vs 비율 유지
캐러셀 carousel 연계
열 개수 반응형

쓰쓰임새 Usage

이미지 모음 표시 (포트폴리오)
핀터레스트형 피드
Masonry=가변 높이 벽돌식
일반 Grid=정렬된 칸

사진들을 masonry 3열로 깔고, 타일 hover 시 overlay caption 표시. 클릭하면 lightbox로 확대.

live demo

🏔️

16:9

종횡비 박스 고정 → skeleton/blur 플레이스홀더 → 지연 로드 → 흐림→선명(blur-up)

구구성 요소 Anatomy

이미지 Image실제로 보여줄 사진/그림
플레이스홀더 Placeholder (blur / skeleton)로드 전 자리를 채우는 임시 표시
종횡비 박스 Aspect-ratio box로드 전부터 크기를 잡아 두는 틀
대체 텍스트/폴백 Alt text / Fallback못 읽을 때 대신 보일 글/이미지

동동작 Interactions

지연 로드 lazy-load (뷰포트 진입)
흐림→선명 blur-up / fade-in
로드 실패 폴백 error fallback
클릭 확대 lightbox 연계

변변형 Variants

object-fit cover / contain
blur placeholder vs skeleton
반응형 srcset / sizes
고정 비율 fixed ratio

쓰쓰임새 Usage

사진/썸네일 표시 (목록/갤러리)
종횡비 고정으로 레이아웃 이동 방지 CLS
많은 이미지는 lazy-load로

썸네일 목록을 aspect-ratio box로 고정하고, lazy-load + blur-up 적용. 로드 실패 시 fallback 이미지로.

live demo

BEFORE AFTER

⇄

분할 핸들 끌기(drag) → 분할 위치 이동(reveal) → before/after 비율 바뀜

구구성 요소 Anatomy

두 레이어 Before / After layers겹쳐 놓은 이전/이후 이미지
분할 핸들 Divider handle끌어서 경계를 옮기는 손잡이
분할선 Split line두 레이어를 가르는 세로선
라벨 Before / After labels어느 쪽이 전/후인지 표시

동동작 Interactions

핸들 끌기 drag handle
분할 위치 이동 reveal
클릭 점프 click to jump
키보드 이동 arrow keys

변변형 Variants

좌우 vs 상하 분할
라벨 유무
자동 스윕 auto-sweep
두 영상 비교

쓰쓰임새 Usage

보정 전후 비교 (사진)
리디자인 전후 비교 (디자인)
화질/필터 효과 대조

두 이미지를 겹쳐 before-after slider로. 가운데 divider handle을 drag하면 경계가 움직이고, auto-sweep도 켜 줘.

live demo

🎬

0:12 / 3:40 🔊 ⤢

재생(play) → 진행 바 채움(seek) → 타임코드 갱신 → 일시정지(pause) 반복

구구성 요소 Anatomy

재생 영역 Stage영상/앨범아트가 나오는 화면
재생/일시정지 Play / Pause눌러서 틀고 멈추는 토글 버튼
진행 바(스크러버) Scrubber / Seek bar현재 위치 표시, 끌어 탐색
시간/볼륨/전체화면 Timecode / Volume / Fullscreen경과시간, 소리 크기, 화면 키움

동동작 Interactions

재생/정지 play / pause
탐색 seek (scrub)
볼륨 조절 volume
전체화면 toggle fullscreen

변변형 Variants

비디오 / 오디오 플레이어
미니 플레이어 mini
라이브 live 스트림
자막 / PIP captions / picture-in-picture

쓰쓰임새 Usage

동영상 재생 (강의 / VOD)
오디오 재생 (팟캐스트 / 음악)
자막 / 배속(speed) 제공

Media Player에 Scrubber(seek bar)와 타임코드를 붙이고, Play/Pause 토글 + Captions(자막)/배속 메뉴를 추가해 줘.

live demo

javascript ⧉ 복사복사됨 ✓

1const greet = (name) => {

2 return `안녕, ${name}`;

3};

4// 호출

5greet("세계");

언어 라벨 + 줄 번호 + 구문 강조(syntax) → 복사 버튼 클릭 → "복사됨 ✓"로 전환

구구성 요소 Anatomy

컨테이너 Code block코드를 담는 어두운 영역
언어 라벨/복사 Language tag / Copy언어 표시와 복사 버튼
줄 번호 Line numbers왼쪽 줄 번호 열
구문 강조 Syntax highlight키워드/문자열 색 구분

동동작 Interactions

복사 copy (클릭)
복사 완료 표시 copied feedback
줄 강조 highlight line
가로 스크롤 scroll-x

변변형 Variants

줄번호 유무
파일명 탭 filename tab
diff(추가/삭제)
접기 collapse

쓰쓰임새 Usage

코드/명령 표시
문서/튜토리얼
개발 도구/콘솔

Code block에 language tag와 line numbers를 넣고, copy button은 클릭 시 "복사됨 ✓"로 바뀌게 해 줘.

live demo

▸📁 src

▸📁 components

📄 Button.tsx

📄 Card.tsx

📄 index.ts

📄 README.md

루트 폴더(src)가 펼쳐지며 하위 폴더(components) 노출 → components가 다시 펼쳐져 3단계(레벨 3) 깊이까지 파일 노출 → 접힘(collapse), loop

구구성 요소 Anatomy

트리/노드 Tree / Node계층으로 늘어선 항목 한 줄
펼침 토글 Expand toggle▸/▾로 하위를 열고 닫음
들여쓰기/가이드선 Indent / Guide line깊이를 들여쓰기와 선으로 표현
잎/가지 Leaf / Branch끝 항목과 자식을 가진 항목

동동작 Interactions

펼침/접힘 expand / collapse
선택 select
키보드 이동 arrow nav
다중 선택 checkbox

변변형 Variants

파일 트리 File tree
체크박스 트리 checkbox
드래그 정렬 drag reorder
지연 로드 lazy-load

쓰쓰임새 Usage

계층/중첩 구조 탐색
파일 탐색기 / 카테고리
조직도 / 메뉴 트리

Tree View로 파일 트리를 그리고, 폴더는 expand / collapse 토글(▸/▾). 노드 select 시 강조하고, 자식은 lazy-load로 펼칠 때 불러오게.

live demo

방금 전

배송 출발

오전 9:14

상품 준비 완료

어제

주문 접수

새 이벤트가 맨 위로 슬라이드되며 추가(prepend) → 최신 노드가 현재(current)로 채워짐

구구성 요소 Anatomy

축 / 레일 Axis / Rail항목을 꿰는 세로(가로) 선
노드 / 마커 Node / Marker각 사건을 찍는 점
연결선 Connector노드 사이를 잇는 선
항목 (시각 + 내용) Item (Timestamp + Content)언제 무슨 일이 있었는지

동동작 Interactions

펼침 expand
스크롤 scroll
항목 추가 prepend (live)

변변형 Variants

세로 / 가로
좌우 교대 alternating
아이콘 마커
날짜 그룹 date-grouped

쓰쓰임새 Usage

시간순 사건 나열
주문 추적 / 활동 로그
회사 연혁 / 변경 이력

주문 추적을 세로 Timeline으로. 각 node에 timestamp와 내용을 달고, 새 이벤트는 맨 위로 prepend되게. 최신은 current 강조.

live demo

2026년 7월 ‹›

일

월

화

수

목

금

토

월 이동(navigate) → 날짜 선택(select) → 이벤트 점/막대(event pill) 표시 + 오늘 강조

구구성 요소 Anatomy

헤더(월 이동) Header / Nav이전/다음 달로 이동
요일 헤더 Weekday header일~토 요일 줄
날짜 그리드/칸 Date grid / Day cell7열 달력 칸
오늘/이벤트 Today / Event pill오늘 강조와 일정 점/막대

동동작 Interactions

월 이동 navigate
날짜 선택 select
이벤트 클릭 open event
보기 전환 view switch (월/주/일)

변변형 Variants

월 / 주 / 일 / 아젠다 보기
이벤트 점 / 막대 dot / pill
범위 선택 range
드래그 생성 drag-create

쓰쓰임새 Usage

일정/이벤트 표시 관리
예약/스케줄러 화면
큰 뷰(폼 입력은 Date Picker)

Calendar를 월(month) 보기로 만들고 각 day cell에 event pill을 표시. 주/일 보기로 view switch도 추가해 줘.

live demo

탐색기

미리보기

🖱️

분할 막대(splitter)를 좌우로 드래그 → 양쪽 패널 크기가 동시에 조절(drag-resize), 핸들 표시

구구성 요소 Anatomy

패널 Pane내용이 담기는 좌우(상하) 영역
분할 막대 Splitter / Gutter패널 사이의 끌 수 있는 경계
드래그 핸들 Drag handle막대 위 잡는 부분
최소 / 최대 Min / Max size패널이 줄거나 늘 한계

동동작 Interactions

끌어 크기조절 drag-resize
접기 collapse
더블클릭 리셋 reset
스냅 snap

변변형 Variants

수직 / 수평 분할
다중 패널 multi-pane
접이식 collapsible
비율 고정

쓰쓰임새 Usage

좌우 / 상하 영역 크기 조절
코드 에디터 + 미리보기
파일 탐색기 + 본문

화면을 Split Pane으로 나누고 가운데 splitter를 drag-resize 가능하게. 더블클릭하면 reset, 좁아지면 한쪽 collapse.

live demo

할 일2

로그인 화면

API 설계

진행 중

결제 연동

완료

배포 설정

결제 연동

카드를 진행 중 → 완료로 드래그 앤 드롭 → 컬럼 개수(count) 갱신

구구성 요소 Anatomy

보드 Board컬럼들을 담는 전체 판
컬럼/레인 Column / Lane상태별로 카드를 모으는 세로 줄
카드 Card옮겨 다니는 작업 한 건
컬럼 헤더 Column header제목 + 카드 개수 표시

동동작 Interactions

카드 드래그 앤 드롭 drag-and-drop (컬럼 간)
정렬 reorder
추가 add card
컬럼 접기 collapse

변변형 Variants

WIP 제한 WIP limit
스윔레인 swimlane
카드 라벨/담당자
컬럼 추가

쓰쓰임새 Usage

작업 흐름 관리
트렐로/지라형 보드
상태별 진행 한눈에 보기

Kanban Board를 3개 column(할 일/진행 중/완료)으로. 카드는 drag-and-drop으로 옮기고, column header에 개수 표시 + WIP limit도.

live demo

🙂

오늘 회의 몇 시예요?

오후 3시예요!

오후 2:14

받은 말풍선(좌/회색/아바타) 등장 → 보낸 말풍선(우/파랑/꼬리+시간) 슬라이드 인

구구성 요소 Anatomy

말풍선 Bubble메시지 글자를 담는 둥근 면
꼬리 Tail / Beak발신자 쪽을 가리키는 뾰족한 끝
아바타 Avatar누가 보냈는지 보여주는 작은 사진
시간/이름 Timestamp / Sender name보낸 시각과 발신자 이름

동동작 Interactions

길게눌러 메뉴 long-press menu
반응 추가 react / 답장 reply
복사 copy
스크롤로 과거 메시지 load more

변변형 Variants

보낸(우/파랑) / 받은(좌/회색)
연속 메시지 그룹 grouping
시스템 메시지
미디어/파일 버블

쓰쓰임새 Usage

메신저/채팅 대화 표시
발신/수신을 좌우로 구분
AI 챗봇 대화 로그

Chat Bubble을 보낸/받은으로 나누고, 보낸 쪽엔 Tail과 Timestamp를, 받은 쪽엔 Avatar를 붙여 줘. 연속 메시지는 grouping으로 묶고.

live demo

📎 😊

➤

플레이스홀더 자리에 글자 타이핑 → 줄 늘어남(auto-grow) → 전송 버튼 펄스 → 비워짐

구구성 요소 Anatomy

입력 영역 Input / Textarea글자를 적는 칸(auto-grow)
전송 버튼 Send메시지를 보내는 버튼
첨부 버튼 Attach파일/사진을 붙이는 📎
이모지 Emoji표정/스티커 고르는 버튼

동동작 Interactions

입력 type / 전송 send (Enter)
줄바꿈 newline (Shift+Enter)
자동 높이 auto-grow
첨부 attach

변변형 Variants

단순 / 리치(서식 툴바)
첨부/이모지/음성
슬래시 명령 slash command
답장 인용 바

쓰쓰임새 Usage

메시지/댓글 작성
채팅/AI 챗봇 입력
Enter 전송 + Shift+Enter 줄바꿈

Chat Composer를 만들어 줘. Textarea는 auto-grow, Enter는 send, Shift+Enter는 줄바꿈. 왼쪽에 Attach(📎)와 이모지 버튼도.

live demo

🙂

상대방이 입력 중...

작은 좌측 회색 말풍선의 점 3개가 시차(staggered)를 두고 차례로 튐

구구성 요소 Anatomy

말풍선 Bubble점을 담는 작은 회색 풍선
점 3개 Dots차례로 튀는 애니메이션 점
라벨 Label"OOO 입력 중" 안내 문구
아바타 Avatar누가 작성 중인지 보여줌

동동작 Interactions

표시 show (상대 입력 시)
사라짐 hide (메시지 도착 시)
점 애니메이션 bounce / pulse
타임아웃 후 자동 숨김

변변형 Variants

점 애니메이션 / "입력 중..." 텍스트
다중 사용자(여러 명 입력 중)
위치(말풍선 자리/헤더)

쓰쓰임새 Usage

상대가 작성 중임을 실시간 알림
채팅의 응답 대기 신호
AI 챗봇 생성 중 표시

상대가 입력하면 Typing Indicator를 보여 줘. 좌측 회색 Bubble 안에 Dots 3개가 시차로 bounce하고, 메시지 도착하면 hide.

live demo

자료 확인 부탁해요

오후 2:01

상태 아이콘이 시계(전송중) → ✓(전송됨) → ✓✓(전달) → ✓✓ 파랑(읽음)으로 순환

구구성 요소 Anatomy

상태 아이콘 Status icon시계/체크/더블체크 표시
전송됨/전달됨 Sent / Delivered✓는 전송, ✓✓는 전달
읽음 Read✓✓ 파랑 = 상대가 열어봄
시간 Timestamp보낸/읽은 시각

동동작 Interactions

상태 전이 state transition
전송중 → 전송됨 → 전달 → 읽음
실패 시 재전송 retry
읽은 사람 보기(그룹)

변변형 Variants

단일 / 더블 체크
색으로 읽음 표시
"읽음 14:03" 텍스트
안읽음 카운트

쓰쓰임새 Usage

메시지 전달/열람 여부 표시
메신저 읽음 확인
전송 실패 재시도 안내

보낸 메시지에 Read Receipt를 붙여 줘. Status icon이 Sent(✓) → Delivered(✓✓) → Read(✓✓ 파랑)로 바뀌고, 실패하면 retry 버튼.

live demo

@지민

현현우

지지민

수수아

"@" 입력 → 목록 열림(open) → 강조 이동(highlight) → 선택 → @멘션 토큰 삽입

구구성 요소 Anatomy

입력 Input글을 치는 본문 입력란
트리거 문자 Trigger char (@ / #)목록을 여는 신호 문자
제안 목록 / 항목 Suggestion list / Item아바타+이름으로 보이는 후보들
삽입된 멘션 토큰 Mention token고른 대상이 박힌 파란 칩

동동작 Interactions

트리거 입력 시 열림 open (on @)
필터 filter · 강조 이동 highlight (↑↓)
선택 삽입 select / insert
토큰화 tokenize

변변형 Variants

@사용자 / #채널 / :이모지
인라인 vs 팝업 inline / popup
아바타 표시 avatar

쓰쓰임새 Usage

채팅/댓글에서 사람 언급하기
채널/문서 가리키기 (#)
슬랙/노션식 멘션

댓글 입력창에 @ Autocomplete를 붙여 줘. "@" 입력 시 Suggestion list(아바타+이름)가 열리고, 고르면 Mention token으로 삽입되게. #채널도 같은 방식으로.

live demo

플롯 영역 Plot area 축 Axis 격자선 Gridline 범례 Legend

막대 + 선 샘플 차트 — 플롯 영역 / 축 / 격자선 / 범례를 차례로 짚어줌

영영역 / 프레임 Frame

차트 영역 Chart area차트 전체가 차지하는 바깥 사각
플롯 영역 Plot area데이터가 실제로 그려지는 안쪽
여백 Margin / Padding축/제목이 들어갈 가장자리 공간
제목 / 부제 Title / Subtitle차트가 무엇을 말하는지

축축 / 격자 Axis & Grid

축 Axis (X/Y)값을 읽는 가로/세로 기준선
축 제목 Axis title그 축이 무슨 값인지
눈금 / 레이블 Tick / Tick label축 위 눈금과 그 숫자
격자선 / 기준선 Gridline / Baseline읽기 보조선과 0 기준

데데이터 Data

데이터 시리즈 Series하나의 묶음(선/막대 한 벌)
데이터 포인트 Data point개별 값 하나(점/막대 한 칸)
데이터 레이블 Data label점/막대 옆에 적힌 값
마커 Marker선 위 점 모양 표시

주주석 / 보조 Aux

범례 Legend색/모양이 무슨 시리즈인지
툴팁 Tooltip가리킨 점의 상세값 표시
주석 Annotation특정 지점 강조 메모/선
캡션 / 출처 Caption / Source차트 아래 설명과 데이터 출처

플롯 영역에 막대+선 콤보를 그리고, Y축 격자선은 연하게, 각 데이터 포인트에 데이터 레이블을 붙여 줘. 위쪽에 범례도.

live demo

주 눈금 Major tick 보조 눈금 Minor tick 스케일: 선형(Linear) ⇄ 로그(Log)

값축의 주 눈금 / 보조 눈금 + 격자선, 그리고 선형 ⇄ 로그 스케일 전환

축축 종류 Axis types

범주축 Category axis이름/구간을 늘어놓는 축
값축 Value axis숫자 크기를 재는 축
이중 축 Dual / Secondary axis단위 다른 두 시리즈를 한 화면에

눈눈금 Ticks

주 눈금 Major tick레이블이 붙는 큰 눈금
보조 눈금 Minor tick사이를 잘게 나누는 작은 눈금
눈금 레이블 Tick label눈금에 적힌 값
눈금 간격 Interval / Step눈금 사이 간격

스스케일 Scale

선형 Linear간격이 일정한 보통 눈금
로그 Log10배씩 커지는 눈금
시간 Time날짜/시각 축
순서형 Ordinal / Category순서 있는 범주

범범위 / 기준 Domain

도메인 Domain데이터가 가지는 값의 범위
범위 Range화면 픽셀로 매핑되는 폭
원점 Origin두 축이 만나는 (0,0)
기준선 Baseline막대가 시작하는 0 선

Y축을 로그 스케일로 바꾸고 주 눈금마다 레이블, 사이에 보조 눈금을 넣어 줘. 오른쪽엔 단위 다른 이중 축을 추가하고 기준선은 0으로.

live demo

3주차
전환 72%

전환

이탈

점에 가리킴(hover) → 툴팁 등장 + 범례에서 한 시리즈 토글 off(흐려짐), 반복

범범례 Legend

항목 Key / Item시리즈 하나를 가리키는 줄
색 견본 Swatch시리즈 색을 보여주는 네모
위치 Placement위/아래/옆 배치
시리즈 토글 Toggle series클릭해 켜고 끄기

툴툴팁 Tooltip

가리킴 표시 hover점에 올리면 상세값 풍선
십자선 Crosshair커서 위치를 잇는 안내선
다중 시리즈 multi-series같은 X의 여러 값 한 번에

레데이터 레이블 Data label

값 표시 Value점/막대 옆 숫자
단위 Unit%, 원, 건 등 단위 표기
위치(끝 / 안) Outside / Inside막대 바깥 또는 안쪽

주주석 Annotation

기준선 Reference line목표/평균을 가로지르는 선
영역 Band특정 구간을 색으로 칠함
화살표 / 메모 Callout한 지점을 짚는 설명

선 위 점에 가리키면 툴팁으로 값과 단위를 보여주고, 범례는 클릭으로 시리즈를 토글되게. 목표 80에 기준선(주석)도 그어 줘.

live demo

범주형 Categorical

순차 Sequential

발산 Diverging

값에 따른 채도 Heat cells

낮음 → 높음 (색이 진해질수록 큰 값)

범주형 / 순차 / 발산 견본 띠 + 값에 따라 진해지는 히트 셀, 부드럽게 반복

채인코딩 채널 Channels

위치 / 길이 Position / Length가장 정확히 읽히는 채널
각도 / 면적 Angle / Area파이/버블에서 쓰는 채널
색 Color범주/세기를 색으로
크기 Size점 크기로 값 표현

팔팔레트 종류 Palettes

범주형 Categorical구분되는 항목마다 다른 색
순차 Sequential한 방향으로 진해지는 농담
발산 Diverging중앙 기준 양쪽으로 갈림

접접근성 Accessibility

색맹 안전 Colorblind-safe색약도 구분되는 팔레트
대비 Contrast배경과 충분히 구별
중복 인코딩 Color + Shape색 외에 모양/패턴 병행

적적용 Applying

색 범례 Color legend색이 어떤 값인지 안내
강조색 Accent한 항목만 튀게
의미 색 Semantic상승/하락 등 약속된 색

막대 색을 순차 팔레트로 값에 따라 진하게 하고, 색맹 안전한 색을 골라 줘. 상승은 파랑/하락은 빨강 의미 색으로, 옆에 색 범례도.

live demo

421월

712월

283월

884월

535월

기준선(0)에서 막대가 값축 높이만큼 자라남 → 데이터 레이블 표시

구구성 요소 Anatomy

막대 Bar값을 길이로 나타내는 사각 도형
범주축 Category axis비교 대상(카테고리)을 늘어놓는 축
값축 Value axis막대 길이의 크기를 읽는 눈금 축
데이터 레이블 / 기준선 Data label / Baseline막대 끝 숫자와 0이 시작되는 선

동동작 Interactions

막대 위 값 표시 hover 툴팁
크기순 재배열 sort
막대 클릭 상세 drill-down
막대 강조 highlight

변변형 Variants

세로 Column / 가로 Bar
둥근 모서리 rounded
음수 막대(기준선 아래)
라벨 위치(끝/안/바깥)

쓰쓰임새 Usage

범주 간 크기 비교(카테고리별 매출)
순위 보여주기(가로 막대)
피함: 시간 추세는 선 차트

세로 막대 차트(Column chart)로 월별 매출을 그려 줘. 데이터 레이블을 막대 끝에 붙이고, 크기순 정렬(sort)과 hover 툴팁도.

live demo

1분기

2분기

3분기

제품 A제품 B

한 범주(분기) 안에 시리즈별 막대가 나란히 묶여 자라남 + 범례

구구성 요소 Anatomy

그룹 Group한 범주에 묶이는 막대 묶음
막대(시리즈) Series bar색이 다른 같은 의미의 데이터 계열
그룹 간격 Group gap묶음끼리 떨어뜨리는 빈 공간
범례 Legend색이 어느 시리즈인지 알려주는 표

동동작 Interactions

시리즈 켜고 끄기 범례 토글
막대 값 표시 hover
한 시리즈만 강조 series highlight
크기순 재배열 sort

변변형 Variants

세로 / 가로 묶음
시리즈 2~3개(많으면 가독성 저하)
막대 / 그룹 간격 조정
둥근 모서리 rounded

쓰쓰임새 Usage

범주별로 여러 시리즈 비교
분기별 제품군 매출 나란히
피함: 시리즈 4개 이상이면 복잡

묶은 막대 차트(Grouped bar)로 분기별 제품 A/B 두 시리즈를 나란히 그려 줘. 범례 토글로 시리즈를 켜고 끌 수 있게.

live demo

1월

2월

3월

4월

웹앱오프라인

한 막대 안에 세그먼트가 쌓여 합계를 이룸 → 부분-전체를 한눈에

구구성 요소 Anatomy

세그먼트 Segment막대 안에 쌓이는 부분 조각
누적 막대 Stacked bar세그먼트가 위로 쌓인 한 기둥
합계 Total세그먼트를 다 더한 막대 전체 높이
범례 Legend각 색이 어느 부분인지 안내

동동작 Interactions

세그먼트 값 표시 hover
부분 켜고 끄기 범례 토글
비율 보기 전환 100% 모드
막대 클릭 상세 drill-down

변변형 Variants

절대 누적 vs 100% 비율 누적
세로 / 가로
세그먼트 라벨(값/퍼센트)
둥근 모서리 rounded

쓰쓰임새 Usage

부분-전체 + 범주 비교(채널별 구성)
100% 모드로 구성비 추이
피함: 세그먼트 많으면 비교 어려움

누적 막대 차트(Stacked bar)로 월별 채널 구성을 그려 줘. 범례 토글과 100% 비율 누적 모드 전환 버튼을 붙이고, 세그먼트 hover 값도.

live demo

빈도

0점수 구간100

연속 구간(빈)을 간격 없이 붙여 각 빈의 빈도를 막대 높이로 - 봉우리 하나짜리 분포 모양

구구성 요소 Anatomy

구간(빈) Bin값을 잘게 나눈 연속 구간
막대 Bar그 구간에 든 데이터 개수
빈 너비 Bin width한 구간의 폭(거칠게/촘촘히)
빈도축 · 경계 Frequency axis · Edges세로 도수와 구간 경계선

동동작 Interactions

빈 너비 조절 bin-size
막대 위 빈도 hover
누적 전환 cumulative
구간 강조 highlight

변변형 Variants

빈도 / 밀도 / 누적 freq / density / cumulative
빈 개수 조정 bin count
여러 분포 겹쳐 보기
밀도 곡선 덧대기

쓰쓰임새 Usage

단일 연속변수의 분포 (점수 분포)
"값이 어디에 몰려 있나?"
치우침/봉우리 개수 확인
주의: 막대 차트와 다름(연속 구간, 간격 없음)

시험 점수 1만 건을 히스토그램으로. 빈 너비를 5점으로 잡고, 밀도 모드로 전환 가능하게. 평균선도 같이 그려 줘.

live demo

내림차순 막대(좌축 빈도) + 누적 비율선(우축 %)이 80% 기준선을 넘는 지점 = 핵심 원인

구구성 요소 Anatomy

막대(내림차순) Sorted bars기여도 큰 순서로 정렬한 막대
누적 비율선 Cumulative % line왼쪽부터 합쳐가는 비율
좌축 / 우축 Freq / % axis빈도 눈금과 백분율 눈금
80% 기준선 80% reference핵심 소수를 가르는 선

동동작 Interactions

값 보기 hover
누적선 강조 highlight
80/20 라인 표시 cutoff
막대 정렬 sort

변변형 Variants

빈도 / 비용 기준
누적선 있음 / 없음
막대 색 강조 top-N
가로형 파레토

쓰쓰임새 Usage

원인의 기여도 우선순위(불량 원인 80/20 분석)
적은 원인이 큰 결과를 만들 때
항목 수 적으면 굳이 불필요 (피하기)

불량 원인을 파레토 차트로, 막대는 내림차순·우축에 누적 비율선을 얹어. 80% 기준선을 그어 핵심 소수를 짚어 줘.

live demo

선이 시간축을 따라 왼쪽 → 오른쪽으로 그려지며 마커가 찍힘 (격자선 위)

구구성 요소 Anatomy

선 Line데이터 점을 이어 추세를 보여주는 줄
마커 Data point / Marker각 시점의 실제 값 위치 점
시간축 / 값축 Time axis / Value axis가로는 시간, 세로는 크기 눈금
격자선 Gridline값을 읽기 쉽게 돕는 보조선

동동작 Interactions

십자선 값 표시 hover 툴팁
시리즈 켜고 끄기 범례 토글
구간 확대 brush / zoom
점 클릭 상세 drill-down

변변형 Variants

직선 / 곡선 spline / 계단 step
다중 시리즈(여러 선)
마커 유무
점선 / 면 강조

쓰쓰임새 Usage

시간에 따른 추세(일별 방문자)
연속 데이터의 등락 보기
피함: 범주 비교는 막대 차트

선 차트(Line chart)로 일별 방문자 추세를 그려 줘. 마커와 격자선을 넣고, hover 시 십자선 툴팁, 구간 brush/zoom 확대도.

live demo

경계선이 그려진 뒤 그 아래 영역이 그라데이션으로 채워짐 (기준선까지)

구구성 요소 Anatomy

영역(채움) Area fill선 아래를 색으로 채운 면
경계선 Line영역의 위쪽 윤곽이 되는 선
기준선 Baseline채움이 멈추는 아래쪽 기준(보통 0)
시리즈 Series색이 다른 각각의 데이터 계열

동동작 Interactions

지점 값 표시 hover 툴팁
시리즈 켜고 끄기 범례 토글
누적 보기 전환 stack
구간 확대 brush / zoom

변변형 Variants

단일 / 누적 stacked area
100% 스트림 streamgraph
그라데이션 채움
곡선 / 계단 경계선

쓰쓰임새 Usage

추세 + 누적 크기(누적 매출 추이)
부피감으로 양의 변화 강조
피함: 여러 시리즈 겹치면 가림

영역 차트(Area chart)로 누적 매출 추이를 그려 줘. 그라데이션 채움을 넣고, 누적(stacked area) 전환과 hover 툴팁, 범례 토글도.

live demo

매출성장%

매출(좌축)성장률%(우축)

막대(매출, 좌축) 자라남 → 선(성장률%, 우축) 그려짐 → 두 축 한 화면

구구성 요소 Anatomy

막대 시리즈 Bar series절대값 지표를 막대로 표시
선 시리즈 Line series추이/비율을 선으로 겹쳐 표시
좌축/우축 Primary / Secondary axis단위 다른 두 눈금
범례 Legend어느 시리즈가 어느 축인지 안내

동동작 Interactions

가리킴 hover (tooltip)
범례 토글 legend toggle
축 동기화 axis sync
구간 확대 zoom

변변형 Variants

막대 + 선 조합
다중 축 multi-axis
단위 다른 시리즈 겹침
누적막대 + 선

쓰쓰임새 Usage

단위 다른 두 지표 함께 보기
매출(막대) + 성장률%(선)
피함: 이중 축 오해 소지(스케일 왜곡)

월 매출은 막대, 성장률%는 선으로 그리는 콤보 차트로. 막대는 좌축, 선은 우축에 붙이고 범례로 어느 축인지 표시해 줘.

live demo

42% 28% 18% 12%

모바일데스크톱태블릿기타

조각(slice) 펼쳐짐 → 데이터 레이블(%) → 한 조각 분리(explode) 강조 → 복귀

구구성 요소 Anatomy

조각 Slice / Wedge한 범주가 차지하는 부채꼴
중심각 Angle비율을 각도로 표현
반지름 Radius원의 크기(보통 고정)
범례/레이블 Legend / Label(%)조각 이름과 구성비

동동작 Interactions

조각 가리킴 hover
조각 분리 explode
범례 토글 legend toggle
레이블 표시 data label

변변형 Variants

파이 / 분리형 exploded
3D (지양)
조각 수 제한(소수 범주)
반파이 semi-pie

쓰쓰임새 Usage

부분-전체 비율 보기
소수 범주의 구성비
피함: 5개 초과/값이 비슷할 때

기기별 트래픽 구성비를 파이 차트로. 각 조각(slice)에 데이터 레이블(%)을 붙이고, 가장 큰 조각만 분리(explode)해서 강조해 줘.

live demo

전환율

구매 완료장바구니이탈

링(ring) 세그먼트 채워짐 → 가운데 구멍(center hole)에 합계 수치 갱신 → 핵심 값 강조

구구성 요소 Anatomy

링 Ring가운데가 뚫린 원형 띠
세그먼트 Segment범주별로 나뉜 띠 조각
가운데 구멍 Center hole중앙에 합계/핵심 수치 표시
범례 Legend세그먼트 이름 안내

동동작 Interactions

세그먼트 가리킴 hover
중앙 값 갱신 center update
범례 토글 legend toggle
채우기 animate

변변형 Variants

도넛 / 반원 게이지형 gauge
다중 링 nested
두께 조절 inner radius
단일 진행률 progress

쓰쓰임새 Usage

비율 + 중앙에 핵심 수치
전환율/달성률 대시보드
피함: 정밀 비교(조각 각도 판독)

퍼널 단계 비율을 도넛 차트로 그리고, 가운데 구멍(center hole)에 전환율을 큰 숫자로 표시해 줘. 호버하면 그 세그먼트 값으로 중앙 숫자가 바뀌게.

live demo

개발 · 서버30

개발 · 앱18

QA12

마케팅 · 광고16

캠페인10

운영 · 인프라14

기타8

지원6

하나의 사각형이 면적=값 으로 빈틈없이 중첩 분할된 트리맵

구구성 요소 Anatomy

타일 Tile / Rectangle하나의 항목을 나타내는 사각형
면적 Area = value넓이가 곧 값의 크기
중첩(계층) Nested groups큰 묶음 안에 작은 항목들
색 · 레이블 Color · Label분류 색과 항목 이름/수치

동동작 Interactions

가리키면 값 hover tooltip
파고들기 drill-down
색/크기 인코딩 color / size
상위로 zoom out

변변형 Variants

단일 / 계층 flat / nested
색 = 2번째 지표 2nd metric
타일 정렬 방식 squarified
여백 있는 padded

쓰쓰임새 Usage

"전체에서 각 부분이 얼마나?" 부분-전체
계층 데이터 크기 비교 (예산/디스크)
항목이 적고 비교만 할 땐 막대로

부서별 예산을 트리맵으로. 면적은 예산, 색은 전년 대비 증감으로 인코딩하고, 클릭하면 팀 단위로 drill-down.

live demo

중심(root) → 안쪽 고리(대분류) → 바깥 고리(하위, 부모 각도 안에 정렬)

구구성 요소 Anatomy

중심 Root계층의 꼭대기(전체)
고리(레벨) Ring / Level바깥으로 갈수록 하위 단계
부채꼴 Arc segment한 항목을 나타내는 조각
각도 Angle = value벌어진 각이 곧 값의 크기

동동작 Interactions

가리키면 값 hover
고리 클릭 drill-down
확대 zoom
경로 강조 highlight path

변변형 Variants

선버스트 / 아이시클 icicle (가로)
레벨 수 ring count
중심 라벨 center label
색 = 분류 그룹

쓰쓰임새 Usage

"단계별로 비중이 어떻게 나뉘나?"
계층 구조의 부분-전체 (다단계 분류)
한 단계만 볼 땐 파이/도넛으로

카테고리/하위카테고리/상품 3단계를 선버스트로. 각도는 매출 비중, 고리를 클릭하면 그 가지로 drill-down되게.

live demo

키몸무게

점(point) X/Y 위치에 페이드인 → 추세선(trend line) 그려짐 → 상관/분포 드러남

구구성 요소 Anatomy

점 Point / Marker관측치 하나를 좌표로 찍음
X축/Y축 X / Y axis두 변수의 눈금
추세선 Trend / Regression line전반적 방향성 요약
사분면 Quadrant기준선으로 네 구역 구분

동동작 Interactions

점 가리킴 hover (tooltip)
영역 선택 brush
확대 zoom
필터 filter

변변형 Variants

단일 / 그룹(색 구분)
추세선 유무
지터 jitter(겹침 분산)
밀도형 density

쓰쓰임새 Usage

두 변수의 상관/분포 보기
키-몸무게, 가격-판매량
피함: 점이 너무 많아 겹칠 때

키와 몸무게의 관계를 산점도로. 추세선(regression line)을 얹고, 성별로 색을 나눠 그룹을 구분해 줘. 점이 겹치면 jitter도 적용.

live demo

매출이익

버블(bubble) X/Y에 배치 + 크기(size)로 3번째 변수 표현 → 부드럽게 맥동(pulse)

구구성 요소 Anatomy

버블 Bubble관측치 하나를 원으로 표시
크기 Size encoding세 번째 변수를 면적으로
X/Y축 X / Y axis두 변수의 위치 좌표
크기 범례 Size legend버블 크기가 뜻하는 값

동동작 Interactions

버블 가리킴 hover (tooltip)
크기 범례 size legend
시간 애니메이션 play / time
필터 filter

변변형 Variants

정적 / 시간 애니메이션
색 + 크기 다중 인코딩
패킹형 packed bubble
지도 위 버블 bubble map

쓰쓰임새 Usage

3-4개 변수 동시 보기
매출 vs 이익 vs 규모
주의: 면적 비례 인코딩(지름 아님)

제품별 매출(X), 이익(Y), 시장 규모(버블 크기)를 버블 차트로. 크기는 지름이 아니라 면적 비례로 인코딩하고, 분기별 시간 애니메이션도 넣어 줘.

live demo

월화수목금토 09시 13시 19시 23시

낮음높음

행(시간대) x 열(요일) 격자 → 셀 값이 색 스케일로 → 진할수록 활동 많음, 색 범례로 해석

구구성 요소 Anatomy

셀 Cell행x열 교차 한 칸
행 / 열 Row / Column두 범주 축
색 스케일 Color scale값을 색 농도로 매핑
색 범례 · 축 레이블 Color legend · Axis label색-값 대응표와 좌표 이름

동동작 Interactions

셀 값 보기 hover
정렬 / 군집 cluster
색 스케일 변경 colormap
구간 필터 filter

변변형 Variants

행렬 히트맵 matrix
상관 행렬 correlation
지리 히트맵 geo
캘린더 히트맵 calendar

쓰쓰임새 Usage

두 범주 교차의 크기/밀도 (시간대x요일 활동)
"어느 칸이 가장 뜨거운가?"
상관/패턴 한눈에
주의: 색만으로는 정확한 값 비교 어려움

접속 로그를 시간대x요일 히트맵으로. 색 스케일은 순차형으로, 비슷한 행끼리 군집(cluster)해서 묶어 줘.

live demo

1월2월3월

월수금일

적음 많음

요일 행 x 주 열 잔디에 날짜 셀이 일별 누적으로 초록 단계씩 채워진 뒤, 완성된 모습을 오래 유지

구구성 요소 Anatomy

일 셀 Day cell하루치 한 칸
주 열 / 요일 행 Week column / Weekday row가로 = 주, 세로 = 요일
월 레이블 Month label상단 시기 안내
색 스케일(강도) Intensity scale활동량을 색 단계로

동동작 Interactions

날짜 값 보기 hover
연도 전환 year switch
색 단계 조정 levels
기간 선택 range

변변형 Variants

깃허브형 잔디 contributions
월간 그리드 month grid
강도 단계 수 조정 5단계 등
여러 해 연속 multi-year

쓰쓰임새 Usage

날짜별 활동/빈도 (기여도 잔디, 일별 매출)
"어느 요일/시기에 몰리나?"
연속성/공백 패턴 확인
주의: 정확한 값보다 추세용

커밋 기록을 깃허브형 잔디(캘린더 히트맵)로. 강도 단계는 5단계, 연도 전환 가능하게 하고 주말은 살짝 구분해 줘.

live demo

A반

B반

C반

수염(최소~최대) → 상자(Q1~Q3, IQR) → 중앙값 선 → 이상치 점, 그룹별로 나란히

구구성 요소 Anatomy

상자 Box (Q1~Q3, IQR)가운데 50%가 들어가는 구간
중앙값 선 Median line정중앙 값(평균 아님)
수염 Whiskers정상 범위 최소~최대까지
이상치 Outliers수염 밖으로 튀는 점

동동작 Interactions

통계값 보기 hover
그룹 비교 compare
이상치 토글 toggle outliers
정렬 sort

변변형 Variants

세로 / 가로 vertical / horizontal
노치형 notched
그룹별 다중 grouped
점 겹치기 jitter / strip

쓰쓰임새 Usage

분포 요약과 그룹 비교 (반별 점수)
"어느 그룹이 더 퍼졌나/이상치 있나?"
중앙값/사분위 한눈에
주의: 봉우리 모양은 안 보임(바이올린 참고)

반별 점수를 상자 수염 그림으로 나란히. IQR 기준 이상치는 점으로 찍고, 중앙값 높은 순으로 정렬해 줘.

live demo

대조군

실험군

밀도 곡선(좌우 대칭)이 떠오름 → 너비 = 빈도 → 안쪽 상자/중앙값, 봉우리 모양까지 비교

구구성 요소 Anatomy

바이올린(밀도 곡선) Density curve분포를 부드러운 곡선으로
너비(빈도) Width = frequency두꺼운 곳에 값이 많음
중앙 상자/중앙값 Inner box / median안쪽에 박스플롯 요약
축 Value axis값의 크기 방향

동동작 Interactions

밀도 값 보기 hover
그룹 비교 compare
상자 오버레이 토글 toggle box
대역폭 조절 bandwidth

변변형 Variants

단일 / 그룹 single / grouped
상자 결합 box overlay
한쪽 split split violin
점 겹치기 + jitter

쓰쓰임새 Usage

분포의 모양(다봉성)까지 비교
"두 봉우리로 갈렸나, 한 덩어리인가?"
박스플롯보다 형태 정보 많음
주의: 표본 적으면 곡선 과장됨

대조군/실험군 응답시간을 바이올린 플롯으로. 안에 상자(중앙값)를 겹치고, 다봉성이 보이면 강조해 줘.

live demo

축(스포크) 5개 → 시리즈 영역 그리기 → 꼭짓점 값 맥동(pulse)

구구성 요소 Anatomy

축(스포크) Spoke / Axis중심에서 뻗는 지표 한 개의 눈금선
다각형(영역) Polygon area한 항목의 값을 이은 면
격자(웹) Web grid눈금 크기를 알려주는 거미줄
시리즈 · 축 레이블 Series · Axis label비교 항목과 각 축 이름

동동작 Interactions

꼭짓점 값 보기 hover
시리즈 켜고 끄기 toggle
차트 회전 rotate
축 강조 highlight

변변형 Variants

단일 / 다중 시리즈
채움 있음 / 없음 fill / line
축 개수 조절 3~8축
로그/정규화 축

쓰쓰임새 Usage

여러 지표로 항목 비교(역량 평가/제품 스펙)
강점/약점 모양을 한눈에
축 많거나 단위 다르면 왜곡 (피하기)

레이더 차트로 제품 3종을 다중 시리즈로 겹쳐 그리고, 각 축(스포크)은 정규화해. 시리즈는 토글로 켜고 끄게.

live demo

채움 호 + 바늘이 낮음 → 값으로 휩쓸기 / 색대(저/중/고) 구간 + 목표 표시

구구성 요소 Anatomy

호(눈금 띠) Arc / Scale값이 놓이는 둥근 눈금
바늘 / 채움 Needle · Fill현재 값을 가리키거나 채워서 표시
구간(색대) Threshold bands저/중/고를 색으로 구분
중앙 값 · 목표 Value · Target숫자값과 도달 목표선

동동작 Interactions

값 변화 animate
구간 색 전환 threshold
목표 표시 target marker
값 보기 hover

변변형 Variants

반원 / 원형 semi / full
바늘형 vs 채움형 radial progress
다중 구간 색대
중앙 KPI 숫자 강조

쓰쓰임새 Usage

단일 지표의 목표 대비 수준(달성률/속도)
저/중/고 한눈 판단
여러 값 비교엔 부적합 (피하기)

반원 게이지로 달성률을 그리고, 저/중/고 색대 구간과 75% 목표 표시를 넣어. 값 바뀔 때 바늘이 부드럽게 휩쓸게.

live demo

3단계 흐름: 유입원 → 행동 → 결과, 곡선 리본의 너비 = 흐름 양

구구성 요소 Anatomy

노드 Node흐름이 드나드는 지점/항목
흐름(리본) Flow / Link노드를 잇는 곡선 띠
너비 Width = quantity띠가 굵을수록 양이 많음
단계 Stage / Column왼쪽에서 오른쪽 진행 단계

동동작 Interactions

가리키면 흐름 값 hover
노드 강조 highlight
드래그 정렬 drag reorder
경로 추적 trace path

변변형 Variants

단방향 흐름 left to right
에너지/예산 흐름 flow map
색 = 카테고리
다단계 multi-stage

쓰쓰임새 Usage

"어디서 어디로 얼마나 흘렀나?"
단계 간 흐름/전환량 (트래픽 경로)
흐름이 없는 단순 비교엔 막대로

유입 채널에서 가입/이탈까지를 생키 다이어그램으로. 리본 너비는 사용자 수, 노드에 마우스를 올리면 해당 흐름만 강조되게.

live demo

노드를 엣지로 연결한 힘기반 배치 → 큰 노드=중심성, 색=군집(살짝 흔들림)

구구성 요소 Anatomy

노드 Node (정점)사람/항목 하나를 나타내는 점
엣지 Edge / Link두 노드 사이의 연결선
노드 크기 Size = centrality연결이 많을수록 크게
군집 · 레이블 Cluster · Label색으로 묶음, 이름 표시

동동작 Interactions

가리키면 정보 hover
노드 드래그 drag
확대/이동 zoom / pan
군집 강조 highlight cluster

변변형 Variants

방향 / 무방향 directed
가중치 엣지 weighted
힘기반 배치 force-directed
원형/계층 배치 radial

쓰쓰임새 Usage

"무엇이 무엇과 연결됐나?" 관계 구조
개체 간 관계/연결 (소셜/의존성)
노드가 수천 개면 집계 뷰로

패키지 의존성을 네트워크 그래프로. 노드 크기는 피참조 수(중심성), 색은 군집으로 묶고 force-directed 배치로 그려 줘.

live demo

초록(상승)/빨강(하락) 몸통 + 위아래 심지, 그 위로 이동평균선(주황)

구구성 요소 Anatomy

몸통 Body시가와 종가 사이의 사각형
심지/꼬리 Wick / Shadow고가와 저가까지 뻗는 선
상승/하락 색 Up / Down color오르면 초록, 내리면 빨강
시간축 · 가격축 Time · Price axis가로는 날짜, 세로는 값

동동작 Interactions

가리키면 OHLC hover tooltip
확대/이동 zoom / pan
지표 겹치기 overlay (이동평균)
구간 선택 brush

변변형 Variants

캔들 / OHLC 바 OHLC bar
거래량 결합 volume panel
색 규칙 (상승/하락)
로그 가격축 log scale

쓰쓰임새 Usage

"기간 안에 어떻게 움직였나?" 가격 변동
주가/환율의 OHLC 금융 시계열
단순 추세만 볼 땐 라인 차트로

캔들스틱 차트에 20일 이동평균선을 오버레이하고, 아래에 거래량 바 패널을 붙여 줘. hover OHLC 툴팁도.

live demo

주1주2주3주4

기획

설계

↳

개발

출시

작업 막대가 시간축 위 시작 시점에 배치 → 의존성(↳)과 마일스톤(◆)

구구성 요소 Anatomy

작업 행 Task row한 작업 한 줄
막대(기간) Task bar (start-end)시작~종료 길이
시간축 Timeline axis가로축 날짜/주/월
의존성 · 진행률 · 마일스톤 Dependency · Progress · Milestone(◆)선후 관계, 채움, 기점

동동작 Interactions

막대 드래그 일정 변경
의존성 연결 link
진행률 갱신 progress
확대 일 / 주 / 월

변변형 Variants

의존성 유무
진행률 표시
스윔레인 swimlane
마일스톤만 표시

쓰쓰임새 Usage

프로젝트 일정/작업 기간(WBS 타임라인)
질문: 무엇이 언제, 무엇에 막혀 있나
의존성/병목 추적
피하기: 작업 수십 개 이상 단일 화면

간트 차트로 작업 행 4개를 그리고, 막대마다 진행률을 채워 줘. 설계는 기획에 의존성으로 연결하고 출시는 마일스톤(◆)으로.

live demo

낮음 높음

한반도 지도(육지) 위에 값=색 폴리곤을 반투명으로 올려, 지도와 데이터가 겹쳐 보이는 단계구분도

구구성 요소 Anatomy

지역(폴리곤) Region / Polygon행정 경계로 나뉜 면 단위
색 스케일 Color scale값을 색 농도로 매핑
색 범례 Legend색이 어떤 값인지 풀이
툴팁 · 경계 Tooltip · Bordershover 값 표시와 지역 윤곽선

동동작 Interactions

지역 값 보기 hover / tooltip
확대 · 이동 zoom / pan
색 단계 변경 recolor
드릴다운 시도 → 시군구

변변형 Variants

단계구분(색) vs 심볼/버블 맵
색 단계 수(3~7단)
정규화 인구당 / 면적당
연속 vs 구간(quantile)

쓰쓰임새 Usage

지역별 지표(인구밀도/매출/투표율)
질문: 어느 지역이 높고 낮은가
주의: 면적 큰 지역 과대 인식
피하기: 정규화 없는 절대값(인구당 필요)

코로플레스 지도를 인구당으로 정규화해서 그리고, 색 단계 5단에 색 범례와 hover 툴팁을 붙여 줘. 시도 클릭 시 시군구로 드릴다운.

live demo

주간 활성 사용자

8,240

카드 안 축 없는 미니 선 → 끝점 + 최고(초록)/최저(빨강) 마커

구구성 요소 Anatomy

미니 선/막대 Mini line/bar축/눈금 없는 추세선
끝점 마커 End point가장 최근 값 점
최고/최저 마커 High / Low극값 강조 점
기준 밴드 Band정상 범위 음영

동동작 Interactions

값 보기 hover
인라인 갱신 live update
최신값 강조 end label
극값 표시 high / low

변변형 Variants

선 / 막대 line / bar
승패 win-loss
영역 채움 area
밴드 포함

쓰쓰임새 Usage

표/카드 안 추세를 축 없이 압축
질문: 최근 흐름이 오르나 내리나
KPI 옆 미니 추세
피하기: 정확한 값 비교가 목적일 때

KPI 카드 안에 스파크라인을 넣어 줘. 축/레이블은 없이, 끝점 마커와 최고/최저 마커만 찍고, 데이터는 인라인으로 갱신되게.

live demo

월 매출 (목표 대비)

050100목표 ▮

정성 구간(음영) 위에 실적 측정 막대(70%)와 목표 표시선(빨강, 85%)을 한 줄로

구구성 요소 Anatomy

측정 막대 Measure bar실제 실적값
목표 표시 Target marker도달해야 할 기준선
정성 구간 Qualitative bands나쁨/보통/좋음 음영
축 Axis / Scale값 눈금

동동작 Interactions

목표 대비 vs target
값 보기 hover
구간 판정 band
실시간 갱신 live

변변형 Variants

가로 / 세로 horizontal / vertical
다중 측정 multi-measure
목표 여러 개
구간 수 조절

쓰쓰임새 Usage

좁은 공간 실적 vs 목표(게이지 대체)
질문: 목표를 채웠나, 어느 구간인가
KPI 대시보드 한 줄
피하기: 추세(시간 흐름)를 보여야 할 때

불릿 차트로 월 매출을 그려 줘. 정성 구간(나쁨/보통/좋음)을 배경에 깔고, 측정 막대와 목표 표시선을 얹어. 게이지 대신 한 줄로.

live demo

이번 달 매출

vs 지난달

큰 수치 카운트업 → 델타(▲ 초록) + vs 지난달 + 미니 스파크라인

구구성 요소 Anatomy

지표명 Metric label무슨 수치인지
큰 수치 Big number핵심 값 하나
델타/추세 Delta (▲▼ %)증감 방향과 폭
비교 기준 · 스파크라인 Comparison · Sparklinevs 전월, 미니 추세

동동작 Interactions

카운트업 count-up
추세 색 상승(초록) / 하락(빨강)
기간 비교 period compare
클릭 상세 drill

변변형 Variants

단일 빅넘버
델타 포함
스파크라인 포함
그리드(카드 묶음)

쓰쓰임새 Usage

대시보드 최상단 핵심 지표 요약
질문: 지금 핵심 수치와 방향은
매출/MAU(월 활성 사용자)/전환율
피하기: 비교 기준 없는 외딴 숫자

KPI 스코어카드로 이번 달 매출을 띄워 줘. 큰 수치는 카운트업, 옆에 델타(▲%)와 vs 지난달, 아래에 스파크라인까지. 상승이면 초록색.

정리

컴포넌트를 이름으로 부르면, 에이전트는 추측 대신 정확히 만들고 고친다.

부품 이름(Anatomy) · 동작 이름(hover/toggle/dismiss) · 변형(variant)을 그대로 프롬프트에 넣자.

"그거 고쳐줘" 대신 "Accordion의 expand 아이콘 회전을 빼 줘" — 왕복 1회로 끝난다.

FORMS · NAVIGATION · OVERLAY/FEEDBACK · DATA · CHAT · CHART — 109개 컴포넌트. 필요한 장만 펼쳐 레퍼런스로 쓰세요.

UI 컴포넌트도감

왜 "정확한 이름"인가 — 그리고 이 도감 읽는 법

버튼 — Button

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

텍스트 필드 (입력) — Text Field / Input

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

텍스트영역 — Textarea

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

입력 마스크 (포맷 입력) — Masked / Formatted Input

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

비밀번호 입력 (강도 표시) — Password Input / Strength Meter

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

인증 코드 입력 (OTP) — Verification Code / OTP / PIN Input

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

검색창 — Search Bar / Search Input

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

체크박스 — Checkbox

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

라디오 버튼 — Radio Button

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

토글 (스위치) — Toggle / Switch

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

세그먼티드 컨트롤 — Segmented Control

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

셀렉트 (드롭다운) — Select / Dropdown

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

콤보박스 (자동완성) — Combobox / Autocomplete

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

캐스케이더 (다단계 선택) — Cascader

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

태그 입력 (토큰 필드) — Tag Input / Token Field

구구성 요소 Anatomy

동동작 Interactions

변변형 Variants

쓰쓰임새 Usage

별점 (평점) — Rating / Star Rating

구구성 요소 Anatomy

동동작 Interactions

UI 컴포넌트
도감