문제발생
회사에서 애니메이션이 들어간 랜딩페이지를 제작해 달라고 하였고 'Lottie'를 이용하여 애니메이션을 제작하고 홈페이지에 붙였다.
json파일을 디자이너분에게 받아서 lottie관련 package를 설치하여 붙이면 끝인 작업이라 로컬에서 잘 나오는 것 까지 확인하고 룰루랄라 배포를 하고 확인하는데
에러메세지와 함께 이미지가 깨져서 보이는 불상사가 발생하였다.
로컬
개발서버
실제로 개발서버에서 d=" 저부분의 코드가 달랐다.
삽질 타임라인
- 파일의 문제일까?
깨지는 부분이 폰트부분이였는데 거기를 폰트말고 이미지로 작업해서 달라고했지만 여전히 문제가 발생하였다. - 패키지의 문제일까?
react-lottie, react-lottie-player, lottie-web 모두 사용해보았지만 여전히 문제가 발생하였다. - 로티 자체의 문제일까?
하지만 구글링을 해도 어디서도 나와 비슷한 문제를 겪은 사람이 없었다.
로티 공홈에 있는 이미지를 붙여도 같은 현상이 일어났고 배포에서의 문제가 확실하다 생각하여 next.js 깃헙을 들어가서 이슈를 뒤지기 시작하였다. 이틀째 문제를 해결하지 못해서 지푸라기라도 잡는 심정으로 open섹션부터 closed섹션까지 svg와 관련한 이슈들을 찾아나가기 시작했는데 closed된 한 이슈를 발견하였다.
현재 나의 버전 13.0.3 부터 lottie를 사용했는데 깨진다는 이슈까지 모든게 일치했었다 !! 😭
감동의 눈물을 흘리며 밑으로 쭉쭉 내려가며 해결방법을 찾아보았고
Fix is merge, but not yet released as of v 13.0.4
문제는 이미 머지되었고 배포를 기다린다는 메세지가 있었다 !
문제 해결
그래도 기다릴수 없는 나는 이거와 관련된 해결방법들을 뒤져보았고 임시방편으로 next.config.js에 swcMinify: false를 함으로서 해결하였다는 사람들을 보고 해결하려했지만 근본적인 해결방법이 아니라 더 찾아보기 시작했다.
그러다가
이 이슈와 관련된 문제를 해결하고 머지되었다는 Pull request를 찾았고
8일전에 업데이트된 버전에서 적용이 된걸 확인하고 13.0.5버전으로 업데이트으로 함으로서 문제를 해결하였다! ✨
문제 분석
결국 문제는 swc버전 문제인 것 같았다. swc란 next.js에서 만든 자바스크립트 빌드 툴으로 next.js 12부터는 바벨말고 swc가 자동으로 트랜스파일링을 해주고 config.js에 swcMinify를 설정해주면 코드 경량화 작업을 해주는 terser작업까지 대체해준다.
하지만 계속 되는 업데이트로 코드를 경량화하는 swc와 next.js사이의 버전이 맞지 않았고 svg이미지 파일 일부 코드를 지워버리는 버그가 발생했던것 같다.
물론 이 이슈는 13.0.5가 릴리즈되면서 겪지않을 문제이지만 이런식으로 문제를 해결해 나간 타임라인을 남기기 위해 기록해 본다.
