[PlusX UI] 26일차 토요일

내가 강의 계산을 잘 못했던 것 같다.

오늘이 바로 마지막 강의인 챕터 3의 애니메이션 소스 활용하기 부분이기 때문이다.

나는 일요일날 딱 맞춰서 끝낼 수 있으리라 생각을 했었는데, 생각과는 다르게 하루 더 일찍 마무리를 짓게 되었다.

아니 생각보다 굉장히 놀라운 것은 이제 정말 내일이면 미션이 다 끝난다는 것이다 !

생격보다 길지만 또 짧기도 한 여정이라고 해야할까?

아주 못해먹을 것은 또 아니라는 생각이 들었다.

강의는 매일 하나씩 들을려고 했으며, 공부속도는 스스로 조절해나갔다.

그랬더니 어느정도 매일매일 공부하는 습관이 잡혔다는 생각까지 들기도 했다.

내일은 미션의 마지막날이라서 인터렉션 부분의 강의를 전체적으로 훑어보며 다시 복습을 하려고 한다.

그 전에 오늘은 애니메이션 소스를 활용하며 어떻게 활용하는 것인지 알아보도록 하자

 

--

 
 

화면이 변화되며 제이슨형식, mp4 등 애니메이션을 이용한 인터렉션은 소비자의 시선을 자로잡고 효과적으로 전달할 수 있게 된다.

이러한 애니메이션 소스를 많이 응용하여 디자인을 한다고 한다.

 

화면이 스크롤되며 중간중간 애니메이션 소스가 구동되는지에 대해서는

1) 소스를 어떻게해서 최적화를 시키는지

2) 어떤 형식의 영상소스로 영상을 추출해야하는지

3) 프레임 수는 어떻게 맞춰야 하는지

4) 임베드 코드는 어떻게 생성시켜야하는지

 

이러한 영상소스 파일을 실제 제작할 때 어떻게 개발자들과 함께 맞춰서 전달을 하는지에 대해서

알 수 있는 강의이다.

EXPORT -> .mpy, gif, apng, json

 

스크롤 화면에 따라 영상이 재생되는 모습은 PNG Sequence가 적합하다.

제작된 영상소스를 각 프레임의 이미지로 추출하는 방식이다.

스크롤에 맞춰서 각각 영상의 프레임을 추출하는 방식으로 알 수 있다.

에펙이나 프리미어 프로 등의 영상 편집 프로그램으로 편집 후 PNG 시퀀스로 제작한다고 한다.

나는 PNG 시퀀스는 3d 작업할 때만 그렇게 뽑아 제작하는 줄 알았는데,

생각해보니 여기서 아이템의 모션같은것도 png 시퀀스와 웹뷰로 뽑아서 재생을 하고 있다는 것이 떠올랐다.

알지비 알파값을 두고 PNG 시퀀스로 뽑으면 된다.

 

두번째는 APNG 형식이다.

루핑 애니메이션의 큰 화면으로 사용되는 화면은 GIF로는 잘 추출되지 않는데, 우선 용량이 크고, 잘 깨지기 때문이다.

때문에 APNG의 소스로 루핑되는 화면이 주로 이루어져있다고 볼 수 있는데, 영상을 추출해서 적용하면 된다.

이 방식은 GIF와 비슷한 방법으로 애니메이션을 구현하면서 기존 PNG 파일과의 하위 호환성을 유지했기 때문에 GIF보다 더 높은 품질을 보여준다고 한다.

간단한 마이크로 애니메이션을 제작할 때 많이 사용된다고 한다.

해당 파일은 에펙에서 로딩 부분까지 전부다 제작을 하게 되는데, 추출하고 싶은 부분에 타임라인을 트림시켜 작업파일을 렌더하는데,

렌더대기열의 아웃풋에 기본 세팅은 PNG 시퀀스로 포멧을 변경하고, 알파값을 포함한 채널로 추출을 한다.

이후에 렌더를 하면 PNG 시퀀스와 동일하게 된다. 이후 Make APNG 사이트를 활용해 원하는 APNG를 만들면 된다.

Export 설정은 딜레이 스피드(6-8sec)와 루프 카운트, 돈 스턱 프레임의 체크를 클릭한 후 추출을 하면 된다.

이런 형식이 있는 줄 몰라 항상 GIF로 제작을 했었는데 굉장히 도움이 많이 되었다.

 

이후 내용은 강의에서..

 

 

 

 

 

 
bx강의, PLUSx, plusxshare, ui강의, ux강의, 패스트캠퍼스, 플러스엑스, 플러스엑스강의후기, 플러스엑스셰어엑스, 플러스엑스환급챌린지