아이콘 시스템 관리 — 그리드, 스트로크, 배포까지

아이콘 시스템이 제대로 정의되지 않으면, 새 아이콘을 하나 추가할 때마다 기존 아이콘과 두께가 안 맞거나 크기가 미묘하게 어긋납니다. 아이콘은 컴포넌트나 컬러보다 가볍게 다뤄지는 경우가 많지만, 정작 화면에서 가장 자주 반복되고 눈에 잘 띄는 요소이기도 합니다.

1. 그리드부터 정하기

대부분의 아이콘 시스템은 24×24px 캔버스를 기준으로 하고, 실제 도형은 안쪽 20×20px 영역에 그립니다. 이 여백이 아이콘 간 시각적 무게를 맞춰주는 역할을 합니다.

16px, 20px, 24px, 32px처럼 여러 크기가 필요하다면 24px 기준 아이콘을 그대로 축소하지 말고, 크기별로 최적화된 버전을 따로 그리는 것이 좋습니다. 작은 크기에서는 디테일이 뭉개지기 때문입니다.

2. 스트로크와 스타일 통일하기

아이콘 시스템에서 가장 흔히 깨지는 부분이 선 두께입니다. 1.5px, 2px처럼 두께를 하나로 고정하고, 선의 끝처리와 모서리 반경도 통일해야 세트로 놓았을 때 이질감이 없습니다.

3. 네이밍과 배포 파이프라인

아이콘이 늘어날수록 이름 규칙이 중요해집니다. arrow-right, chevron-down처럼 형태와 방향을 명확히 드러내는 이름을 쓰고, 이 규칙은 컴포넌트 네이밍 규칙에서 다룬 원칙과 동일한 선상에서 관리하는 것이 좋습니다.

피그마에서는 아이콘을 컴포넌트로 등록하고 Boolean 프로퍼티로 스타일을 전환할 수 있게 만들어두면 사용성이 크게 좋아집니다. 파일 구조는 디자인 파일 정리법에서 다룬 페이지 구조를 그대로 적용해 아이콘 전용 페이지를 분리해두는 것을 권합니다. 오픈소스 아이콘 세트를 기반으로 시작한다면 Google Fonts의 Material Symbols 공식 사이트에서 그리드와 스트로크 규칙을 참고할 수 있습니다.

• 기준 캔버스와 안전 영역을 정하기
• 스트로크 두께, 끝처리, 모서리 반경 통일하기
• 채움형, 선형 사용 규칙 문서화하기
• 형태와 방향이 드러나는 네이밍 규칙 적용하기
• SVG 배포 파이프라인 구축하기

4. 아이콘 폰트냐 SVG 스프라이트냐

배포 파이프라인을 구축하고 나면 결국 아이콘을 아이콘 폰트로 묶을지, SVG 스프라이트로 묶을지 선택해야 합니다. 아이콘 폰트는 웹 초기부터 널리 쓰인 방식으로, 텍스트처럼 color와 font-size 속성만으로 손쉽게 색상과 크기를 바꿀 수 있다는 장점이 있습니다. 하지만 여러 색을 조합한 아이콘을 표현하기 어렵고, 스크린 리더가 아이콘을 엉뚱한 글자로 읽어버리는 접근성 문제도 꾸준히 지적되어 왔습니다. 반면 SVG 스프라이트는 다색 아이콘과 세밀한 스타일 조정이 가능하고 접근성 속성을 아이콘마다 따로 지정할 수 있어, 최근 대부분의 디자인 시스템이 SVG 방식으로 옮겨가는 추세입니다.

흔히 하는 실수 중 하나는 방향성이 있는 아이콘(화살표, 재생 버튼 등)을 다국어 대응 없이 그대로 배포하는 것입니다. 아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어권에서는 진행 방향을 나타내는 아이콘을 좌우로 뒤집어야 하는데, 이 규칙을 네이밍 규칙과 함께 미리 정해두지 않으면 다국어 대응 시점에 아이콘 세트 전체를 다시 점검해야 하는 상황이 생깁니다. 16px처럼 작은 크기로 표시될 아이콘은 정수 픽셀 경계에 맞춰 그리는 픽셀 스냅 작업까지 함께 해두어야, 화면에서 선이 흐릿하게 렌더링되는 문제를 막을 수 있습니다.

5. 마치며

아이콘 시스템은 세부 규칙이 많아 보이지만, 그리드와 스트로크 두 가지만 먼저 통일해도 세트로 놓았을 때의 완성도가 확연히 달라집니다. 나머지는 아이콘이 늘어나는 속도에 맞춰 점진적으로 다듬으면 됩니다.