무료 아이콘 다운 & 생성하기

웹앱 디자인에서 디테일을 결정하는 요소들 중의 하나가 바로 '아이콘'이다. 

컨셉, 레이아웃, 이미지, 색상, 서체가 완벽하더라도 아이콘이 흐릿하다거나 색상이 이질적이면 UX, UI가 무너진다. 가령, 레이아웃과 색상컨셉을 플랫 디자인으로 정했다면, 아이콘 역시 플랫 디자인을 표방해야 한다. 아래 국회예산정책처 사이트를 보자.

전체적인 UI,UX는 깔끔한 느낌의 플랫 디자인을 사용하고 있으며, 아이콘 역시 입체감이 없는 아이콘을 사용했다.(빨간색 부분) 하지만 옥의 티가 눈에 띈다.

우측상단의 홍보영상과 브로슈어 옆의 아이콘은 입체감이 느껴지는 아이콘을 사용했고, 우측 하단은 사이트 전체의 채도, 명도와 전혀 다른 색상의 아이콘을 사용했다. 깔끔하게 완성된 사이트가 단 4개의 아이콘 선택에 의해 디테일이 훼손된 것이다.

Iconset

위와 같은 케이스가 발생하는 이유는 아이콘이 필요할 때마다 검색해서 긁어오기 때문이다. 

디자인팀이 있는 조직이나 회사에서 작업할 때는 상상도 못하겠지만 디자인 실력이 부족한 프리랜서 개발자들은 아이콘을 직접 제작하기 힘들다. 그래서 Iconset이 등장했다.

Iconset은 설치형 버전과 아이콘 킷을 다운받아서 사용하는 방식이며, 현재는 무료로 제공된다. 먼저 아이콘셋 프로그램을 다운받고, 아래와 같이 아이콘 세트를 하나씩 다운받자.

사용법

Iconset의 사용법은 간단하다. 

프로그램의 상단 메뉴버튼(아이콘셋 로고)을 클릭하고, 다운받은 아이콘 셋을 Import한다. 

다운받은 아이콘 셋 중에서 사용하고 싶은 아이콘 모음집을 선택한다.

아이콘들이 메인화면에 나타나는데, 우측상단의 Copy SVG Code를 통해 svg코드를 복사할 수 있다. 

다음과 같이 svg코드를 태그 사이에 붙여넣으면 즉시 아이콘을 사용할 수 있다.

ex) 

향후 Iconset에서 제공하는 아이콘세트 중에는 분명 유료 버전이 나올 것으로 예상한다. 그러나 디자이너와 따로 계약하는 것보다는 훨씬 경제적이기 때문에 프리랜서, 인디 개발자들에게 있어 즐겨찾기 코스가 되지 않을까한다.