직접만든 아이콘을 아이콘 폰트에다 같이 넣어서 사용할 수 있다.
일러스트레이터 프러그램으로 벡터형식으로 그림을 그려서(단색 쉐이프만 사용할 수 있다.) svg형식으로 저장하여 IcoMoon, Fontello같은 아이콘 폰트 만들어주는 서비스에 파일을 올려서 아이콘 폰트형식으로 변환하여 사용한다.

작업과정

일러스트레이터 프로그램에서 기본적인 형태로 그림을 그린다.
단색으로 표현되기 때문에 복잡하지 않고, 형태로서 표현할 수 있는 형태를 그리는것이 좋다. 그리고 한쪽면의 길이가 너무 길어지지 않는것이 좋다.

그림을 그렸으면 Artboard사이즈를 아이콘 사이즈에 맞게 줄인다.
Artboard툴을 이용해서 사이즈를 줄일수도 있고, 일러스트레이터가 낮은 버전이라면 도큐먼트 사이즈를 줄이는 방법도 있다.

만든 아이콘을 다른 이름으로 저장[File > Save as…]을 통해서 svg형식으로 저장한다.

IcoMoon 사이트에 가서 IcoMoon App 페이지로 이동한다.

IcoMoon App 에서 상단 보라색의 “Import Icons” 버튼을 클릭하고 만들었던 svg파일을 선택하면 목록 상단에서 만들었던 아이콘이 등록이 되는것을 확인할 수 있다.

등록한 아이콘을 그대로 사용할수도 있고, 다른아이콘과 비교해 위치가 어긋나거나 크기가 많이 차이난다면 Icomoon사이트에서 수정이 가능하다.
아래 그림과 같이 상단 툴바에서 펜 그림의 아이콘을 선택한다. 툴바가 활성화되는것을 확인할 수 있다.

아이콘 수정툴이 활성상태인지 확인하고나서 아래에 수정하고싶은 아이콘을 클릭하면 아래 그림과같이 아이콘 수정 팝업창이 뜨는것을 확인할 수 있다.

이리저리 한번씩 눌러보면 단순하지만 훌륭한 편집툴임을 확인할 수 있다.
회전이나 뒤집기, 사이즈변경, 위치이동 등을 할 수 있다. 그리고 위쪽 Grid부분에서 숫치를 변경하면 그리드 선을 나오게 할 수 있어서 좀 더 정확하게 편집할 수 있다.
무언가를 수정하면 바로바로 적용이 되니 편집을 끝냈으면 닫기버튼을 누르거나 다른 빈공간을 클릭하면 편집창이 닫아진다.

---

이로써 직접 아이콘을 제작하여 IcoMoon App의 아이콘 목록에 추가하는 것을 알아봤다.
svg파일을 만들어서 IcoMoon 서비스에 업로드했지만 아무것도 안나오는 현상도 일어나면 svg파일을 잘못만든것이다.
그 원인은 여러가지 있겠지만 가장 기본적인 조건은 요소가 쉐이프여야한다. 다음은 svg파일제작 문제 목록과 해결법이다.

글자를 쉐이프로 바꾸지않고 그대로 저장해버린 경우

글자를 적어넣어서 svg가 문제가 일어난다면 글자를 선택하고 Cmd(Ctrl)+Shift+O 키를 눌러 일반 쉐이프로 변환이 될것이다.

위의 이미지는 일반 텍스트의 모습

쉐이프 형태로 변경한 텍스트의 모습

일반 선을 그대로 저장한 경우

위의 그림과 같이 선을 그린 상태 그대로 저장하면 문제가 있을것이다. 그래서 선택된 상태로 Object > Path > Outline Stroke 메뉴를 선택하면 아래 그림과 같이 쉐이프로 바뀌는것을 알 수 있다.

이렇게 살펴보면 기본적인 형태의 쉐이프로 변환시키면 제대로 작동하는걸 볼 수 있다.

아이콘 폰트는 한가지 컬러만 사용하는 단순한 형태로만 사용해야한다.

아이콘폰트 만들기 관련링크

• 개요
• IcoMoon 사이트에서 아이콘 폰트 만들기
• 아이콘폰트를 서버에 올리고 적용시키기