1 이미지 고르기
프레임의 손잡이를 끌어 순서를 바꾸거나, 각 프레임의 화살표를 쓰세요. 여기 순서가 재생되는 순서입니다.
2 GIF 설정
색 색이 적을수록 파일은 작아지고 띠는 늘어납니다.
디더링 로고와 선화, 스크린샷에는 꺼 두세요.
이미지를 넣으면 미리보기가 나옵니다
- 프레임
- —
- 재생 길이
- —
- 화면 크기
- —
- 재생 횟수
- —
index.html을 폴더에서 바로 열면 브라우저가 JavaScript 모듈을 막습니다. 그래서 이미지 파일을 골라도 아무 일도 일어나지 않아요. 폴더를 http로 띄워서 여세요:
powershell -ExecutionPolicy Bypass -File serve.ps1
그런 다음 http://localhost:8080/을 여세요.
여러 장의 사진을 움직임 하나로.
모든 프레임을 그리고 색을 고르고 압축하는 일은 내 브라우저가 하고, 완성된 GIF는 이 기기의 메모리에서 조립됩니다. 설령 여기 무언가가 사진을 보내고 싶어 한다 해도, 이 페이지 반대편에는 그걸 받아 줄 서버가 없습니다.
실시간 확인: 확인 중…
오프라인: 확인 중…
그냥 믿지 마시고 직접 확인해 보세요. 개발자 도구의 '네트워크' 탭을 켜 놓고 GIF를 만들어 보십시오. 이미지도, 미리보기도, 파일 이름도 실려 나가는 요청이 없습니다. 아니면 인터넷을 끊고 그냥 만들어 보셔도 됩니다.
connect-src 'none'이었고 그건 절대적이었습니다. 광고를 넣으면서 그걸 잃었고, 그 사실을 말해 두는 것까지가 약속입니다.src/quantize.js와 src/lzw.js에 적혀 있고 컨테이너는 src/gif.js에 있습니다. 하나 만드는 데 가져오는 것이 없고, 처음 쓸 때 내려받는 엔진도 없습니다. 직접 확인해 보세요. 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 dist 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다:
github.com/A-Box-of-Tools/website
먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 config/site.toml, 모든 프레임이 줄여 담기는 팔레트는 src/quantize.js, 압축기와 그것이 들어가는 파일은 src/lzw.js와 src/gif.js에 있습니다. 그중 어느 것에도 네트워크에 손이 닿는 줄은 없습니다.
회사 보안 소프트웨어가 업로드를 경고한다면. 그것은 브라우저에서 파일이 선택되는 순간을 지켜보며, 페이지가 그것을 보낼 생각인지는 알 수 없습니다 — 그래서 고르는 순간에 경고합니다. 여기서는 아무것도 보내지 않습니다. 브라우저 개발자 도구를 열고 네트워크 탭으로 옮긴 뒤 파일을 골라 보세요. 그것을 실어 나르는 요청은 없고, 이 페이지 자체의 로컬 미리보기 말고는 요청 자체가 없습니다. 같은 확인을 IT 팀도 삼십 초면 할 수 있습니다.
프레임의 손잡이를 끌어 순서를 바꾸거나, 각 프레임의 화살표를 쓰세요. 여기 순서가 재생되는 순서입니다.
색 색이 적을수록 파일은 작아지고 띠는 늘어납니다.
디더링 로고와 선화, 스크린샷에는 꺼 두세요.
이미지를 넣으면 미리보기가 나옵니다
원하는 결과가 나왔나요?
무엇이 잘못됐나요?
고맙습니다 — 큰 도움이 됩니다.
보내지는 것은 답변뿐이고, 그것도 버튼을 눌렀을 때만입니다. 파일도, 파일 이름도, 파일에 관한 어떤 정보도 보내지 않습니다.
# GIF 만들기 — 이미지를 움직이는 GIF로 여러 장의 사진을 움직임 하나로. > JPG, PNG, WebP 이미지를 움직이는 GIF로 만듭니다. 무료이고 전부 브라우저 안에서 돌아갑니다. 순서와 속도, 크기를 정하세요. 아무것도 업로드되지 않고 오프라인에서도 됩니다. 이 페이지는 브라우저 안에서만 동작하는 대화형 도구입니다(https://abox.tools/ko/gif-만들기/). 도구에 넘긴 어떤 것도 업로드되지 않습니다. 아래는 이 페이지가 도구에 대해 글로 설명하는 내용 전부입니다. 도구를 쓰려면 이 주소를 여세요. ## 이미지 파일은 **절대 업로드되지 않습니다**. 서버가 아예 없으니까요. 모든 프레임을 그리고 색을 고르고 압축하는 일은 내 브라우저가 하고, 완성된 GIF는 이 기기의 메모리에서 조립됩니다. 설령 여기 무언가가 사진을 보내고 싶어 한다 해도, 이 페이지 반대편에는 그걸 받아 줄 서버가 없습니다. - ✗ 업로드 없음 - ✗ 가입 없음 - ✓ 오프라인 동작 - ✓ 오픈 소스 - ✓ 파일은 기기에 그대로 ## 이미지로 GIF 만드는 방법 1. **이미지를 고릅니다.** 폴더를 통째로 선택 영역에 끌어다 놓거나 파일을 직접 고르세요. 브라우저가 디스크에서 곧바로 읽습니다. 그동안 어디로도 아무것도 나가지 않습니다. 2. **재생될 순서대로 놓습니다.** 손잡이를 잡고 끌거나 화살표를 쓰세요. "이름순 정렬"이 사람이 기대하는 대로 세기 때문에 `frame_2`가 `frame_10`보다 앞에 놓입니다. 3. **각 프레임이 얼마나 머무를지 정합니다.** 한 장에 0.5초면 슬라이드쇼이고, 20분의 1초면 애니메이션입니다. 모든 프레임에 같은 시간을 한 번에 주거나, 한 장만 따로 오래 머물게 할 수도 있습니다. 4. **크기와 색을 고르는 방식을 정합니다.** GIF는 면적과 프레임 수에 따라 커지는데 그걸 되돌릴 화질 슬라이더가 없습니다. 그래서 크기가 가장 중요한 설정입니다. 프레임마다 256색을 쓰는 쪽이 가장 보기 좋은 기본값이고, 공유 팔레트 하나를 쓰면 더 작고 더 차분해집니다. 5. **GIF를 만들고 내려받습니다.** 내 기기에서 만들어지므로, 걸리는 시간은 대기열이 아니라 기기 성능에 달려 있습니다. 완성된 움직임은 저장하기 전에 페이지에서 먼저 재생됩니다. ## 자세한 설명 [이미지로 움직이는 GIF 만드는 방법](https://abox.tools/ko/가이드/사진으로-gif-만들기/): 여러 장의 사진을 움직이는 GIF 하나로. GIF가 실제로 얼마나 빠르게 재생될 수 있는지, 팔레트 설정이 무엇을 바꾸는지, 그리고 파일을 실제로 작게 만드는 세 가지. ## 상자 속 다른 도구 - [GIF 프레임 분리](https://abox.tools/ko/gif-프레임-분리/): 모든 프레임을 PNG 한 장씩으로. - [GIF 분석](https://abox.tools/ko/gif-분석/): 프레임, 재생 시간, 팔레트, 그리고 바이트가 어디로 갔는지. - [이미지를 동영상으로](https://abox.tools/ko/사진으로-동영상-만들기/): 이미지가 든 폴더 하나를 동영상으로. - [동영상 구간 자르기](https://abox.tools/ko/동영상-자르기/): 재생하면서 남길 구간을 표시하세요. 그 구간들이 영상 하나로 돌아옵니다. ## 자주 묻는 질문 ### 제 이미지가 어딘가로 업로드되나요? 아닙니다. 이미지를 읽고 그리고 색을 고르고 압축하는 일은 내 기기에서 도는 내 브라우저가 합니다. 이 도구에는 서버 쪽이라는 것이 없고, 이 페이지의 `Content-Security-Policy`에 연결해도 되는 주소가 전부 적혀 있는데 그중 이 사이트 것은 하나도 없습니다. 네트워크 선을 뽑아도 GIF는 그대로 만들어집니다. ### 어떤 이미지 형식을 쓸 수 있나요? 브라우저가 디코딩할 수 있는 정지 이미지 형식은 다 됩니다. 실제로는 JPG, PNG, WebP, GIF, AVIF, 그리고 애플 기기에서는 HEIC입니다. 여기서 따로 관리할 목록이 없습니다. 디코딩은 우리가 아니라 브라우저의 일이니까요. ### 제 GIF는 왜 이렇게 큰가요? GIF가 모든 프레임을 픽셀 전체로 저장하기 때문입니다. 움직임 보상이 없고, "지난번과 같은데 옆으로 옮겨졌다"로 저장되는 것이 없으며, 화질 다이얼도 없습니다. 크기는 대략 면적 곱하기 프레임 수이고, 그걸 끌어내리는 방법은 셋뿐입니다. \ \ 먼저 작게 만드세요. 가로세로를 절반으로 줄이면 파일은 4분의 1이 됩니다. 프레임을 줄이거나 한 장을 더 오래 머물게 하세요. 색을 64나 32로 내리고 디더링을 끄세요. 평평한 그림에서는 대가가 생각보다 적고, 사진에서는 아주 큽니다. 그래도 안 들어간다면 정직한 답은 이렇습니다. 지금 만들고 계신 것은 사실 영상이고, MP4로 만들면 아마 10분의 1이 됩니다. ### GIF는 얼마나 빠르게 재생될 수 있나요? 숫자가 시사하는 만큼 빠르지는 않습니다. 이 형식은 각 프레임의 지연을 100분의 1초 단위로 저장하는데, 브라우저들은 1990년대부터 그중 둘 미만인 것을 10분의 1초로 묶어 왔습니다. 당시 빙글빙글 돌던 지구본 이미지 때문에 생겨서 한 번도 걷히지 않은 규칙이에요. 그래서 0.01초 지연은 초당 100프레임이 아니라 10프레임으로 재생됩니다. 이 도구가 0.02초 아래를 내놓지 않는 것도 그래서이고, 0.05초(초당 20프레임)쯤이 요구할 만한 최고 속도입니다. ### 팔레트 설정은 무엇을 바꾸나요? GIF 프레임은 최대 256색을 담고, 무언가는 그 256색을 골라야 합니다. \ \ **프레임마다 최적의 색**은 사진마다 따로 256색을 고릅니다. 가장 또렷해 보이고, 서로 무관한 사진 묶음에는 이쪽이 맞습니다. **GIF 전체에 하나의 팔레트**는 모든 프레임을 한 번에 훑어 표 하나를 만듭니다. 파일이 더 작아지고, 같은 장면의 프레임 사이에서 팔레트가 휙휙 바뀔 때 생기는 깜빡임도 사라집니다. 프레임이 이것저것 모아 놓은 것이 아니라 이어지는 장면이라면 이쪽을 고르세요. ### 투명한 배경을 유지할 수 있나요? 이미지에 투명한 영역이 있다면 됩니다. "투명도"를 "투명한 영역 유지"로 바꾸세요. 다만 알아 두실 것이 하나 있습니다. GIF의 투명도는 1비트입니다. 픽셀은 아예 보이지 않거나 완전히 칠해지거나 둘 중 하나이고 그 사이가 없어요. 그래서 안티앨리어싱된 가장자리와 부드러운 그림자, 흐려지는 부분이 모두 딱딱한 경계로 바뀝니다. 움직임이 놓일 배경 색을 알고 계신다면, 그 색 위에 눌러 두는 편이 더 나아 보입니다. ### 이미지를 몇 장까지 쓸 수 있나요? 도구에 정해 둔 제한은 없습니다. 현실적인 한계는 기기의 메모리, 그리고 나오는 파일 크기를 견디는 인내심입니다. 사진은 한 장씩 읽으니 백 프레임도 괜찮습니다만, 640px짜리 백 프레임이면 아주 큰 GIF가 됩니다. 위의 "제 GIF는 왜 이렇게 큰가요?"를 보세요. ### 무료인가요? 가입해야 하나요? 무료이고 계정도, 로그인도, 체험판도 없습니다. 결과물에 워터마크도 붙지 않고요. 이 사이트는 광고로 유지되는데, 그 광고에도 내 이미지에 관한 것은 넘어가지 않습니다. ### 오프라인에서도 되나요? 됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 이미지를 어딘가로 보내서 처리하는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요. ## 이 약속을 직접 확인하는 방법 - **이미지는 나갈 곳이 없습니다.** 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다. 예전에는 이 줄이 `connect-src 'none'`이었고 그건 절대적이었습니다. 광고를 넣으면서 그걸 잃었고, 그 사실을 말해 두는 것까지가 약속입니다. - **인코더는 이 저장소의 네 파일입니다.** GIF에는 색 양자화기와 LZW 압축기가 필요한데 브라우저에는 둘 다 없습니다. 그래서 둘 다 여기, `src/quantize.js`와 `src/lzw.js`에 적혀 있고 컨테이너는 `src/gif.js`에 있습니다. 하나 만드는 데 가져오는 것이 없고, 처음 쓸 때 내려받는 엔진도 없습니다. - **구글이 불러오는 것과, 구글에게 주지 않는 것.** 광고와 측정 스크립트는 구글에서 옵니다. 어느 쪽에도 내 이미지에 관한 것은 넘어가지 않습니다. 파일도, 미리보기도, 이름도, 용량도, 개수도요. 이미지를 읽고 디코딩하고 그리고 압축하는 코드는 한 줄도 빠짐없이 이 출처에서 제공되고 저장소에 공개되어 있습니다. - **후원 버튼이 불러오는 것과, 후원 버튼이 받지 못하는 것.** 헤더의 "Buy me a coffee" 버튼은 cdnjs.buymeacoffee.com의 스크립트가 그리고, 글꼴은 Google Fonts에서 가져옵니다. 그저 링크일 뿐이에요. 방문을 보고하지도, 나에 관한 것이나 내 이미지에 관한 것을 받아 가지도 않습니다. 누르지 않으면 아무 일도 일어나지 않고, 눌러서 가게 되는 곳은 남의 사이트입니다. - **오프라인에서도 동작합니다.** 네트워크를 끊어도 이 페이지의 기능이 전부 그대로 돌아갑니다. 가장 간단한 증거예요. 사진을 어딘가로 보내서 GIF로 만드는 도구라면 선을 뽑는 순간 멈출 테니까요. **직접 확인해 보세요.** 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 `dist` 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다: https://github.com/A-Box-of-Tools/website 먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 `config/site.toml`, 모든 프레임이 줄여 담기는 팔레트는 `src/quantize.js`, 압축기와 그것이 들어가는 파일은 `src/lzw.js`와 `src/gif.js`에 있습니다. 그중 어느 것에도 네트워크에 손이 닿는 줄은 없습니다.
frame_2가 frame_10보다 앞에 놓입니다. 이미지로 움직이는 GIF 만드는 방법 여러 장의 사진을 움직이는 GIF 하나로. GIF가 실제로 얼마나 빠르게 재생될 수 있는지, 팔레트 설정이 무엇을 바꾸는지, 그리고 파일을 실제로 작게 만드는 세 가지.
아닙니다. 이미지를 읽고 그리고 색을 고르고 압축하는 일은 내 기기에서 도는 내 브라우저가 합니다. 이 도구에는 서버 쪽이라는 것이 없고, 이 페이지의 Content-Security-Policy에 연결해도 되는 주소가 전부 적혀 있는데 그중 이 사이트 것은 하나도 없습니다. 네트워크 선을 뽑아도 GIF는 그대로 만들어집니다.
브라우저가 디코딩할 수 있는 정지 이미지 형식은 다 됩니다. 실제로는 JPG, PNG, WebP, GIF, AVIF, 그리고 애플 기기에서는 HEIC입니다. 여기서 따로 관리할 목록이 없습니다. 디코딩은 우리가 아니라 브라우저의 일이니까요.
GIF가 모든 프레임을 픽셀 전체로 저장하기 때문입니다. 움직임 보상이 없고, "지난번과 같은데 옆으로 옮겨졌다"로 저장되는 것이 없으며, 화질 다이얼도 없습니다. 크기는 대략 면적 곱하기 프레임 수이고, 그걸 끌어내리는 방법은 셋뿐입니다.
먼저 작게 만드세요. 가로세로를 절반으로 줄이면 파일은 4분의 1이 됩니다. 프레임을 줄이거나 한 장을 더 오래 머물게 하세요. 색을 64나 32로 내리고 디더링을 끄세요. 평평한 그림에서는 대가가 생각보다 적고, 사진에서는 아주 큽니다. 그래도 안 들어간다면 정직한 답은 이렇습니다. 지금 만들고 계신 것은 사실 영상이고, MP4로 만들면 아마 10분의 1이 됩니다.
숫자가 시사하는 만큼 빠르지는 않습니다. 이 형식은 각 프레임의 지연을 100분의 1초 단위로 저장하는데, 브라우저들은 1990년대부터 그중 둘 미만인 것을 10분의 1초로 묶어 왔습니다. 당시 빙글빙글 돌던 지구본 이미지 때문에 생겨서 한 번도 걷히지 않은 규칙이에요. 그래서 0.01초 지연은 초당 100프레임이 아니라 10프레임으로 재생됩니다. 이 도구가 0.02초 아래를 내놓지 않는 것도 그래서이고, 0.05초(초당 20프레임)쯤이 요구할 만한 최고 속도입니다.
GIF 프레임은 최대 256색을 담고, 무언가는 그 256색을 골라야 합니다.
프레임마다 최적의 색은 사진마다 따로 256색을 고릅니다. 가장 또렷해 보이고, 서로 무관한 사진 묶음에는 이쪽이 맞습니다. GIF 전체에 하나의 팔레트는 모든 프레임을 한 번에 훑어 표 하나를 만듭니다. 파일이 더 작아지고, 같은 장면의 프레임 사이에서 팔레트가 휙휙 바뀔 때 생기는 깜빡임도 사라집니다. 프레임이 이것저것 모아 놓은 것이 아니라 이어지는 장면이라면 이쪽을 고르세요.
이미지에 투명한 영역이 있다면 됩니다. "투명도"를 "투명한 영역 유지"로 바꾸세요. 다만 알아 두실 것이 하나 있습니다. GIF의 투명도는 1비트입니다. 픽셀은 아예 보이지 않거나 완전히 칠해지거나 둘 중 하나이고 그 사이가 없어요. 그래서 안티앨리어싱된 가장자리와 부드러운 그림자, 흐려지는 부분이 모두 딱딱한 경계로 바뀝니다. 움직임이 놓일 배경 색을 알고 계신다면, 그 색 위에 눌러 두는 편이 더 나아 보입니다.
도구에 정해 둔 제한은 없습니다. 현실적인 한계는 기기의 메모리, 그리고 나오는 파일 크기를 견디는 인내심입니다. 사진은 한 장씩 읽으니 백 프레임도 괜찮습니다만, 640px짜리 백 프레임이면 아주 큰 GIF가 됩니다. 위의 "제 GIF는 왜 이렇게 큰가요?"를 보세요.
무료이고 계정도, 로그인도, 체험판도 없습니다. 결과물에 워터마크도 붙지 않고요. 이 사이트는 광고로 유지되는데, 그 광고에도 내 이미지에 관한 것은 넘어가지 않습니다.
됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 이미지를 어딘가로 보내서 처리하는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요.