아이콘 디자인 : 점(Dots) 활용법

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

이번 글은 아이콘 디자인 심화 팁 시리즈의 첫 번째 순서입니다. 타이포그래피 디자인 원리를 적극 활용해 아이콘 완성도를 한 차원 높여주는 시각적 효과들을 살펴보겠습니다. 먼저 가장 기본적인 스마일 아이콘을 통해 점을 어떻게 다루어야 하는지 알아보겠습니다.

점은 선 굵기보다 약간 더 커야 시각적 균형이 맞습니다.

선과 동일한 두께를 그대로 적용하면 눈 모양이 너무 작아 보일 수 있습니다.

아래와 같이 미세하게 조정하면 아이콘의 시각적 균형이 훨씬 잘 맞습니다.

스타일을 강조하기 위해 눈 크기를 더 키우는 선택을 할 수도 있습니다.

참고로 눈 모양이 반드시 원형일 필요는 없습니다.

이러한 시각적 원리는 점을 사용하는 모든 곳에 동일하게 적용할 수 있습니다.

아이콘 세트를 제작할 때 점 크기를 한 가지 이상으로 구성하는 것도 좋은 방법입니다.

점이 아이콘의 핵심 요소이거나 묘사하는 상징에 따라 더 커야 자연스러운 경우가 있기 때문입니다.

예시의 Phosphor 아이콘 세트로 비교를 하자면,

16px 캔버스 기준 기본 점 크기가 지름 1.5px이지만 유모차나 물음표 아이콘에서는 지름 2px로 조정합니다.

이미지나 점 아웃라인 아이콘에서는 2px 또는 3px 크기의 비어있는 점을 사용하기도 합니다.

앞으로 아이콘 세트를 고르거나 직접 만들 때 점의 디테일에 주목해 보시기 바랍니다.

---

원문 출처 : https://minoraxis.medium.com/advanced-icon-design-dots-590cf96bf279

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.