웹 아이콘 글꼴은 사이트에서 사용되는 아이콘을 웹 글꼴로 사용할 수 있도록 한 것입니다.

반응형 사이트 아이콘 등에 이용되는 경우가 많고,
PC나 스마트폰에서도 열화 없이 표시할 수 있습니다.

※Web아이콘 폰트의 이용 예

웹 아이콘 글꼴을 만드는 방법?

웹 아이콘 글꼴을 만들려면 3 단계가 필요합니다.

벡터 도구 (예 : Illustrator)로 아이콘 만들기

아이콘을 웹 아이콘 글꼴로 변환

SASS/CSS, HTML 설정

이 기사에서는 먼저 첫 번째 "벡터 도구 (Illustrator 등)로 아이콘 만들기"에 대해 설명하고 싶습니다.

벡터 도구로 아이콘을 아이콘 만들기

이번에는 Illustrator에서 만들 때 설명합니다.

정사각형 아트보드와 가이드를 만들고 그 안에 맞는 크기로 아이콘을 만듭니다.
※캡처는 아트보드에서의 예

디자인 시 주의점

다음을 주의해서 디자인 데이터를 만들면 Good입니다.

경로는 항상 윤곽이 된다

앵커 포인트 수가 많으면 데이터가 커지므로 불필요한 것은 삭제됩니다.

패스 파인더로 형을 빼면 후면에 투명한 패스가 숨겨져 있는 경우가 있으므로, 윤곽 모드(⌘+y)로 확인하면서 삭제한다

디자인에 관계없이 불필요한 앵커 포인트를 제거하십시오.

아이콘을 SVG로 내보내기

작성한 아이콘을 SVG 형식으로 내보냅니다.
이번에는 자산 내보내기 기능을 이용하여 내보냅니다.

먼저 내보내려는 아이콘을 하나만 선택합니다.
※복수의 아이콘을 단번에 선택하면 그것이 1개의 SVG에 정리되어 버리므로 주의


자산 내보내기 패널에 선택한 아이콘을 드래그 앤 드롭하거나 패널의 추가 아이콘을 클릭하여 추가합니다.


여기에서 자산 이름 = SVG 파일 이름이 될 수있는 제대로 이름을 설정합니다.
이때 프로젝트의 명명 규칙이 정해져 있는 경우, 그에 따른 명명을 해 두면 총 공수를 절약할 수 있어 편합니다.


내보낼 이미지를 패널에서 모두 선택하고,
"▼ 내보내기 설정"에서 "SVG"로 변경하고 "내보내기..."를 누릅니다.


SVG가 내보내집니다.

왜 "자산 내보내기"인가

이유는 주로 두 가지입니다.

"별칭으로 저장"과 달리 큰 파일 이름이 붙지 않습니다

"별명으로 저장"보다 파일 크기가 작습니다

아래 캡처를 살펴보면 "자산 내보내기"에서 큰 파일 이름이 맨 앞에 붙지 않는다는 것을 알 수 있습니다.
또한 "에셋 내보내기"가 파일 크기가 작은 것을 알 수 있습니다.


또한 텍스트 편집기에서 열면 압축되어 있음을 알 수 있습니다.


SVG는 가능한 한 가벼운 상태로 내보내고 있지만, 별도 압축 툴( SVGOMG 등)을 이용하는 경우도 있습니다.

이상이 벡터 도구로 아이콘을 만드는 방법입니다.
다음번은 「 아이콘을 웹 아이콘 글꼴로 변환 」를 설명하고 싶습니다.