아이콘을 넣는 방법은 크게 셋입니다. 아이콘 폰트, SVG 스프라이트, 인라인 SVG. 셋 다 화면에서는 같은 그림을 그리므로 취향의 문제처럼 보이지만, 실제로 결정되는 것은 세 가지입니다 — 색을 몇 개 쓸 수 있는가, 보조기기에 무엇으로 읽히는가, 그리고 방문자에게 실제로 몇 개가 내려가는가.
세 방식이 실제로 다른 점
이름만 보면 비슷해 보이지만, 브라우저가 하는 일이 서로 다릅니다.
아이콘 폰트는 글꼴 파일 안에 아이콘을 글자로 넣어 두고, 특정 문자 코드를 쓰면 그 그림이 나오게 하는 방식입니다. 크기는 font-size 로, 색은 color 로 정해지므로 다루기가 대단히 쉽습니다.
SVG 스프라이트는 아이콘 도형을 한 파일에 모아 두고 문서에서 <use> 로 필요한 것만 꺼내 씁니다. 파일 하나가 캐시되고, 각 아이콘은 진짜 벡터 도형으로 남습니다.
인라인 SVG는 도형을 문서 안에 그대로 씁니다. 요청이 늘지 않고 CSS 로 내부 요소 하나하나를 제어할 수 있는 대신, 같은 아이콘이 여러 번 나오면 마크업이 그만큼 반복됩니다.
첫 번째 기준 — 색을 몇 개 쓸 것인가
이 질문 하나로 후보가 크게 줄어듭니다. 아이콘 폰트는 글자이므로 색이 언제나 하나입니다. 두 가지 색이 들어간 아이콘, 상태에 따라 일부만 색이 바뀌는 아이콘, 선과 면이 다른 톤인 아이콘은 구조적으로 불가능합니다.
대신 아이콘 폰트에는 큰 장점이 하나 있습니다. 색이 텍스트 색을 그대로 상속하므로 버튼 위에 얹으면 버튼 글자색을 자동으로 따라옵니다. 링크 · 버튼 · 배지처럼 이미 색이 정해진 자리에 아이콘을 붙일 때는 손댈 것이 거의 없습니다.
SVG 쪽도 같은 편의를 얻을 수 있습니다. 도형의 fill 을 currentColor 로 두면 텍스트 색을 상속하고, 필요할 때만 커스텀 프로퍼티로 부분 색을 따로 지정하면 됩니다. 색이 둘 이상 필요할 가능성이 조금이라도 있으면 SVG 로 시작하는 편이 안전합니다 — 폰트에서 SVG 로 옮기는 작업은 아이콘을 쓰는 모든 자리를 다시 만지는 일이기 때문입니다.
두 번째 기준 — 보조기기에 무엇으로 읽히는가
아이콘 폰트는 낭독기 입장에서 글자입니다. 대개 사설 문자 영역의 코드가 들어가 있어서, 낭독기가 무의미한 기호를 읽거나 아무 말도 하지 않습니다. 어느 쪽이든 사용자에게 도움이 되지 않습니다.
그래서 방식과 무관하게 규칙은 하나입니다. 아이콘 자체는 보조기기에서 감추고, 의미는 글자로 따로 준다는 것입니다.
<!-- 라벨이 함께 보이는 경우: 아이콘은 장식이다 -->
<button class="btn">
<svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-download"/></svg>
내려받기
</button>
<!-- 아이콘만 있는 버튼: 글자를 따로 준다 -->
<button class="btn btn--icon" aria-label="검색">
<svg class="icon" aria-hidden="true" focusable="false"><use href="#icon-search"/></svg>
</button>아이콘 폰트에는 조건이 하나 더 붙습니다. 사용자가 글꼴을 강제로 바꾸는 설정을 켜 두면 — 읽기 편의를 위해 실제로 쓰이는 기능입니다 — 아이콘 글꼴도 함께 치환되어 아이콘 자리에 엉뚱한 글자나 빈 네모가 남습니다. 아이콘만으로 뜻을 전달하던 버튼은 이때 정체를 잃습니다. 글자 라벨을 함께 두는 습관이 이 상황까지 함께 막아 줍니다.
세 번째 기준 — 실제로 몇 개가 내려가는가
여기서 성능 차이가 납니다. 아이콘 폰트는 대개 세트 전체가 한 파일입니다. 화면에서 열 개를 쓰든 스무 개를 쓰든 수백 개가 들어 있는 글꼴 파일이 통째로 내려갑니다. 빌드 단계에서 서브셋을 만들 수 있지만, 그 작업을 하고 있다면 이미 SVG 스프라이트를 만드는 것과 비슷한 수고입니다.
스프라이트는 쓰는 것만 담을 수 있고 파일 하나가 캐시됩니다. 인라인은 요청이 아예 없는 대신 같은 도형이 반복되면 문서가 길어집니다 — 다만 반복 문자열은 압축이 잘 듣는 영역이라, 아이콘 수가 적은 화면에서는 이 비용이 크지 않습니다.
어느 쪽을 골라도 지킬 것
방식보다 오래 남는 것은 일관성입니다. 아이콘의 격자 크기(대개 24 또는 20)와 선 굵기를 정해 두지 않으면, 출처가 다른 아이콘을 섞는 순간 같은 크기인데 어떤 것은 굵고 어떤 것은 가늘어 보입니다. 이 어긋남은 한 화면에 아이콘이 다섯 개를 넘어가는 순간부터 눈에 띕니다.
그리고 아이콘 크기와 색은 토큰으로 두는 편이 좋습니다. 크기를 --icon-size, 색을 텍스트 색 상속으로 묶어 두면 다크 모드나 리브랜딩에서 아이콘만 따로 손볼 일이 없습니다.
토큰 구조를 처음부터 설계하는 방법은 디자인 토큰 연재에 있고, 테마와 플러그인 선택이 자산 무게에 미치는 영향은 테마 · 플러그인 아카이브에서 다룹니다. 운영 중인 사이트가 실제로 무엇을 내려받고 있는지부터 확인하고 싶다면 최적화 지원 사업에 진단이 포함돼 있습니다.