index.html을 폴더에서 바로 열면 브라우저가 JavaScript 모듈을 막습니다. 그래서 동영상을 골라도 아무 일도 일어나지 않아요. 폴더를 http로 띄워서 여세요:
powershell -ExecutionPolicy Bypass -File serve.ps1
그런 다음 http://localhost:8080/을 여세요.
구간과 크기, 초당 프레임 수를 고르세요.
모든 프레임을 읽고 크기를 줄이고 색을 고르고 써 내는 일은 내 브라우저가 내 기기의 성능으로 합니다. 이 도구에는 네트워크 기능이 아예 없어서 무언가를 가져올 수도 보낼 수도 없습니다. 설령 있더라도 이 페이지 반대편에는 영상을 받아 줄 서버가 없습니다.
실시간 확인: 확인 중…
오프라인: 확인 중…
그냥 믿지 마시고 직접 확인해 보세요. 개발자 도구의 '네트워크' 탭을 켜 놓고 GIF를 만들어 보십시오. 프레임도, 파일 이름도, 고른 파일의 단 1바이트도 실려 나가는 요청이 없습니다. 아니면 인터넷을 끊고 그냥 만들어 보셔도 됩니다. 영상을 어딘가로 보내서 변환하는 도구라면 그대로 멈출 테니까요.
직접 확인해 보세요. 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 dist 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다:
github.com/A-Box-of-Tools/website
먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 config/site.toml, 영상에서 프레임을 읽어 내는 두 가지 방법은 src/frames.js, 팔레트는 src/quantize.js, LZW를 포함한 파일 자체는 src/gif.js에 있습니다. 어느 것도 요청을 보낼 수 있는 무언가를 불러오지 않습니다.
회사 보안 소프트웨어가 업로드를 경고한다면. 그것은 브라우저에서 파일이 선택되는 순간을 지켜보며, 페이지가 그것을 보낼 생각인지는 알 수 없습니다 — 그래서 고르는 순간에 경고합니다. 여기서는 아무것도 보내지 않습니다. 브라우저 개발자 도구를 열고 네트워크 탭으로 옮긴 뒤 파일을 골라 보세요. 그것을 실어 나르는 요청은 없고, 이 페이지 자체의 로컬 미리보기 말고는 요청 자체가 없습니다. 같은 확인을 IT 팀도 삼십 초면 할 수 있습니다.
영상을 재생하면서 원하는 부분을 표시하세요. I는 재생 위치를 시작으로, O는 끝으로 잡고, 막대의 양쪽 손잡이는 끌어 옮길 수 있습니다.
너비 높이는 따라오므로 비율은 절대 바뀌지 않습니다. GIF의 값을 치르는 것은 너비입니다. 너비가 절반이면 픽셀은 4분의 1입니다.
정확한 너비 픽셀 단위로 16에서 1920 사이.
초당 프레임 수 영상 자신의 레이트가 아닙니다. 거기서 프레임을 뽑아 오는 것입니다. 12면 움직임으로 읽히고, 20을 넘으면 부드러움이 드러나는 것보다 파일이 더 빨리 커집니다.
디더링 맞는 색이 없는 자리에서 팔레트의 두 색을 섞습니다. 정렬 방식이라 가만히 있는 배경이 일렁이지 않습니다.
무한 반복 끄면 한 번 재생하고 멈춥니다.
원하는 결과가 나왔나요?
무엇이 잘못됐나요?
고맙습니다 — 큰 도움이 됩니다.
보내지는 것은 답변뿐이고, 그것도 버튼을 눌렀을 때만입니다. 파일도, 파일 이름도, 파일에 관한 어떤 정보도 보내지 않습니다.
# 동영상을 GIF로 — 영상을 움직이는 GIF로 변환 구간과 크기, 초당 프레임 수를 고르세요. > MP4, MOV, WebM의 일부를 움직이는 GIF로 만듭니다. 구간과 너비, 프레임 레이트를 고르면 프레임을 읽고 GIF를 쓰는 일이 브라우저 안에서 일어납니다. 업로드는 없습니다. 이 페이지는 브라우저 안에서만 동작하는 대화형 도구입니다(https://abox.tools/ko/동영상-gif-변환/). 도구에 넘긴 어떤 것도 업로드되지 않습니다. 아래는 이 페이지가 도구에 대해 글로 설명하는 내용 전부입니다. 도구를 쓰려면 이 주소를 여세요. ## 동영상은 **절대 업로드되지 않습니다**. 서버가 아예 없으니까요. 모든 프레임을 읽고 크기를 줄이고 색을 고르고 써 내는 일은 내 브라우저가 내 기기의 성능으로 합니다. 이 도구에는 네트워크 기능이 아예 없어서 무언가를 가져올 수도 보낼 수도 없습니다. 설령 있더라도 이 페이지 반대편에는 영상을 받아 줄 서버가 없습니다. - ✗ 업로드 없음 - ✗ 가입 없음 - ✗ 워터마크 없음 - ✓ 길이 제한 없음 - ✓ 오프라인 동작 ## 동영상을 GIF로 만드는 방법 1. **동영상을 고릅니다.** MP4, MOV, M4V, WebM을 선택 영역에 끌어다 놓거나 직접 골라 주세요. 브라우저가 디스크에서 곧바로 읽습니다. 그동안 어디로도 아무것도 나가지 않습니다. 2. **구간을 표시합니다.** 영상을 재생하면서 시작할 곳에서 `I`를, 끝날 곳에서 `O`를 누르거나 막대의 손잡이를 끄세요. GIF는 몇 초짜리입니다. 파일이 작을지 어마어마할지를 정하는 것은 나머지 두 설정보다 이 길이입니다. 3. **너비와 프레임 레이트를 고릅니다.** 너비 480픽셀에 초당 12프레임이면 GIF의 웬만한 용도에 맞습니다. 너비를 절반으로 줄이면 픽셀은 4분의 1이 됩니다. 초당 12프레임이면 아무도 보지 못하는 프레임에 값을 치르지 않고도 움직임으로 읽힙니다. 4. **만들고, 내려받습니다.** 프레임을 읽어 애니메이션 전체에 쓸 256색 팔레트 하나를 고르고, 각 프레임은 달라진 부분만 써 냅니다. 다 되면 페이지에서 재생되는데, 내려받기가 주는 것과 같은 파일입니다. ## 자세한 설명 [동영상을 GIF로 만드는 방법](https://abox.tools/ko/가이드/동영상-gif-만들기/): 어느 구간을, 어떤 너비로, 몇 프레임으로 고를지. 영상으로 만든 GIF가 원본 영상의 열 배가 되는 이유, 그리고 애초에 GIF를 써야 할 때. ## 상자 속 다른 도구 - [GIF 만들기](https://abox.tools/ko/gif-만들기/): 여러 장의 사진을 움직임 하나로. - [GIF 프레임 분리](https://abox.tools/ko/gif-프레임-분리/): 모든 프레임을 PNG 한 장씩으로. - [GIF 분석](https://abox.tools/ko/gif-분석/): 프레임, 재생 시간, 팔레트, 그리고 바이트가 어디로 갔는지. - [이미지를 동영상으로](https://abox.tools/ko/사진으로-동영상-만들기/): 이미지가 든 폴더 하나를 동영상으로. ## 자주 묻는 질문 ### 제 동영상이 어딘가로 업로드되나요? 아닙니다. 읽고 뽑아내고 변환하는 일은 내 기기에서 도는 내 브라우저가 합니다. 이 도구에는 서버 쪽이라는 것이 없고, 이 페이지의 `Content-Security-Policy`에 연결해도 되는 주소가 전부 적혀 있는데 그중 이 사이트 것은 하나도 없습니다. 말로 듣기보다 직접 확인하고 싶다면, 인터넷을 끊고 그냥 GIF를 만들어 보세요. ### 어떤 영상 형식을 변환할 수 있나요? MP4, M4V, MOV는 안에 무엇이 들었든 곧바로 읽습니다. H.264, HEVC, AV1, VP9 가운데 무엇이든 브라우저가 그 코덱을 디코딩할 수 있으면 문제 없습니다. 브라우저가 재생할 수 있는 나머지, 대표적으로 WebM은 플레이어를 각 시점으로 옮겨 가며 읽습니다. 더 느리고, 어느 프레임이 어디에 놓이는지가 조금 덜 정확합니다. 브라우저가 읽지도 재생하지도 못하는 파일, 실제로는 AVI, WMV, FLV와 대부분의 MKV는 중간에 실패하는 대신 그렇다는 메시지와 함께 거부합니다. ### 제 GIF는 왜 이렇게 큰가요? GIF가 움직임이 아니라 그림 전체를 저장하는 1987년의 형식이기 때문입니다. 5초짜리 클립으로 만든 GIF를 그 5초짜리 MP4만큼 작게 만들 방법은 없습니다. 영상으로 만든 GIF는 흔히 원본 영상의 열 배예요. 실제로 크기를 정하는 세 가지는 순서대로 구간의 길이, 화면의 너비, 초당 프레임 수입니다. 너비를 절반으로 줄이면 픽셀은 4분의 1이 되고, 값을 치르는 것은 픽셀입니다. ### 왜 256색뿐인가요? 그게 형식입니다. GIF는 최대 256색짜리 표 하나를 싣고 각 픽셀을 그 표의 번호로 저장합니다. 이 도구는 표시한 구간의 모든 프레임에 든 색을 세어 256개 무리로 나눠 그 256색을 고릅니다. median cut이라는 표준적인 방법이고요. 그래서 팔레트가 고정된 색 묶음이 아니라 그 영상에 맞습니다. 없는 색이 있는 자리에서는 디더링이 가장 가까운 두 색을 섞어, 그러데이션이 줄무늬가 되지 않고 그러데이션으로 남습니다. ### 디더링 설정은 무엇을 하나요? 약간의 잡티를 내주고 심한 띠 현상을 막습니다. 켜면 평평한 네 개의 띠가 되었을 하늘이 그러데이션으로 남고, 대신 옅은 결이 생기고 파일이 커집니다. 끄면 그림이 더 평평해지고 파일이 작아지는데, 화면 녹화나 선화처럼 이미 평평한 색으로 이루어진 것에 어울립니다. 여기 쓰는 디더링은 오차 확산 방식이 아니라 정렬 방식이라, 달라지지 않은 배경이 프레임 사이에서 일렁이지 않고 완전히 가만히 있습니다. ### 길이나 용량에 제한이 있나요? 제한되는 것은 구간이고, 규칙이 아니라 메모리 때문입니다. 팔레트를 고르는 동안 구간의 모든 프레임을 한꺼번에 들고 있어야 해서, 페이지가 지금 설정이 얼마를 요구하는지 계산해 시작 전에 알려 줍니다. 탭이 메모리를 다 쓰고 사라지게 두는 대신 거부하는 것이죠. 구간을 짧게, 너비를 작게, 프레임 레이트를 낮게. 어느 쪽이든 그 값을 끌어내립니다. ### 소리도 남나요? GIF는 소리를 담을 수 없습니다. 오디오가 있는 판본이 아예 없고, 웹이 GIF를 소리 없이 반복되는 영상으로 거의 대체한 가장 큰 이유이기도 합니다. 소리가 중요하다면 영상 그대로 두세요. [동영상 구간 자르기](https://abox.tools/ko/동영상-자르기/)가 프레임 하나 다시 인코딩하지 않고 원하는 구간을 잘라 줍니다. ### 무료인가요? 가입해야 하나요? 무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 영상에 관한 것은 넘어가지 않습니다. ## 이 약속을 직접 확인하는 방법 - **동영상은 나갈 곳이 없습니다.** 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다. - **여기서는 아무것도 가져오지 않습니다.** 이 도구에는 네트워크 기능이 아예 없습니다. 붙여 넣을 주소도, 내려받을 것도, 처음 쓸 때 가져오는 엔진도 없어요. 내 영상에 닿는 모든 바이트는 페이지를 불러올 때 이 출처에서 온 것입니다. - **디코딩은 내 기기에서 합니다.** 프레임은 브라우저 안에서 WebCodecs를 지나가거나, 어차피 그 영상을 보여 줬을 바로 그 재생 엔진을 지나갑니다. 어느 쪽을 썼는지는 페이지 위쪽에 적혀 있습니다. 그에 따라 프레임을 고르는 방식이 달라지니, 알고 계시는 편이 낫거든요. - **GIF는 여기서, 누구나 읽을 수 있는 코드가 씁니다.** 팔레트와 디더링, LZW 압축은 이 도구 자신의 폴더에 있는 육백 줄 남짓입니다. 인코딩 서비스도, 실행 중에 가져오는 라이브러리도 없고, 그중 어디에도 사진을 보낼 만한 자리가 없습니다. - **구글이 불러오는 것과, 구글에게 주지 않는 것.** 광고와 측정 스크립트는 구글에서 옵니다. 어느 쪽에도 내 영상에 관한 것은 넘어가지 않습니다. 파일도, 프레임도, 이름도, 용량도, 길이도, 어느 구간을 표시했는지도요. 읽고 뽑아내고 색을 고르고 인코딩하는 코드는 한 줄도 빠짐없이 이 출처에서 제공되고 저장소에 공개되어 있습니다. - **후원 버튼이 불러오는 것과, 후원 버튼이 받지 못하는 것.** 헤더의 "Buy me a coffee" 버튼은 cdnjs.buymeacoffee.com의 스크립트가 그리고, 글꼴은 Google Fonts에서 가져옵니다. 그저 링크일 뿐이에요. 방문을 보고하지도, 나에 관한 것이나 내 영상에 관한 것을 받아 가지도 않습니다. - **오프라인에서도 동작합니다.** 네트워크를 끊어도 이 페이지의 기능이 전부 그대로 돌아갑니다. 가장 간단한 증거입니다. **직접 확인해 보세요.** 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 `dist` 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다: https://github.com/A-Box-of-Tools/website 먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 `config/site.toml`, 영상에서 프레임을 읽어 내는 두 가지 방법은 `src/frames.js`, 팔레트는 `src/quantize.js`, LZW를 포함한 파일 자체는 `src/gif.js`에 있습니다. 어느 것도 요청을 보낼 수 있는 무언가를 불러오지 않습니다.
동영상을 GIF로 만드는 방법 어느 구간을, 어떤 너비로, 몇 프레임으로 고를지. 영상으로 만든 GIF가 원본 영상의 열 배가 되는 이유, 그리고 애초에 GIF를 써야 할 때.
아닙니다. 읽고 뽑아내고 변환하는 일은 내 기기에서 도는 내 브라우저가 합니다. 이 도구에는 서버 쪽이라는 것이 없고, 이 페이지의 Content-Security-Policy에 연결해도 되는 주소가 전부 적혀 있는데 그중 이 사이트 것은 하나도 없습니다. 말로 듣기보다 직접 확인하고 싶다면, 인터넷을 끊고 그냥 GIF를 만들어 보세요.
MP4, M4V, MOV는 안에 무엇이 들었든 곧바로 읽습니다. H.264, HEVC, AV1, VP9 가운데 무엇이든 브라우저가 그 코덱을 디코딩할 수 있으면 문제 없습니다. 브라우저가 재생할 수 있는 나머지, 대표적으로 WebM은 플레이어를 각 시점으로 옮겨 가며 읽습니다. 더 느리고, 어느 프레임이 어디에 놓이는지가 조금 덜 정확합니다. 브라우저가 읽지도 재생하지도 못하는 파일, 실제로는 AVI, WMV, FLV와 대부분의 MKV는 중간에 실패하는 대신 그렇다는 메시지와 함께 거부합니다.
GIF가 움직임이 아니라 그림 전체를 저장하는 1987년의 형식이기 때문입니다. 5초짜리 클립으로 만든 GIF를 그 5초짜리 MP4만큼 작게 만들 방법은 없습니다. 영상으로 만든 GIF는 흔히 원본 영상의 열 배예요. 실제로 크기를 정하는 세 가지는 순서대로 구간의 길이, 화면의 너비, 초당 프레임 수입니다. 너비를 절반으로 줄이면 픽셀은 4분의 1이 되고, 값을 치르는 것은 픽셀입니다.
그게 형식입니다. GIF는 최대 256색짜리 표 하나를 싣고 각 픽셀을 그 표의 번호로 저장합니다. 이 도구는 표시한 구간의 모든 프레임에 든 색을 세어 256개 무리로 나눠 그 256색을 고릅니다. median cut이라는 표준적인 방법이고요. 그래서 팔레트가 고정된 색 묶음이 아니라 그 영상에 맞습니다. 없는 색이 있는 자리에서는 디더링이 가장 가까운 두 색을 섞어, 그러데이션이 줄무늬가 되지 않고 그러데이션으로 남습니다.
약간의 잡티를 내주고 심한 띠 현상을 막습니다. 켜면 평평한 네 개의 띠가 되었을 하늘이 그러데이션으로 남고, 대신 옅은 결이 생기고 파일이 커집니다. 끄면 그림이 더 평평해지고 파일이 작아지는데, 화면 녹화나 선화처럼 이미 평평한 색으로 이루어진 것에 어울립니다. 여기 쓰는 디더링은 오차 확산 방식이 아니라 정렬 방식이라, 달라지지 않은 배경이 프레임 사이에서 일렁이지 않고 완전히 가만히 있습니다.
제한되는 것은 구간이고, 규칙이 아니라 메모리 때문입니다. 팔레트를 고르는 동안 구간의 모든 프레임을 한꺼번에 들고 있어야 해서, 페이지가 지금 설정이 얼마를 요구하는지 계산해 시작 전에 알려 줍니다. 탭이 메모리를 다 쓰고 사라지게 두는 대신 거부하는 것이죠. 구간을 짧게, 너비를 작게, 프레임 레이트를 낮게. 어느 쪽이든 그 값을 끌어내립니다.
GIF는 소리를 담을 수 없습니다. 오디오가 있는 판본이 아예 없고, 웹이 GIF를 소리 없이 반복되는 영상으로 거의 대체한 가장 큰 이유이기도 합니다. 소리가 중요하다면 영상 그대로 두세요. 동영상 구간 자르기가 프레임 하나 다시 인코딩하지 않고 원하는 구간을 잘라 줍니다.
무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 영상에 관한 것은 넘어가지 않습니다.