아이콘 메타포

Icon Metaphor

실제 기능과 상관없는 물건의 그림을 빌려와, 그 물건이 하던 역할을 새 기능의 상징으로 쓰는 것 — 저장 버튼의 플로피 디스크가 대표적이다.

다른 이름: Skeuomorphic metaphorIcon convention
···
html
<div class="row">
  <div class="item">
    <svg viewBox="0 0 24 24" class="ic"><path d="M5 4h11l3 3v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" fill="none" stroke="var(--fg)" stroke-width="1.8" stroke-linejoin="round"/><rect x="8" y="4" width="7" height="5" fill="none" stroke="var(--fg)" stroke-width="1.8"/><rect x="7" y="13" width="10" height="7" fill="none" stroke="var(--fg)" stroke-width="1.8"/></svg>
    <div class="cap"><b>Save</b><span>floppy disk</span></div>
  </div>
  <div class="item">
    <svg viewBox="0 0 24 24" class="ic"><rect x="3" y="6" width="18" height="13" rx="1.5" fill="none" stroke="var(--fg)" stroke-width="1.8"/><path d="M4 7l8 6 8-6" fill="none" stroke="var(--fg)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <div class="cap"><b>Mail</b><span>envelope</span></div>
  </div>
  <div class="item">
    <svg viewBox="0 0 24 24" class="ic"><path d="M5 7h14M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" fill="none" stroke="var(--fg)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <div class="cap"><b>Delete</b><span>trash can</span></div>
  </div>
</div>
css
.row{display:flex;gap:clamp(14px,5vmin,32px)}
.item{display:flex;flex-direction:column;align-items:center;gap:6px;animation:pop 3.6s ease-in-out infinite}
.item:nth-child(2){animation-delay:1.2s}
.item:nth-child(3){animation-delay:2.4s}
.ic{width:clamp(26px,8vmin,40px);height:clamp(26px,8vmin,40px)}
.cap{display:flex;flex-direction:column;align-items:center;gap:1px}
.cap b{font-size:11px;color:var(--fg)}
.cap span{font-size:9px;color:var(--muted)}
@keyframes pop{0%,80%,100%{transform:translateY(0)}90%{transform:translateY(-3px)}}

아이콘 메타포는 실제 기능과는 상관없는 물건의 그림을 빌려와, 그 물건이 하던 역할을 새 기능의 상징으로 쓰는 것이다. 저장 버튼의 플로피 디스크가 가장 유명한 사례다 — 대부분의 사용자는 플로피 디스크를 실물로 본 적도 없지만, "이 모양 = 저장"이라는 약속은 30년 넘게 깨지지 않고 이어지고 있다.

메타포가 오래 살아남는 이유는 아이콘이 실제 사물을 정확히 재현하기보다, 그 사물이 문화적으로 갖게 된 "뜻"을 전달하기 때문이다. 봉투는 이제 실제 편지보다 이메일을 뜻하고, 종이 카메라 셔터 모양은 스마트폰 카메라 앱을 뜻한다. 그래서 메타포를 고를 때는 지금 실제로 쓰이는 물건인지보다, 그 실루엣이 여전히 널리 통용되는 약속인지를 먼저 따진다.

문제는 새로운 메타포를 억지로 만들려고 할 때 생긴다. 클라우드 동기화, AI 같은 추상적인 개념은 마땅히 빌려올 실물이 없어서 아이콘만 보고는 뜻을 짐작하기 어렵다. 이럴 땐 아이콘 단독으로 승부하지 말고 짧은 텍스트 라벨을 함께 두는 편이 안전하다.

언제 쓰나

이미 널리 통용되는 시각 약속(플로피 디스크=저장, 봉투=메일)은 신뢰하고 그대로 쓰세요. 클라우드·AI처럼 빌려올 실물이 없는 추상적인 기능은 아이콘만으로 승부하지 말고 텍스트 라벨을 함께 두세요.