TL;DR
다양한 브라우저를 이용하는 여러 사용자가 렌더링 되는 글자에 대해서 같은 시각을 가지진 못할 것이다.
Figma는 협업 도구이다. 작업자들은 환경에 구애받지 않고 같은 결과물을 볼 수 있어야 한다.
Figma는 자체적인 폰트 렌더러가 있는데, 렌더링 과정에서 Antialiasing 을 수행한다.
그로 인해 브라우저와 Figma 사이에 시각적인 차이가 있는 것이다.
저는 스타일링 작업을 할 때 디자이너의 의도를 최대한 살리려고 노력하는 편입니다. 그 방법의 하나로 브라우저에서 어떤 엘리먼트를 캡처한 다음, Figma의 시안과 겹쳐서 확인하는 방법이 있는데요. 과정은 이러합니다.
이렇게 스타일링하는 엘리먼트를 캡처해서
Figma에 올린 다음 투명도를 주고 원래 시안과 겹쳐서 확인하면 디자이너의 의도와 차이가 있는 부분을 명확하게 걸러낼 수 있습니다.
여느 때와 같이 열심히 디자인 시안을 확인하며 스타일링 작업을 하던 저에게 사용자분들이 받을 이메일 템플릿을 만들 일이 생겼었습니다. 위에 소개하던 방법으로 디자이너의 의도를 반영하고 이메일 템플릿의 시인성을 높이는 작업을 하다가 한 가지 이상한 점을 발견했습니다.
폰트의 굵기가 달라보이지 않나요? 사진에 보이는 것처럼 브라우저에 표시되는 글자와 Figma에 표시되는 글자의 모양이 조금 달라 보이는 현상이 있었는데요. 실제로 inspector로 브라우저에 표시된 글자의 weight를 한 단계 내려보니, Figma에 표시된 글자의 모양과 흡사하게 바뀌는 것을 확인할 수 있었습니다. 왜 이런 현상이 발생하는지 그 이유를 찾아보았습니다.
이 글을 읽으시면, 디자인 시안에서의 글자랑 브라우저에서의 글자가 왜 다르게 보이냐는 디자이너의 질문을 받았을 때 의연하게 대처하실 수 있을 겁니다.
모든 브라우저는 자체적인 렌더링 엔진을 가지고 있다는 사실을 웹 개발자분들은 알고 계실 겁니다. 이 브라우저 엔진들이 글자를 렌더링할 때는 각기 다른 방식으로 다듬는 작업을 수행합니다. 그렇다면 자연스럽게, 모든 사용자가 같은 모양의 글자를 볼 수는 없을 것입니다. 이것은 글자의 모양뿐 아니라 HTML이나 Javascript에서도 똑같습니다. 그렇기 때문에 cross-browsing이라는 단어도 있는 것이고, font-family를 적용할 때도 우선순위가 높은 것부터 여러 개 정할 수 있게 된 것일 겁니다. (사용자의 사용 환경을 통일할 수 없으니, 여러 개의 폰트를 제공해 디자인 의도에 가까운 경험을 할 수 있게)
글자가 모든 사람에게 다르게 렌더링 되는 것은 웹의 현실입니다. 모든 사용자의 웹 환경을 통일하지 않는 이상, 이것에 대해서 할 수 있는 일은 없을 것입니다.
반면, Figma는 디자인 협업 도구입니다. 만약 작업자의 환경에 따라 Figma 시안 상 폰트가 다르게 표시된다면 어떨까요? 작업자들 사이에 큰 혼란이 생기고 디자인을 진행하지 못할 것입니다. 이런 상황을 방지하기 위해 Figma는 자체적인 글자 렌더러를 사용한다고 하는데요. 만약 이 렌더러가 없다면 Figma를 구동하고 있는 OS, 브라우저, 브라우저의 버전 등 여러 요인에 의해 글자가 다르게 표시될 것입니다.
이 Figma의 글자 렌더러는 글자를 더 부드럽게 표시하기 위해서 픽셀 단위의 Antialiasing 을 수행하는데요. Antialiasing 을 수행하면 글자 경계에 있는 계단 현상이 제거되어, 예상하는 것보다 조금 더 얇게 표시됩니다. 이 과정 때문에 위 사진처럼 figma에 있는 글자가 브라우저보다 더 얇게 보이는 것입니다.
이렇게 찾아본 자료들에 따르면, 브라우저가 다르게 표시하는 것이 아닌 Figma가 다르게 표시하는 것으로 결론을 내릴 수 있을 것 같은데요. 그럼에도 불구하고 Figma와 흡사하게 표시하고 싶다면 font smoothing 속성을 사용하면 됩니다. 어떤 분은 이런 불일치를 해결하기 위해 아래 코드 스니펫을 자주 사용하신다고 하네요.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: never;