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

스팟 일러스트

Spot Illustration

화면 전체를 채우는 장면이 아니라, 빈 상태·에러·성공 알림처럼 특정 지점 하나를 위해 그리는 작고 독립적인 그림.

다른 이름: Empty-state illustrationAccent illustration
···
html
<div class="stage">
  <svg viewBox="0 0 100 80" width="72%" style="overflow:visible">
    <g id="dots">
      <circle cx="35" cy="20" r="2" fill="var(--accent-2)"/>
      <circle cx="50" cy="12" r="1.6" fill="var(--accent-3)"/>
      <circle cx="64" cy="22" r="2" fill="var(--accent)"/>
    </g>
    <g id="box">
      <path d="M20 38 50 28 80 38 80 62 50 72 20 62Z" fill="var(--surface)" stroke="var(--line)" stroke-width="1.5"/>
      <path d="M20 38 50 48 80 38" fill="none" stroke="var(--line)" stroke-width="1.5"/>
      <path d="M50 48 50 72" fill="none" stroke="var(--line)" stroke-width="1.5"/>
      <path d="M20 38 50 28 80 38 50 48Z" fill="var(--accent)" opacity=".18"/>
    </g>
  </svg>
  <div class="cap">Nothing here yet</div>
</div>
css
.stage{display:flex;flex-direction:column;align-items:center;gap:10px}
#dots{animation:float 2.6s ease-in-out infinite}
#box{animation:bob 2.6s ease-in-out infinite}
.cap{font-size:11px;color:var(--muted)}
@keyframes float{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-4px);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

스팟 일러스트는 화면 전체를 채우는 장면이 아니라, 빈 상태·에러·성공 알림처럼 특정 지점 하나를 위해 그리는 작고 독립적인 그림이다. "검색 결과가 없습니다", "아직 아무것도 없어요" 같은 메시지 옆에 놓여서, 텍스트만 덩그러니 있을 때보다 화면이 비어 보이는 느낌을 훨씬 부드럽게 풀어준다.

한 주제에 집중하는 게 원칙이다 — 장면 하나에 여러 오브젝트를 욱여넣는 플랫 일러스트와 달리, 스팟 일러스트는 보통 하나의 오브젝트(빈 상자, 돋보기, 우산)와 그 주변의 작은 디테일(점, 별, 그림자) 정도로 끝난다. 그래야 목록이나 폼 옆의 좁은 공간에도 부담 없이 들어간다.

같은 제품 안에서 여러 개의 스팟 일러스트를 쓴다면(빈 검색 결과용, 에러용, 완료용 등) 선 굵기·색상·그림 톤을 통일해서 그려야, 화면을 옮겨 다녀도 다른 제품처럼 느껴지지 않는다. 일러스트레이터 한 명이 전체 세트를 그리거나, 최소한 같은 스타일 가이드를 두고 그리는 이유다.

언제 쓰나

빈 상태·에러·완료 알림처럼 특정 화면 지점 하나를 부드럽게 설명해야 할 때 쓰세요. 제품 안에 여러 개를 쓸 계획이면 처음부터 선 굵기·색·톤을 통일한 스타일 가이드를 정해두세요.