웹사이트 디자인할 때 아이콘은 시각적 효과로 인해서 필수적인 요소로 돼가고 있습니다. 이전에는 투명 기능을 제공하는 png 파일의 아이콘 사용해서 CSS의 background 속성을 이용해 요소에 배치하고 사용했지만 폰트 아이콘이 등장하면서 훨씬 편하게 사용할 수 있고 폰트의 성질을 갖고 있으므로 색상 변경이나 크기 변경도 자유롭습니다. 폰트 아이콘은 개발하는 회사 마다 달라서 어느 한 곳의 아이콘에 마음에 드는 아이콘이 없어서 다른 폰트 아이콘을 추가해야할 수도 있어서 이러다 보면 몇개의 폰트 아이콘을 사용하고자 수십개의 파일을 사용해야하고 폰트 하나의 용량도 커서 웹 페이지 로딩 속도에도 영향을 미칩니다.
그런데 여러가지 폰트 아이콘을 한곳에 모아놓고 원하는 아이콘만 뽑아서 쓸 수 있다면 여간 편리한 것이 아닐겁니다. 더구나 내가 갖고 있는 어떤 폰트 아이콘이라도 추가해서 그중에 필요한 것만 추가할 수도 있고 티스토리와 같은 블로그는 폰트 아이콘을 삽입하면 IE와 파이어폭스에서 아이콘이 나타나지 않으므로 png 스프라이트 이미지로 추출할 수 있어서 거의 만능에 가까운 기능을 가진 사이트입니다.
위 링크를 클릭하면 아래의 화면으로 이동합니다.
이 사이트는 유료 아이콘 팩을 판매도 하고 CDN 서비스로 폰트 아이콘을 웹폰트 형식으로 링크할 수 있는 기능도 있습니다. ConMoon App은 사용해보니 아주 훌륭한 폰트 아이콘 관리 시스템이더군요. 이것만 무료입니다. 링크를 클릭하고 다음 화면에서 Start the App 버튼을 클릭하면 아래와 같은 화면이 나옵니다.
사용하는 버튼은 좌측 상단의 버튼과 하단 중앙 및 우측에 있는 것들이 전부입니다. 각 버튼의 기능은 다음과 같습니다.
Import Icons 버튼은 이 사이트에 아이콘이 없을 경우 자신이 갖고 있는 폰트 아이콘을 가져오는 기능입니다. 그 옆의 아이콘은 이 사이트가 보유하고 있는 폰트 라이브러리로 이동하는 기능입니다. 32 숫자가 있는 것은 폰트 사이즈를 설정합니다. X0000은 선택한 아이콘의 수를 표시합니다. 화살표 아이콘은 선택 기능 휴지통은 제거, 연필은 편집 기능입니다.
아이콘 세트마다 좌측에 마이너스 아이콘이 있는데 클릭하면 아이콘들이 안보이게 됩니다. 여러가지 폰트 라이브러리에서 선택할 경우 화면을 줄이는데 사용합니다. 우측의 링크는 폰트 개발 사이트로 이동합니다.
Images 버튼은 폰트 아이콘을 png 파일로 만드는 기능, Font 버튼은 선택한 폰트를 내려받는 기능입니다. Save/Load는 세션을 저장하거나 불러오는 기능으로 로그인하지 않아도 세션을 저장해서 불러오면 이전 설정이 그대로 적용됩니다. 마지막의 리셋은 실수로 폰트를 제거한 경우 초기화합니다.
아이콘 라이브러리 버튼을 클릭하면 이 사이트가 보유하고 있는 폰트 라이브러리가 나옵니다. 이미 몇개의 폰트 세트가 선택돼있습니다. 추가나 제거는 이미지 하단의 버튼을 클릭합니다. 어떤 것은 유료도 있습니다. 다양한 폰트를 검색해야하므로 모든 무료 폰트 아이콘 세트를 추가해둡니다.
다음으로 Import Icons 버튼을 클릭해서 자신이 갖고 있는 폰트 아이콘 중 SVG 확장자를 가진 파일을 선택하면 Your Custom Icons 로 나타납니다. 이 아이콘은 Font Awesome 아이콘 폰트입니다.
원하는 사이즈를 입력하고 화살표의 선택 아이콘을 선택한 다음, 아이콘을 클릭하면 선택됩니다. 원하는 것을 선택하면 갯수가 표시됩니다. 마이너스 아이콘을 클릭해서 닫은 다음 다른 아이콘 세트에서 선택합니다.
휴지통 아이콘은 아이콘을 제거할 때 사용하는데 실수로 제거하면 초기화를 시켜야하므로 사용하지 않는 것이 좋습니다. 편집 아이콘을 클릭해서 원하는 아이콘을 클릭하면 편집 창이 나옵니다. 각종 도구를 사용해서 회전, 플립, 축소, 확대, 이동을 할 수 있으며 CSS 클래스로 사용할 이름인 Tags를 변경할 수도 있습니다.
이미지로 저장해서 사용하기
이미지로 사용할 경우 이미지 버튼을 클릭하면 창이 나옵니다. 폰트로 사용하면 CSS에서 색상을 변경할 수 있지만 이미지는 변경을 못하기 때문에 이곳에서 미리 변경하고 저장해야합니다. 아이콘은 검정색과 흰색을 주로 사용하므로 우선 검정색인 0000으로 설정합니다. 사이즈도 설정하고 두곳에 체크합니다. 스프라이트는 여러개의 이미지를 하나의 이미지로 만듭니다. 컬럼은 1로 선택하는 것이 좋습니다. CSS의 background 속성을 사용하면 경우에 따라서 일부분만 나오도록 해야하는데 좌우로 여러개의 이미지가 나타나는 2열 이상을 사용하면 여러개의 이미지가 나타나기 때문이죠. Download 버튼을 클릭해서 저장한 다음 흰색(ffffff)으로 해서 같은 이미지로 저장합니다. 배경에 따라서 다른 이미지를 사용하면 됩니다.
폰트로 사용하기
폰트 버튼을 클릭하면 위처럼 나옵니다. 기어 아이콘을 클릭해서 설정을 추가할 수 있습니다. Download 버튼을 클릭해서 내려받습니다.
내려받은 파일을 압축을 풀고 폴더로 들어가면 이미지의 경우 스프라이트 이미지를 사용하고 폰트는 폰트 아이콘이 여러개 있으니 웹사이트에 업로드하고 CSS 파일과 HTML 파일을 참고해서 span 태그에 클래스 선택자를 삽입하면 됩니다. CSS에 대해서 잘 알아야겠죠.
Save/Load를 클릭해서 저장하기를 선택하면 세션을 저장할 수 있으며 IcoMoon Session.json이라는 파일로 저장됩니다. 나중에 이 파일을 로드하면 이전의 설정을 사용할 수 있습니다.
