새로운 디자인 언어를 만들다 : 서체 제작 프로젝트

아임웹 산스는 2022년 5월부터 2023년 4월까지 디자인 챕터에서 진행한 장기 프로젝트였어요.

아임웹이 전용서체를 고민하게 된 배경과 제작 과정을 소개하고, 프로덕트 디자이너가 서체를 바라보는 관점 그리고 그렇게 탄생한 아임웹 산스의 특징에 대해 이야기 해보겠습니다.

어떤 브랜드가
전용서체를 만들었을까?

이미 다양한 브랜드에서 전용서체를 개발해 브랜드 이미지를 단단하게 구축하고 있습니다.
국내에서는 현대카드가 기업 최초로 유앤아이(Youandi)라는 전용서체를 만들었고, 우아한형제들에서는 배달의민족체, 아모레퍼시픽은 아리따 산스 등을 만들었습니다.

왼쪽부터 현대카드 ‘유앤아이(Youandi)’, 아모레퍼시픽 ‘아리따 산스’, 우아한형제들 ‘배달의민족’

아임웹이 전용 서체를
고민하게된 배경

전용서체는 브랜드를 표현할 수 있는 커뮤니케이션 수단 중 하나로 브랜드 가치와 아이덴티티를 빠르고 효과적으로 전달하는 역할을 합니다.

아임웹은 최근에 리브랜딩을 진행는데요, 브랜드 빌더로서 아임웹 이라는 브랜드 원칙을 재 적립 하고, 일관된 브랜드 메시지를 전달하고 싶었어요. 그리고 아임웹의 다섯가지 원칙 중 “For customer”의 원칙으로 고객의 제품이 돋보일 수 있도록 가독성있는 서체로 사용성을 개선하고 싶었습니다.

이렇게 우리는 브랜드의 가치를 높이고, 가독성과 사용성을 두루 갖춘 우리만의 전용 서체를 만들기로 했습니다.

아임웹의 리브랜딩 로고타입

브랜드 빌더로서,
프로덕트 디자이너로서
서체를 바라보는 관점은 조금 달랐습니다.

사용자가 어떤 글자를 선택할지에 대한 고민없이 본질에만 집중할 수 있는 서체를 만들고 싶었어요.

아임웹 산스 디자인 원칙

앞에 보여드렸던 배달의민족이나, 현대카드 등의 브랜드들은 그들의 서체로 브랜드의 개성을 표현하기도 하지만 아임웹 전용 서체는 우리가 추구하는 가치를 제품을 통해 전달하고 싶었거든요.

아임웹의 일부 환경에서는 한글과 영문의 조합 또는 화폐 단위와 숫자와의 조합에서 각기 다른 서체를 사용하고 있었어요.

이런 비효율 적인 업무 방식을 개선하기 위해전용 서체는 한글·영문·숫자·기호가 하나의 서체로 사용되면서 일관성을 유지하고 글자의 불균형 문제까지 해결해야 했습니다.

또한 디지털 환경에서 많은 양의 컨텐츠를 명확하고 불편하지 않게 읽을 수 있는 형태의 본문용 서체를 만들기로 했어요.

산돌과의 협업으로 태어난
아임웹 산스

아임웹 산스는 산돌과 함께 11개월 동안 수십번의 피드백 과정 거쳐 세상밖으로 나오게 되었습니다. 한글 11,172자 디자인을 시작으로 디자인이 끝나면 한글 개발 착수와 동시에 영문, 숫자, 기호 순서로 진행됩니다.

디자인 방향성을 한글 서체 기준으로 잡다보니 한글 디자인에 꽤 많은 시간이 소요가 되었는데요, 디자인 챕터 전체가 11,172자의 한글을 모두 살펴보고 피드백을 전달하는 과정을 반복했어요.

새로운 균형감을 찾다

한글은 초성, 중성, 종성으로 구성되어있기 때문에 단순한 글자부터 복잡한 글자들의 가로, 세로 획의 굵기가 일정한지, 글자 사이 간격은 적당한지, 작은 포인트의 글자에서도 뭉쳐보이지 않도록 설계했어요.

완성된 한글을 기준으로 영문과 숫자·기호 조합에서 불균형은 없는지 확인하기 위해 수 많은 테스트를 진행했습니다.

산돌과의 피드백 과정 중 일부

제가 서체를 다룰 때 특히 중요하게 보는 요소는 바로 ‘숫자’인데요.

금융이나 커머스처럼 숫자가 프로덕트에서 가장 중요한 요소는 아니지만, 관리자 페이지에서는 특히 숫자의 노출 빈도가 높은 만큼 고정폭을 가졌으면 좋겠다고 생각했어요.

자주 사용하는 기호는 단축키로

아임웹 산스에는 숨겨진 기능이 있어요. 바로 리가춰 기능으로 자주 사용하는 화살표나 미들닷(·) 등의 기호를 단축키로 전환시켜 줍니다.

이렇게 디자인이 결정되기까지 수많은 피드백과 시안을 거쳐 아임웹 산스 200, 400, 600 세가지 타입이 만들어졌어요. 아임웹 산스는 현재 시각적 전달 매체 일부에 사용되고 있어요.

아임웹 산스 Imweb Sans

아임웹 산스
곧 만날 수 있어요

아임웹 산스는 현재 오프라인 광고물이나 인스타그램, 뉴스레터 등 마케팅 컨텐츠 일부에 사용되고 있어요.

아임웹 산스 활용사례 — 왼쪽부터 브랜드 브로슈어, 마케팅 컨텐츠

imweb 디자인 시스템인 ‘Clay’에서도 아임웹 산스를 통해 제품 전반에 일관된 브랜드 경험을 제공할 예정이에요. 뿐만 아니라, 아임웹의 고객들도 아임웹 산스를 사용할 수 있도록 디자인모드 글꼴 목록에 추가될 예정입니다.

디자인모드 / 공통 디자인 설정

Imweb Sans Project

May. 2022 ㅡ Apr. 2023

Imweb / Design Chapter
Project Lead / Jihyang Lee
BX Designer / Taegyu Ha
Product Designer / Heeyoun Hwang, Yisak Jeong, Minsun Kim

Sandoll / Type Design Team
Product Designer / Sungwoo Choi

ⓒ 2023 Imweb Corp. All rights reserved.