업로드 없이 브라우저에서 GIF가 만들어지는 과정 (직접 확인하는 법 포함)

2025년 12월 08일 수정 2026년 11월 09일 4분 읽기 기술 설명

가장 많이 받는 질문이 이거예요.

“파일이 진짜 서버로 안 가요? 그럼 변환은 어디서 해요?”

변환은 지금 이 페이지를 보고 계신 브라우저 안에서 합니다. 말로만 하면 믿기 어려우니까, 이 사이트 코드가 실제로 어떤 순서로 움직이는지 적어 보고, 마지막에 직접 확인하는 방법도 정리해 둘게요.

순서대로 보면

1. 영상 열기

파일을 고르면 브라우저가 그 파일을 가리키는 임시 주소(blob:로 시작하는 주소)를 만들고, 페이지 안에 숨겨 둔 <video> 태그에 연결합니다. 이 주소는 내 브라우저 안에서만 통하는 주소라서, 다른 사람이 열어도 아무것도 안 나와요.

2. 장면 뽑기

영상을 프레임 간격만큼씩 건너뛰면서(화질 단계에 따라 0.04~0.2초) 그 시점으로 이동시키고, 화면을 <canvas>에 그린 다음 PNG 이미지로 떠 둡니다. 4.5초 영상을 “균형” 단계(간격 0.1초)로 만들면 45장이 생기는 식이에요. 간격과 가로 크기는 영상 길이·해상도와 고른 단계를 보고 자동으로 정해지고, 가로 크기 조절도 여기서 같이 됩니다. 캔버스에 그릴 때 원하는 크기로 그리는 거라 별도 처리 과정은 없어요.

3. 글자 얹기 (텍스트를 넣었을 때만)

텍스트 설정을 쓰면 각 장면을 캔버스에 다시 그리면서 그 위에 글자와 배경 상자를 그립니다. 그래서 글자가 GIF 픽셀에 그대로 박혀요.

4. GIF로 굽기

여기가 제일 무거운 부분입니다. 장면들을 픽셀 데이터로 바꿔서 GIF 인코더에 넘기는데, 이 인코더가 gifski예요. gifski는 원래 Rust로 만든 프로그램인데, 이걸 WebAssembly로 컴파일한 버전(gifski-wasm)을 씁니다.

WebAssembly는 쉽게 말해 브라우저가 실행할 수 있는 기계어에 가까운 형식이에요. 자바스크립트로 같은 계산을 짜는 것보다 훨씬 빠르게 돌아가서, 예전 같으면 서버나 설치형 프로그램에서 하던 일을 브라우저에서도 할 만해졌습니다. gifski가 왜 색이 좋은지는 gifski 글에 길게 써 뒀어요.

5. 저장

완성된 GIF도 다시 blob: 주소로 만들어서 화면에 보여주고 다운로드 링크에 연결합니다. 다운로드 버튼은 그 주소를 내 컴퓨터에 파일로 저장할 뿐이에요.

페이지를 닫거나 새로고침하면 위에서 만든 임시 주소와 장면들은 전부 사라집니다.

정말 업로드가 안 되는지 확인하는 법

개발자 도구로 보기

PC 크롬에서 이 사이트를 열고 F12(맥은 Cmd + Option + I)를 누릅니다.
Network 탭을 엽니다.
동영상을 골라서 변환합니다.
목록을 확인합니다.

처음 변환할 때 gifski_wasm_bg.wasm이라는 파일을 하나 받는 게 보일 거예요. 인코더 프로그램을 이 사이트에서 내려받는 겁니다. 광고 관련 요청도 몇 개 보일 수 있어요. 하지만 내 동영상 크기만 한 요청이 서버로 나가는 건 없습니다. 크기 순으로 정렬해 보면 금방 확인돼요.

인터넷 끊고 해 보기

동영상 하나를 먼저 변환해 봅니다. (이때 인코더가 내려와서 메모리에 올라갑니다.)
와이파이를 끕니다.
다른 동영상을 골라서 변환합니다.

인터넷이 끊겨도 변환이 끝까지 됩니다. 서버에 보내는 방식이었다면 여기서 멈췄겠죠. 다만 페이지를 처음 열자마자 인터넷을 끊으면 인코더를 아직 못 받은 상태라 실패할 수 있어요.

참고로 이 사이트 코드는 GitHub에 공개돼 있어서 직접 열어 보셔도 됩니다.

이 방식의 단점

좋은 점만 있는 건 아니라서 솔직하게 적어 둡니다.

내 기기 성능을 씁니다. 서버가 대신 일해 주는 게 아니라서, 오래된 노트북이나 휴대폰에서는 느립니다. 변환하는 동안 팬이 도는 것도 이 때문이에요.
메모리를 꽤 먹습니다. 굽는 단계에서는 장면들을 압축 안 된 픽셀로 펼쳐 둡니다. 900×506 크기면 장면 하나가 약 1.8MB라서, 45장이면 그것만 80MB가 넘어요. 길고 큰 영상에서 브라우저가 버벅이는 이유입니다. 가로 크기를 900px로 막아 둔 것도 이것 때문이에요.
처음 한 번은 인코더를 받아야 합니다. 그래서 첫 변환이 조금 더 걸립니다.

그래도 개인 영상이나 회사 화면 녹화처럼 남의 서버에 올리기 꺼려지는 파일을 다룰 때는 이 방식이 마음이 편하더라고요. 제가 이 사이트를 만든 이유도 그거였고요.