# Video.js v10 - 88% 더 작아진 오픈소스 비디오 플레이어 > Clean Markdown view of GeekNews topic #27847. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=27847](https://news.hada.io/topic?id=27847) - GeekNews Markdown: [https://news.hada.io/topic/27847.md](https://news.hada.io/topic/27847.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-03-25T20:33:17+09:00 - Updated: 2026-03-25T20:33:17+09:00 - Original source: [videojs.org](https://videojs.org/blog/videojs-v10-beta-hello-world-again) - Points: 13 - Comments: 1 ## Summary 16년 만에 완전히 새로 작성된 Video. js v10은 **번들 크기를 88% 줄이고** React·TypeScript·Tailwind를 1급으로 지원하는 현대적 구조로 재탄생했습니다. 새로운 **Streaming Processor Framework(SPF)** 덕분에 필요한 기능만 조합해 쓸 수 있는 모듈형 스트리밍 엔진을 구성할 수 있어, HLS. ## Topic Body - 16년 만에 완전히 새로 작성된 Video.js v10은 **번들 크기를 88% 줄이고** 현대적 개발 환경에 맞춘 구조로 재탄생 - **React·TypeScript·Tailwind**를 1급으로 지원하며, **심미적 기본 UI**와 **AI 친화적 문서 구조**를 제공 - 새로운 **Streaming Processor Framework(SPF)** 로 필요한 기능만 조합 가능한 **모듈형 스트리밍 엔진**을 구현, HLS.js 대비 12% 수준의 경량화 달성 - **컴포지션 기반 아키텍처**와 **React/Web Components 스킨 시스템**으로 UI와 기능을 자유롭게 교체·제거 가능 - 2026년 정식 출시를 목표로 하며, **AI 협업 개발과 확장 가능한 프리셋 생태계**를 통해 차세대 오픈소스 미디어 플랫폼으로 발전 중임 --- ### Video.js v10 베타 개요 - Video.js v10.0.0 베타는 **16년 만의 전면 재작성**으로, Video.js뿐 아니라 **Plyr, Vidstack, Media Chrome** 등 여러 오픈소스 프로젝트의 협업 결과물임 - 총 **7만5천 GitHub 스타**와 매달 수십억 회 재생 규모의 생태계가 참여했으며, 현대적 개발 방식과 **AI 보조 개발 환경**을 고려한 구조로 새롭게 설계됨 - 주요 목표는 **번들 크기 88% 축소**, **React·TypeScript·Tailwind**의 1급 지원, **심미적 기본 UI**, **AI 친화적 문서 구조** 제공임 ### 번들 크기 및 성능 개선 - 기본 Video.js v10 플레이어는 v8 대비 **기본 번들 크기가 88% 감소**, ABR(Adaptive Bitrate) 기능 제거 시에도 **66% 감소** - 예: v8 기본 260.5kB(minified) → v10 HTML 비디오 플레이어 97.4kB(minified), React 버전은 62.0kB - 새로운 **Streaming Processor Framework(SPF)** 도입으로, 필요한 기능만 조합 가능한 **모듈형 스트리밍 엔진** 구성 가능 - 단순 HLS 사용 시 v10+SPF는 v8+VHS 대비 **파일 크기 19% 수준** - SPF 엔진 자체는 **HLS.js-light의 12% 크기(38.5kB minified)** 로 단순 ABR 처리에 최적화 - SPF는 HLS.js, Shaka, dash.js 등 기존 엔진과 **모두 호환**, 복잡한 DRM·광고 기능이 필요 없는 경우 **극단적 경량화** 가능 ### 컴포지션 기반 아키텍처 - v10은 **State, UI, Media**를 분리한 컴포넌트 구조로, 각 요소를 독립적으로 교체·삭제 가능 - `createPlayer()` 함수는 `features` 배열을 받아 필요한 기능만 포함 - 예: 오디오 기능이 필요 없으면 `volume`, `mute` 코드가 번들에 포함되지 않음 - UI를 제거하려면 단순히 스킨을 불러오지 않으면 됨 — **불필요한 코드 완전 배제 가능** - 최소 구성 React 예제는 **5kB 미만(gzipped)** 으로 동작하며, 단순 재생/일시정지 버튼만 포함 ### UI 커스터마이징 및 스킨 시스템 - v10은 **React와 Web Components 기반의 스킨 시스템**을 제공하며, **Base UI**, **Radix** 등에서 영감을 받은 **unstyled UI primitives** 구조 채택 - 각 UI 컴포넌트는 단일 HTML 요소를 출력해 **직접 제어** 가능 - 기존 v8에서는 CSS 가상 요소로 제어하던 타임라인 핸들이 v10에서는 **실제 DOM 요소**로 제공되어 스타일링 단순화 - 베타에는 두 가지 스킨 포함 - **기본 스킨**: 반투명(frosted) 미학, 부드러운 애니메이션 - **미니멀 스킨**: 커스터마이징을 위한 간결한 기본형 - 스킨의 **오류 다이얼로그 디자인**도 통일되어, 시각적 완성도 향상 ### 프리셋 시스템 - v10은 **사용 목적별 프리셋(preset)** 개념을 도입해, 스킨·기능·미디어 구성을 조합한 **즉시 사용 가능한 플레이어 템플릿** 제공 - **Video preset**: 일반 웹 비디오용 - **Audio preset**: 팟캐스트 등 오디오 전용 - **Background video preset**: 배경 영상용, 컨트롤·오디오 제거 - 프리셋은 빠른 시작점을 제공하면서도 **모든 구성요소 교체 가능**, 완전한 확장성 유지 - 향후 **교육용, 숏폼, 크리에이터 플랫폼용** 프리셋 추가 예정 ### AI 친화적 설계 - v10은 **AI 에이전트가 함께 개발할 수 있는 구조**를 목표로 함 - **비추상화된 컴포넌트**와 **unstyled UI primitives**로 코드 이해도 향상 - 문서 탐색 효율을 위한 **llms.txt** 파일 제공, 프레임워크별 버전 포함 - 모든 문서를 **Markdown 형식**으로 제공해, AI가 불필요한 HTML 문맥 없이 직접 접근 가능 - 저장소 내 **AI 스킬 세트**를 통해 향후 사용자 개발 지원 예정 ### 베타 사용 안내 - **API는 아직 안정화 전**, 정식 출시 전까지 일부 인터페이스 변경 가능 - 현재는 **기본 웹사이트 재생 기능 중심**, 접근성·자막·다양한 포맷 지원 가능하나 **설정 메뉴 등은 미구현** - **GitHub 이슈 및 Discord 피드백**을 적극 수집 중 - 기존 버전 사용자는 **마이그레이션 가이드 공개 후 이동 권장** ### 향후 로드맵 - **2026년 중반 정식 출시(GA)** 목표 - **Plyr, Vidstack, Media Chrome** 수준의 기능 동등성 확보 예정 - **광고 기능 지원**은 2026년 하반기 계획 - **마이그레이션 가이드 및 추가 프리셋** 제공 예정 ## Comments ### Comment 53836 - Author: neo - Created: 2026-03-25T20:33:17+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47506713) - 혹시 궁금한 사람들을 위해 말하자면, 이 웹사이트의 **문법 하이라이팅 색상 테마**는 “gruvbox”임 개인적으로 아주 마음에 드는데, 이걸 찾아내는 데 꽤 오래 걸렸음 [gruvbox GitHub 링크](https://github.com/morhetz/gruvbox) - 혹시 이 웹사이트가 어떤 기술로 만들어졌는지 아는 사람 있음? 디자인과 **UI**가 정말 마음에 듦 - 참고로 이 테마는 **VSCode**에서도 사용할 수 있음 - 나는 video.js를 써본 적이 없는데, 사이트나 광고가 이미 익숙한 사람들을 대상으로 한 것처럼 느껴졌음 읽으면서도 한 가지 궁금했던 건, 이게 **HTML video 태그**와 뭐가 다른지였음. 단순히 컨트롤러만 다른 건가? - 좋은 지적임. 사이트에서 그 부분을 더 명확히 설명할 필요가 있음 video 태그는 요즘 꽤 좋아졌지만, Video.js는 브라우저 간 **일관된 스타일링**, **고급 기능(분석, DRM, 360도 영상 등)**, **다양한 스트리밍 포맷 지원(HLS, DASH 등)** 같은 점에서 차별화됨 결국 video 태그로도 구현은 가능하지만, 그렇게 하다 보면 결국 Video.js 같은 걸 직접 만들게 됨 - 모든 환경에서 video 태그가 제대로 동작하지 않음. 브라우저마다 **엣지 케이스**가 많음 안정적인 플레이어나 스트리밍 기능이 필요하면 Video.js를 쓰는 게 좋음 참고로 나는 조지아 국가용 **TV 방송 플레이어**를 만들었는데, 2009년 LG 스마트TV부터 최신 브라우저까지 지원했음 - 대부분의 브라우저가 **HLS나 DASH**를 지원하지 않음 이게 중요한 이유는 **동적 비트레이트 조정** 때문임. 캐싱도 더 효율적임 - **WebVTT** 관련해서 요즘 상황이 달라졌는지 궁금함 예전에 자막 렌더링을 커스터마이징하려 했는데 너무 어려웠음 - 왜 이걸 **Web Component**로 배포하지 않았는지 궁금함 내 생각엔 완벽한 사용 사례 같음 — 의미 있는 객체에 내장된 컨트롤이 있으니까 - 좋은 질문임. 예전에 media-chrome과 Mux Player를 Web Component로 만들려다 **React 통합 문제**로 고생했음 결국 React용 shim을 만들어서 해결했지만, 그게 또 다른 문제를 낳았음 VJS 10에서는 **headless 코어 + 렌더링 레이어** 구조로 타협점을 찾았음 덕분에 React 컴포넌트와 Web Component를 모두 지원함 [media-chrome GitHub 링크](https://github.com/muxinc/media-chrome) - Web Component는 멋져 보이지만, 실제로는 **스타일링과 SSR** 문제로 시간을 많이 잡아먹음 Shadow DOM 버그나 프레임워크 간 호환성 때문에 결국 플레이어보다 환경 설정에 더 많은 시간을 쓰게 됨 대부분의 사용자는 이런 걸 신경 쓰지 않음. 그냥 **JS 라이브러리 + 깔끔한 API**가 훨씬 낫다고 생각함 - 사실 React 코드가 HTML Custom Elements로 컴파일되기 때문에, 넓은 의미로 보면 이미 Web Component임 다만 React를 쓰는 이유는 **트리 셰이킹(tree-shaking)** 덕분에 필요한 코드만 포함할 수 있기 때문임 일반 HTML에서는 아직 이런 최적화가 어렵기 때문에, 빌드 파이프라인이 일종의 **Web Component 생성기** 역할을 하는 셈임 - Plyr를 쓰던 내 오디오 플레이어를 Video.js로 바꿔보려 했는데, 기본 설정에서 몇 가지 **기능 격차**가 있었음 1배속 이하 재생 속도 없음, 모바일에서 볼륨 조절 불가, 탐색 버튼 없음, 색상 커스터마이징 어려움, 데모 부족 등 - 좋은 피드백임. 이 내용들을 **이슈로 등록**할 예정임 현재 Plyr 등과의 **기능 동등성(feature parity)** 을 목표로 하고 있으며, GA 시점(연내 중반)을 목표로 함 - 나는 영상 호스팅은 잘 모르지만 HTML5 비디오 플레이어를 써본 적 있음 서버 측에서 **비디오 청크를 직접 제공하는 엔드포인트**를 만들어야 하는지 궁금함 ffmpeg로 2MB 단위로 나눈다면, 그걸 어디에 두는 게 좋을까? CDN? 자체 서버? Video.js가 가장 부드럽게 작동하려면 어떤 구성이 최선일까? - 그냥 **HLS로 변환**하면 됨. 1~2초 단위로 자동 청크화되고, nginx에서 정적 파일로 서빙 가능함 Video.js와 잘 맞고, LG TV에서도 **태그 기반 재생**이 가능함 - 런타임에서 버전 전환(ABR)이 필요 없다면 수동 청크화도 필요 없음 서버가 **Range 요청**만 지원하면 브라우저가 알아서 처리함 나는 DO Spaces 같은 **오브젝트 스토리지 + CDN** 조합을 쓰는데 잘 작동함 - 다만 청크는 **IDR 키프레임**으로 시작해야 해서 단순하지 않음 인코딩과 세그먼트 분할을 한 번에 처리해야 함 (예: ffmpeg의 dash 포맷터) 오디오와 비디오 세그먼트 길이를 맞추려면 [GOP 계산기](https://anton.lindstrom.io/gop-size-calculator/)가 유용함 일반적으로는 고품질 원본에서 여러 해상도로 인코딩 후, **HLS/DASH 매니페스트**와 함께 S3 같은 곳에 올림 플레이어는 매니페스트 URL 하나로 필요한 모든 리소스를 찾아감 - **MPE-DASH**도 고려해볼 만함 - 블로그 포스트가 정말 잘 쓰였음 독자를 **전문가로 존중하는 설명 방식**이 인상적이었음. 이런 식의 제품 발표가 더 많아졌으면 함 - **Steve** 축하함! 예전에 JW Player에서 일할 때 Video.js의 단순함과 **테마 시스템**에 감명받았음 이번 버전도 큰 성공을 거두길 바람 - 오랜만이네 Zach! 반가움 FOMS나 여러 컨퍼런스에서 JW 팀과 이야기 나눴던 게 즐거웠음 영상 기술 쪽은 여전히 **뜨거운 분야**니까 언제든 다시 돌아오길 바람 - 88%라는 수치는 놀라움 가장 큰 개선 포인트가 뭐였는지 궁금함 — 아마 **플러그인 시스템**일 것 같음 리라이트 과정에서 주요 통합 기능이 깨지진 않았는지도 알고 싶음 - 리라이트 과정에서의 **아키텍처 변화**와, 이전 Video.js 디자인 대비 **트레이드오프**가 무엇이었는지 궁금함