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

픽토그램

Pictogram

글자 없이 그림만으로 뜻이 통하는 기호 — 언어·문해력과 무관하게 즉시 알아봐야 하는 공항·시설 표지판이 대표적이다.

다른 이름: Wayfinding iconSignage symbol
···
html
<div class="row">
  <div class="tile" style="background:#2e7d46">
    <svg viewBox="0 0 24 24" width="60%"><path d="M5 19l1.2-7.5-2.2-2 1.4-1.4 3.1 2 3.1-2 1.4 1.4-2.2 2L14 19h-2l-1.5-6-1.5 6Z" fill="#fff"/><circle cx="9" cy="5" r="2.1" fill="#fff"/><path d="M14 6h5v13h-5M17 12h4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>
  </div>
  <div class="tile" style="background:#1e293b">
    <svg viewBox="0 0 24 24" width="55%"><path d="M8.5 20l1.2-7.5-2.2-2 1.4-1.4 3.1 2 3.1-2 1.4 1.4-2.2 2L15.5 20h-2l-1.5-6-1.5 6Z" fill="#fff"/><circle cx="12" cy="5" r="2.2" fill="#fff"/></svg>
  </div>
  <div class="tile" style="background:#334155">
    <svg viewBox="0 0 24 24" width="60%"><path d="M3 20v-3h3v-3h3v-3h3v-3h3v-3h6" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/></svg>
  </div>
</div>
css
.row{display:flex;gap:clamp(8px,3vmin,16px)}
.tile{width:clamp(46px,16vmin,72px);aspect-ratio:1;border-radius:6px;display:grid;place-items:center;animation:glow 3s ease-in-out infinite}
.tile:nth-child(2){animation-delay:1s}
.tile:nth-child(3){animation-delay:2s}
@keyframes glow{0%,66%,100%{box-shadow:0 0 0 0 transparent}83%{box-shadow:0 0 0 4px var(--accent)}}

픽토그램은 글자 없이 그림만으로 뜻이 통하는 기호다. 공항의 화장실·출구·계단 표지판이 대표적인 예로, 언어가 다른 사람도, 문맹인 사람도, 급하게 지나가는 사람도 0.5초 안에 알아봐야 한다는 전제로 그려진다. 디테일을 최대한 덜어내고 실루엣 하나로만 의미를 전달하는 게 핵심이다.

그래서 픽토그램은 개인의 스타일보다 "이미 사람들 머릿속에 있는 형태"를 그대로 따르는 것이 더 중요하다. 뛰는 사람 모양은 항상 비슷한 자세(팔다리를 크게 벌린 실루엣)로 그려야 "출구"로 읽히지, 창의적으로 재해석하면 오히려 못 알아본다. ISO 7001 같은 국제 표준이 정해둔 형태를 그대로 따르거나 최소한만 다듬어 쓰는 이유다.

일반 UI 아이콘과 달리 브랜드 색이나 스타일을 입히는 데 제약이 크다 — 안전·대피 관련 픽토그램은 배경색(녹색=피난, 빨강=금지 등)까지 표준으로 정해져 있어서 임의로 바꾸면 오히려 위험하다.

언제 쓰나

안전·대피·시설 안내처럼 언어와 무관하게 즉시 이해돼야 하는 표지에 쓰세요. 창의적으로 재해석하기보다 이미 통용되는 표준 형태를 따르는 편이 안전합니다.