애니메이션을 GIF로 내보냈을 때 배경색 문제

안녕하세요!

GIF 내보내기에 대한 답변을 드립니다.

GIF는 PNG와 달리 오직 1개의 색상값만 투명이 되며, 이를 위한 별도의 내부 기능이 필요합니다.

안타깝게도, 저희가 사용하는 GIF 내보내기 라이브러리에서 투명색으로 내보내기를 지원하지 않으므로, AnyPortrait 만으로는 요청한 기능을 수행하는 것이 불가능합니다.

(저희가 구현할 당시의 스펙을 기준으로 답변 드립니다.)

어쩔 수 없이 해당 작업을 위해서는 외부의 프로그램을 이용하셔야 합니다.

이 문의에 대해 답변을 드리고자 여러 방향으로 해결책을 모색해보니, (1) 온라인의 변환 툴을 이용하는 쉬운 방법과 (2) 포토샵 등의 프로그램을 이용하는 방법이 있었습니다.

또한 (1) 완성된 GIF 파일에서 특정 색상을 투명하게 만드는 방법과 (2) 투명 배경의 PNG 파일 리스트를 GIF 애니메이션 파일로 만들기의 두가지 방법이 있었습니다.

저희는 이 답변에서 (1) 온라인의 변환 툴을 이용하여 완성된 GIF 파일에서 특정 색을 투명하게 만드는 방법과 (2) 포토샵에서 PNG 파일 리스트를 GIF 애니메이션 파일로 만드는 방법을 각각 설명드리고자 합니다.

물론, 저희가 소개한 프로그램 외에도 유사한 기능을 제공하는 다른 많은 도구들이 존재하니 편리한 툴을 찾아서 이용해보시면 되겠습니다.

(참고로, 저희는 프로그램 사용 방법에 대해서 소개만 해드리며, 이 프로그램 사용에 대한 문제에 대해서는 책임을 지지 않습니다.)

1. 온라인 툴을 이용하여 특정 색상을 투명하게 만들기

이번에 저희가 검색을 해보니 많은 GIF 변환을 지원하는 온라인 도구들이 있었습니다.

저희는 그 중에서 " https://ezgif.com/ " 라는 사이트의 도구를 이용해보았습니다.

먼저 GIF 애니메이션을 만들어봅시다.

(1) 배경색을 설정합니다. Alpha의 값을 255로 만들어서 투명하지 않게 만들어야 하며, 캐릭터 이미지에 없는 색상이어야 합니다.

(2) 완성될 이미지 파일의 크기를 설정합니다.

(3) GIF 품질과 Loop 횟수를 설정하고 Export as GIF 버튼을 누릅니다.

GIF 애니메이션이 완성되었습니다.

(1) https://ezgif.com/ 사이트에 접속합니다.

(2) "Effects" 메뉴를 선택합니다.

(3) GIF 파일을 선택합니다.

(4) Upload 버튼을 누릅니다.

GIF 파일이 로드되면 각종 옵션들이 나타납니다.

화면의 아래쪽에 "Replace color with transparency" 항목이 나타납니다.

배경색을 보라색(#FF00FF)으로 설정했으므로 Custom (HEX)를 선택하고 해당 색상을 입력한 후, "don't stack frames"를 체크합니다.

(1) Apply selected 버튼을 누릅니다.

(2) 배경이 투명해진 GIF 애니메이션 이미지를 볼 수 있습니다.

(3) Save 버튼을 눌러서 완성된 파일을 저장할 수 있습니다.

여기서는 보라색으로 배경색을 설정했는데, 외곽선에서 블러 처리가 되어 색상이 조금 바뀐 부분에서는 투명색으로 변환되지 않은 것을 볼 수 있습니다.

따라서 이 점을 해결하기 위해서는 배경색을 검은색 등으로 설정하는 것이 좋습니다.

검은색 배경의 GIF를 만들고 동일한 과정으로 업로드를 했습니다.

이번엔 같은 옵션에서 "black"을 선택했습니다. 동일하게 "don't stack frames"를 체크합니다.

Apply selected 버튼을 누르면, 마치 검은색 외곽선이 조금 남은 것 처럼 깔끔하게 투명색이 제거된 결과를 볼 수 있습니다.

< 온라인 도구를 이용해 완성된 결과 입니다. >

2. 포토샵을 이용하여 PNG 파일 리스트를 GIF 애니메이션으로 만들기

어도비 포토샵 또는 이미지 처리 프로그램 중에서 GIF 애니메이션 내보내기 기능이 있는 프로그램을 이용하면 고품질의 GIF 애니메이션을 얻을 수 있습니다.

여기서는 가장 많이 사용되는 포토샵을 이용했습니다.

저희는 https://helpx.adobe.com/kr/photoshop/how-to/make-animated-gif.html 의 튜토리얼을 참고했으며, 포토샵 CS6를 이용했습니다.

(포토샵 버전이나 언어에 따라 일부 메뉴 구성이 다를 수 있습니다.)

포토샵이 아니더라도, 아래의 설명은 유사한 기능을 가진 다른 프로그램에서도 참고하실 수 있을 것입니다.

(1) 화면 캡쳐 메뉴에서 Spritesheet 탭을 선택합니다.

(2) 배경색을 설정합니다. PNG로 내보낼 것이므로 투명색으로 설정해봅시다.

(3) 내보낼 애니메이션을 선택하고 "Export Sequence Files" 버튼을 눌러서 이미지 파일을 내보냅니다.

주의할 점은, 매 프레임마다 이미지가 생성되므로, 이미지 파일 개수가 정말 많을 것입니다.

비어있는 새 폴더를 만들고, 그 폴더에 저장하시는 것을 권장합니다.

이미지 파일들이 순서대로 생성되었습니다.

이제 이 PNG 파일들을 이용해서 GIF 애니메이션을 만들어봅시다.

포토샵을 실행합니다.

(1) "File > Scripts > Load Files into Stack.." 메뉴를 실행합니다.

이미지 파일을 선택하는 창이 열립니다.

"Browse..." 버튼을 누릅니다.

저장된 PNG 파일들을 모두 선택하고 OK 버튼을 누릅니다.

이전의 창에 모든 파일이 등록되었다면, OK 버튼을 눌러서 로드를 해봅시다.

이미지들이 하나씩 열리면서 레이어로 등록이 되는 과정이 반복됩니다.

이 작업에는 시간이 많이 소요됩니다.

(1) PNG 이미지들이 하나의 파일에 레이어들로 추가된 것을 볼 수 있습니다.

(2) 애니메이션 설정을 위해 "Window > Timeline" 메뉴를 엽니다.

프레임 애니메이션을 생성해야합니다.

(1) "▼" 버튼을 누르고 (2) "Create Frame Animation" 모드를 선택합니다.

(3) "Create Frame Animation" 버튼을 누릅니다.

(1) 애니메이션이 생성되었지만 아직 1프레임만 생성된 상태입니다.

(2) Timeline 창의 우측 상단의 메뉴 버튼을 누릅니다.

(3) "Make Frames From Layers" 메뉴를 누릅니다.

(1) 이미지 레이어들이 각각 프레임이 되어서 애니메이션이 완성됩니다.

이때 이미지 레이어명을 보시면, 애니메이션이 거꾸로 재생되는지 확인할 수 있습니다.

(2) 이 경우엔 다시 메뉴 버튼을 누르고 (3) "Reverse Frames"를 누릅니다.

애니메이션 재생 속도를 조절해야합니다.

(1) 메뉴 버튼을 누르고 (2) "Select All Frames"를 선택합니다.

모든 프레임이 선택된 상태가 될 것입니다.

(1) 그 상태에서 한 프레임의 "0 sec ▼" 버튼을 누르고 (2) "Other..."를 선택합니다.

(3) 애니메이션 속도를 고려하여 프레임당 시간을 입력하고 OK 버튼을 누릅니다.

모든 프레임이 선택된 상태에서는, 프레임당 시간이 일괄적으로 모두 변경됩니다.

(참고: 30 FPS라면 1/30 = 0.0333초 입니다.)

애니메이션이 완성되었으니 GIF로 저장해야합니다.

저희가 사용하는 포토샵 CS6에서는 "File > Save for Web..."을 선택합니다.

최신 버전인 포토샵CC인 경우엔 해당 메뉴가 "File > Export"의 하위에 존재합니다.

GIF를 내보내기 위한 설정 화면입니다.

저희가 설정한 옵션은 위와 같으며, 상황에 맞게 적절히 옵션을 설정하면 되겠습니다.

저희의 옵션을 기준으로 설명드립니다.

(1) "Preset"을 먼저 선택합니다. 주로 "GIF 128 Dither"를 선택합니다. (위 이미지에서는 설정이 임의로 변경되어 "Unnamed"로 나타났습니다.)

(2) "Transparency"가 체크되어 있어야 합니다.

(3) 품질을 높이기 위해 "Colors"를 256으로 설정했습니다.

(4) Matte의 색상을 지정했습니다. 반투명한 부분에 지정될 색상을 지정하면 깔끔한 외곽선을 얻을 수 있습니다.

(5) 이미지 크기를 변경할 것이라면 여기서 설정합니다.

(6) 애니메이션 Loop 설정을 "Forever"로 설정해야합니다. (기본값은 한번만 재생되는 것입니다.)

(7) Save 버튼을 눌러서 저장합니다.

< 포토샵을 이용해 PNG 파일들로부터 완성된 GIF 애니메이션입니다. >

위 방법들 외에도 유니티 레코더(Unity Recorder)를 이용하는 방법도 고려되었는데, 투명 배경에서의 "Keep Alpha" 이슈가 있어서 설명에서는 제외했습니다.

이 내용에 대해서는 아래의 링크에서 자세히 보실 수 있습니다.

https://rainyrizzle.github.io/kr/AdvancedManual/AD_UnityRecorder.html

가능하면 AnyPortrait 내에서 모든 작업이 된다면 좋겠지만, 해당 기능은 외부 라이브러리를 활용하여 구현하였기 때문에 저희가 지원해드리기가 쉽지 않을 것 같습니다.

만족할만한 답변을 드리지 못하여 죄송합니다.

답변에 대해서 궁금한 점이 있다면 댓글을 남겨주세요!

저희가 가능한 범위 내에서 최선을 다해 도움을 드리겠습니다.

감사합니다.

Eng)

Q. How to make the background transparent when exporting to a GIF file?

A. You will need to use an online tool or another program such as Photoshop.

use the function to make certain colors transparent or to convert PNG images to a GIF file.