서버리스 웹브라우저 한글폰트 적용하기

문제점

한중일 3개 국가는 프로그래밍 할 때 항상 폰트가 문제 됩니다

puppeteer 을 사용하면서 크로미움을 쓰는데 한글이 지원되지 않습니다

(로컬 윈도우에서 실행시에 로컬PC에 이미 한글폰트가 깔려있어서 한글이 제대로 나옵니다)

​서버리스로 함수 배포하면 한글폰트가 없는 크로미움 웹브라우저가 배포 되기 때문에 한국어 사이트 접속시 한글이 다 깨집니다

한글폰트적용법

한글폰트를 적용하는 두가지 방법이 있습니다

첫번째. 웹폰트를 적용한다

두번째. 크로미움 브라우저를 만들고 한글폰트까지 묶어서 배포 한다

​

첫번째 방법. 웹폰트로 한글폰트 적용하기

Step 1. 한글폰트를 다운받기

Step 2. S3 에 한글폰트를 업로드 합니다

Step 3. chrome-aws-lambda 모듈을 사용해서 S3 에 올린 폰트를 적용한다

 

Step 1. 한글폰트를 다운받기

구글 폰트 사이트에 접근해서 NotoSansKR Regular.otf 파일을 다운 받습니다

구글 폰트 사이트에서 한글폰트 다운받기

7메가짜리 파일을 다운받을 수 있고

압축을 풀면 2메가짜리 Regular.otf 파일을 확인할 수 있습니다

NotoSansKR 폰트

Step 2. S3 에 한글폰트를 업로드 합니다

NotoSansKR Regular.otf 을 AWS S3 에 업로드 합니다

S3 업로그 후에 ARN 을 확인합니다

Step 3. chrome-aws-lambda 모듈을 사용해서 S3 에 올린 폰트를 적용한다

https://www.npmjs.com/package/chrome-aws-lambda

안타깝게도 puppeteer 에서는 한글폰트를 적용하는 함수가 제공되지 않습니다

그래서 chrome-aws-lambda 모듈을 사용해서 S3 에 올린 폰트를 적용하는 것 입니다

    try {
        await chromium.font(KOREANFONT);
        browser = await chromium.puppeteer.launch(await getChromeBrowserArgument());
        page = await browser.newPage();

chromium.puppeteer.launch 를 실행하기 전에

chromium.font 로 S3 에 올려놓은 한글폰트를 적용해서 사용하면 됩니다

KOREANFONT 라는 변수에 S3 한글폰트 ARN 을 적용하시면 됩니다

 

두번째 . 한글폰트까지 크로미움에 묶어서 배포하는 방법

http://fd0.hatenablog.jp/entry/2017/09/10/223042

일본분이 자세히 정리한 글이 있어서 링크를 걸었습니다.

대략 설명한다면

서버리스 람다는 리눅스 환경이니

윈도우 개발 PC 에서 도커로 리눅스 환경을 만들고 거기에서 한글폰트를 적용하고 컴파일 합니다.

그 컴파일 한 파일을 다시 윈도우 개발 PC 에서 묶어서 람다로 배포하는 방식입니다

​도커가 익숙하지 않다면 더 힘들어지는 상황으로 가지요

​

이거 따라해본다고 도커까지 파고 들었다가 엄청 힘들었던 기억이 있네요.

​

​그냥 쉬운 웹폰트 적용방법을 추천합니다

​

이런식으로 한글폰트 적용해서 람다로 잘 사용하고 있습니다

람다에서 웹브라우저로 캡쳐된 한글

​

​