애니메이션 라이브러리 학습 단계

애니메이션 라이브러리 학습 단계

2021 / 09 / 09 / 목

이재영

💡 뭘 했는지?
- 오픈 프로젝트 모임
- 멘토링

💡 뭘 배웠는지?
- 라이브러리에서 내 앱에 필요한 기술 적용시키는 과정
- iOS 디자인 패턴, 협업 과정

💡 뭘 고민했는지?
- 정확하게 필요한 애니메이션 기능 선정

박준홍

💡 뭘 했는지?
- 개포 클러스터에서 우리가 개발에 이용하게 될 좌석과 개발 준비물품등을 신청함.
- 멘토님과 멘토링
   
💡 뭘 배웠는지?
- 멘토링을 통해 기획을 최종적으로 마무리할 수 있게 되었다. 
- 정말 세세하게 신경써줘야 할 게 많고, 앱 완성을 위해서는 여러가지 고민할 부분이 많다는 것을 깨달았다.
- 애플 개발자 계정을 드디어 구매했다!!

💡 뭘 고민했는지?
- 어떻게 하면 앱을 효과적으로 구현할 수 있을지, 기획을 하면서 라이브러리들을 생각해가며 고민하였다.
- 라이브러리를 효과적으로 학습하고 다룰 수 있는 방법에 대해서 고민하였다.

2021 / 09 / 10 / 금

이재영

💡 뭘 했는지?
- 기획 회의
- 'TweenKit' 라이브러리 분석 시작
- 기본적인 기능 테스트
- 샘플 실행
- 클래스 분석
- 브레이크 걸고 테스트

💡 뭘 배웠는지?
- 트윈킷 기본 동작 샘플들
- 동작 원리 등

💡 뭘 고민했는지?
- 해당 라이브러리를 사용해서 어디까지 '디자이너의 의도'와 맞춰서  구현해줄 수 있을지
- 퀄리티가 원하는 만큼 나올수있는지
- 화면 전체 스크롤을 사용할 때, 뷰의 변환을 어떻게 처리해줘야할 지
- 퀄리티와 기술의 상관 관계

박준홍

💡 뭘 했는지?
- 도형이 바뀌는 라이브러리를 뜯어보고, 이를 우리 프로젝트가 필요로 하는 부분으로 기능 구현 해보기.
- 디자인 fix 전, 최종 기획 회의
- 와이어프레임
- project rename
   
💡 뭘 배웠는지?
- macaw 라이브러리의 구성에 대해서 파악했다. macaw 라이브러리는 어떤 완성된 기능이 아니라,
  어떤 기능을 완성할 수 있도록 엄청나게 강력한 편의기능들을 포함하고 있다는 것을 알게 되었다.
- macaw 라이브러리를 간단한 예시를 보면서 이용해보는 중이다.

💡 뭘 고민했는지?
- project 이름을 바꾸면서, 의존성에 대해서 고민을 많이 한 날이었다. xcode 내장 기능을 통해서 바꾸었음에도 불구하고,
  xcode 파일 전체의 이름이 바뀌지 않고, 이와 연동된 환경설정들도 다 바뀌지 않아서,
  즉 바꿀게 너무 많아서 아예 처음부터 다시 만들어야 빠를 정도였다.   
- 마찬가지로 의존성 측면에서 import 가 제대로 되지 않는 문제가 있었는데,
  똑같은 방법으로 여러번 시도했을 때는 안되다가, 마지막으로 시도를 해보니 되서 이게 뭐가 문제인가 하는 의문이 들었다.
- macaw 라이브러리를 뜯어보면서, NSLog 부분에 어떤 인자가 들어가야 하는지 아직 찾지 못했다.

2021 / 09 / 12 / 일

이재영
💡 뭘 했는지?
- 와이어프레임 디테일하게 작성
- 라이브러리 분석 (TweenKit)

💡 뭘 배웠는지?
- TweenKit Library: action 단위 설정
- 도형 위치, 색상 변경

💡 뭘 고민했는지?
- schedule 모듈을 사용할 때, 두개의 애니메이션이 동시에 뜨는 방법?, 스케쥴 인스턴스의 정확한 역할
- 라이브러리를 사용했을 때, 내가 표현하고자 하는 목표를 퀄리티 있게 달성할 수 있을지 : 작은 것부터 실행

박준홍
💡 뭘 했는지?
- 개발자 입장에서 와이어프레임 작성
- macaw 라이브러리 분석
- 와이어프레임을 가지고 디자이너에게 UI 요청 회의

💡 뭘 배웠는지?
- 라이브러리를 드디어 의미있는 수준으로 돌려보았다.
- 기획을 세부 단위로 결정하였다. 이제 기획은 개발자로서의 역할은 끝났고 디자이너의 손으로 넘어갔다.

💡 뭘 고민했는지?
- 라이브러리에서 컨트롤러를 활용하지 않는데, 왜, 어떻게 그렇게 하는지와, 
  그러면 우리는 MVC 모델을 사용하는데, 이를 Controller에서 사용하려면 어떻게 해야하는 지 등을 공부 중이다.

2021 / 09 / 14 / 화

이재영
💡 뭘 했는지?
- 라이브러리 분석 (TweenKit):Arc, Bezier

💡 뭘 배웠는지?
- TweenKit Library 관련 함수들
- CALayer
- storyboard 없이 오브젝트 추가(view, layer, image ...)

💡 뭘 고민했는지?
- 게이지 터치 방식을 어떻게 구현할 것인가?
- 슬라이더를 사용할 때 사용자의 입력값(수치)를 어떻게 받아야 애니메이션에서 적절하게 활용할 수 있을까

박준홍
💡 뭘 했는지?
- Macaw 라이브러리 구조 이해
- Macaw 라이브러리를 통해 움직이는 도형 구현

💡 뭘 배웠는지?
- 라이브러리에서 view를 따로 사용하지 못해 막혀있다.
- 정말 많은 부분에서 새롭게 공부하고 있다. 
  현재는 애니메이션을 돌린 상태에서 페이지를 이동하게 되면 cpu가 과부하가 걸려서 이 부분을 처리 중이다.
  아마도 뷰를 바꾸기 전에 기존의 뷰를 지우고 해야 할 것 같다.

💡 뭘 고민했는지?
- view 의 계층에 대해서 정말 많이 고민했다.
- view 가 따로 들어가지 않는다. 정확히 library를 어떤 구조를 통해 사용해야 하는건지 전체적인 감을 잡지 못했다.
- 정말 막막하게 느껴지는 상황인데 잘 이겨낼 수 있을 것이다!!

2021 / 09 / 15 / 수

이재영
💡 뭘 했는지?
- library sample (sun and moon) code 분석
- slider 구현
- scrubbable 확인

💡 뭘 배웠는지?
- UISlider 구현 및 커스텀하는 방식
- UIProgressView
- TweenKit: Scrubbable action을 활용하는 방법과 관련된 기술들

💡 뭘 고민했는지?
- 전체화면을 게이지로 활용하고 싶은데, 해당 기능을 오직 슬라이더만으로 처리하는건 힘들어 보인다.
- 어떤 기술을 사용해야 전체 게이지를 표현할 수 있는지 (pangesture, touch option ...)
  - 결국은 크게 두 개의 뷰가 존재하고 사용자의 터치에 의해서 가장 윗 단의 뷰가 움직이면서 뒷 단의 배경, 오브젝트가 변경되야 한다.

박준홍
💡 뭘 했는지?
- 라이브러리 구조 이해
- 스토리보드 없이 코드로만 구현해서 라이브러리를 사용자 정의해서 사용해보기

💡 뭘 배웠는지?
- 오늘은 진전이 꽤 있었다!!, 아예 처음부터 코드로만 작성을 해서 라이브러리 기능 모음집을 만들어 보고 있는데,
  드디어 view를 따로 떼어서 내가 원하는 대로 정의하고 사용해보는 것에 성공했다.
- 급하고 막막할 수록 기본부터 다시 한번 이해해야 한다는 것을 다시 깨달았다.
- view를 다루는 여러가지 방법과, swift에서 여러가지 종류의 object들을 코드로 다루어 보면서 내가 원하는대로 정의해서 사용해보는 중이다.
- 컨트롤러에서 view가 실행되고 닫히는 순서를 공부했다. 

💡 뭘 고민했는지?
- 새로운것을 많이 배운 날이다. 무엇보다 swift의 전체 구조, 파일 구조, MVC 구조 등, 앱을 만들 때 보아야 할 숲이 보이기 시작한 날인 것 같다.
- 이제는 내가 구현하기 원하는 오브젝트를 간단하게 구현할 수 있다는 점이 가장 큰 것 같다.
- required init이 어떻게 override 되어서 사용되는건지 학습 중이다.

2021 / 09 / 16 / 목

이재영
💡 뭘 했는지?
- background 변경
- pangesture

💡 뭘 배웠는지?
- TweenKit 라이브러리를 사용해서 배경의 색깔을 그라데이션처럼 바꾸기
- ios에서 제공하는 제스쳐의 종류와 역할
- panGesture 인식기를 사용해서 사용자의 드래그를 통한 인터렉션 하는법
- UIGestureRecognizer State 를 이용해서 각각의 상황마다 다른 액션 취해주는법

💡 뭘 고민했는지?
- Layer, CAGradientLayer, CATransaction에 관해서 추가적인 학습 필요
- 현재는 샘플 코드를 통해서 작은 원을 터치해서 움직임을 추적하는데, 전체 화면으로 추적하는 방법.
- PanGesture에서 translaction 과 velocity의 정확한 사용법. 현재는 추상적으로 대충 위치와 속력을 계산하거나 추적하는 방법이라고만 알고 사용 중

박준홍
💡 뭘 했는지?
- 페이지 이동시, animation view dismiss 작업
- 도형이 튀기는 애니메이션에서 버튼에 반응해서, 도형의 모양이 바뀌는 작업
- 도형이 튀기는 애니메이션에서 버튼에 반응해서, 뷰가 위 아래로 움직이는 작업

💡 뭘 배웠는지?
- 도형을 튀기는 애니메이션의 각각의 수치들이 애니메이션에 어떤 영향을 주는지를 학습함.
- 여러가지 수치를 다루어 보면서 최대한 우리가 구현하고 싶은 부분과 가깝게 구현하려고 노력함.

💡 뭘 고민했는지?
- 애니메이션에이 처음에 결정되면 중간에 바꿀 수 없다는 것을 알고, view를 여러개를 만든 후,
  fade in, fade out 하는 방법으로 구현해야 하나 고민 중이다.
- 도형의 색을 중간에 어떻게 동적으로 바꿀 수 있을지 고민 중이다. 현재는 크로마키와 같은 필터를 씌우는 것을 고민 중이다.

2021 / 09 / 17 / 금

이재영
💡 뭘 했는지?
- 전체 화면에서 사용자 제스처 추적
- 버튼 사용하지 않고 제스처를 사용해서 처리하기

💡 뭘 배웠는지?
- UIGestureRecognizer를 통한 사용자 제스처를 추적하고 처리하는 방법 (no storyboard)
- PanGesture를 add하는 대상에 따라 사용자에게 다른 상호작용을 시킬 수 있음
- Translation을 통해 위치를 이동시킬 때, x축을 고정시켜서 마치 게이지(슬라이더)처럼 움직이는 방식 

💡 뭘 고민했는지?
- TweenKit의 애니메이션 처리를 뷰에 적용했을 때, PanGesture와 연동되서 작동할지?
- 하나의 레이어는 계속 동적으로 움직이고, 또 하나의 레이어는 사용자의 제스처와 함께 scrubbable이 가능한 지 여부

박준홍
💡 뭘 했는지?
- 공이 튀기는 bounds를 화면에 맞추어서 설정
- 도형의 모양이 바뀌는 부분에서 각각의 view를 fade in, fade out 해보았다.

💡 뭘 배웠는지?
- bounds와 frame에 대해서 학습.
- view를 다루는 여러가지 방법에 대해서 학습했지만, 공부를 할 수록 현재 사용하려는 애니메이션이 우리의 목적에
  어울리지 않는다는 것을 알았다.

💡 뭘 고민했는지?
- view가 여러개일 때, cpu 부하가 심해서, 이 방식을 쓰는게 맞지 않을 것 같다는 결론을 내렸다.
- 또한 우리가 구현하려는 완성본이, 이렇게까지 화려한 애니메이션을 쓸 필요가 없다는 것을 알았기 때문에,
  easing 하는 다른 방식과, 그 후에 원이 커지는 방식을 통해서 구현하려고 한다.

2021 / 09 / 18 / 토

박준홍
💡 뭘 했는지?
- 최종 디자인 변경으로 인한, 튀기는 장면에서 easing 하는 장면으로 변경해서 구현
- easing하면서 색이 바뀌는 기능 class에 추가

💡 뭘 배웠는지?
- 둥둥 떠있는 애니메이션을 만들었다. 하지만 애니메이션이 재생되는 중간에 색을 바꿀 수는 없어서,
  애니메이션을 4개로 쪼개서 애니메이션 중간에 색을 바꿀 수 있도록 하였다.
  4개로 쪼갰지만, 여전히 색 바꾸는 버튼을 터치하고 나서 0초 ~ 0.3초 사이를 기다려야 한다.
  (재생 중인 애니메이션이 끝나야 적용되기 때문)

💡 뭘 고민했는지?
- 색이 바뀌는 텀을 최대한 줄여보기 위해 많은 방법을 적용했었다.
  뒤에서 똑같이 움직이는 애니메이션을 하나 더 만들어서 서로 바꾸는 방법도 해보았지만, 만족스럽지 않았다.
- 마지막으로 고려해본 방법은, 애니메이션을 쪼개는 방법이었는데 그나마 가장 자연스럽고 가볍게 돌아갔다.
  단점은 최대 0.25초 정도의 딜레이가 있는 것이다.
  (물론 애니메이션을 빠르게 재생하면 더 줄어들 수 있다. 하지만 가장 자연스러운 애니메이션 재생 시간은 0.25으로 결론내렸다.)

2021 / 09 / 21 / 화

이재영
💡 뭘 했는지?
- 합체 (팬제스처 게이지, 물결 애니메이션, 백그라운드 애니메이션)

💡 뭘 배웠는지?
- 게이지 뷰를 만들기 위해 각기 다른 애니메이션 관련 라이브러리를 사용해서 표현했다.
- main 뷰는 판제스쳐를 추적해서 디바이스의 높이를 리턴시켜준다.(location)
- sub 뷰는 WaveAnimation을 적용시키고 높이에 따라 origin을 바꿔준다. 
- 서브뷰에 Gradient레이어를 추가해주고 TweenKit 라이브러리를 통해 높이에 따라 레이어의 색상(cgcolor)을 변경시켜준다

💡 뭘 고민했는지?
- subView의 크기를 조절하는 방법 중 나은 것은 무엇일까? 
  - 뷰 자체의 크기 (frame)을 수정
  - 뷰를 길게 확장시켜놓고 위치 (origin)를 변경
  - frame 수정은 파괴 생성이 일어나려나?
  - 뷰를 길게 확장시키는 것의 단점은 그라디언트 레이어를 적용시킬 때, 균일한 효과를 보장하지 못한다는 점. 또는 추가적인 작업이 필요해서 깔끔하지 못하다.
- WaveAnimationView의 경우 frame이 의도보다 우하단으로 살짝 넘어가는데, 일단은 size를 크게 키우는 것으로 응급처치.
- 중요: 레이어를 사용해서 그라데이션을 표현해주는데, 현재 방식은 물결뷰 살짝 밑에, 물결 bound의 크기에 맞는 layer를 추가하는 방식이다. 현재는 변하는 top그라데이션의 색을 물결.background에 넣는 방식인데, 실제 동작 모습을 보면, 레이어가 먼저 색상이 변하고 조금 후에 서브뷰(wave)의 색상이 0.1초 정도 뒤에 변한다.
- ios에서 layer의 드로잉 순서가 어떤지 정확하게 모르기 때문에, 현재 발생하는 이슈를 해결하지 못했다.

박준홍
💡 뭘 했는지?
- SVG 오브젝트 띄워서 색 바꾸고, 위치 바꾸기

💡 뭘 배웠는지?
- SVG 오브젝트에 대해서 공부했다. swift macaw 라이브러리에서는 SVG 오브젝트를 다룰 수 있는 방법을 몇가지 제시해주는데,
  아직 이 부분을 제대로 활용하지 못하고 있다.

💡 뭘 고민했는지?
- 라이브러리에서 node 의 역할은 중요하다. node 역할을 정확히 파악하고, 이를 SVG에 어떻게 이용할 수 있을지 고민하고 있다.

2021 / 09 / 22 / 수

이재영
💡 뭘 했는지?
- CALayer 개념 학습

💡 뭘 배웠는지?
- UIView와 CALayer의 관계
- CALayer의 개념과 property들의 특징
- Frame과 Bound 개념 이해

💡 뭘 고민했는지?
- boound의 origin이 변할 때 이상하게 움직이는 모습 : viewport의 위치가 변한다고 이해하면 된다.
- 레이어 적용 시 랜더링 속도가 다른 느낌에 대한 고민

박준홍
💡 뭘 했는지?
- shape 오브젝트를 SVG 오브젝트로 변경

💡 뭘 배웠는지?
- macaw 라이브러리를 통해서, shape 오브젝트를 svg 오브젝트로 변경하는 방법에 대해서 연구했다.

💡 뭘 고민했는지?
- macaw 라이브러리가 우리가 사용하려는 기능에 비해 너무 비대한 것 같아서, macaw 대신 swift의 animation을 사용하는 것을 고민 중이다.

2021 / 09 / 23 / 목

이재영
💡 뭘 했는지?
- 게이지 뷰 리팩토링 (프로퍼티, init, get / WaveView / PanGesture / GradientLayer / Animation)
- 사용자의 터치 정보 get함수로 빼주기 (터치 y축 location 값 / 디바이스의 높이 값)

💡 뭘 배웠는지?
- View에 대한 리팩토링

💡 뭘 고민했는지?
- 클래스로 뷰를 빼고나서 각각의 viewload마다 다른 함수를 실행해야만 할 때, 재사용성을 높이는 법
- 뷰의 랜더링 속도와 레이어의 랜더링 속도 차이로 인한 색상 변경시 이질감을 어떻게 처리해야하는지 ...

박준홍
💡 뭘 했는지?
- 현재 애니메이션은 UIView 애니메이션으로 수정

💡 뭘 배웠는지?
- macaw에서 svg node를 활용하는 법을 꺠달았다.
  svg node의 의미가 무엇인지 알았고, svg node를 이용해서 어디까지 응용할 수 있을지도 생각해보았다.
- macaw에서 nodeBy를 통해, 한가지 svg 파일을 어떻게 Node별로 나눠서 사용하는지를 학습했고, 이를 사용해보았다.

💡 뭘 고민했는지?
- 일단 svg파일 관련해서는 macaw를 사용하되, 애니메이션은 UIView와 CoreAnimation으로 대체할 예정이다.
- macaw의 svg node가 강력한 기능이기 때문에, 일단 Macaw를 이용해서 훗날의 확장성을 염두해두어야 할 것 같다.

template

2021 / 09 / 00 / 월

이재영
💡 뭘 했는지?
💡 뭘 배웠는지?
💡 뭘 고민했는지?

박준홍
💡 뭘 했는지?
💡 뭘 배웠는지?
💡 뭘 고민했는지?