온라인 도구

확장 프로그램 설치 없이 사용 가능한 M3U8/HLS 및 MPD/DASH 스트리밍 온라인 다운로더 — 스트림 주소 획득, URL 붙여넣기, 화질 선택, 원클릭 다운로드.

FlowPick은 브라우저 확장 프로그램 외에도 두 개의 독립적인 온라인 도구 페이지를 제공하며, 어떤 소프트웨어도 설치하지 않고 스트리밍을 다운로드할 수 있습니다. 이 도구들은 확장과 동일한 다운로드 엔진을 공유하지만, 웹 환경에서 실행됩니다.

언제 온라인 도구를 사용할까

온라인 도구는 확장의 보완 방안으로, 다음 시나리오에 적합합니다:

시나리오	권장 방식	이유
일상 브라우징 중 수시 다운로드	브라우저 확장	자동 감지, 원클릭 다운로드
이미 스트림 주소가 있고 빠르게 다운로드만 하고 싶음	온라인 도구	설치 불필요, 열자마자 사용
확장 설치 불가능한 환경(회사 PC, 공용 기기)	온라인 도구	순수 웹페이지, 설치 요구 없음
여러 알려진 URL을 일괄 다운로드해야 함	온라인 도구 + 일괄 다운로드	개별 붙여넣기, 큐 관리
CORS 제한에 직면함	브라우저 확장	확장 권한으로 동일 출처 정책 우회 가능

어떤 방식을 사용할지 확실하지 않다면 우선 확장을 설치하세요. 온라인 도구는 "스트림 주소가 있는데 확장을 설치하고 싶지 않은" 임시 시나리오에 적합합니다. 상세 내용은 설치 가이드를 참조하세요.

확장과의 차이점

특성	브라우저 확장	온라인 도구
미디어 자동 감지	지원, 페이지 로드 시 자동 스니핑	지원 안 함, URL 수동 붙여넣기 필요
설치 요구	확장 설치 필요	설치 불필요, 웹페이지만 열면 됨
크로스 오리진 제한	확장 권한으로 부분 제한 우회 가능	브라우저 동일 출처 정책 제약 받음
다운로드 엔진	동일	동일
저장 디렉토리 선택	지원	지원
적합 시나리오	일상 브라우징 중 수시 다운로드	스트림 URL이 있는 빠른 다운로드

온라인 도구와 확장은 완전히 동일한 다운로드 엔진(useStreamMerge)을 사용하며, 다운로드 속도, 병합 논리, 암호화/복호화 능력이 완전히 일치합니다. 유일한 차이는 미디어 감지 방식뿐입니다.

M3U8/HLS 스트리밍 다운로더

접근 경로: /m3u8-downloader

M3U8 다운로더 인터페이스

기능 개요

M3U8 다운로더는 HLS(HTTP Live Streaming) 스트리밍 프로토콜 전용입니다. Master Playlist와 Media Playlist 두 가지 플레이리스트 포맷을 모두 지원합니다.

HLS 프로토콜의 상세 원리(Master Playlist vs Media Playlist, 세그먼트 구조, 암호화 메커니즘)는 비디오 스니핑 — HLS 스트림을 참조하세요.

사용 흐름

M3U8 URL 획득: 브라우저 개발자 도구(Network 패널) 또는 서드파티 도구에서 .m3u8 주소 획득
URL 붙여넣기: 입력창에 주소를 붙여넣으면 도구가 자동으로 플레이리스트 파싱
화질 선택: Master Playlist인 경우 화질 리스트에서 목표 해상도 선택
매개변수 설정: 동시 스레드 수, 출력 포맷, 파일명 설정
다운로드 시작: 다운로드 버튼 클릭, 도구가 모든 세그먼트를 자동 다운로드 및 병합

M3U8 주소를 가져오는 방법을 모르시겠나요? 비디오 플랫폼 — 수동 URL 획득 모드의 F12 개발자 도구 조작 가이드를 참조하세요.

지원하는 플레이리스트 유형

Master Playlist(멀티 비트레이트 플레이리스트)

여러 다른 화질의 서브스트림을 포함합니다. 파싱 후 화질 선택기 표시:

1080p · 5.2 Mbps · avc1.640028
720p · 2.8 Mbps · avc1.64001f
480p · 1.2 Mbps · avc1.64001e

특정 화질을 선택하면, 도구가 해당 Media Playlist를 다운로드하고 세그먼트 리스트를 획득합니다.

화질 선택 드롭다운

Media Playlist(싱글 비트레이트 플레이리스트)

TS 세그먼트 리스트를 직접 포함하며, 화질 선택 불필요. 파싱 후 세그먼트 수와 예상 크기를 바로 표시합니다.

암호화 지원

M3U8 다운로더는 다음 암호화 방식을 지원합니다:

암호화 방식	지원 상태	설명
AES-128 CBC	완전 지원	자동으로 키 획득 및 세그먼트 복호화
SAMPLE-AES	지원 안 함	전용 디코더 필요
Clear Key	지원 안 함	DRM 보호 콘텐츠
Widevine / PlayReady	지원 안 함	상용 DRM, 복호화 불가

AES-128 암호화된 스트림의 경우, 도구는:

#EXT-X-KEY 태그에서 키 URI 파싱
키 파일 다운로드
Web Crypto API(crypto.subtle.decrypt)를 사용하여 브라우저에서 각 세그먼트 복호화
복호화된 세그먼트를 최종 파일로 병합

모든 복호화 작업은 브라우저 로컬에서 완료되며, 키와 세그먼트 데이터는 어떤 서버에도 업로드되지 않습니다. 상세 내용은 개인정보 보호와 보안을 참조하세요.

세그먼트 다운로드 및 병합

다운로드 프로세스는 세 단계로 나뉩니다:

단계 1: 파싱(0% ~ 5%)

M3U8 플레이리스트 다운로드 및 파싱
세그먼트 URI 리스트 추출
샘플링으로 총 크기 예측

단계 2: 다운로드(5% ~ 85%)

멀티 스레드 동시 세그먼트 다운로드
실시간 진행률, 속도, 예상 남은 시간 표시
실패한 세그먼트 자동 재시도(최대 3회, 지수 백오프)

단계 3: 병합(85% ~ 100%)

세그먼트를 순서대로 연결
TS 포맷: 직접 이진 연결(최고속)
MP4 출력: FFmpeg WASM을 사용한 컨테이너 변환

동시 다운로드의 저수준 구현(Worker Pool, 재시도 전략, 메모리 관리)은 다운로드 엔진 아키텍처를 참조하세요. TS→MP4 리무싱의 상세 원리는 포맷 변환을 참조하세요.

진행 정보

다운로드 중 실시간 표시:

지표	설명
진행률 퍼센트	현재 완료된 세그먼트 수 / 총 세그먼트 수
다운로드 속도	슬라이딩 윈도우 기반 실시간 속도 추정
예상 남은 시간	현재 속도와 남은 세그먼트 수로 계산
다운로드된 바이트 수	누적 다운로드 데이터량

다운로드 진행 인터페이스

MPD/DASH 스트리밍 다운로더

접근 경로: /dash-downloader

DASH 다운로더 인터페이스

기능 개요

DASH 다운로더는 MPEG-DASH 스트리밍 프로토콜을 처리합니다. HLS와 달리 DASH 스트림의 비디오와 오디오는 보통 분리되어 있으며, 각각 다운로드한 후 병합해야 합니다.

DASH 프로토콜의 상세 원리(MPD 구조, 오디오/비디오 분리, FMP4 캡슐화)는 비디오 스니핑 — DASH 스트림을 참조하세요.

사용 흐름

MPD URL 획득: 브라우저 개발자 도구에서 .mpd 주소 획득
URL 붙여넣기: 입력창에 주소 붙여넣기
화질 선택: 파싱된 비디오 스트림 리스트에서 선택
매개변수 설정: 동시 스레드 수와 파일명 설정
다운로드 시작: 도구가 비디오와 오디오 세그먼트를 자동 다운로드 및 병합

MPD 플레이리스트 파싱

DASH 다운로더는 mpd-parser 라이브러리를 사용하여 MPD 플레이리스트를 파싱하고 다음 정보를 추출합니다:

Period: 시간대 정의
AdaptationSet: 미디어 유형 그룹화(비디오/오디오)
Representation: 구체적인 화질/비트레이트 옵션
SegmentTemplate / SegmentList: 세그먼트 URL 패턴

파싱 결과는 비트레이트 내림차순으로 정렬되며, 표시 포맷:

1080p · 5.2 Mbps · avc1.640028
720p · 2.8 Mbps · avc1.64001f

오디오/비디오 분리 처리

DASH 스트림의 핵심 특징 중 하나는 비디오와 오디오 트랙이 분리되어 있다는 것입니다. 다운로더 처리 흐름:

MPD를 파싱하여 비디오와 오디오 AdaptationSet 식별
사용자가 비디오 화질을 선택하면, 자동으로 최적 오디오 스트림 매칭(보통 최고 비트레이트 선택)
비디오 세그먼트와 오디오 세그먼트를 병렬 다운로드
FFmpeg WASM을 사용하여 비디오와 오디오를 단일 MP4 파일로 병합

병합 명령은 다음과 동등합니다:

ffmpeg -f concat -i video_list.txt -f concat -i audio_list.txt \
  -c:v copy -c:a copy -movflags +faststart output.mp4

DASH 오디오/비디오 병합에는 FFmpeg WASM 엔진을 사용합니다. FFmpeg WASM의 로딩 메커니즘, 메모리 제한, 성능 최적화에 대해서는 포맷 변환 — FFmpeg WASM 엔진을 참조하세요.

FMP4 지원

FMP4(Fragmented MP4)로 캡슐화된 DASH 스트림의 경우, 다운로더는 다음을 지원합니다:

urn:mpeg:dash:ffmpeg:2013 등 FMP4 식별자 인식
초기화 세그먼트(init segment)와 미디어 세그먼트 다운로드
FFmpeg WASM을 사용하여 FMP4 세그먼트를 표준 MP4로 재조립

암호화 지원

암호화 방식	지원 상태
AES-128 CTR	부분 지원
Widevine	지원 안 함
PlayReady	지원 안 함
ClearKey	지원 안 함

공통 기능

저장 디렉토리 선택

두 온라인 도구 모두 File System Access API의 디렉토리 영속화 기능을 지원합니다:

"저장 디렉토리 선택" 버튼 클릭
팝업되는 시스템 대상 폴더 선택
권한 부여 후, 모든 후속 다운로드가 해당 디렉토리에 직접 기록
디렉토리명이 인터페이스에 표시되며, 언제든지 삭제 또는 변경 가능

저장 디렉토리 선택

기술 구현:

window.showDirectoryPicker()를 사용하여 디렉토리 핸들 획득
handle.requestPermission({ mode: 'readwrite' })를 통해 영속화 권한 요청
디렉토리명을 localStorage에 캐싱하여 UI 표시
권한 상태를 navigator.permissions.query()로 무음 확인

File System Access API는 Chrome 86+ 또는 Edge 86+가 필요합니다. 브라우저가 지원하지 않으면 자동으로 StreamSaver.js 또는 Blob 다운로드로 강등됩니다. 상세 내용은 브라우저 호환성을 참조하세요.

쓰기 전략 우선순위

다운로드 엔진은 다음 우선순위로 파일 쓰기 방식을 선택합니다:

우선순위	전략	메모리 점유	적용 조건
1	File System Access API	극히 낮음(스트리밍 쓰기)	Chrome 86+, Edge 86+
2	StreamSaver.js	극히 낮음(스트리밍 쓰기)	Service Worker 지원 필요
3	Blob 다운로드	파일 크기와 동일	최후의 수단, 1.5GB 상한 있음

쓰기 전략의 상세 비교와 강등 논리는 다운로드 엔진 아키텍처 — 쓰기 전략을 참조하세요.

에러 처리

다운로드 중 발생 가능한 에러 및 처리 방식:

에러 유형	원인	처리 방식
HTTP 403	리소스에 인증 또는 Referer 검증 필요	사용자에게 URL 유효성 확인 안내
HTTP 404	세그먼트 만료 또는 URL 오류	사용자에게 스트림 주소 재획득 안내
CORS 에러	크로스 오리진 요청이 서버에서 거부됨	브라우저 확장 버전 사용 권장
네트워크 에러	연결 중단 또는 타임아웃	자동 재시도 3회
암호화 미지원	지원하지 않는 암호화 방식 발견	명확히 처리 불가 안내
DRM 보호	DRM으로 보호된 콘텐츠	해당 콘텐츠는 다운로드 불가 안내

CORS 에러를 만나는 것이 가장 흔한 문제입니다. 이때 브라우저 확장 설치를 권장합니다. 확장은 동일 출처 정책 제한을 우회할 수 있습니다. 더 많은 문제 해결 방법은 일반적인 문제 해결를 참조하세요.

다운로드 완료 후

다운로드 완료 후 다음 작업 제공:

경로 복사: 파일 저장 경로를 클립보드에 복사
다른 파일 다운로드: 상태 리셋, 다음 다운로드 준비
저장 디렉토리 삭제: 디렉토리 권한 제거

기술적 제한

온라인 도구는 확장 버전과 비교하여 다음 제한이 있습니다:

크로스 오리진 제한: 브라우저 동일 출처 정책이 특정 CDN의 세그먼트 다운로드를 차단할 수 있습니다. 확장 버전은 webRequest 권한으로 부분 제한을 우회할 수 있습니다
Referer 검증: 일부 스트리밍 서버가 특정 Referer 헤더를 요구하며, 온라인 도구는 커스터마이즈 불가능합니다
Service Worker 의존: StreamSaver 쓰기 전략은 Service Worker 지원이 필요하며, 페이지에 올바른 COEP/COOP 헤더 설정 필요
SharedArrayBuffer: FFmpeg WASM 멀티 스레드 모드는 SharedArrayBuffer가 필요하며, 이는 페이지에 Cross-Origin-Isolated 헤더 설정을 요구합니다

FlowPick 웹사이트는 이러한 기능들을 지원하기 위해 필수 보안 헤더를 구성했습니다:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

COEP/COOP 헤더의 기술적 배경과 브라우저 호환성에 대해서는 브라우저 호환성 — 보안 헤더 요구사항을 참조하세요.

전형적인 사용 시나리오

시나리오 1: 알려진 스트림 주소 빠른 다운로드

M3U8 URL 획득 → /m3u8-downloader 열기 → 붙여넣기 → 화질 선택 → 다운로드

F12 개발자 도구로 스트림 주소를 이미 획득한 시나리오에 적합합니다. 비디오 플랫폼 — 수동 URL 획득을 참조하세요.

시나리오 2: 임시 기기 다운로드

공용 PC → FlowPick 웹사이트 열기 → 스트림 주소 붙여넣기 → USB에 다운로드

어떤 소프트웨어도 설치 불필요, 회사 PC, 학교 컴퓨터실, PC방 등 확장 설치 불가능한 환경에 적합합니다.

시나리오 3: 여러 스트림 일괄 다운로드

모든 M3U8 URL 수집 → 온라인 도구에서 개별 다운로드 → 큐 자동 관리

여러 강좌 비디오 또는 시리즈 비디오를 다운로드해야 하는 시나리오에 적합합니다. 온라인 강좌 다운로드를 참조하세요.