스케치에서 디자인 시스템 만들기 2
아이콘을 가능한 한 많이 만들어라
좋은 디자인 시스템 및 UI 스타터 키트를 만들려면 훌륭한 아이콘 세트를 처음부터 만들어 놓아야 한다.
1부에서 언급했듯이 강력한 시스템의 핵심 요소는 다음과 같다.
색상
타이포그래피
그림자 + 고도
아이콘
버튼, 입력 등과 같은 구성 요소는 보조적인 요소라고 할 수 있으며, 3부에서 이에 대해 자세히 다룰 것이다.
가벼운 아이콘 세트부터 시작하기
나만의 디자인 시스템을 위해 특정 클라이언트 프로젝트를 위한 아이콘 세트를 만들기 전에 범용적인 시스템에서 완벽하게 작동하는 유연하면서 크기가 크지 않은 아이콘 세트가 필요했다.
초기 목업 단계에서 완벽하게 작동하고, 다양한 아이콘이 있고, 스타일이 너무 독특하지 않으며, Fill 및 Border 스타일을 모두 사용할 수 있는 아이콘이 필요했다. 그런 이유로 Eva라는 뛰어난 오픈 소스 세트를 선택하였다.
앞서 언급했듯이 아이콘 세트는 작업 중인 프로젝트에 따라 변형이 필요하지만, 개인 프로젝트에서 사용할 수 있는 바닐라 아이콘 세트 또는 Eva와 같은 초기 단계의 컴포지션은 프로젝트에 상관없이 완벽하게 작동할 수 있는 멋진 세트이다.
과거에는 시스템에 아이콘을 추가할 때 작업을 자동화할 수 있는 다양한 플러그인을 사용해 보았다. 어느 정도는 도움이 되었으나 솔직히 단점이 장점보다 컸기 때문에 지금은 수동으로 제작을 하고 있다.
IconJar를 사용하라.
아이콘 세트를 일관적으로 유지하기 위해 IconJar를 사용하면 좋다. 매우 도움이 되며 강력 추천한다.
내 시스템의 심벌 페이지에 Eva 아이콘 세트의 아이콘을 하나씩 삽입하였다. IconJar의 멋진 점은 24pt의 Bounding Box를 자동으로 적용하여 디자인 내에서 정렬과 시각적 일관성을 유지할 수 있도록 해준다는 것이다.
그리고 이전에 만든 Primary Base Color Style을 붙여서 Symbol로 변환하면 된다.
김준범님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
