요즘 IT업계에서 핫한 토스 앱에서 3D 애니메이션을 많이 보셨을텐데요!
저희 정신건강어플에 적용시키려고 찾아보니 정확히 어떻게 만들수 있는건지 나와있는 글이 많이 없는것 같아서 제가 작성해보려고 합니다.😋
(참고로 토스가 어떻게 정확히 3D 애니메이션을 구현하는지는 모르고 일단 비슷하게 따라해보는 방법입니다.)
저희 팀에서는 블렌더(Blender)라고 하는 툴을 이용해 3D 애니메이션을 제작해서 어플에 플러터언어로 적용시켜보는 방법을 써볼거에요! 재밌겠죠? ㅎㅎㅎ
블렌더(Blender)로 3D 오브젝트 애니메이션 만들기
- 블렌더(Blender)에서 3D 오브젝트의 애니메이션을 만든다
블렌더(Blender)에서 사용할 3D 오브젝트에 키프레임을 줘서 애니메이션을 만들어줍니다. 이번에는 편지지의 하트가 휘리릭 하고 회전하며 위로 이동해서 둥실둥실 위아래로 움직이는 애니메이션을 주었어요💌.
*블렌더에서 재생한 애니메이션 >>
3D 애니메이션 json파일로 내보내기
1. 블렌더에서 생성된 3D 애니메이션을 png로 내보내기
블렌더의 오른쪽 패널Output Properties에서Output경로를 설정해 주고File Format을PNG선택, 그리고 배경을 투명하게 내보내고 싶다면RGBA를 선택해주세요.
2. 에프터이펙트(Affter Effect)에서 PNG 파일 불러오기
에프터이펙트(After Effect)에서PNG파일을 모두 불러오고단, 파일이름은 숫자로 정렬되어 있어야 함.모든 프레임을1f으로 줄여주세요.
3. Bodymovin 플러그인 실행시키기
Windows(창)패널의확장명>Bodymovin플러그인을 실행시켜주세요.
*Bodymovin은 사용하고 있는 Adobe Creative Cloud에서 플러그인을 다운 받을 수 있어요.
Bodymovin을 실행시키면1f레이어들이 차례로 정렬되는게 보이면 성공💨!
4. LottieFiles 플러그인 실행시키기
Windows(창)패널의확장명>LottieFiles플러그인을 실행시켜주세요.
*LottieFiles는 LottieFiles 설치하기에서 플러그인을 설치할 수 있어요!😊
5. Json 파일로 내보내기
LottieFiles를 실행시키면 이렇게 창이 나와요. 우선Render Settings를 클릭해주세요.
Include image assets in JSON항목을 활성화시켜준 다음Save changes버튼을 눌러 저장해주세요!
내보내기를 진행할컴포지션을 선택하고Render버튼을 눌러서JSON파일을 받으면 오케이!🤗
재미있는 3D 모션 만들기💫
여기서 재미있는 3D 모션을 진행해볼건데요 ㅎㅎ😝
블랜더(Blender)에서 파일을 다른형식으로 내보내면 모바일에서 3D 애니메이션을 직접 손으로Zoon-InZoom-OutRotate까지 해볼수 있는 경험을 할 수 있어요!!👋🏻 시작해볼까요??
방금 진행했던 블렌더(Blender) 파일을 다시 열고, File > Export > glTF 2.0(.glb/.gltf)로 파일을 내보내주세요. 이걸 개발자님께 전달하면?!
짜잔!! 휴대폰에서 직접 손으로 터치하며 회전해보고 크기를 키워보고 줄이고 3D 인터렉션이 가능하답니다!🙌✨
>>아래 영상 참고
마무리하며..
UIUX 모바일 디자인을 하면서 좋은 인터렉션과 재미있는 인터렉션에 관심이 많아지는건 어쩔 수 없는것 같아요! 이번에 토스 애니메이션 따라해보겠다고 이런저런 우여곡절이 있었지만... 막상 해보고 나니 뿌듯하네요!!😍 정보가 많이 부족해서 쉽게 따라해보기가 어려웠는데 이 포스팅이 다른분들께 도움이 되었으면 좋겠습니다.
