10. 아이코노그래피 — Google Material Symbols

10-1. 출처 결정 〔v5.0 근거 명문화〕

Material Symbols Rounded를 채택하고, 다른 라이브러리는 쓰지 않습니다. 후보였던 KRDS(대한민국 정부 디자인 시스템) 아이콘을 실물 분석한 결과:

항목	KRDS (91종)	Material Symbols (7,798종)
라이선스	상업적 이용 무료 ✅	Apache 2.0 ✅
색 처리	`currentColor` 0/91 — 색이 하드코딩되어 다크모드·토큰색 적용 불가 🚫	전부 currentColor ✅
도메인 커버리지	제조·품질 아이콘 0종. 91종 중 25종 이상이 정부 전용(공동인증서 6종·hwp 등)	science · factory · scale · inventory_2 · precision_manufacturing 등 전부 보유

결정적 이유는 라이선스가 아니라 하드코딩된 색이었습니다. 다크 테마를 지원하는 시스템에서 색이 고정된 아이콘은 쓸 수 없습니다.

10-2. 두 가지 사용 방식 (병행) 〔v5.0 신설〕

방식	클래스	언제	장단
① SVG mask	`.jt-ico-mask`	하단 탭바 · 주요 내비게이션 · 오프라인 · 인쇄	CDN 불필요, 항상 뜸. 대신 필요한 아이콘을 미리 뽑아둬야 함 (핵심 29종 `brand/icons/`에 준비 완료)
② 아이콘 폰트	`.jt-ico`	일반 UI	7,798종 자유 사용. 대신 CDN 의존

<!-- ① SVG — 색은 currentColor를 따라감 -->
<span class="jt-ico-mask" style="--jt-ico-url:url(/brand/icons/settings.svg)" aria-hidden="true"></span>
 
<!-- ② 폰트 -->
<span class="jt-ico" aria-hidden="true">settings</span>

⚠️ 아이콘 폰트는 반드시 display=block으로 로드합니다 (swap 금지). swap이면 폰트가 뜨기 전에 리가처 원문(“settings”, “inventory_2”)이 그대로 화면에 노출되고 레이아웃이 무너집니다. 검증 중 실제로 재현된 사고입니다. .jt-ico에는 overflow:hidden 방어가 걸려 있습니다. 사내망 방화벽으로 CDN이 막힐 수 있는 환경은 SVG 방식을 쓰세요.

10-3. 스타일 · 크기

Rounded 스타일 — 더마의 부드럽고 깔끔한 톤과 맞음
라인(비채움) 기본, 선택·활성 상태만 채움(FILL 1)
크기: --icon-sm 16px(조밀) · --icon-md 20px · --icon-lg 24px(기본) · 40px(빈 상태)
색: currentColor 상속 — 텍스트 색을 따라감. 강조 시에만 accent
아이콘이 16~24px이어도 클릭 영역은 44px 확보 (--touch-target-min)

10-4. 자주 쓰는 매핑

용도	아이콘명
문서·발행	`description` `article` `draft` `upload_file`
확인·인증	`verified` `check_circle` `fact_check` `task_alt`
경고·오류	`warning` `error` `report`
대시보드·분석	`dashboard` `monitoring` `insights`
사용자·조직	`person` `badge` `groups`
검색·필터	`search` `filter_alt` `sort`
편집·설정	`edit` `settings` `more_vert`
제조·품질	`science` `factory` `scale` `inventory_2` `local_shipping` `precision_manufacturing`

10-5. 자체 제작 아이콘 규격

Material Symbols에 피부과학·임상 전용 메타포가 없을 때만 (있으면 무조건 Material 우선 — 임의 증식 금지).

24×24 그리드, viewBox="0 0 24 24"
단색, fill="currentColor" 또는 stroke="currentColor" — 하드코딩 색 금지
라인은 stroke-width 2, 둥근 캡/조인
실제 형상이 20~22px 안에 들어오게(가장자리 여백 확보)
파일명 접두사 jt- (예: jt-ampoule.svg)

프로세스: 제안(메타포 + 왜 Material에 없는지 + 초안 SVG) → 디렉터 승인 → brand/icons-custom/ 등록

11. 일러스트레이션 — 피부 과학 톤

스타일: 얇은 라인(1.5~2px) + 옅은 단색 면. 그림자·그라디언트 최소
팔레트: gray + 한 가지 컬러(주로 teal=과학 또는 blue=신뢰). 무지개색 금지
모티프: 분자·성분 구조, 물방울·앰플, 파형(피부 결), 비커 — 추상적·기하학적으로
금지: 사실적 인체·피부 묘사, 스톡 클립아트, 이모지, 캐릭터 남용
비율: 빈 상태는 120~160px 정사각, 중앙 배치. 아이콘(40px)으로 대체 가능

유니코드 문자를 아이콘 대신 쓰지 마세요 〔v5.0 신설〕

⋮ ✕ ①②③ 같은 문자는 폰트마다 모양이 다르고, 없는 폰트에서는 대체 글꼴로 떨어져 제각각으로 보입니다. 실제로 개발자센터에서 ①②③④가 기기에 따라 다르게 그려지는 것을 확인해 정리했습니다.

자리	무엇을 쓰나
UI 아이콘 (더보기 · 닫기 · 삭제 · 검색 …)	반드시 아이콘 — `.jt-ico-mask` 또는 `.jt-ico`
표·목록의 번호	보통 숫자 `1 2 3` — 원문자(`①`) 금지
문서의 강조 표기 (⚠️ ✅ 🚫 ★)	문서에서만 허용. 제품 UI에는 쓰지 않습니다
증감 방향 (▲▼)	허용 — 색만으로 전달하지 않기 위한 의도적 사용입니다
페이지 이동 (`‹` `›`) · 수량 증감 (`−` `+`)	허용 — 어느 폰트에나 있는 기본 문자입니다

<!-- ✅ 아이콘 -->
<button class="jt-icon-btn" aria-label="더보기">
  <span class="jt-ico-mask jt-ico-sm"
        style="--jt-ico-url:url(/brand/icons/more_vert.svg)" aria-hidden="true"></span>
</button>
 
<!-- 🚫 문자로 대신하기 -->
<button class="jt-icon-btn" aria-label="더보기">⋮</button>

모션 로고 & 브랜드 자산