# Isometric Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: isometric-design
- **카테고리**: visual-style
- **연도**: 2017
## 설명
3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.
## 핵심 원칙
- 차원성
- 명확성
- 기하학
## 주요 특징
- 3D 착시 효과
- 30도 각도
- 기하학적 정확성
- 깊이감
- 설명적 일러스트
## 컬러 시스템 가이드
3D 입체의 세 면을 명도 차이로 표현. 동일 색상의 light/mid/dark 3단계가 핵심
### 색상 역할
- top-face: 가장 밝은 면 — 빛을 받는 윗면
- side-face-light: 중간 밝기 — 측면 1
- side-face-dark: 가장 어두운 면 — 그림자 측면
- background: 아이소메트릭 장면의 배경 — 밝은 단색
### 색상 제약 조건
- 면별 명도 차이 일관성 필수 — 빛 방향이 모든 오브젝트에 동일해야 함
- 지나치게 많은 색상 사용 금지 — 오브젝트당 1색 계열로 제한
- 그라데이션 금지 — 단색 면으로만 구성
### 다크모드 전략
배경 어둡게, 오브젝트 색상 유지. 그림자 면은 더 어둡게 조정
### 대비 요구사항
2D 텍스트와 3D 오브젝트 간 배경 대비 확보
## 타이포그래피 가이드
- **폰트 성격**: 기하학적 산세리프 — 아이소메트릭의 수학적 정밀함과 어울림
- **권장 폰트 수**: 최대 1개
- **타입 스케일**: 1.25 (Major Third)
### 타이포그래피 제약
- 텍스트는 2D 레이어에만 — 3D 오브젝트 위 텍스트 최소화
- 작은 폰트 크기 사용 금지 — 아이소메트릭 장면에서 텍스트가 묻힘
## 하면 안 되는 것 (안티패턴)
- 원근법(perspective) 사용 금지 — 아이소메트릭은 평행 투영
- 자유로운 곡선 오브젝트 금지 — 직육면체·큐브 기반
- 3D와 2D 스타일 혼용 금지
## 반드시 포함해야 하는 것
- 30도 각도 기반 아이소메트릭 그리드
- 면별 명도 차이 (top > side-light > side-dark)
- 일관된 빛 방향
## 모션 가이드
오브젝트 등장 시 위에서 아래로 drop. 호버 시 약간 위로 lift. 빛 방향 변경 애니메이션은 피할 것.
## 사용 사례
- 테크 제품 일러스트
- 인포그래픽
- 앱 온보딩 화면
- 피처 소개 섹션
## 추천 프로젝트 유형
- 테크 제품 일러스트
- 앱 온보딩
- 인포그래픽
- 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
## 자주 묻는 질문 (FAQ)
### Q: Isometric Design이란 무엇인가요?
A: 3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.
### Q: Isometric Design의 핵심 디자인 원칙은 무엇인가요?
A: Isometric Design의 핵심 원칙은 차원성, 명확성, 기하학입니다.
### Q: Isometric Design은 어떤 프로젝트에 적합한가요?
A: Isometric Design은 테크 제품 일러스트, 인포그래픽, 앱 온보딩 화면, 피처 소개 섹션, 테크 제품 일러스트, 앱 온보딩, 인포그래픽, SaaS 피처 소개 등의 프로젝트에 적합합니다.
### Q: Isometric Design의 장단점은 무엇인가요?
A: 장점으로는 3D 렌더러 없이도 입체감 표현 가능, 제품·시스템 구조 설명에 효과적, 시각적으로 독특하고 눈길을 끔이 있습니다. 단점으로는 일러스트 제작에 시간·비용 필요, 복잡한 오브젝트 표현 어려움, 트렌드 의존적이 있습니다.
### Q: Isometric Design에서 색상은 어떻게 사용하나요?
A: 3D 입체의 세 면을 명도 차이로 표현. 동일 색상의 light/mid/dark 3단계가 핵심 색상 역할은 top-face: 가장 밝은 면 — 빛을 받는 윗면, side-face-light: 중간 밝기 — 측면 1, side-face-dark: 가장 어두운 면 — 그림자 측면입니다. 주의사항: 면별 명도 차이 일관성 필수 — 빛 방향이 모든 오브젝트에 동일해야 함, 지나치게 많은 색상 사용 금지 — 오브젝트당 1색 계열로 제한.
### Q: Isometric Design에 어울리는 폰트 스타일은 무엇인가요?
A: Isometric Design에는 기하학적 산세리프 — 아이소메트릭의 수학적 정밀함과 어울림 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트는 2D 레이어에만 — 3D 오브젝트 위 텍스트 최소화, 작은 폰트 크기 사용 금지 — 아이소메트릭 장면에서 텍스트가 묻힘.
### Q: Isometric Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Isometric Design에서 피해야 할 것: 원근법(perspective) 사용 금지 — 아이소메트릭은 평행 투영, 자유로운 곡선 오브젝트 금지 — 직육면체·큐브 기반, 3D와 2D 스타일 혼용 금지.
### Q: Isometric Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Isometric Design을 적용한 대표적인 제품·서비스로는 Stripe 블로그 일러스트, 많은 SaaS 온보딩 화면 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=isometric-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=isometric-design&merged=true
Isometric Design은 테크 제품 일러스트, 인포그래픽, 앱 온보딩 화면, 피처 소개 섹션, 테크 제품 일러스트, 앱 온보딩, 인포그래픽, SaaS 피처 소개 등의 프로젝트에 적합합니다.
Isometric Design의 장단점은 무엇인가요?
장점으로는 3D 렌더러 없이도 입체감 표현 가능, 제품·시스템 구조 설명에 효과적, 시각적으로 독특하고 눈길을 끔이 있습니다. 단점으로는 일러스트 제작에 시간·비용 필요, 복잡한 오브젝트 표현 어려움, 트렌드 의존적이 있습니다.
Isometric Design에서 색상은 어떻게 사용하나요?
3D 입체의 세 면을 명도 차이로 표현. 동일 색상의 light/mid/dark 3단계가 핵심 색상 역할은 top-face: 가장 밝은 면 — 빛을 받는 윗면, side-face-light: 중간 밝기 — 측면 1, side-face-dark: 가장 어두운 면 — 그림자 측면입니다. 주의사항: 면별 명도 차이 일관성 필수 — 빛 방향이 모든 오브젝트에 동일해야 함, 지나치게 많은 색상 사용 금지 — 오브젝트당 1색 계열로 제한.
Isometric Design에 어울리는 폰트 스타일은 무엇인가요?
Isometric Design에는 기하학적 산세리프 — 아이소메트릭의 수학적 정밀함과 어울림 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트는 2D 레이어에만 — 3D 오브젝트 위 텍스트 최소화, 작은 폰트 크기 사용 금지 — 아이소메트릭 장면에서 텍스트가 묻힘.
Isometric Design 디자인에서 하면 안 되는 것은 무엇인가요?
Isometric Design에서 피해야 할 것: 원근법(perspective) 사용 금지 — 아이소메트릭은 평행 투영, 자유로운 곡선 오브젝트 금지 — 직육면체·큐브 기반, 3D와 2D 스타일 혼용 금지.
Isometric Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Isometric Design을 적용한 대표적인 제품·서비스로는 Stripe 블로그 일러스트, 많은 SaaS 온보딩 화면 등이 있습니다.