디자인은입혀봐야 보인다
같은 화면도 디자인 언어에 따라 완전히 다른 제품이 됩니다. 그래서 66가지 UI 스타일을 설명 대신 실제 화면으로 지어 걸어뒀습니다. 카드를 열어 색·타이포·컴포넌트 규칙과 적용 예제까지 직접 확인해 보세요.
취향 테스트
6문항 · 1분
66벌 앞에서 뭐부터 입어볼지 막막하다면, 나란히 놓인 두 화면 중 끌리는 쪽을 여섯 번만 고르세요. 선택에 맞춰 어울리는 스타일을 추려 드립니다.
무드로 좁히기
보기
스타일
24종제품 화면에 그대로 입혀볼 수 있는 시각 스타일. 카드 하나하나가 설명문이 아니라 그 스타일로 직접 지은 견본입니다.
Lucida Grande
Comic Sans MS
Helvetica
R
VINTAGE
Retro & Vintage
Various과거의 디자인 요소를 현대적으로 재해석한 노스탤지어를 자극하는 스타일입니다.
빈티지 색상 팔레트클래식 타이포그래피텍스처와 그레인
Georgia
Poppins
| No. | 이름 | 연도 | 주색 | 주 서체 | 무드 | 담기 |
|---|---|---|---|---|---|---|
| 01 | Flat Design | 2012 | #3498DB | Lato | 미니멀, 친근·발랄 | |
| 02 | Skeuomorphism | 2000s | #4A90E2 | Lucida Grande | 레트로, 따뜻한 | |
| 03 | Glassmorphism | 2020 | #FFFFFF | Inter | 테크·미래적, 럭셔리 | |
| 04 | Neumorphism | 2019 | #E0E5EC | Poppins | 미니멀, 따뜻한 | |
| 05 | Brutalism | 2014 | #FF0000 | Arial | 미니멀, 레트로 | |
| 06 | Memphis Style | 1981 | #FF6B6B | Comic Sans MS | 화려한, 친근·발랄, 레트로 | |
| 07 | Swiss Design (국제 타이포그래피 양식) | 1950s | #E74C3C | Helvetica | 미니멀, 신뢰감 | |
| 08 | Retro & Vintage | Various | #D4A574 | Georgia | 레트로, 따뜻한 | |
| 09 | Claymorphism | 2021 | #FF6B9D | Nunito | 따뜻한, 친근·발랄 | |
| 10 | Neobrutalism | 2022 | #FDE047 | Space Grotesk | 화려한, 친근·발랄 | |
| 11 | Minimalism | 1960s | #000000 | Helvetica Neue | 미니멀, 럭셔리 | |
| 12 | Maximalism | 2010s | #FF1493 | Impact | 화려한, 친근·발랄 | |
| 13 | Dark Mode Design | 2018 | #BB86FC | SF Pro Display | 다크, 럭셔리 | |
| 14 | Monochrome Design | Timeless | #000000 | Courier New | 미니멀, 럭셔리 | |
| 15 | Gradient Design | 2016 | #667EEA | Montserrat | 화려한, 친근·발랄 | |
| 16 | Abstract & Geometric | 2015 | #FFA500 | Futura | 화려한, 친근·발랄 | |
| 17 | Organic & Natural | 2019 | #8BC34A | Quicksand | 내추럴, 따뜻한 | |
| 18 | Isometric Design | 2017 | #00BCD4 | Roboto | 테크·미래적, 친근·발랄 | |
| 19 | Aurora Design | 2022 | #B794F6 | Comfortaa | 테크·미래적, 화려한, 다크 | |
| 20 | Cyberpunk | 2019 | #00FFFF | Orbitron | 다크, 테크·미래적, 화려한 | |
| 21 | Corporate Memphis | 2017 | #5B4DFF | Poppins | 친근·발랄, 따뜻한 | |
| 22 | Duotone | 2015 | #1DB954 | Circular | 화려한, 친근·발랄 | |
| 23 | Low Poly | 2013 | #3B82F6 | Orbitron | 테크·미래적, 친근·발랄 | |
| 24 | Pixel Art | 1970s | #FF006E | Press Start 2P | 레트로, 친근·발랄 |
레퍼런스
15종기업과 기관이 실제 제품에 쓰고 문서로도 공개한 디자인 시스템. 검증된 한 벌을 통째로 빌려 입고 싶을 때 봅니다.
-apple-system
IBM Plex Sans
-apple-system
-apple-system
-apple-system
| No. | 이름 | 연도 | 주색 | 주 서체 | 무드 | 담기 |
|---|---|---|---|---|---|---|
| 01 | Material Design | 2014 | #6200EE | Roboto | 신뢰감, 친근·발랄 | |
| 02 | Fluent Design System | 2017 | #0078D4 | Segoe UI | 테크·미래적, 신뢰감 | |
| 03 | Human Interface Guidelines (HIG) | 1987 | #007AFF | -apple-system | 미니멀, 신뢰감 | |
| 04 | Carbon Design System | 2017 | #0F62FE | IBM Plex Sans | 미니멀, 신뢰감 | |
| 05 | Ant Design | 2015 | #1890FF | -apple-system | 미니멀, 신뢰감 | |
| 06 | Atlassian Design System | 2017 | #0052CC | -apple-system | 신뢰감, 친근·발랄 | |
| 07 | Metro Design | 2010 | #0078D7 | Segoe UI | 화려한, 신뢰감 | |
| 08 | Bootstrap | 2011 | #7952B3 | -apple-system | 미니멀, 신뢰감 | |
| 09 | Shopify Polaris | 2016 | #008060 | SF Pro Text | 미니멀, 신뢰감 | |
| 10 | Toss Design System (TDS) | 2018 | #3182F6 | Inter | 미니멀, 신뢰감 | |
| 11 | Wanted Design System (Montage) | 2024 | #3366FF | Inter | 미니멀, 신뢰감 | |
| 12 | SEED Design (당근) | 2021 | #FF6F0F | Inter | 따뜻한, 친근·발랄, 신뢰감 | |
| 13 | LINE Design System (LDS) | 2020 | #06C755 | Inter | 친근·발랄, 신뢰감 | |
| 14 | KRDS (대한민국 정부 디자인 시스템) | 2023 | #0050FF | Inter | 신뢰감, 미니멀 | |
| 15 | Astryx (Meta 디자인 시스템) | 2024 | #15110C | Figtree | 미니멀, 따뜻한, 신뢰감 |
아카이브
27종레이아웃 패턴과 아이콘 세트. 옷이라기보다 단추와 지퍼 같은 부자재라, 카드 없이 목록으로만 정리해 뒀습니다.
- Atomic Design
- Component-Driven Design
- Mobile First
- Card-Based Design
- Progressive Disclosure
- F-Pattern Layout
- Z-Pattern Layout
- Bento Grid
- Micro-interactions
- Data Visualization Design
- Storytelling Design
- Accessibility-First Design
- Parallax Scrolling
- Skeleton Screen
- Hero Section
- React Icons
- Lucide React
- Heroicons
- Phosphor Icons
- Feather Icons
- Material Icons
- Font Awesome
- Tabler Icons
- Bootstrap Icons
- Ionicons
- Remix Icon
- Iconoir