디자인 아틀라스
EN
⬡ 아이콘·일러스트

아이소메트릭 일러스트

Isometric Illustration

소실점 없이 세 축을 120도로 배치해서, 원근 왜곡 없이도 입체감을 보여주는 그림 방식.

다른 이름: Isometric artEqual projection
···
html
<div class="stage">
  <svg viewBox="0 0 24 26" id="cube">
    <ellipse cx="12" cy="23.5" rx="8" ry="1.6" fill="var(--fg)" opacity=".12" id="shadow"/>
    <polygon class="top" points="12,2 21,7 12,12 3,7"/>
    <polygon class="left" points="3,7 12,12 12,21 3,16"/>
    <polygon class="right" points="21,7 12,12 12,21 21,16"/>
  </svg>
</div>
css
.stage{width:clamp(72px,30vmin,130px);aspect-ratio:24/26;overflow:visible}
#cube{width:100%;height:100%;display:block;overflow:visible;animation:float 2.6s ease-in-out infinite}
.top{fill:var(--accent)}
.left{fill:color-mix(in srgb, var(--accent) 65%, black)}
.right{fill:color-mix(in srgb, var(--accent) 40%, black)}
#shadow{animation:shrink 2.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes shrink{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.06;transform:scale(.85)}}

아이소메트릭 일러스트는 소실점 없이 세 축(위/왼쪽/오른쪽 면)을 각각 120도로 배치해서, 원근 왜곡 없이도 입체감을 보여주는 그림 방식이다. 실제 건축 도면의 등각 투영에서 왔지만, 요즘은 앱 온보딩·빈 상태 화면·기능 소개 카드에 많이 쓰인다.

핵심은 세 면의 명암을 고정된 규칙으로 정하는 것 — 보통 윗면이 가장 밝고, 왼쪽(또는 오른쪽) 면이 중간, 반대쪽이 가장 어둡다. 빛이 항상 같은 방향(대개 위)에서 온다고 가정하고 모든 오브젝트에 같은 명암 규칙을 적용해야, 여러 오브젝트를 한 장면에 모아도 조명이 일관되게 느껴진다.

정확한 등각(모든 축 120도, 선 기울기 30도)을 지키지 않으면 "살짝 삐뚤어진 3D"처럼 어색해 보인다. 그래서 손으로 대충 그리기보다 30-60-90 격자나 벡터 툴의 아이소메트릭 플러그인 위에서 그리는 경우가 많다.

언제 쓰나

온보딩, 빈 상태, 기능 소개 카드처럼 부드럽고 설명적인 톤이 필요한 화면에 쓰세요. 한 화면에 오브젝트가 여럿이면 명암 규칙과 광원 방향을 반드시 통일하세요.