앞선 글에서 실무에서 아이콘 디자인을 위해 리서치 하는 법을 알아보았습니다. 이번 글에선 리서치 후 정해진 컨셉에 따라 아이콘을 디자인 할 때 지켜야할 방법을 알아보겠습니다.
들어가기에 앞서 아이콘 디자인 원칙을 잘 설명하는 참고 사이트 입니다.
기본적인 원리를 잘 설명해주고 있어 참고하셔도 좋을것 같습니다.
Medium – Optical effects in user interface
아이콘 디자인시 고려해야할 5가지
✔️ 아이콘은 간결하고 명확해야 한다
아이콘은 여러 사람들이 이해하기 쉬운 간단한 형태를 지녀야 합니다.
대부분 아이콘이 표시되는 영역은 제한적입니다. 사이즈가 24×24, 16×16, 48×48 등 작습니다. 제한적인 영역안에서 세세하게 표현할 경우, 그 의미를 쉽게 알아차리기 어렵습니다.
아래 예시를 한번 살펴볼까요? 다음은 휴지통 아이콘을 표현한 것입니다.
왼쪽과 오른쪽 아이콘을 비교하면 왼쪽은 좀 더 휴지통을 자세히 표현한 것 처럼 보이며, 오른쪽은 더 간결해 보이는걸 알 수 있습니다.
간소화한 휴지통 이미지와, 디테일이 강한 휴지통 이미지
작은 영역에 적용하면 어떨까요?
작은 영역에서 버튼을 제공할 경우
실제 작은 버튼 사이즈에 활용되는 아이콘 크기로 축소해 보았습니다. 어떠시나요? 오른쪽이 왼쪽에 비해 훨씬 알아보기 쉽게 생긴걸 알게 될 겁니다.
이처럼 아이콘은 일반 일러스트 그림과 달리 간결해야 합니다. 즉, 작은 영역에서도 의미가 명확하게 전달되어야 합니다.
✔️ 시각적으로 눈에 잘 띄는 두께를 쓰고, 섬세함은 줄인다
위에 1번 항목과 연결되는 내용 입니다.
아이콘을 디자인하게 될 경우, 아이콘의 두께감을 신경쓰지 않곤 하죠. 하지만 두께감 또한 아이콘 사이즈가 작을 때, 때에 따라 강조가 필요할 때 중요한 요소가 됩니다. 너무 얇은 선을 쓰거나, 선에 세심한 디테일이 들어갈 경우 아이콘이 한 눈에 들어오는데 방해가 될 수 있습니다.
아래 예시 이미지를 보겠습니다.
다음과 같이 오른쪽은 명확한 두께로 의미를 알아볼 수 있는 수준으로 아이콘이 제공되고 있습니다.
하지만, 왼쪽과 같이 선이 얇을 경우, 큰 사이즈에선 괜찮지만 이미지 사이즈가 작아졌을때 쉽게 인지하기 어렵습니다.
만약 문자와 함께 섞여 있는 아이콘일 경우, 왼쪽은 오히려 기능의 의미를 전달하는데 방해되지 않을까요? 따라서 시각적으로 눈에 잘 띄도록 적절한 두께와 명확한 디자인을 활용해야합니다.
✔️ 제품하나에 표현되는 모든 아이콘이 하나의 세트처럼 보여야 한다
세 번째는 하나의 제품에 적용되는 아이콘들은 모두 하나의 세트처럼 보여야 합니다. 즉, 아이콘의 일관성을 가져야 하죠. 예를 들어 살짝 라운딩된 아이콘을 사용한다면 각진 아이콘을 섞어서 쓰면 전체적인 조합이 깨질 수 있죠.
다음과 같이 라운드를 활용한 영역이 채워진 아이콘이 제품에 사용되고 있다는 가정을 해 봅니다.
그 이후 새로운 아이콘 2개를 추가 했을 때, 기존에 사용되는 디자인 형태를 고려하지 않고 맘에 드는 모양만 사용할 경우, 어떻게 보일까요?
개별 아이콘의 완성도가 높더라도, 전체적으로 봤을땐 위의 예시에 비해서 상대적으로 완성도가 떨어지게 보입니다.
즉, 보라색으로 표시한 것처럼 채워진 아이콘 사이에 선형 아이콘이나 채워진 아이콘이라도 라운딩이 없는 각진 형태의 아이콘이 섞여 있다면 제품의 전반적인 완성도가 떨어질 수 있습니다.
따라서, 새로운 아이콘을 추가하거나 디자인 할 때 아래 요소를 추가로 더 생각해봐야합니다.
- 라운딩을 사용한다면 어느정도 라운딩을 제공하는지?
- 선형 아이콘을 제공할 때는, 작은 사이즈(ex, 24dp) 일때의 선 두깨와 큰 사이즈 (ex, 48dp) 아이콘의 선 두깨가 시각적으로 일정한지?
- 유사한 모양이 다양하게 사용되고 있다면, 비슷한 스타일을 가져가는지?
(ex, Profile 아이콘, 사용자 추가 아이콘, 사용자 제거 아이콘 등…)
✔️ 시각적인 규칙, 게슈탈트 이론을 활용한다 (a.k.a 착시효과)
간혹 아이콘을 만들다 보면 동일한 크기로 가운데 정렬을 했는데 어딘지 모르게 혼자 틀어져 있는 느낌이 들 경우가 있습니다. 이런 현상은 ‘게슈탈트 이론’의 ‘균형(Balance)’ 라는 현상을 이해한다면, 이를 활용해 시각적인 균형을 맞출 수 있습니다.
아래 예시에서 우측 하단에 있는 있는 삼각형 아이콘이 다른 아이콘들에 비해 사이즈도 작아 보이고, 살짝 오른쪽으로 치우쳐져 보입니다.
(⭐️Figma 에서 다각형 도구를 활용해 그릴 경우엔 정사각형 영역에 삼각형이 생겨 가운데 정렬이 가능합니다. 하지만 그 외 툴을 활용할 때 틀어지는 경우가 발생해 고려해야합니다.)
이럴때는 삼각형의 세 각에 딱 맞는 원을 그려줍니다. 그 후에 원과 함께 가운데 정렬할 경우, 시각적으로 안정감을 느끼는 위치에 정렬이 가능해집니다.
삼각형을 가운데 정렬 했다면, 여기서 더 수정하고 싶은 부분이있으시지 않나요? 바로 삼각형 모양이 X, 메뉴 아이콘에 비해 작게 느껴집니다. 하지만 세 아이콘 모두 18×18 사이즈 입니다. 이럴 경우엔, 크기적인 보정을 한번 더 해줍니다.
어떤가요? 이젠 다른 아이콘들과 사이즈가 비슷하게 느껴지지 않나요?
위 현상은 아래 원형과 정사각형의 시각적 착시 효과로 설명할 수 있습니다. 원형이 사각형 보다 살짝 작게 보입니다.
하지만, 실제로 두 모양 모두 18×18 px 크기의 아이콘 입니다.
다음과 같을 경우엔, 삼각형에서 해결 했던것처럼 원형의 사이즈를 좀 더 크게 보정 하면 됩니다.
이처럼 동일한 사이즈로 디자인 했다고 끝난게 아닌 시각적 안정감을위하여 아이콘들을 비교해 가며 조금씩 사이즈, 위치 등을 보정해주어야 합니다.
✔️ 간단히, 키라인을 활용하자
맨땅에서 위 내용을 모두 기억하고 지키긴 어렵습니다. 그래서 Material Design 등에서 이러한 어려움을 쉽게 해결할 수 있는 icon Keyline 이라는 도구를 제공 합니다. 시각적 원칙을 지킬 수 있도록 도움을 주는 방법중 하나이죠.
혹은, Figma의 Community에 ‘keyline’을 검색하면 많은 사람들이 제작한 Key-line들을 활용해 볼 수 있습니다 !
icKeylineMaker 라는 플러그인을 활용해 손쉽게 iOS / Android 맞춤 키라인을 생성해 볼 수 있습니다.
마무리
여기까지 아이콘을 디자인할 때 꼭 지켜야할 원칙 5가지에 대해 알아보았습니다. 정리하자면, 제품, 서비스 디자인에 사용되는 아이콘의 경우 하나의 세트로 제공되어야 합니다.
- 아이콘은 간결하고 명확하되, 아이콘에 사용되는 선의 두께, 면 사용시 UI에 가려지거나, 너무 강조되면 안됩니다.
- 여러 아이콘들이 하나의 세트처럼 보일 수 있게 디자인 형태를 잡아야합니다.
- 아이콘을 디자인 할 땐, ‘게슈탈트 원칙’을 기억하면서 시각적인 보정 작업을 계속 생각해야 합니다.
- 아이콘 디자인이 어렵다면, Key-line을 활용해 아이콘 디자인을 시작해보세요.
마지막으로 중요한 점은, 직접 제품에 적용해 보며 느껴보는 것입니다.
처음 실무를 시작하시는 분들께 많은 도움이 됐으면 좋겠습니다.
답글 남기기