fabric.js에서 폰트에 대한 고찰

글을 작성한 계기

기존에 fontFamily에 폰트 스타일을 단순하게 적용하는 방법밖에 몰랐지만 이번에 우리 뷰어 서비스에 텍스트 필기를 넣게 되면서 생겼던 여러 폰트 스타일이 적용이 안되는 이슈를 확인하면서 확인한 내용에 대해서 정리하려고 한다.

 

새롭게 알게된 내용에 대한 정리

• 폰트 파일은 사실 여러개의 파일들로 나누어져 있다. (하나의 파일로만 받을 수 있다.) 각 파일마다 지원하는 텍스트 범위가 다르다.
• 폰트 파일 하나의 용량은 생각보다 크다.(대략 2MB) 하지만 서버를 통해 받아오면 압축해서 오기 때문에 0.03MB정도로 오게 된다.
• 하나의 폰트 파일이 모든 언어를 지원하지는 않는다. (대략 중국어의 폰트 용량이 가장크고 영어가 가장 적다.)
• 한국어 지원 폰트여도 모든 글자를 포함하지 않을 수 있다. (도현체의 경우 '롷'는 지원하지 않는다.) 
  • '바람이 롷갔다.' 라고 입렸했을때 도현체로 변경해보면 롷만 빼고 폰트 스타일이 변경이 된다.
• 같은 글자의 경우도 서로 폭이 다를 수 있다. (예를들어 A와 B가 같은 폰트여도 너비가 다를 수 있다.) 모든 문자가 같은 너비를 가지는 폰트를 고정 폭 폰트라고 하고 코드를 작성할 때 주로 고정 폭 폰트를 사용한다.

Fabric.js에서 폰트 스타일 사용 회고

우리 서비스는 내부에 Fabric.js에 Textbox를 활용해서 텍스트 입력이 가능한 필기를 구현하려고 했다. 그 과정에서 여러 폰트 스타일을 지원해야하는 상황이였다.

 

(activeObject as any).set('fontFamily', fontFamily);

this.canvas.requestRenderAll();

 

위와 같은 코드를 통해 생성한 Textbox에 폰트 스타일을 지정한후에 캔버스를 렌더링하도록 로직을 작성했다.

하지만 실제로 폰트의 스타일이 일부만 바뀌었다. 안되려면 다 안되지 왜 일부만 적용이 됐을까?

 

원인은 CDN 서버로 부터 폰트 요청을 했을 때 한 번에 모든 텍스트의 정보가 들어있는 폰트파일이 아닌 나뉘어진 폰트 스타일의 파일을 받으니 발생한 문제였다. 그래서 용량이 작은 파일은 바로 받아서 폰트 스타일이 변경됐지만 용량이 큰 파일의 경우 다 받는걸 기다리지 않고 폰트가 없으니 기본 시스템 폰트로 적용이 됐던거다.

 

그럼 어떻게 하지?

 

해결 방법 후보 1

 

(activeObject as any).set('fontFamily', fontFamily);

this.canvas.requestRenderAll();

setTimeout(() => {
	this.canvas.requestRenderAll();
}, 1000);

 

비동기 처리를 통해 1초뒤에 한 번더 렌더링 하는 방법이다. 이러면 처음에 일부만 폰트 스타일이 변경되고 1초뒤에 변경 되지 않은 폰트 스타일도 변경된다.

하지만 이 방법은 단점이 있다. 사용자는 중간에 폰트 스타일이 살짝 바뀌니 조금 어색하게 느낄 수 있고 인터넷이 급격히 느린 환경에서는 폰트 스타일이 여전히 제대로 반영이 안될 수도 있다. 1초 사이에 나머지 폰트 파일을 못 받아오는 경우가 있을 수 있기 때문.

 

어색한 부분을 수정하고자 1초를 0초로 바꾸면 아직 폰트 스타일 파일을 받아오지 못해서 폰트 스타일이 바뀌지 않는다.

 

해결 방법 후보 2

 

쪼개져 있는 폰트 스타일 파일을 하나로 한 번에 불러오거나 다 불러올때까지 기다렸다가 폰트가 적용되게 하면 되지 않을까?

 

일단 이 방법은 우리 서비스는 하나의 와이파이에 수십명이 한 번에 요청을 하는 서비스이기 때문에 인터넷 속도가 급격하게 늦어 폰트 스타일이 여전히 정상적으로 받지 못할 수 있다는 단점이 있다.

 

해결 방법 후보 3

 

웹뷰 서비스이니 네이티브 앱에 앱을 다운로드 받을때 미리 폰트 파일을 같이 다운받도록 하면 어떨까?

 

굉장히 좋은 방법이지만 이 문제도 허점이 존재한다. 우리 서비스의 경우 앱에서 했던 필기들이 웹에서도 동기화 돼서 보여야한다. 

하지만 앱에서 폰트 스타일을 가져와서 앱에서는 정상적으로 노출이 돼도 웹에서는 앱내에 있는 폰트가 없으니 마찬가지로 새로 웹 폰트를 받아와야한다는 문제가 있다. 즉 폰트 스타일의 동기화가 안된다.

 

해결 방법 후보 4

 

앱에서만 필기의 저장이 되니 네이티브에 있는 폰트 파일을 이용해 작성한 필기를 svg로 저장할때 path등의 속성을 사용해 다 그려서 서버에 저장하면 어떨까?

 

이 방법을 사용하면 앱에서 작성한 필기를 웹에서 동기화 해서 볼 수 있다. 하지만 모든 텍스트를 다 벡터 데이터로 그려서 서버에 저장하면 용량이 커져서 서버도 부하가 된다.