폰트(noto)를 기반으로 UI 아이콘 디자인하기
Icon Design Based in Noto Sans
들어가기 전에
원래는 제가 다니는 회사에서 진행한 디자인 시스템 구축 프로젝트에서 디자인 시스템 내에서 아이콘의 비주얼을 어떻게 정의할 것인지에 대한 경험을 공유해 드리고 싶었지만, 대외비 프로젝트였기에 noto sans를 통해 그 과정을 따라가 보는 것으로 대신하겠습니다. (아래 소개해 드릴 내용은 블로그 공유를 위해 새롭게 제작된 작업입니다.)
폰트와 아이콘이 닮아 있으면 좋은 이유
프로젝트를 시작하고 두 가지의 스터디 포인트가 있었습니다.
Q1 : 브랜드의 에센스를 어디서 어떻게 가져와야 하느냐였고,
Q2 : 아이콘이 어떤 환경에서 사용되는가였습니다.
그중 눈에 띈 것은 기업의 브랜드를 위한 폰트였습니다.
상당히 공을 들여 만들어진 폰트였는데, 이 폰트를 스터디하면서 두 가지 고민을 해결할 수 있었습니다.
A1 : 해당 폰트는 이미 기업의 브랜드 언어를 해석하여 시각적으로 훌륭하게 표현하고 있었고,
A2 : 기획되고 있는 모바일 서비스에서 아이콘은 단독으로 사용되기보다는 폰트와 함께 노출되는 경우가 많았습니다.
위 그림을 보시면 좌측의 아이콘은 폰트의 디자인 컨셉을 맞추었지만 우측은 서로의 컨셉이 상충하여 가독성에 영향을 주게 됩니다.
*폰트와 아이콘 각각의 완성도를 떠나 이미 디자인 컨셉을 가지고 있는 폰트와 새롭게 디자인될 아이콘의 룩이 서로 달라지면 서비스 전체적인 일관성과 가독성의 측면에서 완성도를 해치게 되기 때문입니다.
그렇게 나온 아이콘의 디자인 컨셉은 ‘폰트와 일체감 있는 룩’ 이었습니다.
해당 폰트가 기업의 가치를 어떻게 해석하였는지 스터디를 진행하고 몇 가지의 특징들을 추려내 컨셉에 맞는 디자인 테스트를 진행하면서 아이콘의 컨셉, 작도법 상황별 고려해야 하는 표현들까지 가이드와 함께 산출물을 제작하였습니다.
이후부턴 Noto Sans를 통해 디자인 과정을 공유해 드리겠습니다.
Noto Sans KR의 특징들을 분석하기 위한 타이포그래피의 구성요소입니다.
위 언급한 요소 중
1.아이콘 디자인에 적합하면서
2.폰트의 특징을 잘 나타내고 있는 요소들을
추려서 아이콘을 구체화하기 위한 작업을 준비합니다.
그룹 A : 아이콘의 큰 골격(grid)의 컨셉
Ascender line, Capital line, X-line, Base line, Descender line,
Aperture(open counter), Counter, Set width
그룹 B : 아이콘의 디테일 표현
spur, ear, apex 그리고 그림에는 표시하지 않았지만
사선획의 각도(Angle)까지 포함시킵니다.
위 그림과 같이 1차로 추려진 특징들을 목적(*회색글자)에 따라 두 가지 그룹으로 분류하고 본격적인 디자인자인을 하기 위해 그룹 A의 특징을 가지고 아이콘의 큰 골격부터 잡아보겠습니다.
Grid Design : 아이콘 틀 만들기
Grid key line : Ascender, Capital, X, Base, Descender Line
아이콘 높이 값의 크기를 알파벳 대문자 높이와 맞추고, 그 바깥으로 마진영역을 잡은 다음
소문자의 높이(x-line)가 되는 부분에 라인을 하나 그어줍니다.
이 라인이 전체 그리드를 짜는 과정에서 중요한 Key Line이 되며,
개별 아이콘에서 나타나는 비례감이 폰트와 닮아있게 해줍니다.
Set width, counter, aperture
활자의 가로 폭(장평)과 알파벳 O와 같이 활자가 가지고 있는 속 공간의 인상을 보았을 때
세로로 길쭉한 형태가 특징적입니다.
이러한 인상을 아이콘에도 반영하기 위해 세로 높이가 더 강조된 형태를 찾아내기 작업을 진행합니다.
그리고 Base Grid와 결합하여 Noto Sans를 위한 아이콘 그리드가 완성됩니다.
*위 그림에는 Key Line을 위아래로 1px 씩 수정하는 과정이 있었는데, 아이콘은 크기가 작다 보니 표현에 있어 제약이 많아지게 되고 아이콘 자체의 완성도를 헤치게 되었기 때문입니다.
(이 프로젝트의 목적은 폰트의 물리적인 특성을 아이콘에 기계적으로 끼워 맞추는 것이 아닌, 이 디자인을 보게 될 사용자가 직관적으로 느껴지는 폰트를 닮은 아이콘을 만드는 것이 목적임을 짚고 가겠습니다.)
그렇게 완성된 Grid는 위 그림처럼 아이콘들의 주요 위치를 잡아주는 역할을 하게 됩니다.
Icon Detail : 디테일 찾아주기
완성된 그리드를 바탕으로 앞서 언급한 그룹 B를 통해 아이콘의
디테일한 모양을 잡는 과정을 진행하겠습니다.
*그룹 B : spur, ear, apex, angle
Spur, Ear
spur는 활자에서 보여지는 작은 돌기 부분인데
아래 그림과 같이 소문자의 획과 획이 만나는 부분에서 볼 수 있으며,
이러한 특징을 살려 아이콘에 표현합니다.
Apex
apex는 활자의 대각선이 만나는 지점을 말하며 대표적으로 대문자 A의 상단 영역에서 확인됩니다.
여기서 한 가지 주의할 부분은 아이콘은 크기가 작기 때문에 자칫하면 픽셀이 깨져 보이거나 잘못 그린 것처럼 보일 여지가 있기에 아래와 같이 이 특성을 잘 담아낼 수 있는 곳에 부분적으로만 사용합니다.
6° Angle
한 벌의 폰트에서 일정하게 발견되는 각도가 있습니다.
Noto Sans의 경우에는 6의 배수로 이루어진 사선의 각도가 많이 발견되었습니다.
보통은 30° 45° 60° 90°를 사용할 수 있는 15° angle을 사용하지만
이번 프로젝트에선 6의 배수를 활용하여 작업을 진행하였습니다.
이런식 으로 아이콘을 만들다 보면 한 가지 궁금증이 생길 텐데
지금까지 정의된 디자인을 적용할 수 없는 아이콘이 나오면 어떡하지? 입니다.
Family Look
아래 그림을 보겠습니다.
디자인의 시작점인 그래픽모티브(Noto Sans)부터 폰트의 특징들을 잘 담아낸 Core Identity 구간을 지나
햄버거 메뉴와 같이 디자인의 요소가 거의 없는 General Style까지 이어집니다.
이러한 아이콘들이 각 구간에 적절히 퍼져있어야 자연스러운 패밀리 룩이 완성됩니다. 활자에서 디자인의 컨셉이 잘 드러나는 활자부터 컨셉이 잘 드러나지 않는 일반적인 활자까지 조화롭게 구성이 되어있는 것처럼 말이죠.
중요한 건 기계적인 룰의 적용이 아니라 디자인의 전반적인 밀도를 고려하는 것입니다. 디자인 요소가 없다시피 한 햄버거 메뉴에 디자인 컨셉을 담아내겠다고 억지로 형태를 만들면 오히려 전체 완성도를 해치고, 가독성에 문제를 일으킨다거나,
모든 곳에 디자인이 들어가 있어 시각적으로 쉽게 피로해지는 경우가 발생할 수도 있습니다.
저 역시도 아이콘을 그릴 때마다 이런 기준들을 어디서부터 어디까지 지켜야 하는지에 대한 고민을 하지만 명쾌한 해답이 있는 것 같진 않습니다.
실제 작업을 하면서 아이콘 하나하나 완성도와 전체의 완성도를 비교해가면서
최선의 상태라고 모두가 합의 할 수 있는 지점을 찾아내는 것이 중요한 것 같습니다.
긴 글 읽어주셔서 감사합니다.
