피그마, Font 그리고 개발

웹폰트가 실제 서비스 될때 알아야할 두가지 사항

피그마로 직접 그린 이미지

필자는 디자인 작업시 폰트 사용에 관해서는 구글 폰트를 사용한다.

폰트의 종류도 많고 특히, 웹개발에 최적화가 되어 있어 별다른 신경쓰지 않고 개발에 적용할 수 있어서다.

피그마를 메인 디자인툴로 쓰기 전에는 포토샵, 스케치를 사용했다.

이때 기억을 떠올려보면,

먼저 구글 폰트 사이트에서 프로젝트에 적용할 예비 폰트 리스트를 스크랩한다.

스크랩한 폰트들에 프로젝트의 주요 키워드나 단어들을 넣어보고 최종 리스트를 선정한다.

최종 리스트의 폰트를 다운로드 하고 컴퓨터에 인스톨 한다.

디자인 시안에 최종 리스트 폰트들을 적용하고 프로젝트에 사용할 폰트를 결정한다.

왜 이렇게 번거로운 과정으로 진행했을까?

이런 과정을 거쳐야 기존 디자인툴에서 폰트를 사용할 수 있었기 때문이다.

이는 필자가 피그마를 사용해본 순간 바로 디자인툴을 갈아탄 이유이기도 하다.

피그마로 직접 그린 이미지

피그마에서는 위와 같이 구글이 추천해주는 타이틀 폰트와 어울릴만한 본문폰트를 정하는 과정을 쉽게 할 수 있다.

피그마툴에서 폰트 리스트를 보면 시스템 폰트에 구글 폰트가 기본 적용되어 있기 때문이다.

이는 피그마가 웹기반 디자인툴이기에 가능한 것이다.

피그마로 직접 그린 이미지

웹폰트가 실제 서비스 될때 알아야할 두가지 사항이 있다.  

웹폰트는 다운로드 시간만큼 렌더링이 느려진다.

한글 웹폰트는 파일 용량이 영문 웹폰트에 비해 사이즈가 무지 크다.

다운로드 시간과 관련하여 렌더링을 하는 방식에는 두가지가 있다.

FOIT ( Flash of Invisible Text ) 방식과 FOUT ( Flash of Unstyled Text ) 방식이다.

FOIT는 다운로드가 될때까지 텍스트가 렌더링 하지 않다가 다운로드가 완료되면 텍스트를 보여주는 형식이다.

FOUT는 다운로드 되기전에는 시스템 디폴트 폰트로 텍스트를 보여주다가 다운로드가 완료되면 해당 폰트로 텍스트를 교체하는 형식이다.

출처 : https://www.w3schools.com/Css/css3_fonts.asp

출처 : https://d2.naver.com/helloworld/4969726?fbclid=IwAR3_12Ifl9-yM0TP_21XFNN6Pl3PVYuMH9kLPPFVclfdyO

위의 두 이미지는 폰트의 파일 형식과 브라우저별 지원 현황 및 파일 사이즈에 대한 것이다.

woff2를 사용했을때 가장 용량이 적은것을 알수 있다.

다만 우리가 서비스 하는 제품이 각 브라우저의 구버전까지 지원한다면 최적화는 일정부분 포기해야 한다.

출처 : https://www.youtube.com/watch?v=MyqvqmjMJ6I&feature=emb_logo

위 그래프를 통해 한때 90% 이상의 점유율을 가진 익스플로러의 종말이 다가오는것을 볼수 있다.

아직까지 우리 주변에는 익스플로러를 사용하는 분들이 많이 있다.

이로 인해 웹기반 서비스를 하는 회사들이 폰트 최적화를 못하고 있는 경우도 있다.

위의 내용들을 알지 못하는 사용자들은 그저 서비스를 제공하는 회사탓 할거다.

필자는 익스플로러의 진짜 종말이 왔으면 하는 바램이다.