Vue.js 에서 SVG 아이콘, 웹폰트(webfont)로 만들기

Jeong Woo Ahn
Feb 19, 2018 · 4 min read

요약 : 디자이너가 만들어준 SVG 아이콘 이미지를 fontawesome처럼 웹폰트 형식으로 변환하여 사용하기.

이하는 SVG 아이콘들을 잘 사용해보기 위한 노력들을 정리해본 것이다. 우리가 Vue.js를 사용하고 있으므로 설명도 Vue.js 코드로 설명하겠지만, 프론트 엔지니어라면 사실 프레임웤 상관없이 공감할 수 있는 내용일 것이다.

지금 진행중인 프로젝트에 투입되었을 때 일이다. 우리가 사용하는 아이콘 리소스들은 디자이너가 벡터형식으로 제작을 해주고 있었기 때문에 아이콘 리소스들을 Zeplin을 통해 벡터 형식의 이미지(SVG)로도 다운받을 수 있었다.

위와 같은 방식은 일반적으로 Vue.js에서 이미지를 다룰때 사용하는 방식이다. 그러나 아이콘과 같은 이미지를 다루기에는 적합하지 않다. 아이콘들을 하나의 스타일시트로 모듈화해서 정의해놓고, 클래스를 바인딩하는 것만으로 쉽게 가져다 사용하고 싶었다.

이런식으로 아이콘들을 한꺼번에 정의해놓은 다음 myicon.scssApp.vue 에서 import해 놓으면 어디에서나<i class="myicon myicon--more"></i> 식으로 템플릿에서 바로 사용할 수 있도록 했다. 우리는 이 방식을 확장하여 아이콘을 비롯해 몇 가지 컴포넌트와 유틸들을 묶어서 플러그인으로 제작해서 별도로 관리했다.

하지만 이런 방식은 단점이 있다. 아이콘이 오리지널/후버/액션/비활성화 버전을 지원하게되면 한 아이콘당 네개의 파일이 필요하고, 모듈에서도 일일이 아이콘당 스타일을 추가해줘야한다.한번만 정의해 놓으면 된다고 생각할 수 있겠지만, 후버스타일을 일괄적으로 변경할 일이 생긴다면, 수십개의 아이콘들을 일일이 덮어씌우고 스타일 수정도 상당한 수작업을 거쳐야 한다.

이런 단점을 극복해보고자 도입한 것이 바로 웹폰트!

아이콘 웹폰트로 제작하면 다음과 같은 장점이 있다.

  • 모듈화 : 하나의 css파일로 모듈화 하여 쉽고 일관된 스타일 규칙으로 아이콘을 렌더링할 수 있다. 이미 우리도 css 모듈로 아이콘을 관리하고 있었으므로 우리에겐 큰 이점은 아니었다.
  • 벡터방식 : 벡터방식이기 때문에 어떤 크기로 변경해도 모양이 깨지지 않고 유지된다. 물론 우리도 SVG파일을 이용하고 있었으므로 우리에겐 큰 이점은 아니었다.
  • 폰트처럼 다룰 수 있다 : 기존에는 css 기법을 사용하긴 했지만 svg이미지를 background-image를 통해 렌더링 했으므로, 크기는 자유롭게 변경할 수 있었지만 색상을 변경하려면 여러벌의 이미지를 준비해야했다. 그러나 웹폰트로 제작하면 쉽게 css의 color 속성으로 아이콘의 색상을 변경할 수 있다. 따라서 한벌의 이미지만 있다면 css로 여러가지 색상을 표현할 수 있게 되었다.
  • 아이콘들을 별도의 패키지로 만들어 관리하고 실제 서비스에서는 css 파일만 CDN을 통해 사용하는 형태의 시스템을 구성하기 쉽다.

이제 웹폰트를 만들어 적용해보자.

  1. 먼저 패키지에 webfont generator 를 설치하자. npm install --save-dev webfonts-generator
  2. /build/webfont-loader.js 파일을 아래와 같이 만들어보자.

webfonts-generator 깃헙문서를 참고하면 더 디테일한 설정을 할 수 있다. 빌드시 webfont-loader.js가 실행되도록 하면, 이제 src/my-icons 폴더에 폰트 리소스들이 생성될 것이다. 그 중에서 my-icons.css 를 살펴보자.

이제 이 리소스를 활용만 하면 된다.

ReactJS나 Angular에서도 원리는 동일하므로 같은 방식으로 적용해볼 수 있을것이다. 이로서 우리는 새로운 아이콘이 추가되도, 모든 아이콘의 후버 스타일이 한꺼번에 변경되어도 매우 빠르게 대응할 수 있게 되었다!

이 글이 마음에 드셨다면 ☕ Buy me a coffee!

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Jeong Woo Ahn

Written by

그림그리는 프로그래머 instagram@you_and_mydrawing | working at habitfactory.co

Witinweb

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터