이미지로 움직이는 GIF 만드는 방법

짧은 답

GIF 만들기를 열고 사진을 넣은 다음, 재생될 순서대로 놓고, 각 프레임이 얼마나 머무를지 정하고 GIF를 만드세요. 저장하기 전에 페이지에서 재생됩니다.

아래에서는 그 뒤에 잘못되는 두 가지를 다룹니다. 파일이 예상보다 훨씬 크거나, 움직임이 숫자가 말한 것보다 느리게 재생되거나. 둘 다 분명한 원인이 있고, 어느 쪽도 도구의 결함이 아닙니다.

GIF가 예상보다 훨씬 큰 이유

640픽셀짜리 20프레임 GIF는 흔히 8~15MB입니다. 같은 움직임을 MP4로 만들면 수백 킬로바이트입니다. 잘못 만든 GIF라서가 아니라, 그 형식이 원래 그렇습니다.

지금까지 써 본 다른 모든 동영상 형식은 차이를 저장합니다. 영상 코덱은 온전한 프레임 하나를 쓴 다음, 그 뒤의 프레임에 대해서는 무엇이 어디로 움직였는지만 씁니다. 가만히 있는 배경 앞에서 말하는 사람을 찍은 영상이 프레임당 거의 아무 비용도 들지 않는 이유죠. GIF는 그럴 수 없습니다. 모든 프레임이 픽셀 전체로 저장되어 무손실 압축기를 지나갈 뿐이고, 연장은 그것이 전부입니다.

화질 설정도 없습니다. 낮출 손실 단계가 없기 때문입니다. 화질 60%짜리 JPEG는 진짜 슬라이더가 뒤에 있는 진짜 선택이지만, GIF에는 그에 해당하는 것이 없습니다. 그래서 크기는 대략 면적 × 프레임 수이고, 그것을 움직이는 유일한 방법은 그 두 숫자 중 하나를 움직이는 것입니다.

실제로 작게 만드는 세 가지

도움이 되는 순서대로.

1. 작게 만드세요. 여러 선택지 중 하나가 아니라, 그 선택지입니다. 크기는 면적이라 긴 변을 절반으로 줄이면 파일은 4분의 1이 됩니다. 640 px을 320 px으로 내리면 12 MB가 3 MB쯤이 됩니다. 웹페이지나 메신저 창의 GIF는 어차피 몇백 픽셀로 보입니다. 도구의 기본값이 480 px인 이유가 정확히 이것이고, 320 px도 충분히 떳떳한 답입니다.

2. 프레임을 줄이세요. 0.2초씩 머무는 열 프레임은 0.1초씩 머무는 스무 프레임과 똑같은 2초짜리 움직임이고, 파일은 절반입니다. 부드러움은 바이트에 정비례해 값을 치르므로, 움직임이 정말 필요로 하는 곳에만 쓰세요.

3. 디더링을 끄고 색을 줄이세요. 이건 직관과 어긋납니다. 디더링은 팔레트에 없는 색을 흉내 내려고 번갈아 놓인 픽셀의 고운 무늬를 뿌리는데, 그 무늬가 곧 잡음입니다. 무손실 압축기가 압축하지 못하는 바로 그것이고요. 평평한 그림과 스크린샷, 선화에서는 이것을 끄면 파일에서 3분의 1을 덜어 내면서 더 나아 보이기까지 합니다. 사진에서는 눈에 보이는 띠와 절감을 맞바꾸는 것이니, 둘 다 해 보고 눈으로 고르세요.

256색에서 64색으로 내리는 것도 도움이 되지만, 사람들이 바라는 것보다는 덜합니다. 픽셀을 없애는 것이 아니라 코드 낱말을 짧게 만드는 것이니까요.

그것으로도 충분히 작아지지 않는다면, 정직한 답은 이렇습니다. 지금 만들고 계신 것은 사실 영상입니다. 같은 이미지를 MP4로 만들면 아마 10분의 1일 것이고, <img> 태그가 아닌 용도로 GIF를 받는 곳은 모든 소셜 네트워크를 포함해, 어차피 올릴 때 그걸 영상으로 바꿔 놓습니다.

GIF가 실제로 얼마나 빠르게 재생될 수 있는가

이 형식은 각 프레임의 지연을 100분의 1초 단위로 저장하므로, 0.01초를 요구하면 초당 100프레임을 얻을 것처럼 보입니다. 그렇지 않습니다.

모든 브라우저가 100분의 2초 미만의 지연을 10분의 1초로 올려 묶습니다. 이 규칙은 1990년대에서 왔습니다. 페이지가 최대한 빠르게 재생되도록 설정된 애니메이션으로 가득했고 당시 기기들이 그것을 견디지 못하던 시절이죠. 도입된 이유는 전부 수명을 다했습니다. 그런데도 한 번도 걷히지 않았고, 오늘 만드는 GIF에도 그대로 적용됩니다.

그래서 현실적인 범위는 이렇습니다.

• 0.02초(초당 50프레임). GIF에 허용된 가장 빠른 값이고, 보통 필요한 것보다 빠릅니다.
• 0.05초(초당 20프레임). 매끄러운 움직임. 동작을 애니메이션으로 만든다면 여기서 시작하세요.
• 0.1초(초당 10프레임). 고전적인 GIF의 느낌. 프레임도 절반, 파일도 절반이고, 의도한 것처럼 읽힙니다.
• 0.5초 이상. 슬라이드쇼. 사진 하나하나를 애니메이션이 아니라 들여다보는 것입니다.

0.02초 아래는 제시하지 않습니다. 어느 브라우저에서든 말없이 0.1초가 될 숫자이기 때문입니다.

팔레트가 실제로 고르고 있는 것

GIF 프레임은 최대 256색을 담습니다. 사진에는 수만 가지가 있습니다. 무언가는 그중 256개를 골라야 하고, 다른 어떤 설정보다도 그 선택이 결과물의 생김새를 결정합니다.

도구는 두 가지 방법을 제시합니다.

프레임마다 최적의 색은 사진마다 자기 256색을 줍니다. 가장 또렷해 보이고, 어차피 저마다 완전히 다른 묶음을 원하는 무관한 사진 모음에는 이쪽이 맞습니다.

GIF 전체에 하나의 팔레트는 모든 프레임에서 한 번에 표 하나를 만듭니다. 프레임이 같은 장면을 몇 순간 간격으로 찍은 이어지는 장면일 때 쓰세요. 프레임별 팔레트에서는 그림이 조금만 달라져도 어떤 256색이 뽑히는지가 달라지고, 배경 전체가 프레임마다 색을 살짝 옮깁니다. 그 일렁임이 직접 만든 GIF를 직접 만든 것처럼 보이게 만드는 것입니다. 공유 팔레트는 그것을 없애고, 표를 프레임마다가 아니라 한 번만 쓰기 때문에 파일까지 작아집니다.

색을 128이나 64, 32로 줄이는 것은 평평한 그림에 해 볼 만합니다. 여덟 가지 색으로 이루어진 로고 애니메이션은 32색에서도 잃는 것이 없고, 사진에서는 차이가 곧바로 보입니다.

투명도는 1비트, 그게 이야기의 전부입니다

GIF 픽셀은 완전히 칠해지거나 완전히 보이지 않거나 둘 중 하나입니다. 그 사이는 없습니다. 50% 그림자도, 부드러운 가장자리도, 흐려짐도요.

그래서 원본 이미지에 투명한 부분이 있다면 이 항목을 켜서 그것을 투명하게 지킬 수 있습니다. 다만 도형에서 무(無)로 이어지는 그러데이션인 안티앨리어싱 가장자리는 전부 중간에서 잘려 딱딱하고 눈에 띄게 들쭉날쭉해집니다. 둥근 모양과 글자가 가장 크게 상합니다.

GIF가 놓일 배경의 색을 아신다면, 그 색 위에 눌러 두는 편이 언제나 더 나아 보입니다. 놓이는 배경을 정말로 알 수 없을 때만 투명도를 지키세요. 그리고 답이 "어떤 배경에서든 부드러운 가장자리가 필요하다"라면, 그걸 위한 형식은 GIF가 아니라 움직이는 PNG나 WebP입니다.

순서와 타이밍, 그리고 반복이 자연스럽게 이어지도록

직접 겪어 알기보다 미리 알아 두는 편이 빠른 것 몇 가지.

이름순 정렬이 제대로 셉니다. 렌더나 내보내기 시퀀스가 의도한 대로 정렬되므로 frame_2가 frame_10 뒤가 아니라 앞에 놓입니다. 날짜순 정렬은 카메라 롤을 찍은 순서대로 되돌려 놓는데, 파일 이름이 0001부터 다시 시작해 버렸을 때 필요한 것입니다.

마지막 프레임을 더 오래 두세요. 모든 프레임의 길이가 같은 반복은 쉴 틈 없이 몰아치는 느낌을 줍니다. 마지막 프레임을 0.5초쯤 붙들어 두면 눈이 쉴 자리가 생기고 전체가 의도한 것처럼 보입니다. 그러라고 프레임 마다 머무는 시간이 따로 있습니다.

반복이 튀지 않아야 합니다. 마지막 프레임 바로 뒤에 첫 프레임이 오므로, 그 둘이 아주 다르면 반복이 뚝 끊깁니다. 둘을 비슷하게 만들거나, 마지막 프레임을 붙들어 두어 그 끊김을 의도로 만드세요.

한 번만 재생은 정말 한 번입니다. 어떤 도구는 반복 횟수를 1로 써 넣는데, 디코더들이 그걸 두고 온전히 합의한 적이 없습니다. 몇몇은 두 번 재생하고요. 여기서 "한 번만 재생"을 고르면 반복 정보를 아예 쓰지 않는데, 지금까지 만들어진 모든 디코더가 그것만은 똑같이 다룹니다.

여기에 서버가 필요 없는 이유

GIF를 만드는 일은 브라우저가 제공하지 않는 두 가지입니다. 팔레트를 고르는 것과, LZW로 픽셀을 압축하는 것. 어느 쪽도 크지 않습니다. 둘을 합쳐 사백 줄 남짓이고, 저장소에 적혀 있으며, 여기 다른 모든 것과 마찬가지로 내 기기에서 돌아갑니다. 네트워크를 뽑아도 페이지가 계속 동작하는 이유죠.

그렇게 많은 GIF 도구가 업로드하는 이유는 그 일이 어려워서가 아닙니다. 광고와 계정이 사는 곳이 서버이기 때문입니다. 여러 장의 사진을 움직임으로 바꾸는 데, 그 사진들이 지금 있는 방을 떠나야 할 이유는 하나도 없습니다.

온라인 변환 사이트에 파일을 올려도 안전할까요?에 이 도구를 포함해 어떤 도구에든 같은 것을 알려 줄 확인 네 가지가 적혀 있습니다.