[250319] 오늘의 TIL: 3D 캐릭터 애니메이션 적용 & 트러블슈팅

 

 

 

 

 

 

 

 

 

목차

---

Ⅰ. 과제 진행 내용 정리

📌 1. 과제 주제 & 구현한 기능

📌 2. 트러블슈팅 (문제 해결 과정)

 

Ⅱ. 오늘의 느낀 점

📌 1. 앱에서 애니메이션을 다루는 것

📌 2. 3D 캐릭터를 앱에서 활용하는 방향성

📌 3. UI 설계의 중요성

📌 4. 네트워킹을 통해 얻은 도움

 

Ⅲ. 내일의 목표

 

 

 

오늘은 팀원들과 아티클을 공유하고,

새로운 팀원들과

사업 이야기를 나누면서 오전을 보냈다.

 

점심 이후에는 피그마 템플릿을 확인하다가,

이전에 제작한 3D 캐릭터에 동작을 추가하고

이를 어플에 적용하는 과정을 진행했다.

 

처음에는 빠른 구동을 위해

gif를 json으로 변환하여 적용하려 했으나,

음악과 함께 넣으려다 보니

mp4 파일을 사용하게 되었다.

 

그러나 검증 과정에서 오류가 발생했고,

이를 해결하기 위해 고민하는 과정에서

팀원에게 Rive(리브)라는

애니메이션 툴을 추천받아

내일 시도해보기로 결정했다.

 

저녁에는 네트워킹 시간을 가졌고,

마지막 날이다 보니 친해진 멤버들과

편하게 대화하며 하루를 마무리했다.

 

 

업데이트 중..

---

Ⅰ. 과제 진행 내용 정리

 

과제 주제 & 구현한 기능

 

 

 

✅ 3D 캐릭터 애니메이션을 앱에 적용하는 과정 실험

• 기존에 제작했던 3D 캐릭터 모델을 앱에서 활용하는 방법을 실험했다.
• 애니메이션을 적용하기 위해 GIF → JSON 변환 방식과 MP4 삽입 방식을 테스트했다.
• 최적의 포맷을 찾기 위해 다양한 파일 형식을 검토했다.

 

✅ MP4를 활용하여 애니메이션과 음악 추가

• 단순한 캐릭터 애니메이션이 아닌, 경쾌한 음악을 함께 추가하기 위해 MP4 파일을 앱에 삽입.
• 하지만 앱에서 실행할 때 MP4 재생 오류가 발생.

 

✅ 앱에서 애니메이션 실행 테스트 & 검증

• GIF를 JSON으로 변환하여 적용 시도
• MP4 사용 시 실행 오류 발생 → 원인 분석 중
• 네트워킹을 통해 Rive를 활용한 대체 방안을 추천받음

 

---

트러블슈팅 (문제 해결 과정)

 

문제 : 앱 내에서 MP4가 정상적으로 실행되지 않는 오류

 

📍 상황:

• MP4를 사용하여 캐릭터 애니메이션과 배경 음악을 함께 적용하려 했지만, 앱에서 파일이 재생되지 않거나 로딩 중 멈추는 오류가 발생했다.

 

📍 해결 시도:

1. 파일 경로 문제 확인
   • MP4 파일이 로컬 스토리지에서 제대로 불러와지는지 확인.
   • 문제 없음.
2. Flutter에서 video_player 패키지 활용
   • video_player를 사용하여 MP4를 앱에서 실행하려 했으나, 일부 디바이스에서 비정상적인 종료 발생.
3. 포맷 변환 시도
   • GIF → JSON으로 변환하여 적용하는 방법을 테스트.
   • 하지만 JSON 애니메이션은 음악 삽입이 불가능하여 목적에 맞지 않음.
4. 대체 솔루션 탐색 (Rive 추천받음)
   • 네트워킹에서 팀원이 Rive를 추천해 줌.
   • Rive는 벡터 기반 애니메이션으로 가벼운 파일 크기 + 부드러운 실행이 가능하다고 함.
   • 내일 Rive를 테스트해볼 계획.

 

📍 배운 점:

• GIF, JSON, MP4 등 포맷에 따라 장단점이 다름.
• 앱에서 애니메이션을 구현할 때는 단순 실행뿐만 아니라 성능 최적화와 실행 안정성도 고려해야 함.
• Rive와 같은 경량 애니메이션 툴이 유용할 수 있음.

---

Ⅱ. 오늘의 느낀 점

 

앱에서 애니메이션을 다루는 것은 예상보다 복잡했다.

 

 

단순히 애니메이션을 넣으면 

자연스럽게 작동할 것이라 예상했지만, 

앱 환경에서는 다양한 제약이 존재했다.

 

 

• GIF는 로딩 속도가 빠르지만 음악을 추가할 수 없음.
• JSON은 부드러운 애니메이션을 제공하지만 제작 과정이 복잡.
• MP4는 영상과 음악을 함께 적용할 수 있지만, 디바이스별 호환성과 실행 오류 발생 가능성이 있음.

 

이러한 문제를 해결하기 위해서는

단순히 파일 변환이 아니라,

최적의 포맷을 찾고 앱 환경에 맞게

적용하는 과정이 필요함을 깨달았다.

 

---

3D 캐릭터를 앱에서 활용하는 방향성을 더 고민해야 한다.

 

 

애니메이션을 적용하는 것이 목표였지만, 

단순히 캐릭터가 움직이는 것 이상으로 

이 기능이 앱 내에서 

어떤 가치를 제공할지 고민해야 했다.

 

 

• 3D 캐릭터가 사용자 인터랙션과 연결될 필요가 있을까?
• 단순한 영상보다 유저가 직접 조작할 수 있는 캐릭터가 더 적합한가?
• 캐릭터가 앱 내에서 중요한 역할을 수행해야 의미가 있을까?

 

 

이러한 고민을 해결하기 위해,

일단 Rive를 사용해본 후,

애니메이션을 어떤 방식으로 활용할지

더 구체적으로 정리해볼 필요가 있다.

 

---

UI 설계의 중요성을 다시 한 번 실감했다.

 

 

현재 개발 중인 여행 일정 관리 앱도

 UI가 중요한 요소인데, 

오늘 진행한 애니메이션 적용 과정도

 결국 UI 설계와 연결되는 문제였다.

 

✅ UI 관점에서 고민해야 할 사항

• 앱에서 애니메이션을 활용하는 최적의 방식은 무엇인가?
• GIF, JSON, MP4, Rive 중 어떤 것이 UI와 가장 잘 어울리는가?
• 애니메이션이 UI/UX 경험을 방해하지 않고 자연스럽게 녹아들 수 있는가?

 

이러한 고민을 바탕으로,

내일 Rive를 실험하면서

UI 요소로서 애니메이션을 어떻게 활용할지

좀 더 구체적인 방향을 잡아야겠다.

 

 

---

네트워킹을 통해 새로운 기술과 솔루션을 알게 되는 것이 큰 도움이 된다.

 

 

오늘도 네트워킹을 통해

 Rive라는 새로운 툴을 추천받았고, 

내일 직접 실험해볼 기회가 생겼다.

이전에도 부트캠프를 통해 

다양한 정보를 얻었지만, 

직접 실험해보지 않았다면 

몰랐을 기술들이 많았다.

 

✅ 배운 점

• 혼자 해결하려 하기보다, 다른 사람들과 공유하며 해결책을 찾는 것이 훨씬 효율적이다.
• 기술은 단순히 많이 아는 것보다, 적재적소에 활용할 수 있는 능력이 중요하다.
• 새로운 툴을 알게 되는 것만큼, 이걸 어떻게 적용할지 판단하는 것이 더 중요하다.

 

---

Ⅲ. 내일의 목표

 

✅ Rive를 활용한 애니메이션 적용 실험

• Rive가 앱 내에서 원활하게 실행되는지 테스트
• 기존 MP4 방식과 비교하여 성능과 기능 차이 분석

 

✅ UI/UX 관점에서 애니메이션 최적화 방향 정리

• 앱 내에서 애니메이션이 어떻게 사용될지 구체적으로 설계
• 애니메이션이 단순한 장식이 아닌, 사용자 경험을 개선할 수 있도록 활용 방안 고민

 

✅ 여행 일정 관리 앱의 MVP 기능 정리 & 기획서 작성

• 피그마에서 핵심 기능을 정리하고 UI 기획 진행
• MVP에서 반드시 필요한 기능과 후순위 기능 구분

 

오늘 하루도 기술적으로도,

네트워킹 측면에서도

많은 것을 배울 수 있었던 시간이었다.

내일은 Rive를 활용한

애니메이션 실험을 진행하면서,

UI/UX 개선 방향까지 함께

고민해보는 시간을 가져야겠다. 🚀

 

바쁘다 바빠