마비노기 재우's AI 다운로더 - 06 '트러블 슈팅'

트러블 슈팅.....따로 시간을 할애해서 해결한 문제는 하나 밖에 없고 나머지는 시행착오 투성이였지만, 그래도 기록은 해놔야지.

 

1. 모션 에러

이력서의 트러블 슈팅에도 적어놨던 것이다. 또한 이전 글의 프레이머 모션 에러에 대해 적은 부분인데, 프레이머 모션에 생각보다 많은 기능이 있고, 그에 맞는 코드 규격이 달라서 챗 GPT의 도움을 받아도 크게 도움을 얻기 힘들었다. 다른 기술 블로그를 뒤져도 내가 원하는 기능과는 거리가 멀고.....

내가 원하던 기능은

 

메인 페이지
컴포넌트 1	애니메이션(Animatepresence 적용)
컴포넌트 2	애니메이션(Animatepresence 적용)	자식 컴포넌트	애니메이션(Animatepresence 적용)
컴포넌트 3	애니메이션(Animatepresence 적용)

 

이런 모양새라 할 수 있었다. 딱 봐도 첩첩산중으로, 컴포넌트 안에 자식 컴포넌트까지 적용되는 통일된 Animatepresence가 필요했다. 알아낸 과정은 매뉴얼 안 읽는 초심자의 삽질로 점철되어서 생략하고, 결과만 놓고 보자면

 

1. 한 페이지에 가능한 하나의 < Animatepresence >를 쓰자.

2. 한 < Animatepresence >안의 애니메이션들은 여러 개의 애니메이션이 발동되어도 키가 같다면 일반적인 애니메이션처럼 이전 것이 뚝 끊기고 작동한다.

3. 여러 개의 < Animatepresence >를 쓴다 해도 키 중복에 신경써야한다. 문제가 생길 경우 해당 키를 가진 애니메이션만 건드리면 된다.

 

라는 사실을 알아냈다.

 

 

덤으로 챗 GPT나 다른 블로그들 보면 애니메이션 세팅을 변수화해서 쓰라고 하는데, 조금씩 수치를 바꿔야하는 애니메이션들이 많거나 하나 뿐이라면 그냥 관리하기 편하게 해당 motion.div에 때려박는 것을 추천한다. 코드가 지저분하다고 생각할 수 있지만 반대로 문제가 생기면 굳이 변수 찾아 두 번 발걸음할 필요 없이 한 번에 관리가 가능하다.

 

2. FOUC

페이지에서 컴포넌트들이 로드될 때 깜박이는 이슈가 있었다. 컴포넌트들을 처음 로드하면 모든 글자들이 깜빡이는 것이 아닌가! 너무 빠르게 지나가서 움짤로도 못 찍었지만, 확실히 무시할 수 없는 수준이었다. 처음엔 최적화 문제인 줄 알고(useState를 남발한 상황) 이를 최적화하면 끝날 줄 알았지만, 생각보다 문제가 오래갔다.

이것저것 알아보던 도중 스타일드 컴포넌트의 자체 문제 중 하나로, 글로벌스타일을 지정할 때 폰트가 리랜더링되는 이슈라고 했다. 

이걸 해결하기 위한 과정들로는 처음엔 글로벌 스타일로 지정되던 폰트를 모든 컴포넌트의 스타일드 컴포넌트에 개별로 설정하는 것으로 당연히 실패였다. 다음은 웹폰트를 구해보는 것이었는데, 마비옛채는 웹폰트를 찾는 것이 너무 힘들었다. 결국 마지막으로 

 

 

CSS로 폰트만 따로 빼서 그걸 넣는 것으로 해결했다. CSS 안쓸려고 스타일드 컴포넌트를 쓰는 건데 이래도 되는건가 싶기도 하다만, 에러를 해결하려면 이것이 직빵이니 뭐.....