브라우저의 재발견 01 — Film Slicer

영상을 넣으면, 스크롤 페이지가 나온다. 서버 없음. 설치 없음. 빌드 없음. HTML 파일 하나.

▶ 바로 써보기 — 링크를 여는 순간 도구가 실행됩니다. 그게 이 시리즈의 전부입니다.

---

이것은 무엇인가

영상 파일을 드래그하면:

1. 브라우저가 영상을 1프레임씩 캔버스에 그려 추출하고
2. 스크롤 진행률에 프레임을 연결한 스크럽(scroll-scrubbing) 인터랙티브 페이지를 조립해
3. 완성된 단일 HTML을 다운로드해 줍니다

애플 제품 페이지의 그 효과 — 스크롤하면 영상이 감기고 되감기는 — 를 누구나 10초 만에 만듭니다. 영상이 없다면 STEP 0의 프롬프트 라이브러리에서 AI 영상 프롬프트를 조립해 시작할 수도 있습니다.

파일은 어디에도 업로드되지 않습니다. 모든 처리는 당신의 브라우저 안에서 끝납니다.

왜 만들었는가 — 오버엔지니어링에 대하여

같은 일을 "제대로" 하려면 이런 걸 하라고들 합니다.

ffmpeg 설치 → Node.js 설치 → npm install → 빌드 도구 설정
→ 프레임 추출 스크립트 → 웹서버 → 배포

그런데 브라우저는 이미 갖고 있습니다.

   — 디코더
  — 렌더러이자 인코더
 — 배포 시스템

영상 디코더, 이미지 인코더, 파일 시스템이 이미 모든 컴퓨터에 설치되어 있습니다. 우리는 그것을 브라우저라고 부릅니다. 도구가 없어서 못 만드는 게 아니라, 이미 가진 도구의 이름을 몰라서 못 만듭니다.

이 시리즈는 그 이름들을 하나씩 부릅니다.

사용법

1. film-slicer.html을 브라우저로 연다 (더블클릭이면 됩니다)
2. 영상을 드래그한다 (8~10초, 컷 없이 한 방향으로 진행되는 영상이 최적)
3. 문구를 넣고 [완성 HTML 다운로드]

끝입니다. 나온 파일도 단일 HTML이라 어디에나 올릴 수 있습니다.

원리 (다섯 줄 요약)

① video.currentTime을 옮겨가며 seek
② 매 프레임을 canvas.drawImage로 그림
③ canvas.toDataURL('image/jpeg')로 프레임을 문자열화
④ 프레임 배열 + 스크럽 엔진(스크롤 진행률 → 프레임 인덱스)을 템플릿에 주입
⑤ Blob으로 묶어  — 브라우저가 곧 배포 시스템

코드보다 중요한 건 이 개념들의 이름입니다: 스크롤 스크럽, 이미지 시퀀스, 스티키 피닝. AI 시대의 비개발자에게 용어는 곧 능력입니다 — 이름을 부를 수 있으면, 만들 수 있습니다.

브라우저의 재발견 시리즈

브라우저 + 생성형 AI를 하나의 플랫폼으로 다시 보는 실험들. 책으로 준비 중이며, 각 편은 독립적으로 동작하는 단일 HTML로 증명됩니다.

라이선스

MIT — 마음껏 쓰고, 고치고, 나누세요.

---

만든 사람: 신성진 · CDSA 한국데이터사이언티스트협회 · @workbyax 코드 대신 단어를 씁니다. 이름을 부르면, 만들어집니다.