[HTML] Icon Fonts로 Icon 효과적으로 다루기

혅·2024년 7월 30일

Study Note ✍🏻

목록 보기

3/60

아이콘을 가져오는 방법에는 크게 이미지 파일 (ex. jpg, png 등), Icon Fonts, SVG 파일로 나뉜다고 한다. 이미지 파일과 SVG를 이용해서 아이콘을 다루는 것은 많이 해봤는데 Icon Fonts는 처음 알게 된 내용인데 유용하게 쓰일 것 같아 기록용으로 정리해두려고 한다.

Icon Fonts

이미지 파일의 불편함을 해소하기 위해 등장. SVG 기반의 이미지를 Font 파일화 하여 css를 통해 Icon을 사용한다. 일반 텍스트와 비슷하게 스타일을 적용할 수 있어서 디자인의 유연성을 제공할 수 있다. 즉, 다양한 아이콘이 문자처럼 저장되어 있어서, 웹 페이지에서 아이콘을 쉽게 적용할 수 있다. Font는 벡터이기 때문에 CSS를 통해 해상도를 변경할 수 있다. 유명한 Icon Fonts 사이트에는 Font Awesome과 구글의 Material Icons가 있다.

Icon Fonts의 장점으로는 이미지 파일 대신 폰트 파일을 사용하기 때문에 페이지 로딩 속도가 빨라질 수 있다는 것이다. (아이콘 폰트는 종종 작은 파일 크기를 가지고 있어 성능에 유리) 아이콘을 문자처럼 다룰 수 있어서, HTML과 CSS만으로 아이콘을 배치하고 스타일링할 수 있고, 추가적인 이미지 파일이 필요 없다.

Icon Fonts의 단점으로는 스크린 리더와 같은 보조 기술에서 접근성이 떨어질 수 있다. (실제 텍스트가 아니라 폰트의 문자로 처리되기 때문) 또한, 대부분의 현대 브라우저는 아이콘 폰트를 잘 지원하지만, 일부 구형 브라우저나 특수한 환경에서는 문제를 일으킬 수 있다.

SVG와 비교한다면?

SVG를 굳이 Icon Fonts로 변환을 다시 하는 번거로움을 진행하면서 Icon Fonts를 사용해야 하는 이유가 있을까? 싶은 생각이 들긴했다. SVG와의 큰 차이가 있는가?라는 의문도 들었다. 그래서 Icon Fonts와 SVG의 차이를 비교해보려고 한다.

성능

Icon Fonts는 가끔 실패하는 경우가 있기 때문에 SVG가 좀 더 좋은 편이다.

Icon Fonts는 쉽게 캐시 되고 로드 속도를 높일 수 있는 표준 글꼴이다. 하지만 이로인해 캐싱을 위해 추가 HTTP 서버 요청이 필요하다는 큰 단점이 있다.
SVG의 경우는 추가 서버 요청을 하지 않지만, HTML 코드 블록으로 간주되기 때문에 브라우저에서 캐시 할 수 없다. 외부 SVG 파일을 사용해 해결할 수 있다.

여러 가지 색상의 수정 및 애니메이션 없이 몇 개의 아이콘이 필요한 경우 Icon Fonts이 좋지만 여러 색상이 있고 애니메이션이 있는 아이콘을 많이 사용하는 경우 SVG가 더 좋다.

파일크기

Icon Fonts는 여러 아이콘을 하나의 폰트 파일로 묶어서 제공하므로, 여러 아이콘을 사용해도 상대적으로 적은 파일 크기를 유지할 수 있다.
SVG 파일은 각 아이콘이나 그래픽이 별도로 파일화되기 때문에, 다수의 SVG 파일을 사용할 경우 파일 수가 많아질 수 있습니다. (그래도 SVG 파일 자체는 보통 작은 크기를 가지고 있다.)

접근성

Icon Fonts는 스크린 리더와 같은 보조 기술이 폰트의 문자를 아이콘으로 인식하지 못할 수 있다. 이 문제를 해결하기 위해 ARIA 속성 등을 추가해야 할 수 있다.
SVG는 SVG의 title 및 desc 요소를 사용하여 스크린 리더에 대한 설명을 제공할 수 있다. 이러한 요소는 시각적 장애가 있는 사용자에게 정보를 전달하는 데 도움이 된다.

확장성

Icon Fonts는 벡터 기반이므로 크기를 자유롭게 조정할 수 있다. 폰트를 확장하거나 축소해도 선명도가 유지되지만, Icon Fonts가 지원하는 범위가 제한될 수 있다. (브라우저에서 구현하는 Anti-Aliasing 기술에 취약)
SVG는 원본 벡터 그래픽을 사용하기 때문에 무한히 확장하거나 축소해도 품질이 유지됩니다. 다양한 복잡한 그래픽을 포함할 수 있어 더 유연한 디자인이 가능합니다.

스타일

Icon Fonts는 Image Icon과 비교하여 표준 CSS 스타일 규칙을 사용하여 상당한 수준의 사용자 정의를 사용할 수 있지만, 유연성에 관해서는 제한적이다. CSS 스타일 수정은 단색 색상, 크기, 표준 변환 및 애니메이션으로 제한된다.
SVG는 더 세밀한 스타일링을 가능하게 하고, 복잡한 효과를 적용할 수 있다. Icon Fonts과 동일한 CSS 컨트롤뿐만 아니라 추가 CSS 획 속성 및 필터도 사용할 수 있다. SVG 아이콘의 각 개별 획은 독립적으로 애니메이션 될 수 있다.

SVG를 IconFonts로 변환하기

https://icomoon.io/app/#/select
위 사이트를 통해 변환을 할 수 있다.

사이트를 통해 변환된 IconFonts 파일을 저장했다는 가정하에 아래 내용을 진행한다.
※ 다운로드 받을 때 preference에서 다음과 같이 설정해준다. Use i를 선택해주어야 한다.

폴더에는 다음과 같은 파일들이 있다. 여기서 사용하는 것은 fonts 파일과 style CSS 파일이다.
이 두 파일을 각각 사용하려는 프로젝트 폴더에 위치시켜준다.

style CSS 파일을 열어보면 다음과 같은 내용이 상단에 위치한다. 여기서 url을 모두 fonts 파일이 저장된 위치로 변경해주는 것이다. 예를들어 fonts 파일이 프로젝트 폴더에서 assets 폴더 아래에 위치한다면 "./assets/fonts/icomoon****"와 같은 방식으로 url을 변경해주면 된다. 이때, fonts 이후의 url은 절대 건들지 않는다.
그 이후 style CSS 파일을 html 파일과 연결되도록 링크해준다.