여러 장이 한 편이 돼요
JPG를 2장에서 50장까지 넣으면, 정해 둔 순서대로 재생되는 움직이는 GIF 한 장이 나와요.
JPG 여러 장을 한 편의 움직이는 GIF로 만들어요
또는 이미지를 여기에 끌어다 놓거나 붙여넣기Ctrl V
이미지 도구 · 브라우저에서 처리
사진을 2장에서 50장까지 넣고, 순서를 맞추고, 한 장이 얼마나 머물지 정하면 움직이는 GIF 한 장이 나와요. GIF는 이 탭 안에서 만들어지고, 사진은 어디에도 올라가지 않아요.
사진이나 화면 캡처 몇 장이면 몇 초 만에 반복 재생되는 움짤이 돼요.
JPG를 2장에서 50장까지 넣으면, 정해 둔 순서대로 재생되는 움직이는 GIF 한 장이 나와요.
한 장이 머무는 시간을 0.05초까지 줄일 수 있어요. 0.2초 안팎이면 슬라이드가 아니라 움직임으로 읽혀요.
반응용 움짤이나 제품 소개라면 무한 반복으로, 마지막 장면에 정보를 남겨야 한다면 한 번만 재생으로 끝내면 돼요.
이름순으로 정렬하면 frame10보다 frame2가 먼저 와요. 전체를 거꾸로 뒤집거나, 카드를 끌어 한두 장만 자리를 바꿀 수도 있고요.
정해 둔 속도 그대로 작업 화면에서 미리 재생돼요. 파일로 만들기 전에 빠른지 느린지 보고 고치면 돼요.
320에서 800px 사이에서 고르면 돼요. 작게 만든 GIF일수록 빨리 열리고, 메신저나 메일의 용량 제한에도 덜 걸려요.
| 어떤 프레임인가 | GIF로 만들면 | 권하는 설정 |
|---|---|---|
| 화면 녹화, 앱 화면, 선으로 그린 그림 | 깨끗해요 — 넓은 단색이 GIF가 잘 담는 그림이에요 | 그대로 하세요, 640px가 무난해요 |
| 짧게 이어 찍은 사진 | 점이 끼고 색 경계가 층이 져요 | 320~480px까지는 볼 만하고, 키울수록 나빠져요 |
| 그러데이션이나 하늘 | 무조건 층이 져요 | 256색으로는 그러데이션을 담을 수 없어요 |
| 640px에서 20장이 넘어가면 | 몇 MB가 돼요 | 장수를 줄이기 전에 크기를 먼저 줄이세요 |
사진에 끼는 자글자글한 점, 작은 단위로 조절되는 속도, 50장이라는 상한. 모두 이 페이지의 설정이 아니라 GIF 형식 자체에서 나와요.
GIF는 프레임마다 최대 256색만 쓸 수 있어서, 사진은 없는 색을 촘촘한 점무늬로 흉내 내야 해요. 하늘과 피부에 보이는 자글자글한 점이 그거고, 어떤 설정으로도 없앨 수 없어요.
“To simulate more than 255 or 256 colors, dithering is generally used.”GIF 형식은 프레임이 화면에 머무는 시간을 100분의 1초 단위로 세요. ‘한 장당 시간’ 슬라이더는 0.05초씩 움직이니, 어떤 값을 골라도 정확히 그대로 저장돼요.
“If not 0, this field specifies the number of hundredths (1/100) of a second to wait before continuing with the processing of the Data Stream.”긴 애니메이션에서는 GIF가 뒤처져요. Google 웹 팀이 같은 영상을 재 보니 GIF로는 3.7MB, MP4로는 551KB였어요. 그래서 이 도구는 50장에서 멈추고, 더 긴 영상은 동영상으로 만들라고 안내해요.
“In this example, the initial GIF is 3.7 MB, compared to the MP4 version, which is 551 KB, and the WebM version, which is only 341 KB!”움직이는 GIF가 용량·형식·프레임 규정을 통과해야 하는 여섯 가지 상황과, 거기에 맞게 만드는 방법이에요. 모든 규정은 해당 서비스가 직접 낸 문서로 연결돼요.
카카오비즈니스 가이드는 소식에 대해 ‘사진은 하나의 글에 최대 40개까지 첨부할 수 있습니다. 단, GIF 형식의 이미지는 한 번에 1개만 첨부 가능합니다’라고 적어 뒀어요. 용량 기준도 따로여서 일반 사진은 20MB까지인데 GIF는 3MB까지고요. 게다가 한 번 첨부한 GIF는 수정이 불가능해요.
Vormly로 해결하는 방법
사진 여러 장을 GIF 한 장으로 합치면 ‘1개’라는 제한 안에서 하고 싶은 이야기를 다 할 수 있어요. 3MB는 크기를 320이나 480px로 낮추고 장수를 줄이면 닿는 선이고, 내려받기 버튼에 용량이 미리 떠서 올리기 전에 확인돼요. 수정이 안 되는 형식이니 속도는 작업 화면에서 미리 돌려 보고 정하세요.
카페24 고객센터는 ‘카페24에서는 상품 썸네일에 움직이는 이미지(GIF)를 등록할 수 있어요. 여러 장의 이미지를 하나의 GIF 파일로 합쳐서 썸네일로 사용해 보세요’라고 권하면서, 업로드할 수 있는 GIF 파일의 크기는 최대 5MB로 제한되어 있다고 못 박아요. 정작 만드는 방법은 검색해 보라고만 적혀 있고요.
Vormly로 해결하는 방법
Vormly가 하는 일이 정확히 그거예요. 각도나 색상이 다른 상품 사진을 넣고 이름순으로 정렬한 다음, 480px에 한 장당 0.2초쯤이면 썸네일로 알맞아요. 용량은 내려받기 전에 표시되니 5MB 안쪽인지 바로 알 수 있고요. 같은 고객센터에 대표이미지는 동영상 대신 GIF로 등록할 수 있다고도 적혀 있어요.
스티비 도움말은 ‘이미지 파일은 jpg, png, gif 형식을 지원하며, 원본 그대로 업로드됩니다’라고 적어요. 뒤에 붙은 문장이 더 중요한데, 이미지 1장당 용량은 요금제와 관계없이 5MB로 제한돼요. 서버가 대신 줄여 주지 않으니 만들 때 나온 용량이 그대로 메일에 실려요.
Vormly로 해결하는 방법
그래서 내려받기 버튼에 뜨는 숫자가 곧 메일에 들어갈 숫자예요. 480px로 두고 장수를 조절하면 5MB 아래로 넉넉히 들어가요. 읽는 동안 계속 돌아야 하면 무한 반복을, 마지막 화면에 정보를 남겨야 하면 한 번만 재생을 고르면 돼요.
행정안전부의 「행정·공공기관 웹사이트 구축·운영 가이드」는 이미지 형식을 고르는 대목에서 ‘GIF는 색상 팔레트를 최대 256색으로 제한하므로 대부분의 상황에서 사용하기 적합한 이미지 형식이 아니다. 애니메이션이 필요한 경우에만 GIF를 사용하도록 한다’라고 적고 있어요.
Vormly로 해결하는 방법
Vormly도 같은 말을 해요. 256색은 고를 수 있는 설정이 아니라 형식의 한계라서, 사진을 넣으면 색 경계가 층이 져요. 반대로 화면 캡처, 도표, 선으로 그린 안내처럼 색이 단순한 그림은 GIF로도 깨끗하게 남아요. 움직임이 꼭 필요한 안내에만 쓰고 나머지는 정지 이미지로 두라는 가이드의 조언이 그대로 맞아요.
OGQ 고객센터는 애니메이션 스티커를 ‘스티커 이미지 (24장 - gif)’, 이미지 사이즈 740x640px, ‘이미지 용량 각 1MB 이하’, ‘프레임 수 각 100 이하’로 정해 놨어요. 그리고 ‘스티커 이미지 GIF의 시작 프레임과 마지막 프레임이 동일해야 합니다’라고 덧붙여요.
Vormly로 해결하는 방법
프레임을 740x640으로 준비해 두고 크기를 800px로 고르면 그 크기 그대로 나와요. Vormly는 사진을 원본보다 키우지 않거든요. 한 GIF에 최대 50장까지라 100프레임 제한에 걸릴 일은 없고, 1MB는 내려받기 버튼의 용량을 보며 장수로 맞추면 돼요. 시작과 끝을 같게 하려면 첫 사진을 마지막에 한 번 더 넣으면 되고요.
11번가의 「브랜딩광고 제작가이드」는 업로드 이미지의 파일 포맷을 ‘JPG, JPEG, PNG’, 파일 용량을 ‘최대 1MB’, 이미지 크기를 ‘720 x 360px (w x h)’로 정해 놨어요. 목록에 GIF는 없어요.
Vormly로 해결하는 방법
움직이는 배너를 만들어 둬도 이 자리에는 못 올려요. GIF를 받는 곳 — 카카오톡 채널 소식, 상품 썸네일, 뉴스레터 — 에 쓰고, 11번가 배너에는 프레임 중 한 장을 골라 정지 이미지로 내면 돼요. 어느 장면이 가장 잘 읽히는지는 작업 화면에서 돌려 보면 금방 보여요.
사진은 2장부터 50장까지예요. 그보다 많아지면 GIF가 순식간에 무거워져서 짧은 동영상이 더 나은 형식이 돼요. 그리고 동영상은 받지 않아요. 정지된 JPG만 받으니, 쓰고 싶은 장면을 먼저 이미지로 내보낸 다음 가져오세요.
GIF는 한 프레임에 256색만 담아요. 내보내기 설정이 아니라 형식 자체가 그래요. 그래서 사진은 점이 낀 것처럼 보이고, 하늘이나 그러데이션은 색 경계가 층이 져요. 반대로 화면 캡처, 도표, 선으로 그린 그림처럼 색이 단순한 그림은 GIF로도 깨끗하게 남아요. 행정안전부의 「행정·공공기관 웹사이트 구축·운영 가이드」도 같은 이유로 애니메이션이 필요한 경우에만 GIF를 쓰라고 적어요. 사진으로 찍은 장면을 그대로 움직이게 하고 싶다면 짧은 동영상이 더 나은 답이에요.
화면에 보이는 순서 그대로, 왼쪽에서 오른쪽으로 재생돼요. 파일 선택 창은 이름순으로 넘겨준다고 약속하지 않아서 ‘이름순 정렬’ 버튼이 있어요. 누르면 frame10보다 frame2가 먼저 오도록 정리돼요. 전체를 거꾸로 돌리려면 ‘순서 뒤집기’를, 한두 장만 옮기려면 카드를 끌면 돼요.
한 장당 0.2초, 그러니까 1초에 다섯 장 정도면 대부분의 장면이 슬라이드가 아니라 움직임으로 읽혀요. GIF는 재생 간격을 100분의 1초 단위로 저장하고, 여기서는 0.05초까지 줄일 수 있어요. 정한 값으로 작업 화면에서 미리 재생되니, 파일로 만들기 전에 보고 고치면 돼요.
Vormly에서 GIF를 만들 때 사진은 업로드되지 않아요. 사진을 읽는 것부터 프레임을 겹치고 GIF로 인코딩하는 것까지 전부 사용자의 브라우저 안에서 끝나기 때문에 서버에 남는 파일이 없고, 회원가입도 필요 없어요. 아직 공개하지 않은 제품 사진이나 업무 화면 캡처로 움짤을 만드는 일이 많은데, 그걸 위해 먼저 모르는 서버에 올려야 한다면 앞뒤가 맞지 않으니까요.