# Isometric Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: isometric-design
- **카테고리**: visual-style
- **연도**: 2017
## 설명
3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.
## 핵심 원칙
- 차원성
- 명확성
- 기하학
## 주요 특징
- 3D 착시 효과
- 30도 각도
- 기하학적 정확성
- 깊이감
- 설명적 일러스트
## 사용 사례
- 테크 제품 일러스트
- 인포그래픽
- 앱 온보딩 화면
- 피처 소개 섹션
## 추천 프로젝트 유형
- 테크 제품 일러스트
- 앱 온보딩
- 인포그래픽
- SaaS 피처 소개
## 장점
- 3D 렌더러 없이도 입체감 표현 가능
- 제품·시스템 구조 설명에 효과적
- 시각적으로 독특하고 눈길을 끔
## 단점·한계
- 일러스트 제작에 시간·비용 필요
- 복잡한 오브젝트 표현 어려움
- 트렌드 의존적
## 실제 사용 제품·서비스
- Stripe 블로그 일러스트
- 많은 SaaS 온보딩 화면
## 관련 스타일
- [abstract-geometric](https://ui.buildersgate.com/styles/abstract-geometric)
- [low-poly](https://ui.buildersgate.com/styles/low-poly)
- [claymorphism](https://ui.buildersgate.com/styles/claymorphism)
## 디자인 토큰
### 색상
- primary: #00BCD4
- secondary: #4CAF50
- accent: #FF9800
- background: #FAFAFA
- surface: #FFFFFF
- text: #212121
- textSecondary: #757575
- border: #E0E0E0
### 헤더
- background: linear-gradient(120deg, #00BCD4 0%, #4CAF50 100%)
- textColor: #FFFFFF
- accentColor: #FF9800
### 타이포그래피
- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 4px 4px 0 rgba(0,188,212,0.2)
- md: 8px 8px 0 rgba(0,188,212,0.3)
- lg: 12px 12px 0 rgba(0,188,212,0.4)
- xl: 16px 16px 0 rgba(0,188,212,0.5)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 2px
- style: solid
- color: #00BCD4
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)
### 애니메이션
- duration: 300ms
- easing: cubic-bezier(0.4, 0.0, 0.2, 1)
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=tabler / strokeWidth=2 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=isometric-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=isometric-design&merged=true
Isometric Design
3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.
주요 특징
- 3D 착시 효과
- 30도 각도
- 기하학적 정확성
- 깊이감
- 설명적 일러스트
장단점
장점
- +3D 렌더러 없이도 입체감 표현 가능
- +제품·시스템 구조 설명에 효과적
- +시각적으로 독특하고 눈길을 끔
단점 / 한계
- −일러스트 제작에 시간·비용 필요
- −복잡한 오브젝트 표현 어려움
- −트렌드 의존적
적합한 사용처
사용 사례
- 테크 제품 일러스트
- 인포그래픽
- 앱 온보딩 화면
- 피처 소개 섹션
이런 프로젝트에 추천
테크 제품 일러스트앱 온보딩인포그래픽SaaS 피처 소개
실제 사용 예시
Stripe 블로그 일러스트많은 SaaS 온보딩 화면
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Isometric Cubes
등각투영 기본 큐브
Isometric Icons
등각투영 아이콘 디자인
Isometric Grid
등각투영 그리드 시스템
Isometric Building
건물 일러스트레이션
Isometric Cards
3D 효과가 있는 카드
Isometric Process Flow
등각투영 프로세스 플로우