Fontello를 활용한 웹 아이콘 폰트 제작 및 최적화 가이드

드디어 길었던 생활코딩 CSS 수업 시리즈의 마침표를 찍는 마지막 글이다.

이번에 살펴볼 내용은 웹 아이콘을 효율적으로 관리할 수 있게 돕는 Fontello다.

남은 영상이 4개나 되지만 복잡하거나 어려운 것은 없으니 가벼운 마음으로 영상을 봐보자.

이전 포스트

CSS 전처리기, Sass 혹은 Stylus

CSS 코드가 길어지고 관리가 힘들 때 필요한 CSS 전처리기(Sass, Stylus)를 소개합니다. 프로그래밍하듯 스타일을 짜는 편리한 전처리기이지만, 프로젝트 규모에 따라 전처리기를 써야 할지 혹은 순수 CSS에 집중해야 할지 판단하는 실무적인 기준을 전해드립니다.

생활코딩 CSS 수업 영상: Fontello

Fontello - icon fonts generator

설명 없음

fontello.com

Fontello.com은 웹사이트에서 사용할 아이콘 폰트를 직접 커스터마이징해서 패키지로 만들어주는 도구 사이트다.

웹 개발을 하다 보면 화살표, 돋보기, SNS 로고 같은 아이콘이 필요한데, 이를 이미지(PNG, JPG)가 아닌 글자(Font) 형태로 사용할 수 있게 도와준다.

Fontello의 주요 기능과 장점들은 다음과 같다.

• 다양한 라이브러리 통합: Font Awesome, Iconic, Entypo 등 유명한 오픈소스 아이콘 세트들을 한자리에서 보여준다. 여러 곳을 돌아다닐 필요 없이 원하는 아이콘만 골라 담을 수 있다.
• 용량 최적화 (가장 큰 장점): 수천 개의 아이콘이 들어있는 전체 라이브러리를 통째로 불러오는 게 아니라, 내가 선택한 아이콘들만 포함된 가벼운 폰트 파일을 생성해준다. 웹사이트 로딩 속도를 높이는 데 매우 효과적이다.
• 자유로운 스타일 조절: 글자 형태이기 때문에 CSS의 font-size로 크기를 조절하고, color로 색상을 바꾸며, text-shadow로 그림자를 넣을 수 있다.

웹사이트에 아이콘을 넣을 때 일일이 이미지 파일을 만들 필요가 없다.

Fontello를 이용해 필요한 아이콘만 담은 전용 폰트 파일을 만들면, 관리가 쉬워질 뿐만 아니라 최적화(Minify) 관점에서도 큰 이득을 볼 수 있다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.