SwiftUI)토스 주식 탭 애니메이션 구현하기

구현환경

iOS 16.4 +, iPhone 14 Pro Max 기준으로 SwiftUI를 사용하였다.

다크모드 대응은 따로 안했다.

내 폰이 12프맥이라서 실제 토스 앱과 사이즈를 비슷하게 하기 위해 이번에도 14프맥을 기준으로 구현했다.

 

 

 

목표

토스 앱 화면

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

 

1. 목표 애니메이션: 토스증권 옆 종합지수가 번갈아가면서 보여지는 애니메이션

2. 네비게이션 바 부분:  스크롤이 올라가면서 서서히 드러나는 1번과 동일한 애니메이션

3. 내 주식 & 오늘의 발견 버튼 부분

- 스크롤이 올라가면 네비게이션바 부분까지만 올라갔다가 이후엔 고정되어 네비게이션바의 역할을 함

- 버튼을 누르면 탭이 바뀌고, 버튼 밑의 라인이 옆으로 매끄럽게 이동함

 

 

과정 및 고민

 

1. 애니메이션 구현부

일단 레퍼런스를 뒤져봤는데 SwiftUI 관련 레퍼런스가 없었다. 그래도 애니메이션 관련해서 검색하다가 transition을 알게됨.

.transition(.move(edge: ))로 하면 될 것 같은데 올라가면서 사라지는건 되는데, 밑에서 새로 올라오는게 어떻게 되는지 모르겠음. 하나씩 다해봐도 안되서 멘붕이었는데 알고보니 프리뷰에선 애니메이션이 안돌아갈 때가 있었음!  아무튼 그걸 깨닫고 다시 해보다가 .asymmetric 이라는게 있어서 하나의 텍스트가 나타나면서 사라지기까지의 트랜지션을 만들 수 있었음. 나타날땐 .move, 사라질땐 .push를 사용했음. <.transition(.asymmetric(insertion: .move(edge: .bottom), removal: .push(from: .bottom))) >. 애니메이션 범위가 너무 크다 싶었는데 다른 컴포넌트 구현하니 알아서 해결됨.

또 애니메이션이 움직일 때마다 화면도 같이 움찔거리는 문제가 있었는데 사이즈가 고정안된 곳을 고정해주면 괜찮아졌음.

 

2. 타이머부분

규칙적으로 나타났다 사라지는게 반복이 되야해서 타이머를 사용하기로함. 트랜지션은 나타나고 사라질 때 애니메이션이 들어감. 그래서 종합지수 객체를 만들어줄 때 트랜지션이 들어가고, 3초뒤에 사라질 때 트랜지션이 들어감. 사라지고 0.4초 뒤에 다시 만들어주었음.

사라짐과 동시에 객체를 만들어주면 위에 사라지고 있는데 밑에서 올라오고 있음

문제는 이걸 프로그래밍해야되는데 소수점 단위로 계산해야되서 가뜩이나 머리아픈데 Double타입 계산을 하면 2.5900000000001 이러고 있었음. 멘탈을 잡기 위해 일단 하드코딩으로 먼저 구현하였음... 방법이 생각나면 리팩토링해보는걸로…

 

3. 내주식& 오늘의발견 부분이 일정부분 스크롤되서 올라가면 네비바처럼 고정되는 것 구현하기

29cm 앱에서도 봤던건데 어려워보여서 역시 개발자들 대단하다라고 생각하면서 쉽게 도전을 못했음. 하지만 기회가 생겼으니 도전하기로 하고 일단 구글링해서 스크롤에 따라 바뀌는 값을 구할 수 있었음.

https://developer.apple.com/forums/thread/650312

Get position of scrollview | Apple Developer Forums

그 값을 기준으로 스크롤이 올라가고 멈추도록 할 수 있었음.

 

근데 그 부분에 백그라운드컬러도 넣어줬는데 밑에 스크롤되는 애들이 비춰서 zIndex로 우선순위를 낮춰주었다.

 

또 네비게이션 부분(최상단)과 내 주식 버튼 사이 부분이 스페이싱인데 그 부분에 스크롤되는 컴포넌트들이 보였음. 근데 스페이싱을 다 빼봐도 매궈지지가 않아서 일단 VStack 스페이싱을 음수로 줘서 저 공간을 매꿈. 저 공간이 미지수였는데 지금 생각해보면 offset 조절하면서 붕뜬 공간이지 아닐까 싶음. 

 

4. 디바이더 이동방식을 어떻게?

처음엔 당연히 matchedGeometryEffect 를 써서 이쁘게 움직이려고 했는데 예상대로 작동하지 않음. 아 withAnimation을 안해줬구나 해서 넣어서 해봐도 안됨. 아 transition을 넣어주자 해도 뭔가 이상함. 알고보니 matchedGeometryEffect를 쓰는게 아니었음. 이전에 한번 써봤다고 자신있게 썼다가 얼른 지워버림

 

5. 내 주식 & 오늘의 발견 버튼이 균등하게 들어가야되는데 UIKit은 HStack에 넣어주면 알아서 균등해지는데 스유는 그게 안됨. 각 버튼마다 프레임 width에 .infinity 주니까 균등하게 됐음.

 

6. 네비게이션바를 커스텀?

네비게이션 바 자리에 애니메이션을 넣어야되서 navigationBarTitle을 안쓰고 toolbar를 썼는데

화면이 스크롤되면 네비게이션바 밑에 얇은 라인이 하나생김. 테스트 해보니 툴바는 그게 안지워짐. 그게 안없어지니까 고민하다가 커스텀을 하기로 함. 커스텀이라고하여 어렵게 생각했지만.. 그냥 스크롤뷰 밖에다가 툴바처럼 해놓으니 깔꼼해짐.

 

7. 종합지수들을 API로 받아오고 싶었다

찾아보니 코스피 & 코스닥 지수를 제공해주는 공공데이터API가 있어서 받았는데 공공API가 처음이라 그런지 엄청 많은 오류가 생겨서 하루동안 오류와의 동침을 실시했다. 다행이 머리를 식힌 훗날 잘 해결했는데 해외 지수들을 제공해주는 API가 없어서(잘보면있겠지만) 욕심을 버리고 API를 고이 넣어두었다. 이 과정을 훗날 블로깅해보겠다.

 

 

결과

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

 

애니메이션: 토스증권 옆 종합지수가 번갈아가면서 보여지는 애니메이션

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

 

 

네비게이션 바 부분:  스크롤이 올라가면서 서서히 드러나는 1번과 동일한 애니메이션

 

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

 

 

내 주식 & 오늘의 발견 버튼 부분

- 스크롤이 올라가면 네비게이션바 부분까지만 올라갔다가 이후엔 고정되어 네비게이션바의 역할을 함

 

 

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

 

 

 

- 버튼을 누르면 탭이 바뀌고, 버튼 밑의 라인이 옆으로 매끄럽게 이동함

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

 

 

느낀 점

애니메이션 공부를 목적으로 하는 것인데 하다보면 애니메이션과 별개로 구현이 어렵거나  디테일 잡기 귀찮은 것들을 마주하곤 한다. 그럴때마다 하지말까? 라는 생각을 했지만 지금의 고민이 뼈가되고 살이 될 것이라는 생각으로 완성도 있게 마무리 하려 했던 노력이 가장 어려웠다. 

그와 별개로 오히려 레퍼런스가 없어서 어려울 줄 알았는데, 모르는 것을 찾아가는 것이 재밌고 구현해낼때 뿌듯해서 못할 것이라는 생각을 하지 않고 즐길 수 있었다.

 

소스코드는 깃허브 TossStockIndexAnimationPractice 폴더에 있습니다.

 

https://github.com/yahoth/AnimationPractice

GitHub - yahoth/AnimationPractice