최적의 서체를 찾아서
서비스 서체 변경을 앞둔 디자이너들을 위한 글
샐러드펫의 프로덕트 디자인을 맡은지 한 달만에 서체 변경이라는 꽤나 무시무시한 작업을 맡게 되었습니다. 이번 글에서는 당시를 회고하며 서체 변경의 과정과 그것을 통해 얻은 경험에 대해 여러분과 나눠보려고 합니다.
그 당시 샐러드펫은 프로덕트의 서체로 나눔스퀘어라운드를 사용 중이었는데, 꾬, 뿀, 뜌 등과 같은 특수글자를 지원하지 않아 반려동물 이름이나 리뷰와 같이 사용자가 직접 값을 입력할 수 있는 UGC에서 빈 칸처럼 글자가 보이지 않는 문제가 가장 컸어요. 게다가 수많은 디자이너의 손을 거쳐 간 나머지 제대로 된 디자인 시스템도 없을 뿐더러, 텍스트가 굉장히 많은 서비스인 것을 감안했을 때 텍스트가 많은 경우 가독성이 굉장히 좋지 않았습니다.
그래서 서체 변경 프로젝트는 다음과 같은 두 가지의 목적에 따라 진행되었습니다.
1. 특수글자를 입력했을 때 깨지지 않을 것
2. 가독성을 높일 것
과정
첫번째. 보편적인 서체 중에서도 가장 구조적으로 비슷한 서체 찾기
어떤 서비스를 처음부터 디자인하는 것과 달리, 이미 있는 것을 개선하거나 변경할 때는 변화로 인해 지금까지의 모든 레거시에 이슈가 발생하지 않을지를 가장 먼저 고려해야 합니다. 특히 수많은 전임자를 거쳐간 서비스일수록 이슈가 생길 가능성이 커지죠. 따라서 디자인과 개발적인 이슈를 예방하기 위해, 가장 보편적으로 많이 사용되는 폰트 중에서 현재 사용 중인 폰트와 가장 유사한 서체를 찾아야 했어요. 구조적으로 서체의 기본 line-height와 letter-spacing이 비슷한 서체를 찾는 것이 목적이었기 때문에, 대상군을 나누어 사용 중인 폰트와 비교를 진행했습니다.
먼저 대상군은 스포카 한 산스 네오, 노토 산스 KR, 나눔고딕, 프리텐다드로 진행되었습니다. 당시 사용 중이었던 폰트의 line-height는 140%였고, letter-spacing은 -5%였기 때문에 동일한 값을 모든 폰트에 적용해 비교했습니다.
기본 line-height 비교line-height에서는 스포카 한 산스 네오와 나눔 고딕이 기존 서체와 가장 유사한 값을 가지고 있었습니다.
letter-spacing 비교서비스 특성 상 다양한 텍스트가 많이 사용되기 때문에 한글뿐만 아니라 영어, 그리고 숫자도 함께 확인해야 했습니다. 이렇게 다각도에서 서체 구조를 비교해본 결과는 다음과 같습니다.
스포카 한 산스 네오
기본 line height나 letter spacing값이 가장 비슷한 서체였습니다. 하지만 역시나 완전히 동일하진 않아서 기존 폰트가 텍스트로 차지하는 공간보다 width값이 커지거나 정렬이 깨질 수 있다는 단점은 있습니다.
노토 산스 KR
기본 letter spacing이 타 폰트에 비해 굉장히 넓고, line height도 아래쪽으로 치중되어 있습니다. 이상한 것은 숫자에서 기본 letter spacing이 너무 좁게 표현된다는 것이었어요.
나눔고딕
한글에서는 기본 글자 크기 자체가 커서 현재 폰트와 길이가 많이 차이나고, 영어에서는 기본 글자 크기가 너무 작아서 또 길이 차이가 많이 났습니다.
프리텐다드
weight가 다양한 대신 기본적으로 regular와 medium이 타 폰트에 비해 가는 편이고, 기본적인 letter spacing도 좁은 편이었습니다.
두번째. 특수 글자 지원 여부 확인하기
특수 글자 지원 여부를 확인하면서 느낀 점은 생각보다 특수 글자를 지원하는 서체가 별로 없다는 것이었습니다. 구조적으로 가장 비슷한 형태였던 스포카 한 산스 네오는 아쉽게도 완전히 특수 글자를 지원하지는 않는 것처럼 보였습니다. 노토 산스와 나눔 고딕, 프리텐다드는 특수 글자를 지원하는 것처럼 보였으나 구조적 문제가 훨씬 크게 느껴졌어요. 여기서 내릴 수 있는 결정은 세 가지가 있었습니다.
1. 특수 글자를 지원하는 서체로 변경한다.
2. 시스템 폰트를 사용한다.
3. 원하는 폰트를 쓰되 지원하지 않는 글씨만 시스템 폰트로 대체한다.
이 세 가지 방안을 고민하다가, 구조적 레거시 때문에 개발 이슈를 방지하기 위해 특수 글자는 시스템 폰트로 대체되더라도 스포카 한 산스 네오를 사용하는 것으로 결정하게 되었습니다.
세번째. 가독성 높이기
기존에 사용하던 폰트 시스템은 line-height는 최대 140%로 사용되고 있었고, letter-spacing은 피그마 기준 -5%였습니다. 하지만 서비스 특성 상, 전문적인 정보를 많이 전달해야하고 텍스트가 굉장히 많기 때문에 이런 시스템은 가독성을 확보하기에 역부족이었습니다. 게다가 서체 스타일도 둥글고 너비가 좁은 형태에다가 regular와 bold만 존재해 weight의 베리에이션을 줄 수 없어 글이 길어질수록 가독성이 떨어지는 상황이었죠.
그래서 서체 변경말고도 line-height와 letter-spacing의 대대적인 변화가 필요했습니다. 하지만 기존 레거시로 인해 자칫하면 수작업으로 모든 요소의 margin과 spacing을 조절해야하는 불상사가 벌어질 수 있었기에 주의해야 했어요. 그렇게해서 최소한의 가독성을 확보하는 방향으로 서체 값 변경이 진행되었습니다. line-height는 자주 사용하는 폰트 사이즈는 150%~160%로, letter-spacing은 피그마 기준으로 -2.5%로 변경했어요.
결과와 느낀점
변경 전 / 변경 후 예시화면최소한의 가독성만 확보해도 서비스가 달라진다
변경된 서체 값이 가독성에 최적화된 값은 아니지만, 변경 전과 비교했을 때 텍스트가 많을 경우 가독성이 훨씬 좋아진 것을 확인할 수 있습니다. 기존의 서체 값으로 긴 글을 읽어왔을 사용자들을 생각하니 죄송한 마음이 들었어요. 하지만 이제라도 조금 더 나은 가독성을 제공할 수 있게 되어서 다행이라고 생각합니다.
생각보다 한글 특수 글자를 지원하는 서체가 없다
UGC를 다루는 서비스의 경우 어떻게 보면 오탈자를 검수할 수단이 없는 한 특수 글자를 지원하는 서체를 사용하는 것이 필수적인데, 생각만큼 이에 해당하는 서체가 많진 않다는게 아쉬웠습니다. 물론 기존에 사용하던 나눔스퀘어라운드처럼 특수 문자를 입력할 경우 아예 흰색으로 글자가 표시가 되지 않는 것은 아니었지만 눈에 띄는 정도의 서체 변경이 발생한다는 것이 이상적이진 않기 때문이죠.
변화로 인한 수정은 불가피하다
기존 작업들이 있는 경우 변화로 인해 디자인 또는 개발에 있어서 아무런 수정이 일어나지 않는 것은 바라서는 안될 것 같습니다. 구조적으로 최대한 비슷한 서체를 찾고, 또 최소한의 가독성을 확보하는 한도 내에서 변경을 진행했지만 그것으로 인한 결과는 감내해야 했어요. 하지만 이 부분은 이미 인지를 하고 있었고 이에 따른 수정도 각오하고 있었기에 앞으로의 작업을 고려했을 때 필연적으로 이루어져야했던 작업이 아니었나 생각합니다.
