[폰트이야기] 코드로 보여주는 폰트의 확장성 Leon Sans

배포일 2020.09.04

2020.9.8.

"그때그때 관심사에 따라 영감받는 것이 달라지는데,

주로 좋아하는 것들에서 영감을 받습니다.

좋아해야 관심이 생기고 그 관심이 자연스럽게 작업으로 이어지는 것 같아요."

사랑하는 가족으로부터 영감을 받아, 코드로 완성시킨 'Leon Sans' 는

폰트의 확장성을 보여주는 새로운 시도이자, 따듯한 감성과 기술의 결합을 보여줍니다.

Google의 김종민 디벨로퍼와 Leon Sans에 대해 이야기를 나누었습니다.

김종민 디벨로퍼가 만든 'Leon Sans' 유튜브 영상

안녕하세요 간단한 자기소개 부탁드립니다.

안녕하세요. 디자인을 취미로 하는 개발자인 김종민입니다. 미니멀하지만 움직임이 재미있는 디자인을 좋아하고 추상적인 미디어 아트보다는 목적이 분명한 프로젝트를 선호하는 편입니다. 현재는 구글에서 교육 관련 제품을 만들고 있습니다.

Youtube에서 아들을 위해 만든 Leon Sans 영상을 처음 접하고 놀랐습니다. 기술과 폰트 디자인의 아름다운 만남이 정말 반갑게 느껴졌어요. Leon Sans는 어떤 폰트인지 소개해 주세요.

리온 산스는 코드로 만든 폰트인데요, 일반 폰트처럼 컴퓨터에 설치돼서 사용되는 글자가 아닌 코드로 만들어져서 HTML5의 캔버스에 동적으로 그려지는 폰트입니다. 그래서 애니메이션을 만들 수 있고, 선의 굵기도 자유롭게 바꿀 수 있습니다. 그리고 계산식을 통해 좌표값에 이미지를 추가해서 다양한 형태의 폰트로 변환이 가능하고요. 둘째가 태어난 걸 기념하기 위해 폰트의 이름을 둘째의 이름인 김리온에서 따와서 리온 산스라고 지었습니다. 이번에 Tokyo TDC Annual Awards에서 Excellent Works로 선정되기도 했습니다.

보통 폰트는 일정한 두께를 가진 ‘획’으로 디자인을 시작하는데, Leon Sans는 일정한 좌표값을 가진 베지어곡선을 활용해 만든 점이 신기합니다. 처음에 아이디어를 어디서 얻으셨나요?

개발과 디자인을 같이 하다 보니 이런 부분에서 영감을 얻는 게 많은 것 같아요. 예를 들어 컴퓨터가 선을 그리는 방식을 거꾸로 생각해보면 선위에 내가 원하는 좌표값을 찾을 수 있는데요, 이 좌표값을 이용하면 동적으로 변하는 글꼴을 만들 수 있겠다는 생각이 들었습니다.

Adobe 프로그램에서 베지어 곡선으로 글자를 만들면 획이 굵어질수록 글자가 커지는데, 종민님의 폰트는 획이 굵어져도 글자가 일정한 크기를 유지하는 것으로 보입니다. 폰트에 대한 높은 이해도와 애정이 담긴 것 같아요. 이런 디테일한 부분들을 코드로 어떻게 해결해 나가셨는지 궁금해요.

저장된 좌표값을 코드로 변환해서 화면에 그릴 때 여러 가지 디자인적 요소를 적용할 수 있도록 개발했습니다. 질문하신 굵기에 따라 크기가 달라지는 문제도 계산식을 통해서 비율 값을 더해 동일한 크기가 되도록 만들었고요, a의 형태를 애니메이션을 고려해서 Futura 폰트와 같은 모양으로 만든다던지, M 같이 위가 뾰족한 부분은 flat top 형태로 디자인해서 동일한 높이를 만들어주는 등의 기술적 처리가 코드에 포함되어 있습니다. 사실 이런 부분은 코드로 개발하는 거라 어렵진 않았는데, 시간이 가장 많이 걸린 건 각 글리프들의 간격과 비율 같은 디자인을 검수하는 작업이었습니다. 덕분에 개인작업으로 혼자서 폰트를 만든다는건 쉬운 일이 아니라는걸 느꼈고, 폰트 디자인하시는 분들 존경합니다.

Leon Sans를 폰트 패밀리로 확장할 수도 있을 것 같은데, Leon Serif나 Leon Rounded를 개발할 생각도 있으신가요? Leon Sans의 한글 폰트 모습도 궁금합니다. Leon font 패밀리 앞으로 볼 수 있을까요?

개인적으로 한글 폰트로 확장되는 모습은 욕심이 있는데 한글 특성상 작업량이 많아져서 개인작업으로 혼자 진행하기에는 쉽지 않은 것 같습니다. 마음이 맞는 디자이너를 찾게 된다면 스튜디오를 꾸려서 이런 작업을 계속해보고 싶긴 해요.

구글에서 디벨로퍼로 일하는 것으로 알고 있었는데, 디자인 감각도 뛰어나신 것 같아요. Youtube에 공개된 작업들을 보면 디자인과 기술이 접목된 하나의 작품을 보는 것 같습니다. 디자이너로 시작해서 현재 디벨로퍼로 일하게 된 계기가 있을까요?

저는 좀 재미있는 커리어 패스를 가지고 있는데요 간단하게 설명드리면,
24살 - 대학 중퇴, PC방 알바
25살 - 연봉 1400만원의 웹디자이너로 커리어 시작
26살 - 서울에 취업
30살 - 뉴욕에 취업
33살 - 구글 취업
이런 커리어를 가질 수 있었던 건 다른 사람들의 의견이 아닌 내가 하고 싶은 일을 계속해서 공부했기 때문이라고 생각합니다. 디자이너는 디자인만 해야 하고 개발자는 개발만 하는 것이 정석 패스라고 모두가 말할 때, 그런 것보단 내가 좋아하는 게 뭔지를 먼저 생각하고 둘 다 공부했었어요. 저는 개인적으로 직책은 그냥 하나의 단어일 뿐이라고 생각해요. 내가 디자이너라고 꼭 디자인만 해야 하는 건 아니라는 뜻인데요, 특히나 요즘은 예전처럼 칼로 자르듯 딱 선을 그어서 직종을 정의하기 힘든 것 같아요. 구글에서도 UX Engineer라는 타이틀로 일하고 있지만 실제 하는 일은 디자인도 하고 리서치도 하고 프론트 엔드 개발도 하고 있어요. 개인적으로는 이런 다양한 분야에 대한 이해가 있는 융합형 인재가 앞으로 더 수요가 많아질 거라고 생각합니다.

구글에서의 업무환경이 궁금합니다. 한국의 환경과 다른 점이 있다면 무엇일까요.

일단 자율성인 것 같아요. 한국에선 근태를 사회생활의 기본으로 보고 또 얼마나 일찍 와서 늦게 가느냐를 중요하게 보잖아요. 하지만 구글에선 그런 것보단 본인의 일을 얼마나 잘 해결하는지, 주변 동료들과 얼마나 잘 협업하는지를 더 중요하게 생각하는 것 같습니다. 윗사람에게만 잘 보이는 사람이 되기보단 자연스럽게 좋은 사람, 좋은 동료가 되려고 노력하게 되는 것 같아요.

실무 작업 중에서 가장 애정이 담긴 혹은 기억에 남는 작업이 있다면 소개해 주세요.

구글에 처음 입사했을 때 매터리얼 디자인을 모바일 웹으로 옮기는 작업이 한창이었어요. 매터리얼 디자인 특성상 많은 애니메이션을 보여 줘야 하는데, 그 당시 하드웨어 스펙이 낮은 모바일 브라우저에서는 애니메이션이 부드럽게 보이지 않아서 개발자들이 이건 불가능하다고 말하는 상황이었습니다. 그때 제가 GPU를 사용하는 간단한 트릭으로 애니메이션이 부드럽게 움직이는 프로토타입을 만들었는데 이게 구글에서 큰 반향을 일으켰었습니다. 덕분에 구글 I/O에 소개되기도 했었고요. 이 작업으로 ‘구글에서 일한다고 모든 걸 다 아는 천재들은 아니구나’ 라는 깨달음과 내 분야에서는 내가 전문가라는 자신감이 들었었습니다. 지금도 같이 일하는 팀원들은 2/3가 MIT 출신에 똑똑한 사람들이지만 제가 만든 애니메이션을 볼 때면 마법을 부린 것 같다고 말하곤 합니다. 사람은 모두 잘하는 것이 있고 잘 못하는 것이 있으니 기죽지 말아야겠다는 생각입니다.

작업을 하실 때 가장 중요하게 생각하시는 부분 혹은 본인만의 원칙 또는 습관이 있으신가요?

저는 일을 할 때 모든 게 정리된 상태인 걸 좋아합니다. 그래서 일이 잘 안 풀릴 때면 방 청소를 하는데, 그러면 다시 집중이 잘 되더라고요.

개인작업을 꾸준히 진행하시는 것 같습니다. Leon Sans도 그중 하나이고, 홈페이지 개발과 유튜브 업로드까지 정말 오랜 시간 공들였을 것 같아요. 개인 작업을 꾸준히 할 수 있는 원동력이 있다면 ?

작업이 취미이자 일인 것 같아요. 티비도 안 보고 게임도 별로 안 좋아합니다. 다들 공감하실 텐데 뭔가에 몰입해서 만들다 보면 주위의 잡념이나 걱정을 다 잊고 온전히 하나에만 집중하게 되는데 그 감각이 너무 좋습니다. 결국 이게 제일 재미있어서 계속하게 되는 것 같아요.

눈, 비를 인터랙티브 타이포그래피로 표현하신 작업이 인상적입니다. 종민님의 작품에는 따듯한 감성이 느껴지는 것 같아요. 가족으로부터 출발한 작업도 많이 있는 것 같은데, 주로 영감을 받는 것이 있다면 어떤 것입니까?

그때그때 관심사에 따라 영감 받는 것이 달라지는데, 주로 좋아하는 것들에서 영감을 받습니다. 좋아해야 관심이 생기고 그 관심이 자연스럽게 작업으로 이어지는 것 같아요. 요즘은 주로 가족에서 영감을 많이 받는데, 딸의 할로윈 옷에서 영감을 받아서 만든 프로젝트인 MON(http://mon.cmiscm.com/)도 좋아하는 작업 중에 하나입니다.

딸의 할로윈 옷에서 영감을 받아 만든 프로젝트인 MON(http://mon.cmiscm.com/)

유튜브에 튜도리얼 컨텐츠와 포트폴리오에 대한 내용이 많이 보입니다. 구독자들을 위해 앞으로 업로드할 개인작업 혹은 컨텐츠를 살짝 알려주실 수 있을까요?

사실 4년 전부터 유튜브를 시작을 하려고 했었어요. 이번에 유튜브를 하면서 다시 한번 깨달은 점은, 실천이야말로 크리에이터의 가장 중요한 덕목이고, 실천하지 않고 머릿속의 구상만으로는 아무것도 달라지지 않는다는 점입니다. 별거 없는 제 유튜브가 4년이라는 시간이 걸린 것 처럼요. 컨텐츠는 말씀하신 것 외에도 제 커리어나 인터랙티브 개발자가 되는 방법, 일하는 방법, 개인작업의 노하우 등을 영상으로 만들려고 하고 있습니다. 이것도 빨리 실천해보려 합니다 :)