프로덕션 빌드에서만 들어갈 수 없는 페이지 그리고 웹폰트의 증발
** 페이지에 안들어가져요..
어떤 이벤트 랜딩페이지에 안들어가진다고 해서 확인해봤더니, 로딩 후 메인으로 리다이렉트 되는 것이었다. 최근에 바꾼 것이 없는 페이지여서 다른 심각한 문제가 있는 줄 알고 로컬 개발 모드와 개발 서버에서 확인해 봤는데 잘 접속이 되었다. 그리고 다른 랜딩페이지들도 확인해 봤는데 전부 같은 증상이었다.. 일단 공통점이 EventLanding 라우터 그룹에 있는 페이지들이어서 라우터 설정 파일도 봤는데 최근에 수정내역이 전혀 없었다. 문제 페이지들도 최근 수정 내역이라고는 css 간격 수정 정도이기 때문에 영향이 있을거 같지 않았다.
다른 페이지는 다 되고 왜 이 라우터 그룹만 문제가 있는 걸까, 데브에서는 되는데 왜 프로덕션에서는 안되는 걸까.
프로덕션 빌드만 다른 부분
데브와 프로덕션에서 다르게 돌아가는 것을 먼저 봤는데, 네이버 애널리틱스와 같은 로깅하는 것들 뿐이었다. 하나씩 확인해봐도 이것들이 문제는 아니었다.
프로덕션과 데브를 왔다갔다 하면서 문제 페이지들 접속할 때 예외 중단점을 계속 봤다. 프로덕션에서 결정적으로 문제가 되는 부분이 Error: Loading CSS chunk 파일 이름 failed. (/css/파일 이름.css) 이 오류인 것 같았다.
문제는 해당 파일 링크로 들어가면 멀쩡히 잘 존재하는 파일이었다. 분명히 존재하는 리소스인데 로드할 수 없다고 에러가 뜨는 게 당황스러웠다.
문제 페이지를 다시 살펴보고 해결하기
데브에서는 들어갈 수 있으니 일단 들어가서 페이지를 보다보니 뭔가 밍숭맹숭했다. 메인페이지들에서는 사용하지 않는데, 이벤트용 랜딩페이지에서는 종종 독특한 폰트들이 사용된다. 그런데 그런 폰트 느낌이 안나는 것이었다.
진짜 문제는 해당 웹폰트들이 불러와지지 않는 것이었다.
웹폰트 링크(깃허브)에 들어가보니 404를 마주했다. 개발 빌드에서는 css 코드가 js 파일로 불러와지지만, 프로덕션 빌드에서는 css 파일로 컴파일 되기 때문에 내부 오류로 인한 파일 자체의 로드 실패가 되었던 것 같다.
일단은 오류있는 웹폰트 링크들을 눈누에 있는 링크로 대체하니까 문제가 해결되었다.
범인 검거와 향후 계획
404를 안겨준 폰트의 링크들은 https://webfontworld.github.io/ 의 링크들이었다. 예쁜 무료 한글 폰트를 찾기도 쉽고 사용하기 쉽게 잘 정리해 둔 곳이어서 종종 사용했었는데, 이렇게 갑자기 사라질 줄을 몰랐다. 그리고 폰트 불러오는 링크의 오류가 이런 결과를 내는 것도.
기본 폰트로 사용하고 있는 프리텐다드는 저번 jsdelivr 사건을 계기로 프로젝트에 파일을 포함시켜버렸다. 그리고 꼭 필요하지만, 사용하는 글자수가 엄청 적은 폰트는 서브셋 폰트로 만들어서 사용했다. 결국 웹폰트를 불러와서 사용하는 부분은 이벤트 랜딩페이지 뿐이다.
(기본 폰트 이외의 폰트 사용에 대한) 개인적인 처리 방침
- 구글 폰트에 있으면 구글 폰트 링크를 사용한다. (한글 폰트 별로 없지만)
- 사용하는 부분이 극히 적으면 이미지로 사용한다.
- 눈누에 있는 링크를 사용한다.
그 외, 최소한 눈누에 있는 폰트 쓰라고 디자이너를 설득한다, 눈물을 머금고 폰트 파일을 올린다. 귀찮지만 서브셋 파일을 만든다. 등등…
Leave a comment