20200915 멘토링

멘토님께 드리는 메시지

멘토님, 저희가 방향 잡기가 힘들었는데 꼼꼼하고 구체적으로 말씀해주셔서 프로젝트에 대한 전체적인 그림을 이해하는데 큰 도움이 되었습니다. 특히, 빌드하는 과정 중 어려웠던 부분을 질문 드렸을 때 주말임에도 불구하고 Gitter에서 멘토님이 친절하게 답변해 주셨습니다. 앞으로 더 열심히 개발해서 좋은 성과내겠습니다. 감사합니다.

rlottie 웹뷰어: 리소스 파일을 애플리케이션에 탑재하기 전에 사전에 웹 프리뷰를 통해 제대로 작동되는지, 이 리소스가 어떠한 애니메이션을 재생하는지 확인하기 위해 사용
지금 현재는 웹뷰어가 굉장히 단순하지만, customization 기능(ex. 색상, 위치)을 더 추가해서 최적의 customization을 제공할 수 있는 프리뷰를 만들어라

3명: Wireframe/ 웹개발 담당
- 추가했던 JS function을 호출해서 animation 기능을 구현한다.
- HTML & CSS, engineer framework를 이용 (본인들이 제일 쓰기 쉬운 툴 활용해서 웹 페이지 구현)
- Web Page 구성: UI적 요소가 많으므로 시간이 오래 걸릴 것이다.
2명: Web Assembly, Customizing 코드 작업
- wasm binary가 나오면 js를 이용해서 추가했던 api를 호출할 수 있게 구현한다.

⭐역할 분배 굳

⭐윈도우에서도 가능하지만 리눅스에서 하는게 제일 좋음

Look and Feel 확인
- 휴대폰 테마 기능과 같이 제각각의 device에서 Look and Feel확인
Binary Size 줄이기
- 색상마다 새로운 resource를 배포하기도 힘들고,
- 개발자들이 추가된 해당 부분을 binary에 포함시키면 크기가 커진다.
- 그래서 rlottie를 이용해 바로바로 확인하고, binary size를 줄일 수 있다.
Tizen 지원
- 기존의 lottie player들이 tizen을 지원하지 않음
  - 그래서 엔진 자체를 만들어서 집어 넣기 위해 만듦

플랫폼마다 lottie 파일의 출력 모습도 다르고 property도 달랐음(텔레그램).
Microsoft, IOS, Android 등등 다 자체적인 rendering engine dependency가 존재
이는 application 개발자 관점에서 호환성 문제가 존재
예시 (Telegram Messenger)
- 각 Platform마다 Lottie Animation 출력물이 다름
- rlotttie를 이용하면 성능도 우수하고, 플랫폼마다 다 똑같이 나온다.

⭐rlottie는 범용적인 엔진을 만들어서 어디서든 출력 모습이 같다!

Customization

하나의 애니메이션에서 다양한 shape composition이 존재한다.
이를 어떤 shape로 바꿀 지 명시할 수 있어야 한다. (KEYPATH)
- 어떤 shape의 어떤 속성에 접근하기 위해 사용하는 것이 keypath(일종의 id)이다.
- 이는 트리 hierarchy로 구성되어있다.
- Tree 상의 node를 따라가다 보면 그 따라가는 순서대로 이름을 합치면 그것이 KEYPATH가 된다.
- 이 KEYPATH라는 고유의 ID를 이용해 Web Page를 구성하자.
TIPS
1. keypath를 스트링 형식으로 받아라.
  - 리스트로 나열해서 보여주기 보다는(너무 변수가 많음)
  - 최대한 단순하게 풀어서 keypath를 이미 알고있다는 가정하에
  - keypath를 입력하면 해당하는 node를 웹뷰에서 customize할 수 있게 하자.
  - ⭐ 최대한 단순하게 풀어나가라!
2. node를 선택하면 이를 customize하기 위한 UI를 깔끔하게 제공해라
3. 웹페이지 동작 방식
  - 현재 있는 rlottie 페이지에서 옆에 customize버튼을 두고,
  - 이를 누르면 customization옵션 (property)들이 촤라락 펼쳐지는 dialog를 만들어라.
  - 그리고 거기서 원하는 property를 선택하고 ,
  - Property에 해당하는 Entry Point를 선택한다.(예. rgb(255, 255, 255)
  - 그 이후, apply 버튼을 선택하고,
  - 애니메이션이 적용되어 보여지는 방법 어떠냐 (멘토님 제안)

rlottie Git Page Wiki 영상 참고
- rlottie 애니메이션이 어떻게 구현되어있는지 설명해주신다.
rlottie는 Shape들의 집합
- 자료구조: tree
- 그룹 밑에 여러 shape들과 해당 shape에 layer들 존재
- tree를 탐색해서 찾아가야 한다.
Key Interface
- Assembly에 Binary 추가 (권장하지 않음)