IT에이전시 다니는 T.A

프로젝트를 진행하며, Mp4, Mov의 영상 확장자를 성능, 용량의 이슈로 사용할 수 없고,

WebP, WebM이 지원되지 않아 사용할 수 없다면,

2D 이미지를 애니메이션 할 수 있는 방법은 다음과 같다.

(1) 3D object + Bone + Key Animation

(2) Key Animation

(3) Gif

물론 각각의 장단점이 있지만,

모션그래픽영상을 사용하는 경우는 사용할 수 있는 선택지는 다음과 같다.

(1) Lottie

(2) Sprite Sheet

*개발자님들,,, 지원해주시면 안되요? 라고 했다가 전날 야근으로 지처있는 개발자의 아득한 눈망울을 보고 말았다...

당연히 모션그래픽일 경우 Lottie로 나가는 것이 가장 좋지만,,,
최적화로 보았을때 벡터 형태의 모션그래픽이라는 한계가 존재한다.

시간도 없고 원본 퀄리티를 지키기 위해서는 Animation Sprtie 가 최선의 선택지이다.

스프라이트 시트는 여러개의 작은 그래픽을 그리드에 정렬하여 구성한 비트맵 이미지 파일이다.

Code를 통해 연속적으로 재생하는 형태로 사용되며,

Looping 되는 짧은 이미지 파일 혹은 짧은 모션 그래픽에서 리소스 최적화를 위해 사용하기 매우 좋다.

*단 1:1 비율로 가로세로가 존재해야되며, 빈공간이 존재해서는 안된다.

포토샵, 일러스트와 같은 어도비 계열 툴부터 PPT, Game Engine 등 여러 방법으로 리소스를 생성할 수 있으나,
우리는 빠른 퇴근을 위해

빛과 소금인 Gluelt를 사용하는 법에 대해 알아가고자 한다.

https://github.com/Kavex/GlueIT

단순하게 생긴 UI는 니가 퇴근을 빠르게 할 수 있을 것이다 라고 말해주고 있다.

테스트를 위해 사용했던 데이터를 참고하고자 한다.

Add 를 통해 이미지를 받게 되면 다음과 같은 화면으로 되게 되며,

순서는 다음과 같다.

1. Number Of Colums

# X #으로 이미지 시트를 제작해주는 영역이며, 빈공간이 없이 만들어 주는 것이 핵심이다.
ex)
16장의 이미지 -> 4 X 4
9장의 이미지 -> 3 X 3

** 이미지는 2진수로 커지는 것이 올바르기 때문에 1:1 비율로 이미지를 생성해주는 것이 바람직 하다.
https://m.blog.naver.com/dohjang/221898954780

2. GlueIt

리소스는 6장의 이미지 이기 때문에 Number Of Columns에 3을 입력하고 GlueIT 버튼을 눌러 Sheet를 제작한다.

*GlueIT 버튼을 클릭해야 저장을 할 수 있다.

*Alpha가 있는 영역의 경우 Black으로 표현한다.

다음과 같이 이미지가 생성되게 된다면 Save를 통해 이미지를 저장하면 된다.
*필요에 따라서는 Pngyu를 통해 Indexed Color Space 로 변환하여 최적화를 진행 할 수 있다.

Q&A

Q. Sheet에 빈공간이 발생되게 되면 어떻게 되는가.
A. 빈 이미지가 출력되게 되며, Code를 통해 막을 수 있으나 불필요하게 Code가 길어지고 리소스를 잡아먹게 되기때문에 빈영역이 발생되지 않는 것이 좋다.

Q. 이미지 크기가 너무 커져서 리소스가 오히려 더 커졌다 이 경우 어떻게 진행해야되나?
A. 원본 이미지 크기를 일정부분(75~90%) 줄여서 이미지를 생성하는 것이 좋다.
* 생성시 이미지가 깨질 수 있으니 이점은 눈으로 확인하며 퀄리티 체크를 진행하는 것이 좋다.

Q. 데이터가 출력이 안되는데 어떠한 이유인지 알수 있을까?
A. 이미지가 너무 큰 경우 (Png에서 지원하지 않는 경우) 제작이 안될 수 있다.
*이럴 경우에는 개발자와 상의해서 영상확장자를 지원하는 쪽으로 가닥을 잡는 것이 정신건강에 이롭다.

https://sketchit.tistory.com/entry/glTF-GL-Transmission-Format%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

.Gltf 는 크로노스 그룹에서 개발을 리드하는 무료 국제 표준 확장자이며

Gltf를 3D 모델계의 JPGE 라는 슬로건과 함께 최적화를 내세우며 2016년 부터 사용하게 되었다.

많은 개발 및 디자인 툴에서 최적화를 위해 널리 보급되어 사용되고 있으며,

최종 최적화 단계에서 컨버팅 하고 사용하고 있다.

https://www.youtube.com/watch?v=tonSNnEj-ow&ab_channel=TheKhronosGroup

.GLTF 의 특징으로는 3D 좌표계인 Geometry 정보와 Texture를 하나의 파일로 묶어 저장한다는 특징을 가지고 있으며,

그 밖에 애니메이션(+몰프타겟 및 Skin) 및 카메라 정보값을 하나의 파일로 가지고 있다는 장점이 있다.

*단 많은 DCC 툴에서 공식적으로 지원하는 것이 아니기 때문에 개인 개발자의 노력으로 서브 플러그인을 만들어 사용하는 경우가 많았다.

이 내용은 Web 3D 콘텐츠를 제작하며 최대의 효율(시간과 퀄리티)을 낼 수 있는 방법에 대해 서술하고자 한다.
시간이 지나면서 많은 툴에서 지원한다면... 다시 바뀔수도 있다!!!

1. Maya Setting

Main으로 사용하는 Dcc Tool의 경우 Maya를 사용하고 있어 Maya 사용자를 기준으로 작성을 이어가고자 한다.

(Mesh + Ani 30Fps)

(Mtl Setting)

** FBX에서 지원되는 Material을 사용하는 것을 권장하며, Lambert 를 추천 한다.
***Vray, Anrold Mtl 은 지원하지 않는다.

**** 3Ds max 최신버전에서는 Gltf Export를 지원하지만 애니메이션이 출력되지 않는 단점이 존재한다.

***** Maya의 경우에는 Plugin을 통해 GLTF로 출력은 가능하다 (하지만 안쓰는 이유는...)

****** Export의 경우 최대한의 최적화를 위해 Blender를 거치게 된다. (Maya 도 공식지원 됬으면,,,,)

2. Blender Setting

Maya에서 Export한 FBX를 확인하게 된다면 그래프 값이 깨져서 들어오는 것을 확인 할 수 있다.

가장 좋은 방법은 Maya FBX Export 시에 확인해서 넘겨받는 것이 Best이지만 상황상 할수없다면 Window 3D Viewer를 활용하여 GLB로 컨버팅해오는 것이 정신건강에 이롭다. 

*가장 좋은 방법은 Maya에서 지원하거나 Blender에서 모든 애니메이션 세팅을 끝내는 것이 좋다.

**Key가 Bake 되기 때문에 불필요한 Key 값이 늘어나 용량이 늘어난다는 단점이 있다.

*** 30Fps로 작업된 Animation이 24Fps로 변경되어 저장되며

익스포트 세팅을 확인하게되면 크게 2가지를 확인해야된다.

(1) Animation NLA

Blender에서는 NLA라는 시스템을 사용하고 있다. 이를 통해 애니메이션이 1개로 익스포트 되는것이 아닌 오브젝트마다 애니메이션이 따로 출력되는 문제가 발생된다. 그렇기에 기본 체크박스가 셀랙되어 있는 부분을 풀어서 저장해주어야 FBX에 1개의 애니메이션 트랙만 저장이 된다.

(2) Compress

Geometry 부분을 확인하게 되면 Compression 항목이 있을 것이다 이것은 Draco 코덱을 활용하여 압축하는 방식이며

기존 GLTF보다 더 높은 압축률을 자랑한다.

GLTF로 압축하게된다면 이미지 데이터를 RGB -> Index Color Sapce로 변경해주고,

Draco의 경우 저장되어있는 이미지 데이터를 WebP 변경 해준다.

그밖에 알고리즘을 통해 Vertex 및 Animation을 압축하는 것으로 예상되며 Draco를 사용하게 된다면 모바일과 PC 플랫폼에서 낮은 리소스 사용량을 발생시켜 프로젝트에 사용이 가능하다면 사용하는 것이 좋다.

*프로젝트 상황에 따라 Draco를 사용하지 못하는 경우가 존재한다.
*컴프레션 레벨 7이상의 경우 Vertex가 변경되는 문제가 간혹있어 6정도로 압축하는 것이 정신건강에 이롭다.

 Q&A

Morph, Blend Shape
>>> FBX에 정상적으로 담기면 다행이겠지만,,, 그렇지 못하다... Blender로 작업해서 Export하는 것이 정신건강에 이롭다.

Image resource

>>> 단순하게 컬러만 사용되는 경우를 제외하고 실사 텍스처가 사용될 경우 GLTF에 담아내는 것이 아닌 따로 임포트 받는것이 퀄리티를 지킬 수 있는 방법니다
*GLTF + Draco를 사용한다면 Export 시에 알고리즘으로 인해 Textuer 퀄리티 저하가 발생되기 때문에 이점은 꼭 유념해야된다.

Scale Error

>>> Maya, 3Ds Max에서 작업이 진행된다면 스케일 값이 1/100으로 줄어있는 문제가 발생되게 된다.

Pivot Error

>>> 간혹 오브젝트 Pivot이 0,0,0으로 수정되는 버그가 있어 따로 Null Grp을 상위에 감싸서 사용하는 것이 정신건강에 이롭다.

Web콘텐츠와 관련하여 Mp4, MKV, WebM을 압축하는 방식은 기존에 인코더 프로그램으로 진행 할 수 있지만

더욱 최적화 하여 사용하는 방법으로는 HandBrake를 추천한다.

*이 툴의 존재를 공유해주신 S사 개발자분께 존경을 표한다.

https://handbrake.fr/

해당 툴의 경우 한국어 번역도 의외로 잘되어있어 사용하기 편한장점을 가지고 있으며,

맥, 윈도우에서 무료로 사용할 수 있는 장점을 가지고 있다.

테스트를 위해서 영상하나를 준비하여 진행하였다.

해당 데이터를 불러오게 되면 다음과 같은 화면으로 실행되게 된다.

각 환경에 맞게 바로 세팅이 가능하며 해상도 및 자막 오디오 등 세팅이 가능하다.
*프리셋도 존재하나 이 부분의 경우 필요에 따라 저장하고 사용하는 것을 추천한다.

비디오 부분에서 화질(퀄리티)를 조정할 수 있으며, 사용해본 경과 25정도의 퀄리티면 준수한 압축을 이끌어 낼 수 있다.

중요

핸드브레이커에서는 자막을 자동으로 생성하는 불필요한 기능을 가지고 있다.

그렇기에 인코딩을 진행하기 전 이부분은 삭제하여 진행하는 것을 추천한다.

테스트로 진행한 영상을 인코딩할 경우 다음과 같이 인코딩을 마칠 수 있다.

*이미지를 참고할경우 비트레이트와 프레임이 조절된 것을 확인 할 수 있으나 눈에 띌정도로 화질 저하가 발생하지 않은 것을 확인 할 수 있다.

1.6Mb	357Kb

마치며

핸드브레이커를 사용하게되면 비트레이트와 프레임 수정을 통해 인코딩을 진행할 수 있으며,
Unity, Unreal과 같이 툴 자채에서 GPU로 보내기 위해 컴프레스를 진행하는 방식 외에

Web 콘텐츠에서 우수한 수준으로 최적화를 진행 할 수 있다.
*특히 일러스트와 같이 벡터를 사용한 영상콘텐츠의 경우 압도적인 용량 압축을 이뤄낼 수 있다.