첫 앱 출시 준비 - Flip Clock

본격적으로 iOS를 공부한지 5개월 째.. 앱 출시를 단 한 번도 못해봤다.

만들어보고 싶은 앱은 여러 가지 있으나 아직 지식이 부족하다 판단해서 기초 공부만 계속 했던 거 같다. 근데 막상 시간이 지나니까 계속 공부만 할 거 같다 싶어 실전에 들어가보자라는 마음에 앱 출시를 준비하기 시작했다.

준비

이전에 인스타그램 추천피드로 어떤 인플루언서가 탁상시계같이 생긴 앱을 두고 공부하는 영상을 올린 걸 봤었다. 영상미가 돋보였던걸까, 너무 예뻐 보여서 만들어보고 싶은 충동이 생겼었다. 하지만 이 때 당시에는 오토레이아웃 적용하는 법을 배우고 있었을 때라 나중에 구현하자는 마음에 메모지에 적어두기만 했었다.

헤헤 아이디어 발싸!

시작

iOS 스터디를 진행하면서 앱 두 개 정도를 만들어보니 실력이 늘었다는 착각을 하기 시작했다. 지금 생각해보면 아직 멀었다. 하하 그때 당시에 근자감이 하늘을 치솟고있어서 FlipClock 못 만들면 나는 다른 앱 조차 만들지 못하는 바보라는 생각에 무조건 완성해보고야 말겠다는 마음가짐으로 시작했다.

하지만 마주치고나니 간단해보일 것만 같던 애니메이션이 이렇게 어려울줄은 몰랐다. UIBezierPath며, CAShapeLayer며, transform이며 등등 여러 가지가 나를 괴롭혔다.

진짜 몇 주동안 구글링과 애니메이션 공부만 한 거 같다. 그때까지 코드는 써보지도 못했다.

그리고 어떻게 시계를 애니메이션시킬지 아이디어를 구상해야했고 우여곡절 끝에 다음과 같은 앱이 완성되었다.

원리

UILabel과 똑같은 모양을 가진 imageView와 갱신된 값으로 바꾼 UILabel의 모양을 가진 imageView를 가지고 UILabel에 덧붙인다.
이 때 계층구조는 다음과 같게 한다.

UILabel	┓ (아래로 갈 수록 앞)
		┣ previousTextTopView
		┣ previousTextBottomView
        ┗ nextTextBottomView(hidden)

이미지로 확인해보자.

nextTextBottomView는 보이지 않게 처리하였기에 view hirarchy에 보이지 않는다.

애니메이션 동작 과정

1. 갱신전 윗 부분의 이미지를 $\pi\over2$ 까지 떨어지는 애니메이션을 진행한다.
   • 애니메이션 진행이 끝난 뒤 view hirarchy
     
2. nextTextBottomView의 hidden을 풀고 $\pi\over2$부터 $\pi$까지 떨어지는 애니메이션을 진행한다.
   • 새로운 값이 이전 값을 덮는 애니메이션이 됨
3. 세 개의 imageView를 layer에서 삭제

물론 여기에 좀 더 3D효과를 주기위한 Shadow animation, 3D행렬 수정 등의 작업이 있다. 이는 부가적인 사항이어서 여기에 설명하지는 않겠다. 코드를 보고싶다면 여기를 클릭!

계획

드디어 주요기능을 구현했고, 이제 부가적인 설정기능을 넣어둘 예정이다. (테마 설정, 24시간 또는 12시간 설정 등)

잡담

다른 사람에게도 애니메이션은 어려운질 모르겠으나 아직 Swift입문 5개월차인 나에게는.. 매우 어렵다. 근데 어려운 만큼 구현하면 성취욕이 장난아니게 크다. 지난번에 애니메이션 구현이랑 오류 수정했을 때의 쾌감은 아직도 생생하다. 그 기분을 더욱 느끼기 위해 다시 코딩하러 간다. 다음 글은 아마 리팩토링 관련한 글을 작성하지 않을까 싶다.