SVG 아이콘 viewBox 표준화 및 최적화

[hyejj19]

배경

/public/icon/ 내 SVG 아이콘 88개를 조사한 결과, viewBox 치수가 36가지로 제각각이며 동일 개념의 아이콘끼리도 크기가 다른 상황입니다.

현황

동일 아이콘 계열 내 viewBox 불일치

아이콘 계열	viewBox 종류 수	상세
star	5종	10x10, 13x13, 15x14, 29x27, 29x28
close	3종	12x13, 13x13, 20x20
comment	3종	10x11, 12x12, 13x13
arrow-right	2종	16x16, 29x26
pick	2종	13x13, 30x30

navbar 아이콘 불일치

나란히 렌더링되는 6개 아이콘이 3가지 다른 치수를 가짐:

• 26x26: home, search, user
• 24x23: explorer, star
• 16x17: review

비정방형 viewBox

22개 파일이 비정방형(width ≠ height) — 정방형 렌더링 시 찌그러질 수 있음

작업 계획

Phase 1: 표준 그리드 정의

• 기준 viewBox 확정 (예: 0 0 24 24)
• 모든 아이콘을 정방형 viewBox 안에 센터 정렬하도록 규칙 정의

Phase 2: 동일 개념 아이콘 통일

• star, close, arrow, comment, pick 계열 — 동일 패스에서 색상만 변경하여 재생성
• navbar 6개 아이콘 viewBox 통일

Phase 3: 최적화

• SVGO 등으로 불필요한 메타데이터/패스 제거
• 과도하게 큰 파일 최적화 (logo-text ~10KB 등)

참고

• 현재 가장 많이 사용되는 viewBox: 20x20 (17개), 30x30 (6개), 14x14 (6개)
• 업계 표준은 24x24 (Material Icons, Heroicons, Lucide 등)

[hyejj19]

양식이 안맞아서 재등록하겠음