라인스토어의 움직이는 애니메이션 이미지를 분석하다가 APNG에 대해 알게 되었습니다.
APNG(Animated Portable Network Graphics)는 PNG를 확장한 이미지 파일 포맷으로, Stuart Parmenter와 Vladimir Vukicevic가 제안했다. 이 포맷은 GIF와 비슷한 방법으로 애니메이션을 구현하면서 기존 PNG 파일과의 하위 호환성을 유지했기 때문에 GIF보다 더 높은 품질을 보여 준다. PNG 기반의 애니메이션 파일 포맷으로 MNG도 있지만, APNG는 MNG보다 구현이 간단하고 호환성이 유지된다는 장점이 있다.
위키백과 (ko.wikipedia.org/wiki/APNG)
즉 gif의 업그레이드, PNG에 애니메이션 효과를 붙인 개념이라고 보시면 되는데요, google에서 만든 webp도 있지만 개인적으로 APNG를 선호하는 이유는 하위 PNG와 호환되는 점 때문이었습니다.
webp는 google chrome를 제외하고는 현재 지원되지 않습니다. apng 역시 mozilla 계열을 제외하고는 지원되지 않으나, 호환성 때문에 지원하지 않는 브라우저에서는 첫 프레임만 정지영상으로 남는 차이가 있습니다.
현제 개인적으로 제작하고 있는 웹앱(web app)의 과정을 기반으로 APNG를 만드는 방법을 소개하고자 합니다.
Photoshop에서 애니메이션을 제작합니다.
저는 Flash나 After effect등을 할줄 모르기 때문에 Photoshop로 제작했습니다.
어차피 프레임마다 이미지를 뽑아내는것이 중점이므로, 작업방식/프로그램 모두 상관 없습니다.
완성이 되었으면, File > Export > Render Video 로 이동합니다.
다음과 같이 설정합니다.
A. 내보내기 할때 생성될 파일 이름을 입력합니다.
B. 파일이 생성될 디렉터리를 선택합니다.
Format. 우리가 APNG를 사용하는 이유는 사실상 Alpha채널을 지원하기 때문이므로 PNG를 선택합니다.
C. 파일에 붙을 숫자를 몇 자리로 할것인지를 선택하는 항목입니다.
Starting는 말 그대로 몇번부터 생성할 것인지, Digits는 숫자 자릿 수를 가리킵니다. (3이면 001, 002, 003 … )
설정을 다 마치셨으면, Render를 진행합니다.
생성된 폴더로 이동하여 이미지를 정리합니다.
여기서 정리는 프레임때문에 동일한 이미지가 생성된 경우를 가리킵니다.
이는 APNG 를 생성할때 조정이 가능하므로, 용량을 절약하기 위해 삭제를 진행합니다.
APNG Assembler 다운로드
우리가 APNG를 쉽게 만들 수 있도록 도와줄 고마운 친구입니다.
https://sourceforge.net/projects/apngasm/ 로 이동하여 자신의 운영체제 및 환경에 맞는 최신버전을 다운로드 합니다.
APNG 변환
압축을 풀고 프로그램을 실행합니다.
A. 애니메이션의 반복횟수와 첫 프레임을 Skip 할 것인지를 선택할 수 있습니다.
infinity loop면 0을 입력하시면 됩니다. (저는 무한 반복할 것이므로 0 입력)
B. 압축과 관련된 설정부분 입니다. Default는 7zip이며 그냥 그대로 둡니다.
C. 모든 이미지의 프레임을 설정할 수 있습니다.
D. Input files list에서 선택된 이미지를 개별로 프레임 설정이 가능합니다.
E. export 될 이미지의 이름과 디렉터리를 선택할 수 있습니다.
모든 설정이 다 끝났으면 Make Animated PNG를 누릅니다.
APNG 최적화
이렇게 하고 끝내면 좋겠지만, 그리고 알아서 압축도 해줍니다만 혹시 모르니 최적화(라 부르고 압축)을 진행해줍니다.
동일한 제작사에서 만든 최적화 프로그램을 이용하여 최적화 하겠습니다.
https://sourceforge.net/projects/apng/files/APNG_Optimizer/ 로 이동하여 파일을 다운로드하고 압축을 해제합니다.
아까 생성된 APNG를 Drag&Drop 합니다. (물론 cmd 켜서 cd로 해당 디렉터리 이동해서 할 수 있지만, 일반 디자이너들에게는 복잡하므로 이 방법을 사용합니다.)
그러면 명령 프롬프트 창이 뜨면서 알아서 최적화를 진행합니다.
원래 이미지 디렉터리에 원본이름에 “_opt” 접두어가 붙어서 생성됩니다.
사실 이렇게 까지 하면 좋지만, 용량차이가 없거나 크지 않습니다.
위 방법은 무손실 최적화 방법이고, 이번에 진행할 방법은 손실 압축방법입니다.
tinypng.com으로 이동합니다.
손실압축할 APNG 파일을 드래그엔 드롭하기만 하면 끝
