여러 장의 사진으로 GIF·WebP 움짤 만드는 방법
여러 장의 사진을 이어 붙여 만드는 GIF·WebP 애니메이션, 이른바 움짤은 짧은 동작 하나를 반복해서 보여주기에 좋습니다. 상세 페이지나 블로그에 긴 영상을 넣는 대신 2~3초짜리 움짤을 쓰면 자동 재생과 무한 반복이 되고 용량도 가벼워 로딩 부담이 적습니다. 이 글에서는 프레임 간격과 리사이즈가 결과물에 어떤 영향을 주는지, GIF와 WebP를 어떻게 선택하면 좋은지 정리합니다.
1. 이미지 애니메이션의 원리: 프레임 딜레이와 리사이즈
움짤은 서로 다른 시점의 정적 이미지를 정해진 간격으로 차례차례 보여주고, 잔상 효과(시각의 지속성)를 이용해 움직임처럼 보이게 하는 방식입니다. 결과물의 느낌은 크게 두 가지 설정에서 갈립니다.
- 프레임 간격(Frame Delay): 한 장을 보여준 뒤 다음 장으로 넘어가기까지의 시간을 밀리초(ms)로 지정합니다. 보통 100ms(0.1초)에서 250ms(0.25초) 사이가 자연스럽게 보이며, 너무 짧으면 빨리 감기처럼, 너무 길면 슬라이드쇼처럼 느껴집니다. 전체 프레임에 같은 간격을 주거나, 특정 장면만 더 오래 머물도록 개별 프레임 간격을 따로 정할 수 있습니다.
- 리사이즈 모드: 올린 사진들의 크기나 화면 비율이 제각각이면 캔버스 안에서 이미지가 한쪽으로 쏠리거나 비율이 찌그러질 수 있습니다. 이 도구는
Canvas2D 드로잉으로 가장 큰 프레임 크기에 맞춰 캔버스를 잡고 세 가지 모드를 지원합니다. Contain(비율 유지·여백 채움), Cover(비율 유지·꽉 채우고 바깥 잘라냄), Stretch(캔버스에 늘려 맞춤)입니다.
2. GIF와 WebP 애니메이션, 무엇이 다른가
GIF(Graphics Interchange Format)는 1987년에 나온 오래된 포맷으로, 호환성은 넓지만 최대 256색(8비트)까지만 표현합니다. 그래서 그라데이션이 많은 실사 사진을 GIF로 만들면 색 경계가 계단처럼 보이거나 디더링 무늬가 생기기 쉽습니다. 투명도도 1비트(있음/없음)만 처리해 외곽 경계가 거칠게 남습니다.
WebP 애니메이션은 1,670만 색을 지원해 사진 계열에서도 색 손실이 적고, 프레임 간 압축을 사용해 같은 화질에서 GIF보다 파일이 대체로 절반 안팎으로 작습니다. 프레임 수가 많거나 색이 풍부한 움짤일수록 차이가 커집니다. 다만 오래된 브라우저나 일부 메신저는 애니메이션 WebP를 재생하지 못할 수 있어, 호환성이 중요하면 GIF도 함께 고려하는 편이 좋습니다.
이런 이유로 이미지 트래픽을 줄이려는 블로그나 쇼핑몰은 GIF 대신 WebP 애니메이션을 쓰는 경우가 늘고 있습니다. 이 도구는 GIF와 WebP 두 가지 출력을 모두 지원하니, 용량과 화질이 중요하면 WebP를, 폭넓은 호환성이 필요하면 GIF를 고르면 됩니다.
3. 브라우저 안에서 처리, 드래그로 순서 정렬
움짤을 만드는 과정은 모두 브라우저 안에서 이뤄집니다. 올린 사진은 Canvas에 순서대로 그려진 뒤, GIF는 gif.js 인코더가 Web Worker(백그라운드 스레드)에서 프레임을 합치고, WebP 애니메이션은 webpxmux(WebAssembly) 모듈이 인코딩합니다. 이 모든 단계가 사용자의 기기 안에서 끝나기 때문에, 서버에는 원본도 결과물도 남지 않습니다.
인코딩을 Web Worker에서 처리하기 때문에 프레임이 많아도 화면이 멈추지 않고 진행 상황을 보면서 기다릴 수 있습니다. 또한 업로드한 썸네일을 마우스로 끌어다 재생 순서를 바꿀 수 있어, 촬영 순서와 상관없이 원하는 흐름으로 배치한 뒤 만들 수 있습니다.
움짤 메이커 사용 방법 (4단계)
여러 장의 사진만 있으면 영상 편집 프로그램 없이도 부드럽게 움직이는 GIF·WebP 움짤을 만들 수 있습니다.
- 프레임 업로드: 움짤로 만들 JPG·PNG·WebP 이미지를 여러 장 올립니다. 올린 순서가 프레임 순서가 됩니다.
- 순서 정렬: 썸네일을 마우스로 드래그해 재생 순서를 자유롭게 바꿉니다.
- 옵션 설정: 출력 형식(GIF/WebP), 프레임 간 지연 시간(ms), 리사이즈 모드(Contain/Cover/Stretch), 무한 반복 여부를 정합니다.
- 생성·저장: '움짤 만들기'를 누르면 미리보기와 함께 결과물이 생성되며 바로 다운로드할 수 있습니다.
좋은 움짤을 만드는 팁
- 용량·화질이 중요하면 WebP: 같은 화질에서 GIF보다 50% 이상 가볍고 색 표현이 풍부합니다.
- 자연스러운 속도: 프레임 지연을 100~250ms로 두면 사람 눈에 가장 매끄럽게 보입니다.
- 크기가 다른 사진: 비율이 제각각이면 Contain(여백 유지)을 먼저 써 보고, 꽉 채우려면 Cover를 선택하세요.
💡 움짤 애니메이션 메이커 자주 묻는 질문 (FAQ)
Q. 움짤로 인코딩한 후에 결과물 용량이 너무 커졌습니다. 줄이는 방법이 있을까요?
A. 원본 사진의 해상도가 크면 결과 용량도 커집니다. 출력 형식을 WebP로 바꾸거나, 프레임 수를 줄이거나, 출력 해상도를 낮추면 용량을 줄일 수 있습니다. 색이 단순한 이미지라면 GIF도 충분히 가볍게 나옵니다.
Q. 업로드할 이미지 파일의 포맷과 크기에 제한이 있나요?
A. JPG, PNG, WebP 이미지를 지원합니다. 용량 제한을 따로 두지는 않지만, 10MB가 넘는 사진을 수십 장 한꺼번에 올리면 브라우저가 쓰는 메모리가 늘어 기기 사양에 따라 처리가 느려지거나 멈출 수 있으니, 미리 적당히 줄여서 올리는 편이 안전합니다.
Q. 스마트폰(모바일 브라우저)에서도 동일하게 움짤을 구울 수 있나요?
A. 네. 모바일 크롬과 사파리에서도 앱 설치 없이 동작하며, 인코딩도 휴대폰 브라우저 안에서 처리됩니다. 다만 데스크톱보다 메모리가 적으므로 프레임 수나 해상도가 크면 시간이 더 걸릴 수 있습니다.
Q. 카카오톡·디스코드 이모티콘으로 쓸 수 있나요?
A. 생성된 GIF/WebP는 표준 포맷이라 대부분의 메신저·커뮤니티에 업로드됩니다. 단, 플랫폼별 용량·해상도 제한이 있으니 작은 해상도로 맞춰 만드는 것이 좋습니다.
Q. 프레임마다 재생 시간을 다르게 줄 수 있나요?
A. 네. 전체 일괄 딜레이 외에도 개별 프레임의 재생 시간(ms)을 따로 지정할 수 있어 특정 장면을 더 오래 보여주는 연출이 가능합니다.
더 읽어보기: GIF vs WebP 비교 · 움짤이 안 올라갈 때