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

플랫 일러스트

Flat Illustration

그림자·그레이디언트·하이라이트를 걷어내고 단순한 도형과 균일한 색면만으로 장면을 그리는 일러스트 스타일.

다른 이름: Flat design illustration
···
html
<div class="stage">
  <svg viewBox="0 0 100 60" id="scene">
    <circle cx="78" cy="16" r="9" fill="var(--accent-2)" id="sun"/>
    <path id="cloud" d="M10 22a6 6 0 0 1 11-3 5 5 0 0 1 9 3 5 5 0 0 1-1 10H12a6 6 0 0 1-2-10Z" fill="var(--surface)" stroke="var(--line)" stroke-width="1" opacity=".9"/>
    <polygon points="0,50 30,15 55,50" fill="var(--accent-3)"/>
    <polygon points="35,50 60,22 100,50" fill="var(--accent)"/>
  </svg>
</div>
css
.stage{width:clamp(150px,58vmin,280px);aspect-ratio:100/60;overflow:visible}
#scene{width:100%;height:100%;display:block;overflow:visible}
#sun{animation:pulse 2.4s ease-in-out infinite;transform-origin:center}
#cloud{animation:drift 5s ease-in-out infinite}
@keyframes pulse{0%,100%{r:9}50%{r:10}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

플랫 일러스트는 그림자, 그레이디언트, 하이라이트 같은 입체 표현을 전부 걷어내고 단순한 도형과 균일한 색면만으로 장면을 그린다. 2010년대 초반 스큐어모피즘(가죽 질감, 반사광을 흉내 내던 스타일)에 대한 반작용으로 퍼졌고, 지금은 웹·앱의 기본 일러스트 스타일로 자리 잡았다.

제작이 빠르고 SVG로 그리면 용량도 작아서, 벡터 그대로 어느 화면 크기에서나 선명하다. 대신 입체감을 포기한 만큼 형태와 색 조합만으로 분위기를 만들어야 하는데, 보통 3~5개의 고정된 팔레트 색을 정해두고 그 안에서만 조합해 세트 전체의 통일감을 지킨다.

디테일을 덜어낸 스타일이라 오브젝트를 지나치게 단순화하면 무엇을 그린 건지 못 알아볼 수 있다. 그래서 실루엣만으로 의미가 통하는지 — 배경을 다 지우고 형태만 봤을 때도 무엇인지 알 수 있는지 — 확인하는 과정이 필요하다.

언제 쓰나

빠르게 제작해야 하거나 벡터 용량을 작게 유지해야 하는 웹·앱 기본 일러스트에 우선 고려하세요. 3~5개 고정 팔레트를 미리 정해두고 세트 전체에서 지키세요.