heroku에서 headless chrome 한글 깨짐 문제

 

 

✅ 문제

react+node.js로 사진 크롤링 후 티스토리에 자동으로 포스팅하는 프로그램을 만들었다.

로컬에서 잘 돌아가는 걸 확인한 후 heroku를 통해 배포했는데 배포 후 크롤링은 정상적으로 다 잘 되고 있으나 사진의 한글이 네모네모로 깨지는 현상이 발생했다.

 

headless chrome의 문제가 워낙 많았기에 처음에는 chrome option의 lang 문제인줄 알았다.

그래서 utf8 형식으로 인코딩 하는 방법 알아보기로 했다.
근데 긁어온 data를 출력해보니 한글은 잘 나오고 있었다.
단순히 screenshot만 하는 작업인데 왜 캡쳐만 하면 문제가 생기는지 몰라서 chrome option 줄 수 있는 건 다 줘봤다.

 

무수히 많은 시도들...

 

저 시도 중 아무것도 원하는 결과를 얻을 수 없었다.

심지어 구글에 영어로 검색해봐도 없고 한글로 검색해봐도 저 상황에 대해 이게 문제입니다! 하고 명확하게 설명하는 글은 없었다.

 

 

✅ 해결

결국 계속 구글링하던 중 일본에서 heroku, headless chrome, screenshot 내가 원하는 키워드 3개가 모두 들어있는 깃헙 글을 찾을 수 있었다.

https://github.com/isamu/heroku-screenshot

GitHub - isamu/heroku-screenshot

 

그중 주목할만한 점은 아래의 내용이다.

 

 

이를 파파고의 힘을 빌어 번역해보면 다음과 같다.

 

 

Heroku 환경에서는 표준에서는 일본어 폰트가 표시되지 않기 때문에 문자가 깨집니다.
글꼴을 준비해야 합니다.
heroku는 font config에 대응하고 있기 때문에 소스 직하에 .fonts를 만들고
거기에 tts 글꼴을 놓으면 그 글꼴을 사용할 수 있습니다.

 

 

문제는 heroku 자체에 한글을 지원하는 폰트가 없기 때문에 발생하는 문제였다.

크롬에서 한글이 깨지는 것처럼 영어는 상관이 없으나 heroku에 한글 폰트가 없어서 한글이 깨지고 있던 것이다.

 

루트 디렉토리에 .fonts 폴더를 만들고 .fonts에 Noto Sans KR.ttf 파일을 넣고 배포해본 결과,

드디어 한글이 정상적으로 있는 사진을 얻을 수 있었다.

 

이제 한글 안 깨짐!

 

 

🔍 참조

https://github.com/isamu/heroku-screenshot