brunch

You can make anything
by writing

- C.S.Lewis -

by Sarah Sehee Mar 09. 2020

피그마에서 커맨드+B를 누르면 무슨 일이 생길까?

피그마 프로덕트 디자이너 Marcin Whicary의 강연 번역

피그마의 첫번째 디자인 컨퍼런스 Config 2020가 올해 2월 6일 샌프란시스코에서 열렸습니다. 2년 전부터 피그마를 이용해서 프로토파이 클라우드의 디자인 시스템을 구축하고 사용하는 유저로서 너무나 기쁜 소식이었는데요. 운이 좋게도 참석 티켓이 당첨되어 (힙한 스웩들을 챙기러) 다녀올 수 있었습니다.

피그마 블로그에 올라오는 다양한 컨텐츠처럼, Config 2020 역시 키노트와 토크, 워크샵 등 다양한 포맷과 실무에 도움이 되는 인사이트로 가득 찬 유익하고 즐거운 행사였습니다.

특히 피그마의 프로덕트 디자이너인 Marcin Wichary의 피그마 폰트 기능 개발 경험은 현장에서도 웃음이 끊이지 않던 가장 재밌었던 토크였습니다. 녹화본이 드디어 유튜브에 올라와서 프로토파이 팀원들을 위해 번역한 내용을 브런치에 올려봅니다.

어느 날 한 유저로부터 버그 리포트 이메일을 받았다.

Command+B로 폰트 볼드 처리를 못해요. 피그마에서 원래 되던 기능인데... Roboto로 작성한 텍스트를 선택하고 숏컷을 누르면 볼드 처리가 되지만, Chalkboar로 작성한 텍스트는 볼드 처리가 안돼요.

처음 읽었을 때 "도대체 왜 Chalkboard 사용해..? " 라고 먼저 물어보고싶었다. (Chalkboard는 Papyrus와 Comic Sans처럼 디자이너들의 발암을 유발하는 폰트 중 하나이다.)

하지만 당최 이해할 수 없는 폰트 취향은 잊기로 하고, 피그마 유저가 겪고 있는 문제의 원인을 찾기 위해 3주간 다양한 실험과 분석을 시도하게 된다.

먼저, 텍스트를 선택하고 Command+B를 누르면 피그마는 어떻게 작동할까?

디자이너라면 자연스럽게 레귤러 웨이트(Regular weight)를 볼드(Bold weight)로 바꿔줄거라고 기대한다. 볼드로 변경된 텍스트를 선택하고 Comman+B를 누르면 다시 이전처럼 레귤러로 되돌려주기도 할 것이다. 하지만 현대 폰트 시스템에서 Command+B는 레귤러와 볼드, 두 웨이트 사이의 선택이 아니다. 노멀과 볼드 웨이트 사이에는 더 다양한 굵기가 존재하고 여러가지 용어로 불리고 있다.

여기서 잠깐 퀴즈: 두 웨이트 중 어느 것이 더 얇을까?

Extra Light vs Thin

정답: 대부분의 폰트는 Thin 이 Extra Light 보다 훨씬 얇다.

Semibold vs Demibold

정답: 흥미롭게도 비슷비슷한 굵기다.

Book vs Regular

정답: 아무도 모른다...

Hairline, Thin, Ultra Light, Extra Light, Demi Light, Book, Regular, Book, Normal, Demibold, SemiBold, Bold, Ultra Bold, Heavy, Black 등.. 곧바로 굵기를 상상할 수 없는 다양한 웨이트 용어가 존재한다. 이렇게 말도 안되게 많은 용어가 존재하는 이유는 폰트를 디자인하는 타이포그래피 디자이너가 자기가 원하는 대로 이름을 붙일 수 있기 때문이다.

사실 과거에도 비슷한 문제가 있었다. 초기 인쇄의 역사에서 폰트의 사이즈마다 각각 다른 용어가 있었다. 프린트 디자이너는 Brilliant, Minion, Pica와 같이 곧바로 크기를 떠 올릴 수도 없는 이상한 이름을 외우고 다녀야만 했다. 표준을 숫자 체계로 바꾸면서 더 효율적이고 직관적으로 작업할 수 있게 되었다. 사이즈 표기법처럼 웨이트 또한 100~900 사이에서 100 배수 숫자로 표기하는 룰이 있다.

위와 같이 100과 900 사이에 다양한 웨이트가 있는 폰트 파일을 설치했다면 Command+B 숏컷은 피그마에서 어떻게 작동하게 될까? 폰트 대부분에서 400은 주로 Regular , 700은 주로 Bold니까 700을 선택해준다.

만약 400과 800, 두 개의 웨이트만 있다면?

700이 선택되어야 하지만 없는 상황이다.

이럴때 피그마에서는 좀 더 유연하게 100 정도 차이나는 800으로 변환해준다.

그럼 만약 400, 900 두 개의 웨이트만 있다면?

900은 볼드와는 너무나도 다른 느낌이다.

400과 900은 굉장히 큰 차이가 있기 때문에 피그마에서 아무런 변화가 일어나지 않는다.

400,600,800 세 웨이트가 있다면?

800으로 변환해준다.

마지막으로 기본 폰트 400 웨이트가 있고, 같은 폰트지만 Condensed 또는 Italic 스타일이 100부터 900까지 있다면?

Command+B를 눌렀는데 훨씬 좁은 너비인 Condensed 또는 Italic 스타일의 볼드로 변경되면 너무 이상하다... 그래서 안 바꿔준다.

이 복잡한 규칙을 보면서 누군가는 이런 질문을 던질 것이다. "볼드가 없다면 레귤러를 그냥 뚱뚱하게 만들면 되는 거 아니야?" 볼드는 레귤러 웨이트의 폰트를 그냥 뚱뚱하게 만들기만 하면 되는 것이 아니다. 하나의 폰트의 패밀리 균형과 조화를 위해서 다시 하나하나 캐릭터를 그려야 한다. 이렇게 복잡한 폰트 웨이트 시스템에 더해서 피그마의 폰트 기능을 더욱 더 어렵게 만드는 요소가 있다.

피그마 유저들은 총 네가지 공간에서 폰트를 불러와 사용할 수 있다.

1. OS에서 제공하는 기본 로컬 폰트

2. 피그마에서 제공하는 폰트

3. 구글 오픈소스 폰트

4. 유저가 직접 로컬에 저장하는 폰트

당신이 여러 명의 디자이너와 함께 하나의 피그마 파일에서 공동 작업을 진행하는 시나리오를 상상해보자. 나는 최근에 출시된 따끈따끈한 헬베티카 폰트 파일을 설치해서 작업을 하고 있다. 반면에, 나의 동료는 1990년대에 출시 된 후 오랜 세월 거쳐서 살아남은 헬베티카 폰트 파일을 설치하고 작업을 하고 있다면?...

이 두 헬베티카 폰트는 겉으로 보기엔 동일해 보이지만, 서로 다른 메트릭 시스템을 사용할 가능성이 크다. 이런 경우 Command+B를 눌렀을 때 글자가 사라진다거나 베이스 라인이 맞지 않는 문제가 생길 수 있다.

피그마에서 문제 해결을 위해 같은 조직에 속한 사람들이 동일한 폰트 파일을 공유하고 사용할 수 있도록 Shared Fonts 라는 공용 폰트 저장소를 개발했다. 하지만 Shared Fonts 는 또 다른 문제를 만들게 만들었다.

기본적으로 피그마에서 제공하는 구글 폰트에서는 Regular, Medium, Bold와 같은 세가지 웨이트를 지원한다고 가정하자. Shared Fonts에는 똑같은 폰트지만 Regualr, Black 만 있다면?

구글이 지원하는 웨이트와 Shared Fonts에 설치된 웨이트를 합쳐서 Regular, Medium, Bold, Black을 모두 제공할 수 도 있다. 하지만 앞에서 설명한 헬베티카의 케이스처럼 두 파일의 버전이나 폰트 메트릭이 다를 수도 있다. 그래서 피그마는 먼저 유저 스스로 무엇을 원하는지 더 잘 안다고 가정한다. 그 결과 디폴트로 제공되는 구글 폰트의 웨이트를 제거하고 유저가 Shared Fonts에 인스톨한 폰트 웨이트들만 보여준다. 물론 이 방법이 100% 직관적이지도 않고 설명하기도 어렵다. 하지만 대부분의 사람들한테 먹히고 있다.

정직하지 않은 폰트 파일

소프트웨어 개발의 과정에서 어쩔 수 없이 폰트 파일은 3가지 다른 Line Height을 제공한다. 또한 로마자를 사용하는 많은 언어 중 특정 언어를 지원할 수도 있고 지원하지 않을 수도 있다. 폰트 파일이 어떤 언어를 지원하는지 확인할 수 있는 알고리즘을 만들었다. 알고리즘을 통해 알게된 사실은 그 어떤 폰트 파일도 제대로 된 데이터를 제공하고 있지 않다는 거였다.

이탤릭체에 대한 데이터 역시 제대로 제공되고 있지 않았다. UI 디자인에서 이탤릭체는 일반 폰트보다 중요한 역할을 하지않기 때문에 따로 그룹핑하여 웨이트 리스트 아랫단에 배치한 프로젝트를 진행했다. 더 확신을 갖고 구분을 하기 위해서 폰트의 메타 데이터를 열고 확인했는데 정말 난장판이었다. 예를 들어 SF Mono의 Italic Angle은 180도로 되어있었고, 어떤 폰트는 Italic 폰트라고 하는데 Italic Angle이 0도로 되어있었다.

커맨드+B를 누르면 어떻게 보여줘야 할지에 대한 작은 고민으로 시작했는데 점점 일이 커지면서 짜증이 나기 시작했다. 피그마 오피스에 BE BOLD라는 이름의 회의실이 있는데 심지어 그 회의실 앞을 지나칠 때마다 자기한테 불만이 있는 것처럼 느껴졌다.

프로젝트를 진행하는 기간동안 Marcin의 피그마 파일 썸네일들

원칙대로 폰트 데이터를 지원하지 않는 타이포그래피 디자이너들의 탓으로 돌릴 수도 있다. 그리고 스스로 타이포그래퍼로서 사명감을 갖고 즐겁게 작업할 수도 있지만... 그냥 일이니까 하는데 슬슬 열 받기 시작했다. 분석하고 해결방법을 찾을 수록 점점 더 일이 커지고 부담감 또한 커졌다.

최초에 이 모든 것을 시작한 문의 이메일로 돌아가서 CS팀과 같이 유저에게 아래와 같은 질문을 던지면서 문제를 해결하기로 했다.

피그마 데스크톱 앱과 브라우저 중 어떤 것을 사용할 때 문제가 생기니?

(물론 너도 해봤겠지만) 피그마 앱을 다시 껐다가 시작해볼래?

혹시 Shared Fonts를 사용하고 있니?

혹시 데스크탑에 Third-Party 폰트 매니저를 따로 사용하고 있니?

문제가 발생된 폰트를 로컬에도 깔아서 사용하고 있니?

(이 폰트..혹시 어둠의 경로로 다운로드했는지 확인하게) 폰트 파일 좀 보내줄래?

혹시 피그마말고 다른 프로그램이랑 같이 사용할 때도 문제가 생기니?

3주 동안 이 문제를 겪고 해결하기 위해 머리를 쥐어짜던 도중 나서 유저한테 아래와 같은 메일이 왔다.

미스테리가 풀렸어요. 제 맥북의 "B" 키가 제대로 작동하지 않고 있었네요...

정말 실망스러웠다. 피그마의 많은 키보드 숏컷들 중에 Command+B는 1973년에 개발된 Xerox Alto 부터 사용된 가장 오래된 숏컷이다. 그래서 Command+B 키 자체가 문제를 일으킬 거라고 예상하지 못하고 폰트 탓만 했다.

San Francisco에서 Marcin이 가장 좋아하는 교차로. "This doesn't make any sense"

If you can understand a city, that city is dead.

도시는 살아있는 것이고 계속 발전하고 있기에 이해 불가능하게 복잡하다. 누군가 어떤 도시를 100% 이해할 수 있다면, 그 도시는 이미 생명력을 다한 도시인 것이다.

폰트 또한 마찬가지다. 기술의 발전과 폰트 자체의 진화에 의해서 점점 더 복잡해지고 있다. 예를 들어 어떤 폰트는 굵기 표시를 100, 200, 300과 같은 100배 수로 표현하다가 갑자기 999이라는 Heavy보다 뚱뚱한 굵기를 포함해서 정말 이상하다고 생각했다. 테스트를 해보니 900이 넘어가는 새로운 굵기 표시를 위해 1000 이 넘어가는 웨이트로 저장했을때 여러 개의 폰트 처리 시스템에서 1000이 넘어가는 것을 숫자를 인식 못하고 0으로 인식하여 폰트 웨이트 중 가장 굵은 굵기를 999로 표시하게 됐다. (기억나요 Y2K...?)

이와 같이 타이포그래피는 계속 발전하고 있고, variable 폰트도 추가될 거고 더 다양한 폰트 타입들이 생기면서 폰트 파일은 더욱더 우리가 이해할 수 없게 복잡해질 것이다.

Command+B를 눌렀을때 일반적인 레귤러 웨이트를 그냥 뚱뚱하게 만드는 일이 타이포그래피 디자이너로서는 무척 어렵고 힘들다. 하지만 10,20년 전에 디자인 툴을 사용하던 사람들과 달리 피그마 유저는 가짜 볼드 웨이트를 쓰는 것에 크게 개의치 않는 사람일 수 있다. 어떤 사람들은 폰트를 소프트웨어로 생각할 수도 있고, 어떤 사람들은 아예 신경 안 쓰고 그냥 예쁜 폰트를 사용하고 싶은 사람일 수도 있다. 어떤 사람은 폰트를 관리하고 싶어 할 수도 있고 어떤 사람은 아예 관심이 없을 수도 있다.

Fonts mean different things to different people.

누가 Chalkboard를 사용한다면 "어? 이 사람 드디어 폰트에 관심을 갖네?" 라고 긍정적으로 생각할 수 도 있는 것이다. (물론 한번 날 잡고 폰트 취향에 대한 진지한 이야기를 나눠야겠지만..)

스스로 피그마에서 한 작업 중 가장 자랑스러운 것은 피그마에서 타입 설정을 할 수 있는 기능을 OpenType Features 라던지 Advanced Type이라고 거창한 이름을 붙이지 않고 누구든 편하게 느낄 수 있도록 Type Details라고 이름을 붙인 것이라고 한다. 피그마의 Type Details 창에서는 친절하게 "이 폰트는 superscript을 지원하지 않아요" 같은 도움말을 제공해서 폰트를 쓰려는 사람이 뭔가를 빼먹었다는 죄책감이 들지 않도록 만들었다.

피그마에서 어떻게 폰트를 사용하고 무엇을 하고 싶어 하는지 더 많이 알고 싶다. Command+B를 누르고 이상하게 느껴진다면 언제든 나나 피그마에 연락해서 편하게 이야기해줬으면 주길 바란다. 크롬북을 사용하든 세계 최악의 키보드를 사용하든 상관없다. Chalkboard를 사용해도 괜찮다.