[UXUI] 나이키로 보는 아이콘 규칙

하나의 디자인 시스템 안에서는 통일성이 있어야 한다. 이는 작은 요소로 볼 수 있는 아이콘에서도 마찬가지이다. 서비스 전체의 아이콘들은 세트로 조화를 이루어야 하는데, 그러기 위해서는 일관성 있는 규칙이 필요하다.

 

이러한 점에서 나이키 웹사이트의 아이콘은 일관성에 있어 문제들이 있다.

햄버거와 장바구니 아이콘

같은 기능을 하는 장바구니와 메뉴 아이콘이지만 디자인이 다르다. 이렇게 동일한 기능임에도 다른 디자인인 경우, 기능이 다른 것처럼 보여서 사용자에게 혼동을 줄 수 있다. 동일한 기능의 아이콘은 모두 같은 모습을 하고 있어야 한다. 또한 우측 SNKRS 페이지의 장바구니 아이콘은 옆의 햄버거 메뉴와 비교했을 때 상대적으로 크기가 매우 작게 들어가 있다. 같은 위계 상의 아이콘인 경우 그 크기가 균일해야 한다.

✕아이콘

굵기와 크기가 모두 다르다.

ᐳ아이콘

굵기와 크기, R값이 모두 다르다

같은 기능을 나타내는 아이콘이지만 저마다의 크기와 굵기가 다르다. 또한 ᐳ아이콘의 경우 한쪽에는 양 끝 모서리에 r값을 주어 둥글게 되어있다. 이러한 곡률 또한 통일되어야 한다.

아이콘 디자인 시 유의사항

아이콘을 만들기 위한 여러 가지 규칙들이 있다. 그중 나이키의 사례에서 봤을 때 안 좋은 사례들은 다음과 같다.

1. 굵기: 아이콘의 굵기를 통일하는 게 좋다.
2. 모서리: 어딘가는 둥글게 되어 있고, 어디는 각져있으면 통일감이 없어 보인다.
3. 크기: 크기가 서로 달라선 안된다. 일정한 크기여야만 한다.

그 밖에도 아이콘 제작 시 선 혹은 면으로 통일할지, 가독성과 간결성 등 여러 가지 고려해야 할 점들이 많다.

---

효율성을 고려하여 아이콘을 직접 만들지 않고 소스를 가져와 사용하는 경우도 많다. 그러한 경우에 기존의 아이콘들과 함께 있을 때 어색한지 않은지, 선의 굵기가 동일한지, 어울리는지 비교해보며 사용해야 한다.