표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Isometric Design
3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.
- YEAR
- 2017
- MOOD
- 테크·미래적 · 친근·발랄
- PRIMARY#00BCD4
- SECONDARY#4CAF50
- ACCENT#FF9800
- BG#FAFAFA
- SURFACE#FFFFFF
취급 표시
- 둥근 모서리
- 굵은 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 4단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 테크·미래적
- 친근·발랄
어디에 쓰나
실제로 쓰는 곳
- Stripe 블로그 일러스트
- 많은 SaaS 온보딩 화면
사용 사례
- 테크 제품 일러스트
- 인포그래픽
- 앱 온보딩 화면
- 피처 소개 섹션
이런 프로젝트에 맞습니다
- 테크 제품 일러스트
- 앱 온보딩
- 인포그래픽
- SaaS 피처 소개
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 차원성
- 명확성
- 기하학
주요 특징
- 3D 착시 효과
- 30도 각도
- 기하학적 정확성
- 깊이감
- 설명적 일러스트
장점과 한계
장점
- 3D 렌더러 없이도 입체감 표현 가능
- 제품·시스템 구조 설명에 효과적
- 시각적으로 독특하고 눈길을 끔
한계
- 일러스트 제작에 시간·비용 필요
- 복잡한 오브젝트 표현 어려움
- 트렌드 의존적
컬러 시스템
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 오브젝트 위 텍스트 최소화
- 작은 폰트 크기 사용 금지 — 아이소메트릭 장면에서 텍스트가 묻힘
설계 제약
반드시 포함
- 30도 각도 기반 아이소메트릭 그리드
- 면별 명도 차이 (top > side-light > side-dark)
- 일관된 빛 방향
하지 말 것
- 원근법(perspective) 사용 금지 — 아이소메트릭은 평행 투영
- 자유로운 곡선 오브젝트 금지 — 직육면체·큐브 기반
- 3D와 2D 스타일 혼용 금지
모션 — 오브젝트 등장 시 위에서 아래로 drop. 호버 시 약간 위로 lift. 빛 방향 변경 애니메이션은 피할 것.
자주 묻는 질문
Isometric Design이란 무엇인가요?
3D 객체를 2D로 표현하는 등각투영법을 활용한 디자인입니다.
Isometric Design의 핵심 디자인 원칙은 무엇인가요?
Isometric Design의 핵심 원칙은 차원성, 명확성, 기하학입니다.
Isometric Design은 어떤 프로젝트에 적합한가요?
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 온보딩 화면 등이 있습니다.