# Isometric Design

> 3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.

- 층: 스타일 (시각적 스타일)
- ID: isometric-design
- 연도: 2017
- 무드 태그: 테크·미래적, 친근·발랄
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/isometric-design

## 정의

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. 빛 방향 변경 애니메이션은 피할 것.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: +1 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 테크 제품 일러스트
- 인포그래픽
- 앱 온보딩 화면
- 피처 소개 섹션

## 추천 프로젝트 유형

- 테크 제품 일러스트
- 앱 온보딩
- 인포그래픽
- SaaS 피처 소개

## 장단점

### 장점

- 3D 렌더러 없이도 입체감 표현 가능
- 제품·시스템 구조 설명에 효과적
- 시각적으로 독특하고 눈길을 끔

### 단점·한계

- 일러스트 제작에 시간·비용 필요
- 복잡한 오브젝트 표현 어려움
- 트렌드 의존적

## 실제 사용 제품·서비스

- Stripe 블로그 일러스트
- 많은 SaaS 온보딩 화면

## 자주 묻는 질문

### Q1. Isometric Design이란 무엇인가요?

3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.

### Q2. Isometric Design의 핵심 디자인 원칙은 무엇인가요?

Isometric Design의 핵심 원칙은 차원성, 명확성, 기하학입니다.

### Q3. Isometric Design은 어떤 프로젝트에 적합한가요?

Isometric Design은 테크 제품 일러스트, 인포그래픽, 앱 온보딩 화면, 피처 소개 섹션, 테크 제품 일러스트, 앱 온보딩, 인포그래픽, SaaS 피처 소개 등의 프로젝트에 적합합니다.

### Q4. Isometric Design의 장단점은 무엇인가요?

장점으로는 3D 렌더러 없이도 입체감 표현 가능, 제품·시스템 구조 설명에 효과적, 시각적으로 독특하고 눈길을 끔이 있습니다. 단점으로는 일러스트 제작에 시간·비용 필요, 복잡한 오브젝트 표현 어려움, 트렌드 의존적이 있습니다.

### Q5. Isometric Design에서 색상은 어떻게 사용하나요?

3D 입체의 세 면을 명도 차이로 표현. 동일 색상의 light/mid/dark 3단계가 핵심 색상 역할은 top-face: 가장 밝은 면 — 빛을 받는 윗면, side-face-light: 중간 밝기 — 측면 1, side-face-dark: 가장 어두운 면 — 그림자 측면입니다. 주의사항: 면별 명도 차이 일관성 필수 — 빛 방향이 모든 오브젝트에 동일해야 함, 지나치게 많은 색상 사용 금지 — 오브젝트당 1색 계열로 제한.

### Q6. Isometric Design에 어울리는 폰트 스타일은 무엇인가요?

Isometric Design에는 기하학적 산세리프 — 아이소메트릭의 수학적 정밀함과 어울림 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스트는 2D 레이어에만 — 3D 오브젝트 위 텍스트 최소화, 작은 폰트 크기 사용 금지 — 아이소메트릭 장면에서 텍스트가 묻힘.

### Q7. Isometric Design 디자인에서 하면 안 되는 것은 무엇인가요?

Isometric Design에서 피해야 할 것: 원근법(perspective) 사용 금지 — 아이소메트릭은 평행 투영, 자유로운 곡선 오브젝트 금지 — 직육면체·큐브 기반, 3D와 2D 스타일 혼용 금지.

### Q8. Isometric Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Isometric Design을 적용한 대표적인 제품·서비스로는 Stripe 블로그 일러스트, 많은 SaaS 온보딩 화면 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #00BCD4
- secondary: #4CAF50
- accent: #FF9800
- background: #FAFAFA
- surface: #FFFFFF
- text: #212121
- textSecondary: #757575
- border: #E0E0E0

### 타이포그래피

- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 4px 4px 0 rgba(0,188,212,0.2)
- shadow md: 8px 8px 0 rgba(0,188,212,0.3)
- shadow lg: 12px 12px 0 rgba(0,188,212,0.4)
- border: 2px solid #00BCD4

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: rounded / solid
- icon: tabler / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 300ms cubic-bezier(0.4, 0.0, 0.2, 1)

## 관련 링크

### 관련 스타일

- [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)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/isometric-design)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/isometric-design)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/isometric-design)

### 비교

- [Isometric Design vs Abstract & Geometric](https://ui.buildersgate.com/compare/abstract-geometric-vs-isometric-design)
- [Isometric Design vs Claymorphism](https://ui.buildersgate.com/compare/claymorphism-vs-isometric-design)
- [Isometric Design vs Low Poly](https://ui.buildersgate.com/compare/isometric-design-vs-low-poly)

### 쓰임새별 추천

- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)

---

HTML 버전: https://ui.buildersgate.com/styles/isometric-design

이 문서는 https://ui.buildersgate.com/styles/isometric-design.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.