위 그림을 보시면 좌측의 아이콘은 폰트의 디자인 컨셉을 맞추었지만 우측은 서로의 컨셉이 상충하여 가독성에 영향을 주게 됩니다. 그렇게 나온 아이콘의 디자인 컨셉은 ‘폰트와 일체감 있는 룩’ 이었습니다.
*폰트와 아이콘 각각의 완성도를 떠나 이미 디자인 컨셉을 가지고 있는 폰트와 새롭게 디자인될 아이콘의 룩이 서로 달라 서비스 전체적인 일관성과 완성도를 해치게 되는 경우도 고려가 되었습니다.

해당 폰트가 기업의 가치를 어떻게 해석하였는지 스터디를 진행하고 몇 가지의 특징들을 추려내 컨셉에 맞는 디자인 테스트를 진행하면서 아이콘의 컨셉, 작도법 상황별 고려해야 하는 표현들까지 가이드와 함께 산출물을 제작하였습니다.

이후부턴 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

그리고 Base Grid와 결합하여 Noto Sans를 위한 아이콘 그리드가 완성됩니다.

*위 그림에는 Key Line을 위아래로 1px 씩 수정하는 과정이 있었는데, 아이콘은 크기가 작다 보니 표현에 있어 제약이 많아지게 되고 아이콘 자체의 완성도를 헤치게 되었기 때문입니다.
(이 프로젝트의 목적은 폰트의 물리적인 특성을 아이콘에 기계적으로 끼워 맞추는 것이 아닌, 이 디자인을 보게 될 사용자가 직관적으로 느껴지는 폰트를 닮은 아이콘을 만드는 것이 목적임을 짚고 가겠습니다.)

Apex

apex는 활자의 대각선이 만나는 지점을 말하며 대표적으로 대문자 A의 상단 영역에서 확인됩니다.
여기서 한 가지 주의할 부분은 아이콘은 크기가 작기 때문에 자칫하면 픽셀이 깨져 보이거나 잘못 그린 것처럼 보일 여지가 있기에 아래와 같이 이 특성을 잘 담아낼 수 있는 곳에 부분적으로만 사용합니다.

6° Angle

한 벌의 폰트에서 일정하게 발견되는 각도가 있습니다.
Noto Sans의 경우에는 6의 배수로 이루어진 사선의 각도가 많이 발견되었습니다.
보통은 30° 45° 60° 90°를 사용할 수 있는 15° angle을 사용하지만
이번 프로젝트에선 6의 배수를 활용하여 작업을 진행하였습니다.

이러한 아이콘들이 각 구간에 적절히 퍼져있어야 자연스러운 패밀리 룩이 완성됩니다. 활자에서 디자인의 컨셉이 잘 드러나는 활자부터 컨셉이 잘 드러나지 않는 일반적인 활자까지 조화롭게 구성이 되어있는 것처럼 말이죠.

중요한 건 기계적인 룰의 적용이 아니라 디자인의 전반적인 밀도를 고려하는 것입니다. 디자인 요소가 없다시피 한 햄버거 매뉴에 디자인 컨셉을 담아내겠다고 억지로 형태를 만들면 오히려 전체 완성도를 해치고, 가독성에 문제를 일으킨다거나,
모든 곳에 디자인이 들어가 있어 시각적으로 쉽게 피로해지는 경우가 발생할 수도 있습니다.

저 역시도 아이콘을 그릴 때마다 이런 기준들을 어디서부터 어디까지 지켜야 하는지에 대한 고민을 하지만 명쾌한 해답이 있는 것 같진 않습니다.
실제 작업을 하면서 아이콘 하나하나 완성도와 전체의 완성도를 비교해가면서
최선의 상태라고 모두가 합의 할 수 있는 지점을 찾아내는 것이 중요한 것 같습니다.

긴 글 읽어주셔서 감사합니다.