블로그용 대형 AnimatedGIF 만드는 방법

인터넷에서 널리 사용되는 그림 포맷에는 gif, jpg(jpeg), png 등이 있습니다.

그런데, 모든 그림 포맷이 순수한 정지화상 1장을 저장하는데 비해 gif는 간단한 동영상을 저장할 수 있는 기능을 갖고 있습니다.
물론, 소리를 같이 저장할 방법이 없기 때문에 순수한 동영상을 대신해서 사용할 수는 없지만, 웹이나 블로그에 간단한 애니메이션을 집어넣을 때는 꽤 쓸만한 기능을 보여줍니다.

블로그 헤더에 간단한 애니메이션 하나 넣겠다고 플래쉬 만들어 올리는 것은 좀 번거롭거든요…

Animated GIF를 만들어주는 도구들이 몇 있는데, 의외로 만족스러운 기능을 제공해주는 프로그램을 보지 못했습니다. 제가 만들고 싶었던 animated gif는 몇 개의 이미지가 페이드인/페이드아웃 되면서 천천히 바뀌는 것이었는데, 이런 비슷한 기능을 해주는 프로그램을 보지 못했습니다.

그래서, freeware 2개를 이용하고 간단한 프로그램을 하나 만들어서 이러한 작업을 해봤습니다.

---

일단, 준비물은 아래와 같습니다.

1. virtualdub (홈페이지 : http://www.virtualdub.org/, 현재 버전 : 1.7.8)
2. avisynth (홈페이지 : http://www.avisynth.org/, 현재 버전 : 2.5.7)
3. ImageFader for  Blog  (아래 첨부 파일 / 자작)

ImageFader4Blog.exe

※ virtualdub와 avisynth 모두 sourceforge를 통해 배포되는 소프트웨어입니다.
    두 프로그램 공히 악성코드에 대한 걱정 전혀 없이 그냥 설치하시면 됩니다.

절차는 아래와 같습니다.


1. 프로그램 설치

avisynth는 프레임 서버라고 하며, 동영상을 편집하는 virtualdub가 동영상이 아닌 소스을 동영상으로 착각하게 하기 위해 설치합니다. (악성 코드에 대한 걱정은 전혀 할 필요 없습니다)
이 프로그램은 Avisynth_257.exe을 실행하면 자동으로 설치됩니다.

virtualdub가 animated-gif 파일을 만들어줍니다.
이 프로그램은 설치 프로그램이 없고, 다운받은 압축파일을 원하는 위치에서 압축을 풀어서 실행하면 됩니다.

ImageFader for Blog는 자작 프로그램입니다.
지정된 폴더에 저장된 이미지들의 크기를 리사이징 해주고 페이딩 효과를 넣어줍니다.
실행파일 달랑 하나로 되어있습니다. 그냥 적절한 위치에 복사만 하면 됩니다.

2. 원하는 이미지 지정

페이딩 효과를 주기 위한 이미지를 정해서 한 폴더에 저장합니다.
여기서는 다음 두 이미지로 작업을 해보겠습니다.

크기는 128×160으로 하겠습니다.
두 이미지 파일을 특정 폴더 (예를 들면 c:\temp\1\)에 저장합니다.

3. 페이딩 효과를 준 이미지들 만들기

ImageFader를 사용합니다.
원본이 저장된 폴더 (여기서는 c:\temp\1\)와 새로운 파일이 저장될 폴더 그리고, 이미지의 크기 (128×160)를 지정합니다.

다음으로, 반복횟수와 오버래핑 횟수를 지정합니다.
반복횟수는 한 이미지가 계속 나오는 (즉, 변하지 않는) 시간에 영향을 미치고, 오버래핑 횟수는 한 이미지와 다음 이미지가 변하는 시간에 영향을 미칩니다.
(참고로, 오버래핑 횟수가 크면 좀 정신사납습니다)

마지막으로 아래 닫기 옆에 있는 지정 (이런… 오타네요… 프로그램에 오타라니…) 버튼을 클릭하면 대상 폴더에 blog*.png 파일 여러 개와 blog.avs 파일 하나를 만들어줍니다.

이 blog.avs 파일은 간단한 텍스트 파일이며, 내용은 아래와 같습니다.

 ImageReader ("blog_%03d.png", 1, 30, 12)

(blog_001.png 부터 blog_030.png 까지의 30장을 초당 12프레임의 속도로 읽을 것)

이 텍스트파일을 virtualdub에서 읽어들이면 avisynth가 중간에서 재해석해주는 것이 프레임 서버의 개념입니다.
(프레임 서버의 활용 용도는 무궁무진합니다. DVD 립 기술은 프레임 서버 필터 기술의 발달이었습니다)

4. gif 파일 만들기

위 3번에서 만들어진 blog.avs 파일을 virtualdub에서 읽어들인 다음 File → Export → Animated GIF... 메뉴를 실행하면 gif 파일이 생성됩니다.

실행할 때 한 번만 재생할 것인지, 무한반복할 것인지 또는 일정 횟수만 반복할 것인지를 지정할 수 있습니다.
(animated gif의 기본 기능입니다)

이렇게 만들어진 gif 파일은 대부분의 경우 이미지 뷰어로 볼 수 없습니다. 오로지 IE나 FF 등의 웹브라우저에서만 인식할 수 있습니다.

윈도우에 내장된 뷰어를 포함해서, 일반적인 이미지 뷰어에서는 이 파일을 열어볼 수 없습니다.
또한, 티스토리에서 글 안에 삽입하는 것도 불가능합니다.
(그래서 만들어진 이미지를 올리지 못했습니다)
심지어는 flickr와 같은 전문 이미지 업로드 사이트에서도 인식하지 못합니다.

이 gif파일을 활용하려면 티스토리 관리 기능중 파일 직접 올리기를 이용해서 올린 다음 링크를 걸면 됩니다.
그래서, 본문 안에 삽입하기 보다는 헤더를 꾸미는데 사용하는 것이 적당할 것 같습니다.

본 블로그 맨 위에 있는 이미지가 이런 과정을 거쳐 만들어진 것입니다.

좀 번거롭기는 하지만, 멋지지 않나요?