프로덕트 Pretendard 폰트 교체기

무턱대고 교체했다가는....

들어가며...

CRM 론칭 후 조금 여유가 있을 때 폰트 교체를 시도해 봐야겠다고 마음먹던 중이었다. 기존에는 Noto sans Kr와 Inter를 혼용하여 사용했다. 혼용하자니 너무 불편했던 찰나에 pretendard가 출시되어서 잘됐다 싶었다.

프론트엔드 개발자에게도 프리텐다드라는 폰트가 있는데 이런저런 장점이 있어 교체를 해볼까 생각 중이니 검토를 부탁드린다고 요청을 해놓은 상태였고 개발자 검토만 끝나면 교체를 할 태세였었다.

이래저래 혼자 마음먹은 상태로 시안을 pretendard로 조금씩 변경했고 태국으로 휴가를 다녀와서 본격적으로 폰트 교체를 진행하려고 생각 중이었는데 이슈가 터졌다. 내가 휴가를 간 사이에 말이다.

안일했던 내가 문제였다. 이럴 줄 몰랐던 거지.

UX 개선을 위해 폰트 사이즈를 2px씩 시안상에서만 사이즈업을 했는데 시안에 맞추다 보니 개발자가 기존 본고딕에서 pretendard로 적용을 할 수밖에 없었고 개발서버 적용 과정에서 조금씩 문제가 생겼다. 태국에 있는데 슬랙이 계속 울렸다. CS필드쪽에서 이슈가 터졌고, 총괄 책임자의 질문공세가 이어졌고, 개발자는 어쩔 줄 몰라했다. PM이 안 계셨더라면 난 어쩔 뻔했을까. 이 자리를 빌려 심심한 감사의 말씀을 올린다.

본격적으로 어떤 차이점들이 있었을까 알아보자.

---

1. pretendard는 Noto sans보다 두께가 살짝 얇다.

pretendard는 본고딕보다 미묘하게 살짝 얇다

그래서 뭐 어쩌라고?라고 할 수 있다. 문제는 적용할 글자의 크기가 크고 두께가 두꺼우면 별 상관이 없는데 크기가 작고 regular일 때 이슈가 발생한다. 특히 CRM의 경우 한 화면에 글자가 많이 들어가야 하는 특성이 있다. 글씨가 얇고 흐리게 보이는 이슈가 발생했다. CS팀에서 글자가 안 보인다고 항의를 했다고 했다.

 현장에서 받은 클레임이기 때문에 이것은 대단히 크리티컬 한 이슈였다. 나는 휴가 상태, 그것도 해외에 있는 상태였고 PM와 담당 프론트개발자는 현장 대응을 해야 했다. 다행스럽게 빠른 판단을 내린 PM 덕분에 regular에서 medium으로 한 단계 높여서 대응하기로 했고 상황을 마무리 지을 수 있었다.

2.pretendard는 기본적으로 letter-spacing이 적용되어 있다.

letter-spacing이 기본적으로 한 -0.5px 정도 적용되어 있다. 다시 말하자면 pretendard체에 letter-spacing을 적용했을 경우 중복으로 적용할 수도 있다는 뜻이다. 너무 촘촘하게 적용될 수도 있으니 적용했을 때 반드시 더블 체크를 해봐야 한다.

반대로 장점이라면 일일이 letter-spacing을 적용하지 않아도 된다는 장점이라면 장점이랄까.

3. 숫자나 영어에 적용했을 줄 바꿈이 생길 수도 있다

우리는 흔히 이런 걸 이슈라고 부르기로 했어요. 본고딕에 비해 프리텐다드는 오동통하기 때문에 숫자와 영어가 많이 쓰이는 곳에 적용하다 보면 줄 바꿈 현상이 생길 수도 있다. 다시 말해 금융권이나 영어교육 플랫폼에서는 더욱 꼼꼼하게 체크해야 봐야 한다. 여전히 줄 바꿈이 생기는 이슈를 처리하느라 나와 담당 프론트개발자는 이 이슈가 보일 때마다 수정하느라 진땀을 흘리고 있다. 이게 이렇게 가볍지 못한 이슈였다니.

이런 대참사가 발생할 수 있다

마치며

폰트 교체라는 것은 생각보다 꼼꼼하게 진행해야 하는 부분이었다. 그냥 같은 본고딕 계열이니까 교체만 하면 되겠지 하는 안일한 생각으로 진행했다가 호되게 등짝을 맞은 느낌이었다.

으이구! 맞아야 정신 차리지! 맞아야 정신 차려!

더불어 ‘내가 부재 시 진행할 때에는 미리 어떻게 할지에 대해서도 언급을 했줬더라면’하면 아쉬움도 남는다. 대응에 대해서도 공유를 해줬다면 개발자와 PM이 덜 당황하고 유연하게 대처할 수 있었을 텐데 미안하지 그지없다. 다음엔 좀 더 성숙한 자세로 대응할 수 있을 것 같다.