GitHub - boostcampwm2023/iOS02-moti: 네이버 부스트캠프 8기 iOS moti 앱 📸
네이버 부스트캠프 8기 iOS moti 앱 📸. Contribute to boostcampwm2023/iOS02-moti development by creating an account on GitHub.
github.com
서론
이번 포스팅에서는 인터랙션 애니메이션을 다룹니다.
moti에서는 인터랙션 애니메이션도 하나의 도전 과제로 설정했습니다.
사용자 경험을 좋게 하기 위한 요소 중 하나라고 생각했기 때문입니다.
그래서 moti에는 어떤 인터랙션 애니메이션이 있는지, 구현을 하면서 어떤 어려움이 있었는지 말해보겠습니다.
인터랙션 애니메이션 적용 이유
처음 인터랙션 애니메이션에 대해 알게된건 토스의 "인터랙션, 꼭 넣어야 해요?" 테크톡(https://toss.tech/article/interaction)이었습니다.
처음에는 인터랙션 애니메이션이 뭔지도 몰랐지만, 발표를 들은 후에는 너무 매력적이고 흥미로웠습니다.
제가 아이폰을 좋아하는 이유 중 하나였기 때문입니다.
미적인 목적 뿐만 아니라 인터랙션 애니메이션을 통해 소프트웨어와 사용자가 소통하는 느낌이 너무 좋게 느껴졌습니다.
iOS 개발자로서 꼭 인터랙션 애니메이션을 적용해보고 싶어서 이번 moti 앱에 적극적으로 적용을 해보았습니다.
어떤 인터랙션 애니메이션을 넣을까?
인터랙션 애니메이션을 적용하기로 결정을 한 뒤, 어떤 인터랙션 애니메이션을 넣을지 고민했습니다.
인터랙션 애니메이션은 화려한게 목적이 아니라 앱과 사용자가 소통한다는 느낌을 줘야하기 때문에 사용자 액션을 위주로 고민했습니다.
예를 들어, cell 아이템을 누르면 살짝 작아졌다가 커진다거나, 아이템을 선택하면 약간의 진동이 온다거나요. (진동은 애니메이션이 아니지만 ㅎ;)
기획자나 디자이너가 아니었기 때문에 상용 앱에서 예시를 많이 찾아봤습니다.
애플의 기본 앱들, 네이버 페이, 한국투자, 슬랙, 깃허브 등 자주 사용하는 앱 위주로 찾아봤던 거 같아요.
우리가 매력적으로 느낀 인터랙션 애니메이션이 뭐가 있었지? 생각을 해보았고 리스팅을 한 뒤,
moti에게 어울리는 인터랙션 애니메이션을 결정했습니다.
moti의 인터랙션 애니메이션
moti에 적용한 인터랙션 애니메이션을 한 화면에 모아봤습니다.
https://www.youtube.com/watch?v=cqd-mv-9ST0
사용자 액션이 보통 버튼에서 발생하기 때문에 버튼 애니메이션이 많네요.
시간이 부족해서 적용하지 못한 것도 있는데 유지보수하면서 차차 적용해보려고 해요.
액션의 결과에 따라 어떤 애니메이션을 넣을지 고민을 많이 했습니다.
예를 들어, 카메라 촬영 버튼은 애플 기본 카메라 앱처럼 가운데 원이 살짝 작아지고, 카메라 전환 버튼은 flip 애니메이션에 들어갑니다.
이모지 버튼은 count가 증가하면 아래에서 위로 올라가고, count가 감소하면 위에서 아래로 내려가는 애니메이션이 적용했습니다.
엄청난 기술적 고민인지는 모르겠습니다만, iOS 개발자로서 즐겁게 고민한 경험이었습니다.
네이버 파이낸셜에서 인턴을 했을 때 멘토님이 애니메이션은 가장 재밌으면서 가장 어려운 작업이라고 했는데 그 말을 100% 공감할 수 있었던 경험이었어요 ㅋㅋ
애니메이션 코드 중복
애니메이션을 구현하면서 코드 중복에 대한 고민을 했습니다.
완전히 동일한 애니메이션이면 메서드로 코드 통합이 가능할텐데...
애니메이션이라는게 조금씩 미묘하게 달라야 하더라고요.
View 구성에 따라, View 성격에 따라 애니메이션을 다르게 해야 사용성이 자연스럽다는게 느껴졌고,
체감이 될 정도의 차이라 디테일을 위해 무시할 수 없었습니다.
그러다보니 코드 통합에 문제가 발생했습니다.
대부분의 애니메이션이 각자 다르다보니 애니메이션 코드를 공통화할 수 없었습니다.
억지로 메서드로 묶어도 재사용이 안 되기 때문에 무의미하다고 느껴졌어요.
이 문제를 팀원과 얘기해본 결과, 억지로 공통화하진 말자고 결론을 냈습니다.
대신 애니메이션을 잘게 쪼개서 공통화할 수 있는 애니메이션의 개수를 늘리기로 했습니다.
그 결과, 공통화 안 된 애니메이션이 많긴 하지만 여러 곳에서 쓰는 애니메이션은 공통화할 수 있었습니다.
그리고 이 애니메이션 메서드는 UIView를 extension하여 명확하고 가독성 있게 적용할 수 있도록 구현했습니다.
어쩌면 굉장히 초보적인 고민이지만...
저와 팀원은 나름 진지하게 이 문제를 고민했어요.
어떻게 작성해야 확장성을 고려하면서 지금 당장 편하게 쓸 수 있을까에 집중했습니다.
저희 팀원 모두 애니메이션을 처음 적용하다보니 생각보다 더 길어진 거 같긴 합니다만 재밌었던 고민이었습니다 ㅎㅎ
CGAffineTransform 적용 이슈
크기가 줄어드는 애니메이션을 적용하면서 이슈가 하나 발생했습니다.
CGAffineTransform(scaleX: 0, y: 0)위 코드를 적용하니 애니메이션이 적용이 안 되는거에요..?
isHidden과 동일하게 동작이 되었습니다.
사라지긴 하는데 왜 애니메이션만 동작을 안 하지? 너무 혼란스러웠어요.
원인은 zero division 문제였습니다.
CGAffineTransform은 행렬 연산으로 동작합니다.
(자세한건 https://developer.apple.com/documentation/corefoundation/cgaffinetransform 공식문서에...)
따라서 CGAffineTransform의 파라미터 값으로 0을 전달하면 행렬 값을 0으로 나눠서 zero division 문제가 발생합니다.
애니메이션이 안 되는게 문제라고 생각했는데, 그냥 동작 자체가 문제였던 것입니다 ㅠㅠ
그래서 0 대신 0.01로 설정하고 isHidden을 적절히 조작하여 원하는대로 동작할 수 있었습니다.
기술의 원리를 이해하지 못해 디버깅이 오래 걸린 경험이었습니다.
또한번 기술의 원리가 중요하다는 것을 깨달았네요...
인터랙션 애니메이션 후기
지금까지 인터랙션 애니메이션을 적용한 이유를 알아봤고, 적용하면서 겪은 문제도 간단히 알아봤습니다.
인터랙션 애니메이션을 구현하는게 마냥 간단하진 않았는데요.
이렇게 들인 노력 대비 인터랙션 애니메이션의 효과가 좋았을까요?
저와 팀원은 정말 200% 만족했습니다.
사실 네이버 부스트캠프 그룹프로젝트 팀에서 인터랙션 애니메이션을 적용한 팀은 저희뿐이었어요.
그래서 비교군이 많진 않지만 완성도면에서 더 높다고 느껴졌습니다.
그리고 이런 평가는 저희 뿐만 아니라 멘토님과 네트워킹 데이 때 만난 현업자분도 동일하게 느끼셨다고 합니다.
사용자가 앱을 조작할 때 손가락 끝으로 느낄 수 있도록 노력한걸 알아주니 너무 뿌듯했고 감동이었습니다.
그래서 다른 분들께도 인터랙션 애니메이션을 강추 드립니다..!
간단한 프로젝트라도 한 번 도전해 보세요.
moti 앱에서 인터랙션 애니메이션을 직접 보고 싶으시다면 아래 QR코드를 인식하세요.
앱 스토어로 바로 이동합니다 :)
감사합니다.
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.