Iconfont tool kit, XEICON

오픈소스 글로벌 아이콘폰트 작업기

XEICON은 웹사이트 제작에 최적화된 800여개의 백터 그래픽 아이콘 툴킷이다.
웹제작 실무에 최적화된 아이콘을 제공하기 위해 제작하여 오픈소스로 배포하였고, XpressEngine에서 운영하고 있다. 웹/앱 제작시에 필요한 콘텐츠 기호 기반 아이콘을 제작하여 분류하였고, 다양한 프레임워크에서 동일하게 구현된다. XEIcon 공식사이트 및 GitHub 프로젝트 페이지에서 자세한 내용을 볼 수 있다.

제작 및 저작자: 이준하
공헌자: 김건일, 이윤구, 홍보람
운영: XpressEngine
라이선스: SIL OFL 1.1, MIT License, CC BY 4.0

Project Goal

개인 연구주제로 진행한 icon-font CSS 툴킷은 웹기반 프로젝트 진행시에 디자이너와 개발자의 작업 효율화를 목표로 진행되었다. 명확한 가이드를 기준으로, 사용성에 따라 직관적으로 분류된 라이브러리를 제공하여 폭넓게 사용할 수 있도록 제작하였다. XEICON의 주요 기능은 아래와 같다.

Icon Library

대략 800여개의 아이콘으로 구성되는데 아이콘제작 뿐만 아니라 사용성에 따라 카테고리를 분류하고, 클래스명을 정하고, 메타정보를 삽입하는데 꽤 많은 시간이 소요되었다. 메타정보는 만약 클래스명이 ‘agle-right’라면 이를 빠르게 찾을 수 있도록 삽입된 ‘right, chevron, next, pointer’와 같은 기호 정보를 말한다.

라이브러리는 15개의 카테고리로 분류하였는데, 버전 1.0.4 때의 22개 카테고리에서 각 아이콘을 재분류하여 줄였다. 각 아이콘은 라이브러리는 카테고리 메타정보를 포함하고 있다.

Action

Contnet

Communication

Message

Editor

Hardware

Media

Map

E-commerce

File

Technology

Spinner

Wether

License

Brand

브랜드 아이콘은 웹에서 많이 상용화된 브랜드 포맷을 기준으로 작업하였다. 작업 당시 소셜서비스 기준으로 2000여개 브랜드 Asset을 문서로 정리하여 글로벌웹에서 활성화된 정도를 데이터로 분류하여 우선순위를 소팅한 후 작업을 진행하였다. 많은 브랜드가 Brand Asset을 제공하고 있지 않아, App아이콘 등을 다운받아 svg로 변환하는 작업을 거쳤다.

Production Principles

UI 아이콘은 명령, 파일, 기기 또는 디렉토리 등을 상징하며, 시스템 아이콘은 휴지통, 인쇄, 저장 등의 일반적인 액션을 표현하는데 사용된다.
시스템 아이콘의 디자인은 심플하고, 모던하고, 직관적이며 때때로 유저 기호 패턴을 기준으로 작업하였다. 각 아이콘은 기호의 본질을 최소한의 형태로 편집되어 미니멀한 폼을 유지하도록 하였다. 동시에 작은 크기에서의 가독성과 선명도를 보장하도록 가이드를 만들었다.
A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes.

작업 당시, 사내에 관심 있던 몇 명의 디자이너가 Contributor로 참여하였는데, 명확한 가이드 없이 진행되다보니 아이콘을 합치고 수정하는데 너무 많은 시간이 소요되었다. 때문에 주요 공헌자에게 카테고리별로 Task를 주고 테스트를 진행하면서 가이드 문서를 작성한 후 배포하였다.(Github에서 제공하는 Wiki에 문서를 업데이트하였다.)

Grid, proportion and size

DP unit grid

시스템 아이콘은 24dp 기준으로 표시된다. 아이콘을 생성할 때, 정밀하게 확대하면서, 100%의 크기로 확대해서 디자인 하는 것이 중요하다.
System icons are displayed at 24dp. When creating icons, it’s important to design at 100% scale for pixel-accuracy, while zooming in for precision.

Content area

아이콘 영역은 반드시 Live area 안에 포함되어야 한다. 시각적 중량이 더 필요한 경우에만 Trim area까지 연장할 수 있도록 하였다. Trim area 외부에는 아이콘의 어떤 부분도 작업 되어서는 안된다.
The content of an icon should remain inside of the live area. Content should only extend into the trim area if additional visual weight is needed. Do not place any part of the icon outside of the trim area.

Keyline shapes

Keyline 모양은 그리드의 기초이다. 가이드 라인으로 이러한 핵심 모양을 사용하여 일관된 시각적 비율을 유지할 수 있다.
Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion throughout the system icons.

키라인 모양에 아이콘이 사실 딱 맞을 수는 없다. 어떤 아이콘은 무거워보이고, 치우쳐보이고, Solid 아이콘과 Line 아이콘이 같이 있을 때의 중량감도 사실 다르다. 하지만 ‘시각적보정‘ 영역은 다소 주관적인 부분이 있어, 제작자 코칭으로만 조절하고 가이드 문서 배포 범위에는 포함하지 않았다.

System icon anatomy

Manners

Strokes

일관된 선과 폭의 가중치는 전체 아이콘패밀리를 시각적 통합하는 열쇠와 같다. 면간 간격을 제외한 곡선, 각도, 그리고 내부와 외부 모두 선를 포함한 모든 선두께는 2DP 폭을 유지해야 한다.
Consistent stroke weights are key to unifying the overall system icon family. Maintain a 2dp width for all stroke instances, including curves, angles, and interior strokes.

Optical corrections

미묘한 비틀기를 시도하여 아이콘의 가독성을 높일 수도 있다. 복작한 세부사항은 피할 수 있는 인스턴스 메트릭스를 조정해야 한다. 보정이 필요한 경우에만 다른 아이콘 기반이 기반이 되는 일관된 기호를 사용하도록 하였다.
Extreme scenarios that call for subtle tweaks add to the legibility of an icon. Instances where complex details are unavoidable require adjusting metrics.If optical corrections are necessary, only use the consistent geometric forms on which all other icons are based. Don’t skew or distort the forms.

위 예시 외에도 대각선 등의 각도 조정이 필요할 때 15도 기준으로 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180도만 사용할 수 있도록 하였다.

Development and utilization

실제 개발할 때나 디자인할 때 아이콘의 크기 사용 규칙이 매우 중요하다. 아이콘의 기본 크기는 48px로 36, 24, 18px까지를 일반적으로 쓸 수 있도록 하였다. 권장 사이즈이며, 다른 크기로 사용하여도 무방하나 다소 display 대응이 어려운 부분이 있었다.
권장 사이즈로 사용하는 경우, 선의 굵기가 일관적이고 깨짐 현상이 일어나지 않도록 하였다.

Practice

아이콘의 일관성된 룰은 사용자의 이해를 돕는다다. 가능하면 하나의 프로그램, 웹페이지, 앱 등에서 기존의 시스템 아이콘을 동일하게 사용할 것을 권장한다.
Consistency aids user comprehension of icons. Use the existing system icons whenever possible and across different applications.

Service Page

XEIcon은 두 버전이 있으며, 업데이트 개념이 아니였기 때문에 같이 호출해서 사용하지 않도록 권장하고 있다(중복 명칭이 많다). 버전 1.0.4는 네이버의 일부 서비스에 적용되었고 각종 XpressEngine을 사용한 홈페이지에서 사용중이였기 때문에, 버전 2를 별도로 개선하여 배포하였다.

 

후기 또는 잡담

XEIOCN은 웹,앱 작업을 진행하면서 은근히 리소스가 많이 들어가던 Icon 작업 시간을 줄이고 Front-End 개발시에 바로 사용할 수 있도록 설계한 Iconfont 오픈소스 프로젝트이다. 사실 개인연구과제로 진행하다가, 마침 공모전 진행으로 베타 버전을 1차 배포하고 오픈소스 프로젝트로 공개하게 되었다. 2015년에 v1 오픈소스로 정식 배포한 이후 많은 사람들로부터 개선의견을 들으며, 가이드를 업데이트하고 SASS, LESS등을 적용하며 기능을 추가해나갔다.

2015년 구글이 Material Icon을 공개 배포하면서 서비스를 어떻게 운영해야 할지 재고민하게 되었고, 2016년 초에 v2로 가이드를 재정립한 아이콘을 배포하였다. 많은 아이콘폰트가 생겨났지만, 아직까지 한국의 대표적인 오픈소스 아이콘폰트로 손꼽히고 있다. Github에 버그이슈 및 Front-End 이슈는 현재까지도 Follow하며 이슈처리를 진행중이다.