Iconography

목적

Icon은 행동, 상태, 대상 종류를 빠르게 식별하게 하는 보조 언어다. Dot은 icon으로 문장을 대체하지 않으며, 익숙하지 않은 의미를 사용자가 추측하게 하지 않는다.

• Flexible: viewport와 density에 따라 icon과 label의 배치를 조절하되 의미는 유지한다.
• Link: 같은 행동과 상태에는 화면마다 같은 icon을 사용한다.
• Glow: icon을 장식적으로 빛내는 효과가 아니라 다음 방향의 제한된 안내에만 사용한다.

Icon 종류

캐릭터는 icon이 아니다. 상태 badge나 navigation glyph처럼 축소해 사용하지 않는다.

기본 스타일

• 제품 UI의 일반 icon은 일관된 선형 icon set을 사용한다.
• stroke는 currentColor를 따라 text와 같은 semantic color를 사용한다.
• Button 내부 기본 icon은 16px 크기를 기준으로 한다.
• 작은 보조 icon은 가독성을 확인한 뒤 14px까지 사용할 수 있다.
• 독립된 object illustration처럼 더 큰 icon은 content 역할과 주변 text 계층을 함께 정의한다.
• 한 화면에서 filled, outlined, multicolor 스타일을 임의로 섞지 않는다.
• stroke width를 component마다 수동 변경하지 않는다.

Icon과 label

• 기본 행동은 icon + text label을 사용한다.
• icon은 label 앞에 두고 8px 간격을 기본으로 한다.
• 진행 방향과 관련된 다음 action은 label 뒤에 icon을 둘 수 있다.
• icon이 없어도 label만으로 결과를 이해할 수 있어야 한다.
• 같은 Button 안에 의미가 겹치는 icon을 두 개 이상 넣지 않는다.
• label보다 icon이 더 강하게 보이지 않도록 크기와 color를 조정한다.

Icon-only action

icon-only는 다음 조건을 모두 충족할 때 사용한다.

• 공간 제약이 실제로 있다.
• 의미가 제품 전반에서 일관되고 충분히 익숙하다.
• 인접한 유사 icon과 혼동되지 않는다.
• aria-label로 구체적인 행동 이름을 제공한다.
• 필요한 경우 Tooltip으로 시각 사용자에게도 label을 제공한다.
• Button size="icon" 등으로 최소 40×40px target을 유지한다.

삭제, 발행, 권한 변경처럼 결과가 큰 행동은 icon-only로 숨기지 않는다.

방향과 이동

• 화살표는 실제 이동·정렬·확장 방향을 반영한다.
• back icon에는 목록으로, 이전 질문으로처럼 목적지를 말하는 label을 함께 제공한다.
• chevron은 hierarchy 또는 disclosure, arrow는 이동과 결과라는 의미를 일관되게 유지한다.
• collapsed/expanded 상태가 바뀌면 icon 방향과 accessible state가 함께 바뀐다.
• 정렬 icon은 현재 방향을 label 또는 accessible description으로 전달한다.

상태 icon

• success, warning, destructive, info는 icon·text·semantic color의 조합을 사용할 수 있다.
• color 없이도 상태 종류를 구분할 수 있는 silhouette를 선택한다.
• loading spinner와 success check를 같은 자리에 전환할 때 상태 문장을 유지한다.
• StatusPill의 dot은 color 보조 신호이며 label을 대체하지 않는다.
• 상태가 복잡하면 icon을 더 추가하지 않고 짧은 문장과 세부 설명을 사용한다.

DotIcon

DotIcon은 작은 제품 identity이며 일반 action icon으로 사용하지 않는다.

• framed는 muted한 배경 frame이 실제로 필요할 때만 사용한다.
• 내부 이미지는 장식 처리되므로 제품 이름이나 주변 text가 정체성을 설명해야 한다.
• 원본 asset을 직접 crop, recolor, rotate하지 않는다.
• dotIconUrl을 직접 사용하는 경우에도 비율과 승인된 derivative를 유지한다.
• 큰 logo 또는 3D character 대신 DotIcon을 무리하게 확대하지 않는다.

Character와 2D·3D 표현

• 2D 표현은 제품 안의 답변·처리·안내처럼 기능에 가까운 맥락에 사용한다.
• 3D DotCharacter는 넓고 드문 온보딩, 빈 상태, 완료, 브랜드 맥락에 사용한다.
• character를 16–24px icon으로 축소하지 않는다.
• 필요한 의미의 승인 asset이 없으면 비슷한 icon이나 character를 생성해 대체하지 않는다.
• 지정된 형태, 색, 요소 관계, 방향, clear space를 유지한다.

밀도와 반응형

• compact table에서 반복 action은 menu로 묶을 수 있지만 가장 중요한 row action은 발견 가능하게 유지한다.
• mobile이라고 모든 text button을 icon-only로 바꾸지 않는다.
• touch 환경에서는 hover 없이 icon 의미를 이해할 수 있어야 한다.
• narrow에서 label을 줄여야 한다면 더 명확한 짧은 동사형을 먼저 찾는다.
• icon이 줄바꿈된 label과 수직 정렬을 잃지 않게 한다.
• zoom 환경에서 SVG가 흐려지거나 target과 분리되지 않게 한다.

상태와 접근성

• 장식 icon은 보조 기술에서 숨긴다.
• 정보 icon은 인접 text와 중복되지 않는 accessible name 또는 description을 제공한다.
• icon-only Button에는 구체적인 aria-label을 제공한다.
• tooltip은 keyboard focus와 pointer 모두에서 접근 가능해야 하지만 accessible name을 대신하지 않는다.
• SVG 안의 색만으로 상태를 전달하지 않는다.
• spinner에는 현재 작업을 설명하는 text 상태와 필요한 live announcement가 있다.
• focus ring은 icon의 작은 silhouette가 아니라 40px target 경계에 표시한다.

예외와 피해야 할 사용

• 제목, label, 모든 행에 장식 icon을 붙이지 않는다.
• emoji를 제품 icon으로 사용하지 않는다.
• action마다 서로 다른 icon style과 stroke를 섞지 않는다.
• icon만으로 위험 action과 결과 범위를 설명하지 않는다.
• 작은 공간에 맞추려고 target을 40px 미만으로 줄이지 않는다.
• 브랜드 icon을 상태, bullet, avatar 대체로 사용하지 않는다.
• character를 icon처럼 crop하거나 색을 바꾸지 않는다.
• Glow를 일반 icon의 hover·selected effect로 반복하지 않는다.

검토 질문

• icon이 행동·상태·대상 식별에 실제 도움을 주는가?
• icon이 없어도 label과 구조로 의미를 이해할 수 있는가?
• 같은 행동과 상태에 같은 icon을 사용하는가?
• icon-only 사용이 모든 조건을 충족하고 40×40px target을 유지하는가?
• 방향 icon과 expanded·sort state가 실제 상태와 일치하는가?
• status가 color와 icon 외에 text label을 가지는가?
• DotIcon을 제품 identity 이외의 용도로 쓰지 않았는가?
• 2D, 3D, 일반 icon의 역할을 구분하는가?
• keyboard와 screen reader가 icon action의 구체적 결과를 알 수 있는가?
• 승인된 형태, 색, 관계, 여백을 유지하는가?