Skip to content

아이콘이미지를 폰트로 만들기 #
Find similar titles

Icon image를 Web font로 만들기 #

목적 #

최근 다양한 사이즈의 디바이스의 출몰로 인해 각각의 디바이스 해상도에 따른 다양한 크기의 이미지가 필요해졌습니다. 특히 레티나 디스플레이와 같은 고해상도의 디스플레이와 반응형웹과 같은 유동적인 해상도에 대응하기 위한 것이 그 목적입니다.

아이콘을 벡터이미지로 만들 수 있다면 사이즈 변경에 유연하게 대응할 수 있습니다. 하지만 표준 벡터 이미지 포맷인 SVG는 IE8과 구형 안드로이드에서 지원하지 않는 문제가 있습니다. 문제를 해결하기 위해 최근에는 아이콘을 벡터로 사용하기 위해 아이콘 폰트 기법이 많이 사용되고 있습니다. 대표적으로 Font Awesome이 있습니다.

**(추가)

특징 #

장점 #

 1. 크기 변화에 대응되는 벡터 아이콘을 사용 할 수 있습다.
 2. 이미지 삽입 방식에 비해 사용이 편리하다.
 3. 아이콘의 크기, 색상을 CSS로 쉽게 변경 할 수 있습다.
 4. 모든 브라우저에서 사용 가능합니다.
 5. 아이콘이 모두 한 파일로 압축됩니다. (sprite 효과)

단점 및 한계점 #

 1. 1가지 색상밖에 사용 할 수 없습니다.
 2. 브라우저에 따라 폰트 렌더링 품질에 차이가 있습니다.

**

방법 #

 Adobe AI(Illustrator)로 만드는 방법과 
 PS(Photoshop) CC버전에서 만드는 방법으로 
 크게 2가지 방법이 있습니다.

방법 1. Adobe AI(Illustrator) #

1-1. 일러스트레이터를 실행 시켜 주세요. #

Image

1-2. 아이콘 파일을 불러옵니다. #

이때 아이콘파일은 Path가 살아있는 작업물이어야하며,
반드시 Object -> Compound Path -> Make (단축키 Ctrl+8) 및 pathfinder로 처리하여
Path를 살린 뒤 SVG파일로 저장하여 주십시오.

Image

1-3. 아이콘을 원하는 만큼 크롭 시켜 주세요. #

아이콘이 이미지라면 image trace효과나 펜툴로 따서 path로 변환 시켜주세요.

Image

1-4. SVG 파일형식으로 저장해 주세요.(디자이너의 경우 이 단계까지만 하시어 퍼블리셔/프론트앤드개발자에게 SVG 파일을 전달해주시면 됩니다.) #

Image

1-5. fontello 에 접속하여 저장된 SVG 파일을 drag & drop합니다. #

ImageImage

1-6. 올린 이미지를 마우스로 클릭한 후 상단의 다운로드 버튼을 눌러 파일을 다운로드하여 사용합니다. #

ImageImage

예시파일: https://docs.google.com/a/insilicogen.com/uc?id=0BzVxXEEIlFs0Q0hUbDU5MmhkcXM&export=download

방법 2. Adobe PS(Photoshop CC) #

디자이너에게 받은 PSD에서 path가 살아있는 레이어를 선택하여 레이어를 우측클릭하면 나오는 메뉴에서 Extract Assets를 선택합니다. 추출할 파일의 형식은 SVG로 선택합니다. Extract 버튼을 누르면 SVG 파일들이 생성됩니다.

Image ImageImage

CSS 적용방법 #

WEBDIR 블로그 이고잉 생활코딩)참조

출처 링크 #

  1. Toby Yun 블로그
  2. WEBDIR 블로그
  3. 이고잉 생활코딩
0.0.1_20210630_7_v33