서체디자이너가 들려주는 ‘윤고딕700 웹폰트’ 제작스토리

UX / UI 디자이너들 혹은 웹디자이너에게 타이포그래피란 좋은 웹폰트를 고르는 것부터 시작됩니다. 어떤 폰트가 유저에게 명확한 정보를 전달하는 지, 사이트의 콘셉트와 잘 맞는지, 고딕을 쓸지 명조를 쓸지 잘 선택해야 하지요. 윤디자인연구소에서는 웹디자이너들의 고민을 줄이기 위해 웹상에서도 선명한 웹폰트를 만들고자 노력하고 있습니다. 오늘은 그 중에서 ‘윤고딕700 웹 폰트’ 제작스토리를 여러분께 소개해드릴게요. 

▶ 윤고딕의 변화, 윤고딕700 시리즈(바로가기)

▶ 윤고딕 시리즈의 차이점은? (바로가기)

서체디자이너 인터뷰!! ‘윤고딕700 웹 폰트’ 제작후기

지난 9월 출시 된 ‘윤고딕700 웹폰트(힌팅폰트)’는 ‘클리어 타입(Clear Type)’ 방식으로 제작되어 ‘그레이 스케일(Gray Scale)’ 방식보다 선명하고 깨끗하게 보이며, 획이 고르게 보입니다. 윤디자인연구소에는 웹디자이너를 위해 웹폰트를 전문으로 만드는 디자이너들이 있는데요, ‘윤고딕 700 웹폰트’의 실제 작업자인 타이포프레임팀의 이수정, 차윤미 디자이너에게 직접 제작 과정에 대한 이야기를 들어보았습니다.

[앞] 이수정 디자이너, [뒤] 차윤미 디자이너

Q. 간단한 자기소개 부탁드려요.

이수정(이): 안녕하세요. 캘리그라피를 좋아하는 디자이너 이수정입니다. 

차윤미(차): 안녕하세요. 저는 타이포프레임팀 막내 사원 차윤미라고 합니다. 

Q. 윤고딕700 중에서 어떤 굵기를 맡아서 작업했는지 소개해 주세요.

이: 윤고딕740의 힌팅(Hinting)을 맡아서 진행했습니다. 웹 환경 본문으로 많이 쓰이는 굵기입니다.

차: 저는 윤고딕780의 힌팅을 담당했습니다. 윤고딕 780은 다른 어떤 고딕체보다 굵기가 많이 굵어서 속공간이 좁고, 가장 얇은 굵기인 710에 비해서 크기도 커졌습니다. 제목용으로 많이 쓰이는 굵기예요.

▶ 힌팅(Hinting)이란?

윤곽선 글꼴이 글자의 크기가 클수록 글자의 모양이 원하는 품질로 출력되고, 작은 글자에서 출력 품질에 문제가 생기는 현상을 해결하기 위한 과정으로, 글자 정보에 약간의 힌트(Hint)를 주어 비트맵으로의 주사선 변환 과정에서 힌트를 이용해 더 나은 출력 결과를 만드는 것을 말합니다.

참고: <한글글꼴용어사전>, 사단법인 세종대왕기념사업회

Q. 웹폰트는 기존 아웃라인폰트와 만드는 과정도 많이 다르잖아요, 만든 기간과 제작과정은 어떻게 되나요?

이: 제작 기간은 약 6개월 정도였습니다. 일단 윤고딕740의 원도를 파악했고, 문장 기준으로 테스트도 많이 했어요. 문장 테스트 기준으로 모듈을 잡고, 한 글자씩 명령어를 넣습니다.

차: 3월부터 시작해서 9월 5일에 마감했습니다. 3~4월은 한글 2,350자에 명령어를 넣는 작업을 했고, 5~7월까지 2,350자를 12px(9pt)~32px(24pt)까지 총 49,350자에 델타를 넣는 작업을 했습니다. 그리고 8월, 9월에는 저희 팀 내에서 전체적으로 검수를 받고 수정하는 작업을 했습니다.

▶ 명령어 입력

한글 2,350자를 픽셀에 고정시키는 작업. 획과 획을 연결하여 선명하게 보이도록 한다. 

▶ 델타 입력

명령어를 입력한 글자를 사이즈별로 글줄을 맞추는 작업. 한글자 한글자씩 작업해야 하고, 픽셀에 고정된 글자의 획을 올리거나 내려서 고른 글줄을 만든다.

웹폰트(힌팅폰트) 제작 과정

Q. 방대한 양의 글자를 보는 만큼 만드는 과정도 만만치 않았을 것 같아요. 제작과정 중 가장 힘들었던 부분 어떤 것이었나요?

이: 2,350자의 12px~32px (49,350자)를 한 자 한 자 열어서 작업을 해야 하기 때문에 많은 시간이 필요했습니다. 글줄 맞추기, 모듈에 의한 글자 공간 분배 작업, 곁줄기 위치, 이음보직선화 시키기, 걸침 획 직선으로 만들기 등 신경 쓸 것들이 많았습니다. 이렇게 작업량은 많은데 양과 비교했을 때, 시간이 부족했거든요. 그리고 반복적으로 명령어를 넣는 작업이라 집중력의 한계가 올 때가 있었어요. 손목도 아파 왔었고요.

차: 검수할 때가 가장 힘들었어요. 아웃라인이랑은 달라서 미세한 조정이 불가능하거든요. 근데 보는 눈은 다 다르니까 피드백도 다 다르게 오고 엇갈리는 피드백도 있고 작업할 때 굉장히 난감했었어요. 게다가 수학처럼 정답이 있지 않아서 많은 의견들의 기준이 없다 보니 검수 때 저를 포함해서 저희 팀 모두가 정말 힘든 시간이었습니다.

Q. 제작과정에서의 어려웠던 과정들은 어떻게 극복 할 수 있었나요?

이: 동기들과 작업 얘기를 많이 나눴어요. 제가 알지 못한 부분도 대화를 통해서 많이 알게 되었고요.

차: 저희 팀에 힌팅 작업을 하는 사람이 저까지 포함 총 4명입니다. 힌팅은 아웃라인과 정말 많이 달라서 힌팅을 하는 사람끼리 대화를 하다 보면 서로 작업에 대한 고충이나 노하우 등 많은 정보를 얻을 수 있는데요, 이런 과정들이 서로에게 힘이됩니다.

웹폰트를 만드는 힌팅작업 과정

Q. 현재 아웃라인폰트와 웹폰트 작업을 병행하고 있잖아요, 둘의 가장 큰 차이점이 있다면, 또는 각각의 매력은 무엇이라고 생각하나요?

이: 아웃라인에 비해 힌팅폰트는 선택과의 싸움인 것 같아요. 순간마다 글자를 어떻게 표현해야 잘 표현을 할 수 있을지에 대해 생각을 해요. 공간 선택의 폭이 좁아서, 이런 저런 시도도 많이 필요한 작업이라 힘든 부분이 있었지만, 결국엔 좋은 선택을 하게 되었을 때 뿌듯함이 크답니다.

차: 가장 큰 차이점은 위에서도 언급했듯이 아웃라인은 미세한 조정이 가능하지만 힌팅의 경우는 경우의 수가 3가지 밖에 없어요, 올리거나 내리거나 그대로 두거나 ! 그래서 힌팅은 아웃라인처럼 정밀하게 글자를 다듬을 수가 없어요. 아웃라인의 경우는 자소 하나를 만들 때 1mm 보다도 작은 단위로 다듬어 가며 작업이 가능하고, 다양한 스타일의 서체를 만들 수 있다는 점이 가장 큰 매력이고, 힌팅의 경우는 웹상에서 일그러지는 서체들에게 인공호흡을 해주는 것 같아요. 죽어가는 서체를 다시 살려내는 작업이라는 것이 힌팅의 매력이라고 생각합니다.

[좌] 윤고딕740, 힌팅 전/후 비교, [우] 윤고딕780, 힌팅 전/후 비교 (10pt 확대이미지)

Q. 현재 윤고딕700 웹폰트가 출시되어 웹상에서 사용되고 있잖아요, 활용된 모습을 보고 나면 여러가지 감정이 들 것 같아요. 마지막 소감은?

이: 웹에서 쓰이고 있는 윤고딕740을 볼 때, 뿌듯한 마음도 크지만 아쉬운 마음도 있습니다. 잘 만드려고 노력을 했는데, 부족함이 제 눈에는 보이네요. 힌팅은 아직 제겐 많이 어렵습니다. 마지막으로 힌팅하고 있는 동기들 파이팅!!

차: 정말 많이 보고 많이 다듬었는데도 사용되고 있는 모습을 보면 뿌듯함도 있지만 아쉬운 점도 큰 것 같아요, 마지막으로 힌팅 작업을 하고 그걸 검수하느라 고생하신 저희 타이포프레임팀 모두 수고하셨습니다!! ^^

윤고딕700 웹폰트가 적용된 렉서스 홈페이지

출처: 렉서스 홈페이지(바로가기)

웹폰트는 완성된 원도를 가지고 다시 웹환경에 맞게 각 사이즈별로 디자인을 해야 하기 때문에, 아웃라인 폰트만큼이나 시간과 노력이 많이 들어가는 작업입니다. 열심히 만든 만큼 윤고딕700을 앞으로 웹상에서 자주 봤으면 좋겠네요. 현재 '렉서스' 홈페이지에 가면 활용되고 있는 모습을 볼 수 있어요. 관심 있는 분들은 방문해 보시는 것은 어떨까요?