A story only I don't know

정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법 에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다. 다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다. 아이콘 폰트를 만들어 주는 대표적인 웹사이트가 fontello.com 와 icomoon.io 가 있습니다. 아이콘 폰트 생성하기 fontello.com 로 아이콘 폰트 생성 방법 먼저 fontello.com 에 접속을 합니다. fontello.com 는 웹사이트 페이지 전환 없이 한 페이지에서 아이콘 업로드부터 다운로드까지 완료 되도록 되어 있습니다. 사이트에 접속을 하면 기본적으로 무료로 제공되는 아이콘들이 이미 있습니다. fontello 에서 제작한 것도 있고 Font Awesome 에서 불러온 것 등 다양한 무료 아이콘 폰트도 있습니다. 라이선스가 표시되어 있으니 확인 후 사용하시면 됩니다. 제작자와 버전, 홈페이지, 라이선스 등 아이콘 폰트에 대한 정보를 확인할 수 있습니다. 보이는 아이콘 중에 원하는 아이콘을 마우스로 선택을 하시면 아이콘에 붉은색 원형이 표시 되면서 선택이 됩니다. 만들고자 하는 아이콘(SVG포멧)이 있다면 해당 영역에 드레그앤드롭을 하여 업로드를 합니다. (등록된 아이콘도 마우스로 클릭하여 선택을 해야 최종적으로 만들어집니다.) Download Webfont 버튼을 클릭하면 지금까지 선택된 아이콘들이 압축되어 다운...

웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘 은 필수로 들어가는 요소입니다. 간단하게는 블릿 에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스 가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다. 그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트 라고 했었는데.. 이제는 웹폰트 형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 있습니다. 이 아이콘 폰트는 이미지가 백터 그래픽 형태로 되어 있어서 크기를 늘리든 줄이든 상관없이 선명한 화질을 보장받을 수 있고 색상도 일반 웹폰트처럼 CSS 에서 color 속성으로 변경을 할 수가 있습니다. 다만 아이콘이 폰트형식이기 때문에 단색으로 밖에는 설정할 수 가 없습니다. 아이콘폰트 를 제공하는 곳은 많으나 대표적으로 상업적인 용도로도 사용 가능한 3곳의 웹사이트를 소개할까 합니다. 폰트어썸 (Font Awesome) 폰트어썸 은 현재 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 현재 깃헙에서 51,000 여개의 star 를 받고 있을 정도로 인기가 있습니다. 다양한 형태의 아이콘이 빠르게 업데이트되어 제공되고 있으며 현재 유료서비스도 시도하고 있긴 하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 일반적으로 사용하기에는 부족함이 없습니다. 전체 라이선스는 GPL 을 따르고 있고 폰트는 SIL , 소스코드는 MIT 를 따르고 있습니다. 자세한 사용방법은 폰트어썸 (Font Awesome) 아이콘 폰트 사용하기 에 포스팅하겠습니다. XEICON 한 시대를 풍미했던 PHP 무료게시판 서...