디자인 시스템을 위한 SVG Viewer 워크플로
디자인 시스템은 일관성이 무너지면 곧바로 품질이 흔들립니다. 아이콘 하나가 어긋나 있거나 잘못된 viewBox 하나만 있어도 제품 전반에 작은 버그가 연쇄적으로 생길 수 있습니다. SVG Viewer는 자산이 디자인에서 코드로 넘어가기 전에 팀이 함께 확인할 수 있는 시각적 검문소 역할을 합니다. 아래는 아이콘 라이브러리를 운영하는 팀에서 반복적으로 쓰기 좋은 간단한 워크플로입니다.
1) 유입 단계: 기본 상태부터 확인
최적화나 변환 전에 먼저 SVG Viewer에서 자산을 열고 기본 상태를 확인합니다.
- viewBox와 크기: viewBox가 의도한 아트보드와 맞는지,
width/height에 오래된 값이 남아 있지 않은지 확인합니다. - 패딩과 정렬: 아이콘은 일관된 그리드에 올라가 있어야 합니다. 가장자리에 닿는 도형이나 과한 여백을 찾습니다.
- 스트로크 두께: 특히 아웃라인 아이콘 세트라면 선 두께가 맞는지 확인합니다.
이 검사는 빠르고 시각적이며, 원시 마크업보다 뷰어에서 훨씬 쉽게 발견됩니다.
2) 아트보드 정규화
자산이 어딘가 어색하게 보인다면 다른 작업보다 먼저 아트보드를 정규화합니다. 아트보드가 맞아야 일괄 export와 컴포넌트 크기 맞춤이 쉬워집니다.
실무 단계:
- 시스템 그리드(예: 24x24, 20x20)에 맞춰 정렬합니다.
- 올바른 viewBox 크기로 다시 export합니다.
- SVG Viewer에서 다시 열어 기준 자산과 정렬이 맞는지 확인합니다.
3) 의도를 갖고 정리하고 최적화
최적화는 단순히 파일 크기만 줄이는 작업이 아닙니다. 예측 가능한 출력을 만드는 작업입니다. 기본 원칙은 "앞으로 필요 없는 것은 제거한다"입니다.
- 메타데이터와 에디터 전용 속성
- 사용하지 않는 그룹과 빈 노드
- CSS 충돌을 일으킬 수 있는 중복 ID
먼저 정리하고, SVG Optimizer로 최적화한 뒤, 다시 SVG Viewer에서 아무것도 어긋나지 않았는지 확인합니다.
4) 파일명 규칙 수립
일관된 이름은 개발 경험을 크게 개선합니다. 한 번 정한 규칙을 계속 유지하세요. 예를 들면 다음과 같습니다.
icon-alert-filled.svgicon-alert-outline.svglogo-acme-primary.svg
SVG 파일명을 컴포넌트 이름으로 매핑할 때 이런 패턴이 있으면 추측이 줄어듭니다.
5) 라이브러리용으로 export
SVG가 시각 검사를 통과했다면 디자인 시스템이 요구하는 형식으로 export합니다.
- Raw SVG: inline 사용용
- PNG: 문서나 Figma-to-dev 참고용
- React 컴포넌트: SVG to React로 UI 라이브러리용 생성
모든 팀원이 같은 결과를 얻도록 export 설정도 문서화하는 것이 좋습니다.
6) merge 전 빠른 검토
짧은 리뷰 단계를 두면 나중 시간을 아낄 수 있습니다. SVG Viewer에서 새 자산과 기존 자산을 나란히 열고 다음을 비교합니다.
- 시각적 크기
- 정렬
- 체감 두께
조금이라도 어색하면 저장소에 들어가기 전에 먼저 수정해야 합니다.
최종 정리
SVG Viewer 워크플로의 목적은 단계를 늘리는 것이 아닙니다. 예상치 못한 문제를 줄이는 것입니다. 짧은 시각 확인, 일관된 아트보드, 예측 가능한 export만 있어도 디자인 시스템은 훨씬 안정적으로 성장합니다. Figma에서는 멀쩡했는데 운영에서는 어긋난 아이콘을 배포해 본 적이 있다면, 이 흐름이 다음 문제를 막아 줄 것입니다.
다음 단계
- 들어오는 자산을 SVG Viewer에서 먼저 검토합니다.
- export 전에 SVG Optimizer로 정리 과정을 표준화합니다.
- UI 라이브러리용 출력이 필요하면 SVG to React로 컴포넌트 코드를 생성합니다.