높은 퀄리티의 아이콘 세트를 만들기 위해서는 신중한 접근, 숙련된 안목, 약간의 반복 그리고 많은 연습이 필요하다. 앞으로 이어질 내용에서는 7가지 아이콘 디자인 원칙과 함께 다양한 실제 사례를 가지고 퀄리티의 특징들에 대해 설명하고 있다. ‘좋은’ 아이콘 디자인에서 나타나는 중요한 특징들에 여러분의 기준을 맞추는 게 이 글의 목표이다.

시간이 흐르면서 반복을 통해 추상적인 것은 익숙해질 수 있다. 이게 자동차 기호들이 표준화될 수 있었던 이유이다. 요지는 모두에게 공유되는 의미를 구축하는 것이 중요하다. 1984년, 수잔 카레는 애플의 키보드에 있는 ‘기능(Feature)’키의 아이콘을 만드는 임무를 맡았다. 그녀는 북유럽의 관심 장소 표지판에서도 찾아볼 수 있는 이 추상적인 심볼을 만들어냈다.

화살표는 길 찾기에 사용되는, 간단하지만 강력한 기호라 할 수 있다.

아이콘의 가장 성공적인 경우는, 한쪽의 사람들만이 이해하기 쉬운 경우가 아니라 문화, 나이, 배경 전반에 걸쳐 보편적일 때를 말한다. 항상 사람을 중심으로 그들에게 반향을 불러일으킬 은유와 색을 사용하라.

사실 이 재생 아이콘의 삼각형은 수치적으로 원의 중심에 배치되어 있지만, 우리의 눈은 이를 어긋나 있다고 느낀다. 삼각형 형태의 넓은 부분이 뾰족한 부분보다 ‘무겁게' 느껴져서 왼쪽으로 기울어져 보이는 것이다. 

타이포그래퍼가 착시현상을 고려해 서체의 균형을 맞추고자 미세하게 조정하듯,  다음 그림의 ‘i’와 ‘j’ 서체에서 중심을 벗어난 점과 평행선을 벗어난 ‘O’에 주목해보자. 

아이콘도 균형을 맞추기 위해서는 이와 비슷하게 조정이 필요하다. 위의 예(재생 아이콘)를 수정하려면 삼각형 요소를 좀 더 오른쪽으로 이동시켜야 한다. 

간단하게 말하면 다음과 같다. 

간혹 UI 아이콘은 보다 설명적인 스타일로 표현되는 경우도 있다. 이 다중톤의 Yelp 아이콘들은 인기 있는 음식 검색을 시각화한 흥미로운 방식이다. 특히 태국 음식 아이콘의 새우는 정교하게 표현되어 있다. 

Sketch 아이콘의 경우 섬세하면서 상쾌하다.

Freemojis는 귀엽고 사랑스럽다.

Andriod 아이콘 세트는 홈 테마를 위해 다양한 분위기를 연출하고 있다. 여기서는 추상적이거나, 픽셀 스타일, 물방울, 네온 스타일로 표현된 아이콘 세트를 볼 수 있다.

Top to bottom, left to right: iJUK, PixBit, Crayon, Linebit

Font Awesome의 경우, 위의 몇 가지 원칙은 놓쳤지만, 믿기 어려울 정도로 사용하기 쉽게 만들어져 있다. 프론트엔드 프레임워크 라이브러르, CDN, 아이콘 글꼴이나 SVG 방식을 통해 아이콘과 함께 사용할 수 있는 다양한 방법으로 제공하고 있다 더 놀라운 것은 가장 많이 요청된 아이콘이나 작업 중인 아이콘, 최근에 출시된 것을 공유하고 있는 공공 백로그가 있다는 점이다. 

사용하고 있는 아이콘은 현재 진행형임을 기억하자. 아이콘이 더욱 완성도 있게 발전될 수 있도록 애정과 그에 맞는 도구를 활용해야 한다.

  👉구독링크 공유하기  

후원해주신 분들, 정말 감사합니다! 덕분에 서비스를 유지할 수 있게 되었습니다. :)