디자인 택소노미
UI 컴포넌트, 인터랙티브 패턴, 디자인 사조, 레이아웃·타이포·컬러까지. 디자인 시스템의 기준을 AI가 이해하는 언어로 옮겼습니다.
4
Parts20
Categories209+
Keywords기본 컴포넌트
정적 UI 구성 요소: 123개 키워드
텍스트의 의미적 표현과 시각적 장식을 위한 패턴
Heading
제목 계층 (h1-h6)
공통Paragraph
본문 텍스트
공통Label
폼/UI 요소 라벨
공통Link
텍스트 링크
공통Caption
보조 설명 텍스트
공통Blockquote
인용문
Shadcn, AntCode
코드 블록/인라인
ShadcnKbd
키보드 단축키 표시
ShadcnList
순서/비순서 목록
공통다른 요소를 담는 시각적 경계의 기본 단위. 독립적 의미 없이 구조적 역할 수행
Box
기본 래퍼 컨테이너
공통Separator / Divider
구분선
Shadcn, MD3, AntCollapse / Accordion
접히는 컨테이너
Shadcn, AntScrollArea
스크롤 가능 영역
ShadcnAspectRatio
비율 고정 컨테이너
ShadcnSpace
간격 조절 컨테이너
Ant자기완결적 정보 단위를 그룹핑하는 패턴. 단독으로 의미 전달 가능
BaseCard
기본 카드 구조
공통ElevatedCard
그림자 강조 카드
MD3OutlinedCard
테두리 강조 카드
MD3FilledCard
배경색 강조 카드
MD3MediaCard
미디어 포함 카드
공통ActionCard
액션 버튼 포함 카드
AntBentoCard
벤토 그리드용 가변 크기 카드
CommonTallCard
9:16 세로형 (모바일/소셜 최적화)
CommonStackedCard
레이어드 카드 덱
UnusualSwipeableCard
틴더 스타일 스와이프 카드
CommonExpandingCard
클릭시 확장되는 카드
CommonFramelessCard
경계선 없는 콘텐츠 카드
UnusualSplitCard
내부 분할 카드
Common미디어 콘텐츠의 표시와 인터랙션 관리
Image
이미지 표시 (lazy load, fallback)
AntAvatar
프로필 이미지
Shadcn, AntCarousel
미디어 슬라이더
Shadcn, MD3, AntGallery
이미지 갤러리/그리드
-Lightbox
전체화면 미디어 뷰어
-QRCode
QR 코드 생성
AntVideoBackground
섹션 배경 비디오
Common3DObjectEmbed
3D 모델 임베드
Unusual반복적/비교적 데이터를 보여주는 패턴
Table
데이터 테이블
Shadcn, AntDataTable
정렬/필터/페이지네이션 테이블
ShadcnList
데이터 목록
MD3, AntTree
트리 구조
AntTimeline
시간순 이벤트
AntStatistic
통계 수치 표시
AntDescriptions
키-값 설명 목록
AntBadge
상태/수량 표시
Shadcn, MD3, AntTag
라벨/카테고리 표시
AntProgress
진행률 표시
Shadcn, MD3, AntCalendar
캘린더/날짜 표시
AntEmpty
빈 상태 표시
Shadcn, AntSkeleton
로딩 스켈레톤
Shadcn, Ant같은 페이지 내 다른 콘텐츠를 연결하는 패턴. 페이지/라우트 전환 없이 동일 페이지 내 이동
Tabs
탭 전환
Shadcn, MD3, AntAnchor
목차/앵커 링크
AntSteps
단계 표시
AntPagination
페이지네이션
Shadcn, AntBreadcrumb
경로 표시
Shadcn, AntSegmentedControl
세그먼트 선택
MD3사용자로부터 값을 받는 패턴
Button
기본 버튼
공통IconButton
아이콘 버튼
MD3FAB
플로팅 액션 버튼
MD3, AntInput
텍스트 입력
공통Textarea
멀티라인 입력
공통Select
드롭다운 선택
공통Combobox
검색 가능 선택
ShadcnCheckbox
체크박스
공통Radio
라디오 버튼
공통Switch
토글 스위치
공통Slider
슬라이더
공통DatePicker
날짜 선택
Shadcn, MD3, AntTimePicker
시간 선택
MD3, AntColorPicker
색상 선택
AntUpload
파일 업로드
AntInputOTP
OTP 입력
ShadcnInputNumber
숫자 입력
AntRate
별점 입력
AntTransfer
항목 이동 선택
AntCascader
계층 선택
AntMentions
@멘션 입력
AntAutoComplete
자동완성
AntForm
폼 래퍼/검증
Shadcn, AntChip
선택/필터/입력 칩
MD3다른 요소들의 위치를 결정하는 패턴
Grid
그리드 시스템
AntFlex
플렉스 컨테이너
AntLayout
페이지 레이아웃 (Header, Sider, Content, Footer)
AntResizable
리사이즈 가능 패널
ShadcnSplitter
분할 패널
AntMasonry
메이슨리 레이아웃
Ant (v6)Affix
고정 위치
AntBentoGrid
벤토 박스 레이아웃 (Apple 스타일)
CommonBrokenGrid
의도적 비대칭 그리드
UnusualOffsetLayout
불균등 컬럼 (2fr 1fr)
CommonOverlappingStack
Z-index 레이어드 배치
CommonDiagonalGrid
대각선 배치
UnusualCollageLayout
이미지/텍스트 콜라주
UnusualSplitScreen
불균등 분할 히어로 (70/30, 60/40)
CommonFullBleed
전체 너비 섹션
Common콘텐츠 위에 나타나 상태를 전달하거나 입력을 요청하는 패턴
Modal / Dialog
모달 다이얼로그
공통AlertDialog
확인 다이얼로그
ShadcnDrawer
드로어 패널
Shadcn, MD3, AntSheet
시트 (Bottom/Side)
Shadcn, MD3Popover
팝오버
Shadcn, AntTooltip
툴팁
공통HoverCard
호버 카드
ShadcnToast
토스트 알림
ShadcnSnackbar
스낵바
MD3Alert
인라인 알림
Shadcn, AntMessage
전역 메시지
AntNotification
알림
AntPopconfirm
확인 팝오버
AntSpin / Spinner
로딩 스피너
Shadcn, AntResult
결과 피드백
AntTour
온보딩 투어
AntWatermark
워터마크
Ant페이지 또는 라우트 간 이동을 위한 패턴
NavigationMenu
메인 네비게이션
ShadcnMenubar
메뉴바
ShadcnSidebar
사이드바
ShadcnMenu
메뉴 (horizontal, vertical, inline)
AntNavigationBar
하단 네비게이션 바
MD3NavigationRail
사이드 레일
MD3NavigationDrawer
네비게이션 드로어
MD3TopAppBar
상단 앱바
MD3BottomAppBar
하단 앱바
MD3DropdownMenu
드롭다운 메뉴
Shadcn, AntContextMenu
컨텍스트 메뉴
ShadcnCommand
⌘K 커맨드 팔레트
Shadcn인터랙티브 패턴
동적 행동과 효과를 정의하는 패턴: 41개 키워드
텍스트 자체에 동적 효과를 부여하는 패턴. 다른 시각 요소에 의존하지 않고 타이포그래피 단독으로 작동
CharacterStagger
문자/단어/줄 단위 순차 애니메이션
GSAP SplitText / Framer Motion높음TextScramble
무작위 문자 → 최종 텍스트 디코딩 효과
GSAP ScrambleTextPlugin높음Typewriter
한 글자씩 타이핑 + 블링킹 커서
CSS / GSAP높음BlurInReveal
흐릿함 → 선명 포커스 등장
Framer Motion / GSAP높음LettersPullUp
마스크 통과 수직 등장
GSAP SplitText높음GlitchText
RGB 분리, 디지털 간섭 효과
순수 CSS중간FlipWords
단어 회전/순환 애니메이션
Framer Motion / GSAP높음AnimatedGradientText
텍스트 그라디언트 색상 순환
순수 CSS중간스크롤 위치에 따라 개별 요소에 효과를 적용하는 패턴
Parallax
배경/전경 다중 속도 이동으로 깊이감
GSAP ScrollTrigger높음ScrollReveal
뷰포트 진입 시 페이드/슬라이드 등장
GSAP ScrollTrigger / IO API높음ScrollScrubbing
애니메이션 진행 = 스크롤 위치 연동
GSAP ScrollTrigger scrub높음ImageSequence
스크롤에 따른 이미지 프레임 재생
GSAP + Canvas중간SmoothScroll
관성 기반 부드러운 스크롤
Lenis높음ScrollProgress
페이지 읽기 진행률 표시
CSS / GSAP중간ScrollSnap
섹션 경계 자동 정렬
순수 CSS중간Scroll3DEffect
스크롤 연동 3D 회전/이동
GSAP + CSS 3D중간섹션 간 전후 맥락을 연결하고 콘텐츠 흐름의 연속성을 만드는 패턴
StickyStacking
카드가 덱처럼 쌓이는 효과
CSS sticky + GSAP높음HorizontalScroll
세로 스크롤 → 가로 이동 변환
GSAP ScrollTrigger pin높음PinnedContentSwap
섹션 고정 + 내부 콘텐츠만 전환
GSAP ScrollTrigger높음SectionWipe
clip-path로 섹션 드러내기
GSAP + clip-path중간ViewTransition
브라우저 네이티브 페이지/상태 전환
View Transitions API중간ZoomTransition
스크롤 연동 확대/축소 전환
GSAP ScrollTrigger중간BlockRevealWipe
단색 블록 슬라이드 후 콘텐츠 노출
CSS / GSAP중간스토리텔링/연출 목적으로 레이아웃이나 콘텐츠의 상태 변화를 시각화하는 패턴
FadeTransition
기본 opacity 전환 (등장/퇴장/교차)
CSS / Framer Motion높음LayoutAnimation
동일 요소의 위치/크기 변화 부드러운 전환
Framer Motion layout높음StaggeredReveal
요소들 시간차 순차 애니메이션
Framer Motion / GSAP높음AnimatePresence
퇴장 애니메이션 (DOM 제거 전)
Framer Motion높음SharedLayoutAnimation
서로 다른 요소 간 모핑 전환
Framer Motion layoutId높음FLIPGridAnimation
필터/정렬 시 그리드 아이템 위치 이동
GSAP Flip / Framer Motion높음SpringPhysics
스프링 물리 기반 바운스/오버슈트
Framer Motion / GSAP높음Marquee
무한 루프 수평 흐름 (텍스트/이미지/카드)
CSS / GSAP높음SVGMorphing
SVG 경로 간 형태 변환
GSAP MorphSVG / Flubber중간LottieAnimation
After Effects 기반 벡터 애니메이션
lottie-web중간동적으로 색상 변화를 다루는 패턴
AuroraBackground
블러 처리된 컬러 블롭 흐름
순수 CSS높음CursorReactiveGradient
커서 위치 반응 그라디언트/글로우
JS + CSS 변수높음AnimatedTextGradient
텍스트 그라디언트 색상 순환
순수 CSS높음GrainyGradient
노이즈 텍스처 오버레이 그라디언트
SVG 필터 + CSS중간DarkModeTransition
테마 전환 시 확장/와이프 애니메이션
View Transitions API중간Spotlight
특정 영역 집중 조명 효과
CSS radial-gradient중간MeshGradient
WebGL 기반 유기적 다중 색상 흐름
Three.js / Gradient.js중간AmbientBackground
파티클/블롭 미묘한 지속 움직임
CSS / Canvas중간디자인 사조
시각적 스타일의 철학과 적용 맥락: 8개 키워드
Flat Design
깔끔, 빠름, 명확
대시보드, SaaS, 복잡한 정보 UI
프리미엄/럭셔리 브랜딩Material Design
체계적, 일관적, 구글 느낌
Android 앱, B2B 엔터프라이즈, 디자인 시스템
Apple 생태계, 독특한 브랜드 정체성HIG (Apple Style)
프리미엄, 세련, blur 레이어
iOS/macOS 앱, 프리미엄 제품, 미니멀 럭셔리
저사양 기기 타겟, 복잡한 데이터 UIGlassmorphism
깊이감, 우아함, 모던
모달/카드 오버레이, 다크모드 UI, 로그인 폼
텍스트 집약 UI, 단순 배경, 저사양 기기Neumorphism
소프트, 촉각적, 미래적
뮤직 플레이어, 스마트홈 컨트롤, 토글/슬라이더
텍스트 많은 UI, 접근성 중요 시 (낮은 대비)Claymorphism
친근, 따뜻, 유기적
어린이 앱, 핀테크 카드, 친근한 B2C
엔터프라이즈, 진지한 톤Neubrutalism
대담, 반항, Gen-Z
크리에이티브 에이전시, 인디 제품, 포트폴리오
금융, 헬스케어, 엔터프라이즈Swiss / Editorial
명료, 콘텐츠 중심, 시간을 초월
블로그, 뉴스, 케이스 스터디, 문서 기반
인터랙티브 중심, 시각적 임팩트 필요 시레이아웃, 타이포그래피, 컬러
공간 배치와 시각적 표현 체계: 37개 키워드
콘텐츠 배치의 구조적 프레임워크
Bento Grid
다양한 크기의 박스가 퍼즐처럼 맞춤
제품 피처 소개, SaaS 랜딩, 포트폴리오Card Grid
동일 크기 카드 반복
이커머스 제품 목록, 갤러리, 피드Masonry
핀터레스트 스타일, 높이 가변
이미지 갤러리, UGC 피드, 포트폴리오12-Column
반응형 표준, Flexbox/Grid
대부분의 반응형 웹사이트Broken Grid
의도적 비대칭, 요소 오버랩
크리에이티브 에이전시, 아트/패션페이지 전체 구조와 시선 흐름을 결정하는 패턴
Hero + 스크롤
큰 히어로 → 아래로 콘텐츠
랜딩페이지, 제품 소개, 마케팅 사이트Split Screen
화면 양분, 이미지+텍스트
패션, 비교, 두 가지 선택지 제시Asymmetric Split
불균등 분할 (60/40, 70/30), 시선 유도
중요 콘텐츠 강조, 동적인 느낌Z-Pattern
Z자 시선 흐름
이미지 중심 랜딩, 간결한 페이지F-Pattern
F자 시선 흐름
텍스트 중심 페이지, 블로그, 문서Full-Bleed
여백 없이 가장자리까지
몰입감, 이미지/영상 강조Single Column
단일 컬럼, 집중된 읽기
아티클, 블로그 포스트, 랜딩텍스트의 시각적 표현 체계
Oversized Display
48-120px+ 대형 헤드라인. 텍스트가 히어로 이미지를 대체하는 방향으로 진화
히어로 섹션, 브랜드 스테이트먼트, 텍스트-온리 랜딩Variable Fonts
단일 파일로 weight/width/slant 등 다축 조절. 웹사이트 40% 채택
3개+ 웨이트 사용 시, 반응형, 동적 UI, 성능 중요High-Contrast Serif
굵기 대비 강한 세리프. 럭셔리 브랜드 헤리티지 복귀와 맞물림
에디토리얼, 럭셔리, 패션Neo-Grotesque Sans
Inter, Satoshi, Geist Sans 등 현대적 산세리프. SaaS 93% 지배
SaaS, 테크, 범용 UI, 프로덕티비티 도구Kinetic Typography
움직이는 텍스트. GSAP 무료화(2025.04)로 진입장벽 대폭 하락
히어로 섹션, 인터랙티브 브랜딩, 스크롤 기반 스토리텔링Anti-AI Humantouch Type
의도적 불완전성, 흔들리는 아웃라인, 리소그래프 텍스처, "잘못된" 자간
크리에이티브 에이전시, 패션, 인디 브랜드, 차별화 필요 시Fluid Typography (clamp)
CSS clamp()로 뷰포트 반응형 폰트 크기. rem + vw 조합 필수
모든 반응형 웹. 오버사이즈 디스플레이 구현의 기술적 기반CSS text-wrap: balance
헤딩/짧은 텍스트의 줄바꿈 자동 균형
헤딩, 카드 타이틀, CTA 텍스트CSS text-wrap: pretty
본문 텍스트 orphan(고아 단어) 방지
블로그 본문, 아티클, 긴 텍스트AI Font Search
자연어로 폰트 검색. 25만+ 폰트 대상
폰트 선정 워크플로. 크리에이티브 시간 최대 35% 절감COLRv1 Color Fonts
그라디언트, 블렌딩 모드 지원 차세대 컬러 폰트
디스플레이/장식용 한정. Safari 미지원으로 프로덕션 제한Exaggerated Hierarchy
120px+ 헤드라인과 10-12px 마이크로 텍스트의 극단적 병치
패션, 에디토리얼, 크리에이티브 랜딩UI에서 색상의 역할과 적용 규칙
60% Dominant
배경, 빈 공간, surface
30% Secondary
카드 배경, 네비게이션, 섹션 구분
10% Accent
CTA 버튼, 링크, 알림 뱃지, 포커스 상태
Monochromatic
미니멀 SaaS, 포트폴리오
세련, 집중Analogous
자연/웰니스 앱, 친근한 B2C
조화, 편안Complementary
CTA 강조, 게임화
에너지, 대비Split-Complementary
대부분의 웹사이트
균형 잡힌 대비사조 + 레이아웃 + 타이포의 실전 조합
SaaS 랜딩
Flat + Corporate
크리에이티브 에이전시
Neubrutalism
이커머스
Material / Flat
테크 블로그
Swiss / Editorial
프리미엄 제품
HIG + Glassmorphism
핀테크 앱
Material + Neumorphism
디자인과 개발을 잇는 언어를 배웁니다
디자인 사고로 제품을 설계하는 바이브 코딩
6섹션 · 18챕터
Vibe Design Starter Kit
디자인 사고로 제품을 설계하는 바이브 코딩
바이브 디자인: 새로운 사고에 적응하기
꼭 필요한 만큼의 디자인 시스템
제품으로서의 확장: UX로 로직 제어하기
내 프로젝트에 적용해보기 - 챌린지
디자인 에이전트: 이성과 감성사이의 파이프라인
실전 서비스 운영 시나리오 대응