여기어때 '잘난체' 폰트 브랜딩 이야기

국내 IT 기업은 한국을 넘어 세계를 무대로 할 정도로 뛰어난 기술과 아이디어를 자랑합니다. 이들은 기업 블로그를 통해 이러한 정보를 공개하고 있습니다. 요즘IT는 각 기업의 특색 있고 유익한 콘텐츠를 소개하는 시리즈를 준비했습니다. 이들은 어떻게 사고하고, 어떤 방식으로 일하고 있을까요?

이번 글은 여행·여가 플랫폼 ‘여기어때’가 2018년 브랜드 서체 ‘잘난체’를 출시한 데 이어, 올해 10월 기존 서체를 업그레이드하고, 고딕 버전인 ‘잘난체 고딕’을 출시한 이야기를 전합니다. 업그레이드된 버전과 기존 버전은 어떤 차이가 있는지, 고딕을 개발하며 어떤 고민을 했는지 등 서체 브랜딩 배경을 인터뷰 형식으로 소개하는 글입니다.

2018년 한글날, 여기어때 잘난체가 출시되고 5년 만에 잘난체가 업그레이드가 되어서 돌아왔어요!

그동안 잘난체를 많이 좋아해 주시고, 사용해 주신 덕분에 두 번째 시리즈 ‘잘난체 고딕’ 출시 소식도 함께 가지고 왔어요!

여기어때는 그동안 한글을 활용한 일관된 커뮤니케이션을 만들어가기 위해 다양한 브랜딩/마케팅을 하였는데요. 그 시작에는 한글로 제작된 로고가 있다는 걸 다들 아실 거예요. 국내/해외 OTA 시장에서 읽기 쉽고 친근하게 접근할 수 있으며, 브랜드 가치와 메시지 전달에 차별화된 비주얼로 효과적인 특징들을 가졌죠. 이러한 강점을 잘 유지하며, 확장시킬 수 있는 방법들을 고민하는 게 브랜드 디자인팀이 함께 그려가야 하는 그림이라고 생각해요. 이번 업데이트된 여기어때 잘난체는 그림의 중요한 역할을 해줄 브랜드 서체에 대한 프로젝트예요!

프로젝트를 시작하며, 지난 5년간 쌓인 사용도 조사를 진행하며 정말 다양한 곳에서 자유롭게 사용되고 있다는 피드백을 받게 되었는데요. 서체 클라우드 서비스에서 브랜드 단일 서체로서 활성화율이 가장 높았으며, 현재에도 인기 서체로 사용되고 있음을 확인했어요. 저희는 이 자료들을 바탕으로, 신규 서체 제작에 대한 니즈와 기존 서체를 디벨롭하는 작업들을 함께 진행하기로 했어요. 모두가 함께 잘 쓸 수 있는 서체로 거듭나기 위한 디자이너 사심 100%를 담아 버렸죠!

새로운 ‘잘난체 고딕’과 잘난체의 ‘업그레이드된 부분’들에 대한 이야기 바로 시작해 볼게요. 이번 글에서는 특별히 잘난체 글꼴 제작에 힘쓴 디자이너 “쏭” “라이카” “몰리” 의 이야기를 통해 글을 이어갈 거예요.

라이카: 안녕하세요, 이번 잘난체 프로젝트를 함께 진행한 브랜드 디자인팀의 라이카입니다. 쏭과 몰리도 소개 부탁드려요!

몰리: 안녕하세요! 잘난체 프로젝트에 참여해 진행하게 된 브랜드 디자인팀의 몰리입니다~

쏭: 안녕하세요, 프로젝트 전반적인 방향과 제작 과정을 리드한 브랜드 디자인팀 팀장 쏭입니다.

잘난체에 대하여

라이카: 여기어때 브랜드 서체 ‘잘난체’는 2018년부터 지금까지 많은 사람들에게 사랑을 받고 있는데요. 길거리 간판이나 모바일 배너 등 다양한 곳에서 많이 볼 수 있었어요. 여기어때 잘난체의 특징에 대해서 간략하게 소개해 줄 수 있나요, 쏭?

쏭: 잘난체는 여기어때 로고를 모티프로 디자인해서 부드럽지만 개성 강한 제목용 서체의 특징을 갖고 있어요. 그래서 존재감을 부각시키기 위한 영역과 표현하고자 하는 성격에 특화된 비주얼로 쓸 수 있어요. 형태적으로 조금 디테일하게 들어가면, 라운드로 시작하여 직선으로 닫아주는 획으로 특징 그대로를 녹였고, 네모꼴의 꽉 찬 모듈로 로고에서 주는 안정적이고 개성 있는 무게감을 느낄 수 있도록 했어요.

몰리: 저는 잘난체에서 가장 흥미로운 형태는 ‘ㅅ, ㅈ, ㅊ’ 이예요. 아래로 뻗는 두 획이 교차되는 자음 형태에 뛰고 있는 사람의 형상을 표현해 여행의 즐거움을 전달하며, 이 외 글자마다 잘난체만의 독특한 디자인 특징이 반영되어 있어요. 그래서 주목성과 가시성이 높은 서체로 많은 사랑을 받고 있는 것 같아요!

한 층 더 업그레이드된 잘난체

라이카: 잘난체 고딕 출시와 함께 기존 잘난체도 업그레이드되었는데요, 잘난체의 어떤 부분이 업데이트되었나요~?

쏭: 우선 잘난체를 업데이트한 배경에 대해 말씀드려야 할 것 같은데요~ 여기어때 서비스가 국내에서 해외로 확장하며 다양한 메시지를 전달해 왔는데, 그동안 쓸 수 없던 글자들에서 오는 불편함을 개선하고 싶었어요. 말로 표현할 수 있는 글자 전부를 쓸 수 있도록, 잘난체를 함께 사용하던 모두에게 필요한 업데이트였어요.

몰리: 지원 문자를 기존 2730자에서 1만 1172자로 대폭 늘려, 외국어와 신조어도 다양하게 표현하도록 고도화를 진행했어요.

라이카: 네, 업데이트된 잘난체로는 ‘똠얌꿍’과 ‘뺭뺭면’처럼 외국어 한글 표기가 가능하도록 했어요.

몰리: 태국 여행에서 똠얌꿍이 빠질 수 없죠.

몰리: 한 층 더 업그레이드된 잘난체는 글자 수 확장뿐만 아니라, 디테일한 조정이 더 있었어요. 영문과 숫자, 약물을 한글과 함께 타이핑할 때, 가독성을 보완하기 위해 미세 조정을 진행했죠?

라이카: 네, 기존 잘난체는 영문, 숫자 베이스라인의 위치와 크기가 한글에 비해 다소 작고 어색해 보이는데요. 브랜드 서비스 특성상, 가격 표기나 날짜를 한글과 함께 사용하는 경우가 많은데, 크기 차이가 있어서 기존 잘난체를 사용할 때 불편함을 느껴 업데이트하게 되었어요. 영문, 숫자, 약물의 베이스 라인 위치를 한글 밑선과 맞춰 아래로 내리고 세로 길이를 조정해 보완했어요. 예시 이미지에서 기존 잘난체와 비교해 보면 그 차이를 좀 더 확실하게 보실 수 있어요.

쏭: 업데이트된 잘난체를 보면, 한글과 숫자를 함께 사용했을 때 좀 더 안정감 있어 보이네요!

잘난체의 가족 ‘잘난체 고딕’의 탄생

라이카: 기존 잘난체는 굵은 두께를 가진 라운드 형태 서체로 귀여운 느낌이었다면, 새로 출시한 잘난체 고딕은 끝을 직선으로 처리해 정돈된 느낌을 주도록 했는데요, 이번 신규 출시한 서체인 잘난체 고딕에 대해 더 자세히 들려주실 수 있나요 쏭?

쏭: 네, 이번 잘난체 고딕을 기획하면서 그동안 써오던 잘난체와는 다른 성격을 가진, 조금 더 다양하게 사용할 수 있는 방향을 고민하게 됐어요. 다양한 커뮤니케이션을 소화하고 표현해 줄 수 있는 다재다능한 그런 친구 어디 없을까? 하고요!

몰리: 맞아요, 잘난체의 귀여운 인상을 표현하던 라운드를 덜어내고, 다양한 사용성을 위해 가독성을 강화하는 과정에서 여러 가지 많이 시도를 해봤잖아요.

라이카: 네~ 잘난체의 친구이자 가족 서체인 잘난체 고딕을 제작하기 위해 어떤 시도들을 했는지 아래에서 좀 더 자세하게 얘기해 봐요!

라이카: 먼저 위 두 개 이미지는, 기존 잘난체에서 잘난체 고딕을 제작하면서 유지하려고 했던 부분들이에요.

몰리: 네, ㅅ, ㅈ, ㅊ과 같은 자음들의 곡선 형태를 유지하려고 했어요. 그리고 기존 잘난체가 꽉 찬 네모꼴에 두께가 어느 정도 있는 제목용 서체잖아요. 그 부분들도 유지하면서 제작하려고 했죠.

라이카: 잘난체와 잘난체 고딕이 얼핏 보면 굉장히 유사해 보이죠? 꽉 찬 네모꼴과 ㅅ, ㅈ, ㅊ 자음의 곡선 형태는 유지하면서 고딕으로 제작하였기 때문에 유사하게 느껴질 수 있어요. 이런 특징들이 서체의 인상을 결정짓는 중요한 요소들이에요.

라이카: 그런데 그 곡률이나 형태를 유지하면서 고딕 서체로 끝부분들을 각지게 만들다 보니 테스트가 필요한 것들이 있었는데요. 그중에서도 위 이미지처럼 ㅜ, ㅟ, ㅞ 와 같은 형태에서 아래 세로줄기의 곡률이 나 ㄲ의 형태에 좀 더 수정이 필요했어요.

몰리: 특히 “귀, 궈, 궤”와 같은 글자들은 초성의 ㄱ과 아래 세로 줄기에서도 비슷한 형태가 나오다 보니 좀 더 거부감 없이 편안하게 읽혔으면 좋겠다는 의견이 있어서 곡률을 좀 더 완만하게 수정해서 조화로운 형태로 수정했죠.

라이카: 바로 위에 나왔던 내용과 이어지는 ㅟ 같은 글자의 아래 세로줄기 한글 형태와 조화를 고려해서 영문과 숫자에 나오는 비슷한 y, g, 6, 9의 뻗어져 나오는 부분의 형태에도 유사하게 적용했어요.

몰리: 맞아요. 또 대문자 C, G, J, S와 같은 뻗침이 있는 획의 끝선에도 안쪽으로 떨어지는 사선을 사용하여 형태의 디테일을 연결했어요. 자주 사용하게 될 프로모션 배너에 적용해 보니, 디테일하게 고민했던 작업들의 효과가 더 잘 보이네요.

쏭: 이럴 때 디자이너들은 왠지 모를 성취감을 느끼는 것 같아요.

몰리: 잘난체 고딕 개발 시 기존 잘난체와의 연결성을 가져가되, ‘가독성’을 우선순위로 두고 서체를 만들게 되었잖아요. 그러다 보니 기존 잘난체와 비교했을 때 자연스럽게 고딕만의 특징이 생기게 된 것 같아요.

라이카: 맞아요! 특정 자소들에 가독성을 높일 수 있는 장치를 적용한 게 그 특징이 되었어요. 획들 사이 공간을 확보하기 위해 이음보에 약간의 곡률을 주었고, 가독성을 높이기 위해 쌍받침 ㄱ의 곡률을 완화하고 받침 ㅍ의 가로줄기와 세로줄기를 연결했는데, 잘난체와 잘난체 고딕을 나란히 두고 비교해 보면 그 특징을 한눈에 알아볼 수 있어요.

쏭: 잘난체는 서체의 캐릭터를 우선적으로 고려하였고, 잘난체 고딕은 가독성을 중점적으로 디자인하였구나를 알 수 있는 부분이 또 있죠. 모음 ㅜ, ㅠ와 받침 ㅍ, ㅅ, ㅊ, ㅎ를 조합할 경우예요. 형태를 위한 연결과 가독을 위한 절단, 같은 듯 다른 중심을 잡기 위해 많은 테스트를 했어요.

라이카: 쌍시옷(ㅆ)의 삐침도 주목해서 볼 포인트 중 하나인데요~ 잘난체의 ㅆ 삐침은 라운디드 한 형태 특징을 잘 반영하고 있는 반면, 고딕은 잘난체보다 삐침이 좀 더 길게 뻗어있어요~

몰리: 이건 서체를 작게 사용했을 때 가독성을 올리고 뭉쳐 보이는 것을 완화하기 위해 삐침 형태가 조정된 거예요 ㅆ과 ㅉ이 조정되어 있는데, 서체를 쓰면서 이런 디테일을 구경하는 재미도 있더라고요.

#딩뱃(Dingbat)

라이카: 딩뱃은 쉽게 말해서, 그림문자라고 이해하시면 돼요. 이번 잘난체 고딕을 제작할 때, 우리의 서비스와 연결된 딩뱃을 제작하고 싶었어요. 사내에서나 외부 사람들이 잘난체를 더 많이 잘 사용할 수 있게 하고 싶은 고민도 있었는데요.

몰리: 네, 그래서 우리의 서비스인 여행, 여가와 관련된 아이콘들을 필요한 곳에 쉽게 사용할 수 있게 잘난체 글꼴에 추가하자는 거였어요.

라이카: 잘난체 글꼴을 다운로드하고, 해시태그 #과 함께 여행/여가와 관련된 단어들을 타이핑했을 때 자동으로 딩뱃 그래픽으로 변환이 돼요! 위 gif 이미지 보시면 변하는 거 보이시죠?

쏭: 서체를 조금 더 즐겁게 사용하기 위해 만든 딩뱃 127자는 여기어때의 그래픽을 열심히 제작해 주시는 비고가 참여하여 함께 만들어주셨는데요. 기존 그래픽을 딩뱃으로 스타일링하는 과정에 대해 설명해 주시면 좋을 것 같아요.

비고: 네, 안녕하세요. 이번에 딩뱃 그래픽 제작을 맡은 브랜드디자인팀 비고입니다. 딩뱃은 여기어때 아트워크 2.5D에서 출발했는데요, 그 아트워크도 잘난체와 마찬가지로 여기어때 로고의 둥글고 각진 형태에서 시작했어요.

라이카: 네 맞아요. 여기어때 BI의 형태에서 시작된 여기어때 아트워크 관련 내용은 지난 글 “브랜드 아이덴티티를 담은” 3D 그래픽 개발방법”에서 자세하게 보실 수 있어요.

비고: 여기어때만의 그래픽을 만들고 계속 아카이빙하고 있는데요, 그 연장선이라고 생각하시면 됩니다. 기존 여기어때 BI의 형태의 둥글고 각진 특징을 계속 유지하려고 했어요. 기존 2.5D의 그래픽에서 그라데이션 같은 요소들을 다 빼고 2D로 단순하게 만들고, 그 이미지를 가지고 라인과 면을 적절하게 조합해서 딩뱃이미지가 나왔어요.

라이카: 잘난체와 잘난체 고딕을 딩뱃과 함께 사용했을 때 최대한 이질감이 없도록 라인의 두께나 면으로 채워지는 부분들을 계속 조정했었잖아요.

몰리: 네, 잘난체 글꼴의 굵기가 굵은 서체이다 보니 적당한 라인의 두께를 찾는 것도 고민이었어요. 픽토그램화된 이미지이다 보니 글자와 완벽하게 굵기를 맞출 수는 없지만 연결된 분위기를 최대한 가지고 가고 싶었어요.

라이카: 라인의 굵기를 고민하면서 그 딩뱃의 사이즈도 고민했잖아요. 잘난체 글꼴과 함께 사용했을 때 너무 작거나 너무 크지 않아야 했어요. 그리고 연속적으로 딩뱃을 사용했을 때 사이사이 간격도 딩뱃에 비해 너무 넓거나, 좁지 않게 일정하게 유지하려고 했죠.

몰리: <국내여행, 해외여행, 음식, 숙박, 액티비티, 여행 오브제, 여행 풍경, 결제, 계절/기념일, 감정표현> 이렇게 총 10개의 카테고리로 나누어서 제작했고, 총 127개의 딩뱃이 포함되어 있어요.

라이카: 국내에서 이렇게 많은 딩뱃을 포함한 서체는 잘난체가 처음이라고 하는데요! 이렇게 보니까 많긴 하네요. 비고의 귀여운 딩뱃 그래픽이 한몫한 것 같아요.

쏭: 이런 귀여운 딩뱃들은 2가지 서체(잘난체2, 고딕)에서 모두 사용 가능하며, 가이드에 표기된 해시태그를 활용한 딩뱃 찾기도 추천드려요! 지속적으로 업데이트되고 있는 여기어때 잘난체 글꼴 많은 사용 부탁드려요.

지금까지, 여기어때 잘난체 글꼴에 대해 이야기해 보았어요.

이번 잘난체 글꼴은 산돌과 함께 제작되었습니다. 산돌과 여기어때의 제작 이야기도 궁금하시다면 포춘코리아 매거진 인터뷰 보러가기 >한번 읽어보세요.

그리고 업그레이드된 ‘잘난체’와 신규 제작된 ‘잘난체 고딕’을 직접 사용해 보고 싶으시다면 잘난체 글꼴 다운받기>를 통해 다운로드하실 수 있어요. 연결된 링크에 자세한 잘난체 사용 가이드도 나와 있으니, 보시고 추가로 궁금하신 점이 있으시면 댓글로 달아주세요.

<원문> 여기어때가 폰트 브랜딩을 꾸준히 하는 이유

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.