디자인 아틀라스
EN
✎ 그래픽·브랜딩·인쇄

픽토리얼 마크

Pictorial mark

브랜드를 있는 그대로 알아볼 수 있는 구상적 이미지 하나로 표현한 심볼 — 글자 없이도 무엇을 나타내는지 짐작할 수 있습니다.

다른 이름: Icon logoPicture mark
···
html
<div class="pm">
  <svg viewBox="0 0 24 24" width="42%" style="aspect-ratio:1">
    <path id="fillp" d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="var(--accent)"/>
    <path id="plane" d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="none" stroke="var(--fg)"
      stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round"/>
  </svg>
  <p class="cap">Fleetwing</p>
</div>
css
.pm{display:flex;flex-direction:column;align-items:center;gap:8px}
.cap{margin:0;font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:600}
#plane{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 3.2s ease-in-out infinite}
#fillp{opacity:0;animation:fillIn 3.2s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:70}40%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:70}}
@keyframes fillIn{0%,38%{opacity:0}55%,88%{opacity:1}100%{opacity:0}}

픽토리얼 마크는 브랜드가 하는 일이나 다루는 대상을 있는 그대로 그린 심볼입니다. 추상적인 도형(애브스트랙트 마크)과 달리 새·나뭇잎·화살표처럼 실제 사물을 알아볼 수 있는 형태를 그대로 씁니다.

가장 큰 장점은 학습이 필요 없다는 점입니다. 브랜드를 처음 보는 사람도 도상만으로 대략 무엇을 하는 곳인지 짐작할 수 있습니다. 다만 그만큼 표현할 수 있는 소재가 제한적이라, 같은 업종에 비슷한 소재(카페=커피컵, 여행사=비행기)를 쓰는 경쟁자와 차별화하기 어렵다는 단점도 있습니다.

실루엣을 단순화하고 선의 굵기를 한 가지로 통일해야 작은 크기에서도 살아남습니다. 세부 묘사가 많은 사실적인 일러스트보다, 몇 개의 선과 면으로 압축한 아이코노그래피에 가깝게 그리는 것이 일반적입니다.

언제 쓰나

무엇을 하는 브랜드인지 설명 없이 바로 전달하고 싶을 때 씁니다. 같은 업종의 흔한 소재(커피컵, 비행기 등)와 겹치지 않는지 미리 확인하세요.