마비노기 재우's AI 다운로더 - 05 '프레이머 모션 적용'

완성한지는 좀 되었지만 트러블슈팅도 해야하고, 욕심내던 기능을 끙끙대던 탓에 보고글 작성이 늦었다.

 

 

아직 반응형 웹을 다 설정하지 못했지만 2열 그리드로 짜여져있다. AI 생성 관련되어 자잘한 버그도 전부 고친 상태이다.

 

 

모바일 접속에 대한 피드백이 계속해서 왔었다. 처음엔 컴퓨터 게임 AI 다운받는데 모바일로 접속할거라 생각하지 않아서 후순위로 뒀지만, 뭐 업데이트 할 때 마다 계속해서 언급되길래

 

 

모바일 감지 라이브러리를 다운받아 빠르게 해결했다. 전세계적으로 몸비트는 것을 싫어하는 개발자들에게 축복 있으라! 이게 없었다면 반응형 웹으로 어떻게든 몸비틀면서 모바일 감지를 하려고 했는데, 지금 생각하면 굉장히 끔찍한 방법인 것 같았다......

 

 

설명 모달창에도 변화를 많이 주었다. 프레이머 모션을 이용해 부드럽게 페이드인 하는 부연 모달을 만들었다. 

 

말이 나와서, 프레이머 모션에 대해 할 말이 제법 많다. 많은데.....가능한 줄여서 말하겠다. 얼마나 지긋지긋한 문제들을 겪었는지.....아무리 뒤져도 '3중으로 들어가는 컴포넌트의 애니메이션까지 감지하는 방법'같은 건 찾을 수 없던 좌절감이라던지......

 

프레이머 모션, 도중에 유툽 검색하고서야 알았는데 노마드 코더가 소개한 적이 있던 라이브러리였다. 하지만 독학으로 겪어봐야 기억에 남는 성격인지라 스스로 작업을 했는데, 애니메이션들이 생각만큼 유도리있게 움직여주질 않았다.

 

AnimatePresence

프레이머 모션을 뒤져밨으면 알겠지만 이 기능은  리액트에서 애니메이션이 끝나야 컴포넌트를 제거시키는 기능이다. 이것을 적용하면 돔 상에서 바로 컴포넌트가 비활성(삼항연산자 따위로)되었어도 애니메이션이 다~ 끝나고 나서야 비활성처리가 시작된다.

 

이것을 다루면서 에러를 겪는다면, 딱 3가지만 기억해라.

1. <AnimatePresence mode='wait'> 기억해라.

2. 모션들어가지 않아도 보험삼아 스타일드 컴포넌트를 styled(motion.div)로 만들어놔라.

3. 끝까지 작동되어야하는 애니메이션에는 key를 꽂는거 잊지마라.

 

1번에 대해서는 공식 문서

https://www.framer.com/motion/animate-presence/

AnimatePresence | Framer for Developers

이 페이지의 중간 부분 즈음에 설명이 있다. sync는 디폴트값, wait은 애니메이션이 들어갈 경우 이미 존재하는 애니메이션이 종료될 때 까지 기다리는 옵션을 부여한다.

 

https://jaewoo-s-ai.vercel.app/

React App

 

배포 들어간 내 앱에 들어가 AI 보기를 클릭해보면 어떤 느낌인지 알 수 있을 것이다. 메인 화면의 애니메이션이 종료된 다음, 리스트 애니메이션이 출력된다. 반대도 마찬가지다.

 

2번에 대해서는 그냥 타입스크립트 쓰는 것과 같은 논리로 쓰면 된다. 작업 효율과 편의성을 높이기 위해 타입 스크립트를 쓰는 것이 아닌가? 마찬가지다. 그냥 쑤셔넣고 나중에 '어 왜 애니메이션 적용이 안되냐'할 일을 방지하자.

 

3번에 대해서는 각각의 애니메이션에 고유 키가 있어야 AnimatePresence 가 제대로 작동할 수 있다. 공식문서를 보면 없어도 작동은 하는 것 같은데, 나처럼 한 페이지에 여러 개의 애니메이션을 쑤셔넣었으면 그냥 안전빵으로 키까지 설정하는 것이 좋다고 본다. uuid같이 별 화려한 것까지 붙일 필요는 없고, 그냥 단순 텍스트로 'ani001' 이런 식으로 넣으면 된다.

uuid를 넣으면 매 순간 다른 키가 생성되기 때문에 전혀 다른 애니메이션으로 인식된다. 키 = uuid로 알고 삽질한 걸 생각하면.......

 

 

아무튼 프레이머 모션도 얼추 적응해서 적용에 끝났었다. 여기서 익힌 애니메이션 키는 포트폴리오 만들 때에도 적용할 예정이다.

 

 

다음 글은 트러블 슈팅이다.