SwiftUI) 토스 애니메이션 구현해보기

앱에 필요한 것은 사용자가 원하는 서비스를 제공하는 것, 사용성이 있다. 

토스 앱을 사용해보면 상큼발랄한 애니메이션이 여기저기 보이고 이로 인해 앱에서 젊은 바이브와 간편하다는 느낌을 받을 수 있다.

토스 앱에 들어간 애니메이션 중 하나를 구현해보았다.

구현환경

iOS 16.0 +, iPhone 14 Pro Max 기준으로 SwiftUI를 사용하였고

사용된 라이브러리는 로티(Lottie)이다.

내 폰이 12프맥이라서 실제 토스 앱과 사이즈를 비슷하게 하기 위해 14프맥으로 설정했다.

 

목표

애니메이션 구현 + 애니메이션이 포함된 뷰를 구현하기

토스 앱 화면

 

과정 및 고민

1. 셀모양을 Rectangle()로 할지 VStack에 백그라운드를 줄지 고민이 됐다. 

Rectangle로 하면 오버레이나 ZStack으로 UI들을 채워야하는게 지저분하게 느껴져서 VStack으로 결정했다.

 

2. 자산 버튼, 이외 셀들을 클릭할 때 버튼의 범위(?)가 색을 통해 보여졌다. 각자 다르기 때문에 커스텀이 필요했다.

자산 버튼은 포함된 행 전체가 버튼이고, 이외 셀들은 둥근 직사각형 모양이다. 

버튼 스타일 커스텀은 이전에 플젝에서 해본 적이 있어서 어렵지 않게 구현하였다.

 

3. 대충 형태를 갖추고 애니메이션 구현 방법을 알아보던 중 토스에서 작성한 기사(?)가 있었다. 토스에선 로티(Lottie)라는 애니메이션 기능을 제공해주는 라이브러리를 사용한다고 한다. json파일을 이용하여 파일 무게가 가볍고 구현도 쉬워서 현업에서 많이 사용한다고 한다. 

그래서 간단한 영상을 통해 적용방법을 배웠다. 토스에서 사용한 애니메이션 디자인은 아마도 직접 제공한 것으로 보인다. 로티에서 무료 애니메이션을 제공해주어 그 중 비슷한 느낌의 애니메이션을 선택해서 적용했다. 

 

4. 각 은행의 심볼과 배경

심볼만 다운받아서 코드로 배경을 만들어주었는데, 다운받은 심볼이 사이즈가 달라서 Cell 재사용에 불편해서 Figma로 이미지를 만들었다. 아래가 앱에서 캡쳐한 이미지이고 거기서 배경의 색을 추출해서 사용했다.

 

결과

애니메이션

왼쪽: 토스화면 오른쪽: 구현화면

 

버튼 인터랙션

왼쪽: 토스화면  오른쪽: 구현화면

 

어려웠던 점

제일 까다로웠던 것은 UI의 크기, spacing과 padding이었다. 실제 토스앱과 똑같이 만드려고 하다보니 일일이 비교하느냐고 시간이 오래걸렸다. 또 폰 캡쳐와 맥북에서의 밝기 및 색감차이(?)로 인해 색이 달라보이는게 아쉽다.

 

고려한 점

깔끔한 코드, 재사용

- 기준: 모디파이어로 각 attribute를 정리하기보단 사용되는 셀을 재사용할 수 있게 ViewBuilder를 사용하여 정리하였음.

 

소스코드는 깃허브에 있습니다

 

https://github.com/yahoth/AnimationPractice

GitHub - yahoth/AnimationPractice