font.json 최적화(글리프 압축)

포인트(문제 해결법)

• 필요한 글자 모양(glyph)을 정리하자.
• Json 파일에 필요한 문자만 남기고 지우자.

문제 발단

근래 포트폴리오(모음) 사이트를 업데이트 하면서 3D 텍스트를 넣었습니다.
라이브러리가 추가된 만큼 성능 개선을 하던 중

프로젝트에 사용되는 글자 모양은 ‘M’, ‘r’, ‘.’ ‘C’, ‘h’, ‘u’일 뿐인데…

Pretendard.json 파일(11.3MB)의 용량을 줄일 수 없을까?라는 생각이 들었습니다.

웹 폰트에서도 글리프 압축이 존재하니까요.
Pretendard.json 파일을 확인해 보니 웹폰트 처럼 글리프 속성으로 모양을 정하고 있었습니다.

오호 그렇다면 여기서 내가 필요한 것들만 두고 필요없는 것들을 제거하면 되겠다는 생각이 들었습니다.

const modifiedGlyphs = {};  //수정된 글리프를 저장할 곳

for (let i = 0; i < targetText.length; i++) {
	const char = targetText[i];
  const charKey = char in fontData.glyphs ? char : char.toUpperCase();
  if (charKey in fontData.glyphs) {
     modifiedGlyphs[charKey] = fontData.glyphs[charKey];
  }
}

변수 fontData에 폰트를 담고 반복문을 통해서

대,소문자를 먼저 체크하고

charKey가 fontData.glyphs 객체에 존재하는 키라면, 해당 글리프를 modifiedGlyphs 저장합니다.

잘될 것이라 생각했는데, 만들어낸 json 파일은 오류가 났습니다.
알고 보니 Pretendard.json 파일에는 글리프 말고도 다른 여러 속성들이 필요합니다.

속성은 폰트마다 다를수도 있으니 글리프가 아닌 속성들은 그대로 복사해 가져와야 겠습니다.

const modifiedFontData = {
	...fontData,
  glyphs: modifiedGlyphs
};

11.3MB 에서 5KB 까지 줄였네요.!

혹시 나중에도 변환 코드를 사용할지 모르니까, 깃허브에 배포해놨습니다.


https://chuhongkyu.github.io/font-json/