본 사이트는 파트너스 활동으로 수수료를 받으며, 서버 운영과 무료 앱 개발에 사용됩니다. 본 사이트는 파트너스 활동으로 수수료를 받으며
서버 운영과 무료 앱 개발에 사용됩니다.
목록으로
크리에이터 팁

Three.js 쇼츠 | 9:16 콘텐츠 파이프라인과 라이선스 체크

최초 발행: 2026년 10월 27일 오후 05:14 | 최종 수정: 2026년 10월 27일 오후 06:21

유튜브 쇼츠, 인스타그램 릴스, 틱톡 등 9:16 세로형 숏폼 플랫폼에서 시청자의 스크롤을 멈추고 시선을 사로잡기 위해 화려한 3D 애니메이션과 시각 효과를 도입하는 창작자가 빠르게 늘고 있다. 최근에는 텍스트나 이미지를 입력하면 몇 분 만에 사실적인 영상을 만들어내는 생성형 AI 비디오 모델(Seedance, Kling, Runway Gen-3 등)이 널리 보급되면서 초기 영상 제작 진입 장벽이 낮아진 것처럼 보인다.

그러나 실제 상업용 쇼츠 프로덕션을 운영하는 창작팀들은 곧바로 심각한 두 가지 장벽에 부딪힌다. 첫째는 원하는 카메라 앵글과 오브젝트 움직임을 얻기 위해 수없이 반복 생성(리젠)하는 과정에서 기하급수적으로 소모되는 AI 크레딧 비용 문제다. 둘째는 유튜브를 비롯한 주요 플랫폼의 인공지능 생성물 의무 표시 및 비독창적 콘텐츠에 대한 제재와 수익 창출 제한 리스크다.

이러한 제작 병목과 플랫폼 불확실성을 완화하기 위한 대안적 접근법으로 웹 브라우저 기반 3D 그래픽 라이브러리인 Three.js가 주목받고 있다. Three.js는 가벼운 브라우저 WebGL 및 WebGPU 가속을 바탕으로 씬을 실시간 연산하므로, 비싼 AI 크레딧을 쓰기 전에 장면의 구도와 카메라 워크를 점검하는 프리비즈(Previsualization) 도구로 유용하다. 나아가 절차적 3D 모션을 무자막 배경 영상(플레이트)으로 녹화한 뒤 키네틱 자막과 결합하여 플랫폼의 합성 미디어 리스크를 상대적으로 낮추면서도 완성도 높은 본편 영상을 경제적으로 제작할 수 있다.

본 문서에서는 생성형 AI 영상의 비용 구조와 플랫폼 정책 리스크를 심층 분석하고, Three.js 브라우저 프리비즈와 블렌더(Blender)의 특성 비교, 5단계 무자막 플레이트 제작 파이프라인, 그리고 유튜브 상업 운영 시 필수적인 오픈소스 및 에셋별 라이선스 점검 체계를 체계적으로 정리한다.

1. 왜 생성형 AI 영상·이미지만으로는 숏폼 제작에 한계가 있는가

생성형 AI 도구는 단 몇 줄의 프롬프트로 고화질 시네마틱 장면을 만들어내는 놀라운 시각적 성취를 보여주지만, 정밀한 스토리보드와 연출이 필요한 상업 쇼츠 제작 현장에서는 적지 않은 비용적·구조적 한계를 드러낸다.

1.1. 반복 재시도(리젠)와 크레딧 누적 비용

Seedance급 최신 텍스트-투-비디오(T2V) 및 이미지-투-비디오(I2V) 모델은 1회 생성당 4초에서 10초 내외의 짧은 클립을 출력한다. 평균 60초 분량의 유튜브 쇼츠 한 편을 완성하려면 최소 10개에서 15개 안팎의 서로 다른 장면 컷이 연결되어야 한다.

문제는 생성형 모델의 비결정론적 특성이다. 프롬프트에 아무리 정밀한 카메라 동선이나 오브젝트 위치를 기술하더라도, 인공지능이 첫 시도에 연출자가 의도한 정확한 구도와 속도, 안정적인 형태를 출력할 확률은 매우 낮다. 손가락 형태가 뭉개지거나, 물리 법칙을 무시하고 사물이 녹아내리거나, 의도치 않게 카메라가 회전하는 오류가 빈번하게 발생한다.

결과적으로 1개의 온전한 4초 컷을 건지기 위해 통상 3회에서 6회 이상의 반복 생성(리젠)을 감수해야 한다. 60초 쇼츠 1편을 기준으로 환산하면 40회에서 80회에 달하는 비디오 생성 API 호출이 발생한다. 상용 AI 비디오 서비스의 크레딧 단가를 고려할 때 쇼츠 1편을 제작하는 순수 컴퓨팅 비용만 수만 원에서 십수만 원에 이르며, 이는 꾸준히 발행해야 하는 숏폼 채널 운영자에게 감당하기 어려운 재정적 부담으로 작용한다.

1.2. 미세 수정의 불가능성과 연속성 단절

전통적인 영상 편집에서는 로고의 위치를 10픽셀 옮기거나, 메쉬의 색상을 특정 컬러로 바꾸거나, 카메라 이동 속도를 0.5초 늦추는 수정이 수초 만에 끝난다.

반면 생성형 AI 비디오 파이프라인에서는 특정 파라미터만 분리해서 수정하는 작업이 불가능에 가깝다. 프롬프트를 한 단어만 수정하거나 시드(Seed) 번호를 유지하더라도 전체 화면 구성과 빛의 반사, 인물의 외형이 완전히 달라져 버린다. 장면 간 시각적 일관성(Consistency)이 깨지면서 전체 컷을 처음부터 다시 생성해야 하는 연쇄적인 크레딧 낭비가 발생한다.

2. 플랫폼 탐지 정책과 채널 지속 가능성 리스크

크레딧 비용보다 더 신중하게 다루어야 할 요소는 유튜브를 비롯한 주요 동영상 플랫폼의 알고리즘 및 수익 창출 심사 정책이다.

2.1. 유튜브 인공지능 생성물 의무 공개 정책

유튜브는 2024년 3월부터 크리에이터 스튜디오에 '인공지능 변경 또는 생성 콘텐츠(Altered or synthetic content)' 의무 공개 규정을 도입하여 시행하고 있다. 실제 사람의 얼굴이나 목소리를 모방했거나, 실제로 일어나지 않은 사건을 사실적으로 묘사한 합성 영상은 업로드 시 반드시 해당 여부를 체크해야 한다.

공개 설정을 적용한 영상에는 설명란 또는 동영상 재생 화면에 '생성형 인공지능으로 제작 또는 편집됨'이라는 라벨이 자동으로 부착된다. 플랫폼 규정에 따르면 이러한 사실적 합성 미디어를 지속적으로 고지하지 않고 업로드할 경우 콘텐츠 삭제, 경고 조치, 또는 유튜브 파트너 프로그램(YPP) 자격 제한 등 불이익이 주어질 수 있다.

2.2. 기계적 대량 생성 및 비독창적 콘텐츠 제재 리스크

유튜브 플랫폼은 AI 기술의 발전과 함께 출처 투명성을 식별하는 기술을 고도화하고 있다. C2PA(콘텐츠 출처 및 진위 확인 연합) 표준 메타데이터와 구글 딥마인드의 SynthID와 같은 디지털 워터마킹 기술, 그리고 영상·오디오 패턴 분석 알고리즘이 결합되어 생성형 미디어를 정밀하게 감지한다.

특히 YPP 수익 창출 심사 과정에서 빈번하게 발생하는 문제는 '재사용된 콘텐츠(Reused content)' 또는 '반복적이고 기계적으로 생성된 콘텐츠(Inauthentic / repetitive content)' 분류다. 생성형 AI 도구로 배경 이미지와 영상을 대량으로 찍어내고 단순 음성 합성만 얹어 발행하는 공장형 채널의 경우, 플랫폼 알고리즘에 의해 자동 생성물로 분류되어 추천 피드 노출이 제한되거나 기승인된 수익 창출이 취소되는 사례가 지속적으로 보고되고 있다.

이러한 정책 환경에서 사람의 기획과 코드로 직접 제어하는 Three.js 절차적 3D 그래픽은 생성형 비디오 파이프라인의 정책적 리스크를 완화하는 유력한 대안 선택지로 검토된다. 자바스크립트 코드로 메쉬의 좌표와 애니메이션 키를 직접 계산하는 방식은 생성 모델 특유의 합성 아티팩트나 디지털 워터마크가 남지 않기 때문이다.

다만 주의할 점은, Three.js나 블렌더 같은 3D 그래픽 도구를 사용한다고 해서 플랫폼의 모든 운영 정책이나 심사에서 일방적인 예외가 적용되거나 지속적인 수익 창출이 보장되는 것은 아니라는 사실이다. 코드 그래픽이라도 기계적으로 동일한 템플릿을 반복 복제하거나 대본의 가치가 결여된 경우 플랫폼의 스팸 및 재사용 규정에 저촉될 수 있다. Three.js는 어디까지나 생성형 AI 모델 고유의 아티팩트 검출 리스크를 줄여주는 '기술적 위험 완화 대안'으로 이해해야 하며, 독창적인 기획과 대본의 완성도가 반드시 병행되어야 한다.

3. 프리비즈(Previsualization)로 AI 크레딧과 제작 시간 아끼기

사전 시각화(Previz)는 영화와 고급 애니메이션 제작 현장에서 본 촬영이나 최종 렌더링에 착수하기 전, 단순한 기하학적 형태(그레이박싱)와 카메라 동선, 씬 타이밍을 먼저 검증하는 실무 공정이다.

숏폼 제작에서도 Three.js를 프리비즈 도구로 배치하면 AI 비디오 크레딧 소모를 유의미하게 줄일 수 있다.

3.1. 블렌더 프리비즈 vs Three.js 브라우저 프리비즈 비교

많은 3D 디자이너가 데스크톱 툴인 블렌더(Blender)를 사전 시각화 도구로 활용해 왔다. 블렌더는 정밀한 씬 셋업과 실시간 뷰포트 렌더러(EEVEE)를 지원하지만, 숏폼 제작을 위한 민첩한 프리비즈 환경에서는 다음과 같은 특성 차이를 보인다.

  1. 소프트웨어 구동 부하: 블렌더는 방대한 기능을 갖춘 독립형 데스크톱 소프트웨어다. 프로그램을 켜고 프로젝트 파일을 불러오며 셰이더 컴파일을 거치는 과정에서 시스템 자원과 대기 시간이 다소 소모된다.
  2. 협업 및 공유 절차: 블렌더 파일(.blend)이나 뷰포트 캡처본을 동료나 기획자에게 검토받으려면 별도의 파일 전송이나 인코딩 과정이 필요하다.
  3. 브라우저 기반 Three.js의 민첩성: Three.js는 크롬이나 엣지 등 일반 웹 브라우저 탭에서 즉시 작동한다. 코드 한 줄을 고치면 웹 브라우저의 핫 리로드(Hot Reload)를 통해 브라우저에서 카메라 각도와 오브젝트 배치가 즉각 갱신된다. 파라미터 조작용 슬라이더(GUI)를 띄워두면 비개발자 기획자도 브라우저에서 마우스 클릭만으로 카메라 시야각(FOV)과 이동 궤적을 실시간 60fps로 확인하며 즉석에서 구도를 조율할 수 있다.
비교 항목Three.js 브라우저 프리비즈블렌더 (Blender) 데스크톱 프리비즈
구동 환경웹 브라우저 (Chrome, Edge 등)데스크톱 소프트웨어 설치 필수
실행 및 피드백 속도코드 수정 즉시 브라우저 갱신소프트웨어 로딩 및 씬 컴파일 대기 필요
하드웨어 요구 사양일반 업무용 노트북 및 내장 GPU에서도 동작중상급 이상의 외장 GPU 권장
파라미터 제어 방식자바스크립트 변수 및 웹 UI 슬라이더DCC 인터페이스 및 타임라인 키프레임
숏폼 타이밍 동기화웹 오디오 API 및 브라우저 시계로 정밀 동기화비디오 시퀀스 에디터(VSE) 셋업 필요
공유 및 배포로컬 서버 URL 또는 웹 링크 1개로 즉시 공유.blend 파일 또는 렌더 비디오 전송 필요

3.2. 2단계 하이브리드 워크플로

실무 창작팀은 Three.js 프리비즈를 다음과 같은 두 가지 전략적 경로로 활용할 수 있다.

  • 경로 A (Three.js 프리비즈 → AI 비디오 변환): Three.js에서 9:16 화면비로 3D 박스 메쉬와 카메라 회전 동선을 잡고, 해당 움직임을 짧은 가이드 비디오로 캡처한다. 이 영상을 AI 도구의 비디오-투-비디오(V2V) 또는 제어넷(ControlNet) 깊이 맵의 입력 소스로 제공한다. 텍스트 프롬프트만으로 무작위 생성할 때와 달리, 카메라 궤적과 사물의 윤곽이 미리 고정되어 있으므로 적은 횟수의 시도만으로 안정적인 결과물을 유도할 수 있어 생성 비용을 크게 절감할 수 있다.
  • 경로 B (Three.js 본편 3D 직행): 데이터 시각화, 과학·공학 원리 설명, 추상 기하학 모션 그래픽, 제품 구조 분해도 등의 주제는 AI 비디오를 거치지 않고 Three.js에서 텍스처와 라이팅을 보강하여 곧바로 최종 배경 영상(무자막 플레이트)으로 렌더링한다. 이 경우 비디오 생성 크레딧 소모가 발생하지 않으며, 생성형 모델 특유의 형태 왜곡 없는 깔끔한 벡터·3D 비주얼을 구성할 수 있다.

4. 콘텐츠 제작 도구별 스택 비교와 전략적 선택 기준

숏폼 제작 파이프라인을 구축할 때는 제작 속도, 비용, 플랫폼 위험, 표현의 자유도를 종합적으로 비교하여 프로젝트 성격에 맞는 도구를 조합해야 한다.

구분주요 역할제작/수정 속도소모 비용 (크레딧/컴퓨팅)탐지/플랫폼 리스크권장 활용 시점
생성형 AI 이미지 (T2I)정적 콘셉트 아트, 단독 인물·배경 스틸컷빠름 (10~30초)낮음~중간 (이미지당 수십 원)보통 (정적 이미지 고유 표기 규정 준수 필요)컷 전환이 빠른 스틸 기반 쇼츠, 썸네일 베이스 에셋
생성형 AI 비디오 (T2V/I2V)자연스러운 유기체 모션, 영화적 실사 영상 연출느림 (반복 리젠 고려 시 컷당 수십 분)높음 (클립당 반복 생성 비용 누적)상대적으로 높음 (AI 라벨 부착 의무, 비독창적 콘텐츠 심사 위험)감성적 시네마틱 컷, 사실적 풍경이나 인물 동작이 필요한 씬
Three.js 프리비즈3D 공간 구도 기획, 카메라 워크 사전 검증즉각적 (실시간 60fps 대화형 조작)매우 낮음 (로컬 브라우저 연산)매우 낮음 (사전 기획용, 단독 영상 비공개)AI 비디오 생성 전 카메라 동선 확정, 기획 단계 씬 검토
Three.js 본편 3D기하학 모션, 테크 인포그래픽, 무자막 플레이트빠름 (코드 수정 즉시 반영, 실시간 렌더)매우 낮음 (로컬 컴퓨팅 자원 활용)상대적으로 낮음 (코드 기반 독창적 연출 시 리스크 완화, 플랫폼 운영 정책 준수 필요)과학·공학 원리 설명, 데이터 차트, 테크 리뷰, HUD 모션
블렌더 3D (Blender DCC)정밀 캐릭터 애니메이션, 물리 시뮬레이션, 복합 씬느림 (모델링, 리깅, 렌더링 시간 소요)높음 (로컬 고사양 GPU 점유 및 전력 소모)상대적으로 낮음 (직접 모델링 기준, 단순 템플릿 복제 시 재사용 리스크 유의)고품질 캐릭터 쇼츠, 유체·파괴 물리 효과, 정밀 제품 렌더

이 비교표가 시사하는 전략적 결론은 균형이다. 모든 장면을 생성형 AI 비디오로 채우려 하면 큰 비용과 플랫폼 정책 리스크를 감수해야 한다. 반대로 모든 장면을 블렌더로 만들려면 1인 창작자나 소규모 팀의 제작 속도가 따라가지 못한다.

따라서 Three.js를 파이프라인의 중심 완충 지대로 삼는 방안이 실용적이다. 기획 단계에서는 Three.js로 신속하게 프리비즈를 진행하여 동선을 확정하고, 인포그래픽과 설명형 배경은 Three.js 무자막 플레이트로 직접 렌더링하며, 사실적 묘사가 꼭 필요한 컷에 한해서만 선별적으로 AI 비디오를 결합하는 하이브리드 전략이 채널의 경제성과 운영 안정성을 돕는다.

5. Three.js의 특성과 3D 쇼츠 제작의 실전 이점

Three.js는 웹 브라우저 환경에서 경량화된 범용 3D 그래픽을 프로그래밍 방식으로 정밀 제어할 수 있도록 돕는 오픈소스 자바스크립트 라이브러리다. 2010년 리카르도 카벨로(mrdoob)에 의해 시작된 이래 전 세계 수천 명의 기여자가 코드를 발전시켜 왔으며, 공식 개발 브랜치(dev) 기준 r186(버전 0.186.0)에 이르기까지 WebGL은 물론 차세대 웹 그래픽 표준인 WebGPU 렌더러까지 폭넓게 지원하고 있다.

영상 제작 관점에서 Three.js가 제공하는 유용한 장점은 브라우저 캔버스 애니메이션 루프(requestAnimationFrame 또는 setAnimationLoop)를 통한 결정론적 프레임 제어다. 3D 공간 안의 큐브, 실린더, 구체 같은 기하학적 메쉬와 파티클 시스템, 조명, 셰이더 효과를 자바스크립트 코드로 온전히 통제할 수 있다.

복잡한 3D 프로그램을 열지 않고도 코드 몇 줄로 카메라의 시야각(FOV)을 조정하고, 오브젝트의 회전 주기와 이동 궤적을 오디오 비트와 밀리초(ms) 단위로 정밀하게 일치시킬 수 있다. 특히 데이터 시각화나 공학적 메커니즘을 설명하는 에듀테인먼트 쇼츠에서는 3D 모델의 내부를 투시하거나 특정 부품을 강조하는 절차적 모션을 효율적으로 구현할 수 있어 제작 생산성이 높아진다.

6. 9:16 쇼츠 완성 5단계 파이프라인 (무자막 플레이트와 키네틱 합성)

효율적인 숏폼 3D 제작을 위해서는 제작 절차를 엄격하게 단계화해야 한다. 작업 과정에서 가장 경계해야 할 함정은 3D 공간 안에 글자(자막)를 직접 새겨 넣는 행위다. 3D 장면에 텍스트가 결합되면 대본의 한 줄이나 오타를 수정할 때마다 3D 씬 전체를 다시 렌더링해야 하는 비효율이 발생한다.

아래 유튜브 쇼츠는 Three.js로 웹 캔버스에 3D 장면을 구성하고 무자막 플레이트로 분리 렌더링한 뒤, 자막과 음성을 결합하여 완성한 실제 5단계 제작 예시다:

영상에서 확인할 수 있듯이, Three.js 숏폼 제작 공정은 상호 의존성을 줄인 5단계 독립 공정으로 설계된다.

6.1. 단계별 제작 공정과 세부 역할

  1. 대본 확정 단계: 전달하고자 하는 핵심 지식과 사실 관계를 먼저 정리하고 글자 수를 확정한다. 9:16 세로 화면의 구도와 카메라 동선은 발화 시간에 맞춰 설계되므로 대본이 가장 먼저 완성되어야 한다.
  2. 음성 생성 및 타이밍 추출 단계: 대본을 기반으로 성우 녹음이나 음성 합성을 진행한다. 이때 음성 파일뿐만 아니라 각 문장과 단어가 몇 초에 시작하고 끝나는지 기록된 타임스탬프 데이터를 함께 추출한다. 이 타이밍 데이터가 전체 비디오의 컷 전환과 자막 배치의 기준점이 된다.
  3. Three.js 무자막 플레이트 녹화 단계: Three.js를 활용하여 웹페이지에 1080×1920 세로 뷰포트를 설정하고, 3D 메쉬와 라이팅, 카메라 애니메이션을 코드로 구성한다. 해당 화면을 그대로 녹화하여 자막이 전혀 포함되지 않은 순수 배경 영상(플레이트)을 생성한다.
  4. 다중 레이어 합성 단계: 3단계에서 준비된 무자막 플레이트 컷들을 순서대로 배치하고 음성 트랙을 얹는다. 이후 2단계에서 추출한 단어별 타임스탬프 데이터에 맞춰 자막 텍스트 레이어를 화면 위에 정밀하게 결합한다.
  5. 마무리 및 마스터링 단계: 자막의 서체와 강조 컬러를 정돈하고, 화면 상단 또는 하단에 시청자의 이탈을 방지하는 진행 막대(프로그레스 바)를 배치한다. 적절한 음량의 배경음악과 효과음을 믹싱하여 마스터 비디오를 출력한다.

이 파이프라인의 핵심은 '무자막 플레이트'라는 중간 산출물에 있다. 자막과 배경을 철저히 분리함으로써, 추후 내용 보완이나 다국어 자막 확장이 필요할 때 3D 장면을 재녹화하지 않고도 짧은 시간 안에 수정본을 완성할 수 있다.

7. 브라우저 캔버스를 영상 파일로 추출하는 2가지 방식

Three.js 자체는 3D 그래픽을 브라우저 화면에 렌더링하는 도구일 뿐이며, 그 자체로 MP4 동영상 파일을 직접 내보내는 기능은 내장되어 있지 않다. 따라서 웹 브라우저의 캔버스 픽셀을 비디오 파일로 변환하기 위해 두 가지 기술적 접근법 중 하나를 선택해야 한다.

7.1. 실시간 브라우저 API 녹화 방식

첫 번째는 웹 표준으로 제공되는 캔버스 캡처 인터페이스를 이용하는 방식이다. 자바스크립트의 HTMLCanvasElement.captureStream() 메서드를 호출하여 캔버스 드로잉 영역을 실시간 MediaStream 객체로 변환하고, 이를 MediaRecorder API에 전달하여 WebM 또는 MP4 포맷으로 저장한다.

이 방식은 추가적인 백엔드 서버나 외부 소프트웨어 설치 없이 순수 웹 브라우저 환경 안에서 즉시 작동한다는 장점이 있다. 다만 실시간으로 프레임을 녹화하므로 복잡한 씬에서 일시적인 브라우저 버벅임이나 GPU 프레임 드랍이 발생하면, 떨어진 프레임 레이트가 비디오 파일에 고스란히 반영된다는 한계가 있다.

7.2. 헤드리스 브라우저 결정론적 프레임 추출 방식

두 번째는 Playwright나 Puppeteer와 같은 브라우저 자동화 프레임워크를 사용하는 헤드리스 녹화 방식이다. 브라우저의 가상 시계(Virtual Clock)를 제어하여 매 프레임(예: 60fps 기준 1/60초) 단위로 시간을 강제 전진시키며, 각 프레임이 렌더링된 순간 캔버스를 무손실 이미지(PNG) 버퍼로 캡처한다. 추출된 일련의 이미지 시퀀스는 FFmpeg 인코더를 거쳐 고화질 비디오로 인코딩된다.

이 방식은 컴퓨터 사양이나 연산 복잡도와 무관하게 모든 프레임이 누락 없이 균일하게 보존되므로, 방송용 또는 상업용 고품질 쇼츠 마스터 영상을 제작할 때 신뢰할 수 있는 선택지다.

비교 항목실시간 MediaRecorder 방식헤드리스 결정론적 프레임 추출 (Playwright + FFmpeg)
작동 환경일반 웹 브라우저 (클라이언트 단독)Node.js 환경 및 헤드리스 브라우저 엔진
인코딩 속도재생 시간과 1:1 동일 (실시간 녹화)씬 복잡도에 따라 가변 (고화질 프레임 캡처 후 인코딩)
프레임 안정성연산 부하 시 프레임 드랍 발생 위험프레임 누락 방지 (결정론적 시계 렌더링)
외부 의존성브라우저 기본 내장 API만 사용브라우저 자동화 도구 및 FFmpeg 바이너리 필요
주 사용 목적빠른 프로토타입 확인 및 인터랙티브 웹 앱프로덕션급 상업 영상 제작 및 대량 배치 자동화

8. 상업용 유튜브 운영을 위한 에셋별 라이선스 점검 매트릭스

Three.js를 다루는 많은 입문자가 'Three.js가 MIT 라이선스이므로 완성된 영상의 모든 요소도 자유롭게 상업화할 수 있다'고 지레짐작하는 실수를 범한다. 오픈소스 라이선스는 소프트웨어 코드 복제본에 적용되는 규칙이며, 렌더링된 영상 안에 포함되는 폰트, 음원, 모션 라이브러리, 인공지능 산출물은 제각기 다른 라이선스 체계의 적용을 받는다.

8.1. Three.js 라이브러리 라이선스 (MIT)

Three.js dev 브랜치의 package.json과 LICENSE 파일은 MIT 라이선스를 명시하고 있다. 저작권 고지는 Copyright © 2010-2026 three.js authors로 기재되어 있다. MIT 라이선스는 소프트웨어 코드의 무료 사용, 수정, 배포, 상업적 판매를 전면 허용한다. 핵심 의무는 소프트웨어의 복제본이나 상당한 부분을 재배포할 때 해당 저작권 고지와 허가 고지를 함께 포함하는 것이다.

여기서 명심할 점은, Three.js 코드로 프레임을 렌더링하여 유튜브에 비디오 파일(MP4) 형태로 업로드하는 행위는 소프트웨어의 복제본을 배포하는 것이 아니라 소프트웨어를 '사용'한 결과물을 공개하는 행위라는 점이다. 따라서 자바스크립트 소스코드 파일을 동봉하여 배포하지 않는 한, 유튜브 영상 설명란에 MIT 전문을 필수적으로 표기해야 할 의무는 발생하지 않는다. 아울러 MIT 라이선스는 비침해성이나 특정 목적 적합성에 대해 일체의 법적 보증을 제공하지 않는다.

8.2. 폰트 서체 라이선스 (SIL OFL vs 전용 서체)

자막에 사용되는 폰트 파일은 소프트웨어 저작물로 보호된다.

  1. SIL Open Font License (OFL 1.1): 대부분의 오픈소스 서체가 채택하는 규격이다. 폰트 파일 자체를 단독으로 유료 판매하는 행위를 금지하며, 서체 이름을 수정할 때는 예약된 폰트 이름(RFN)을 피해야 한다. 영상 프레임 안에 래스터화되어 구워진 글자체 그래픽은 OFL의 재라이선스 의무 대상이 아니므로 상업 영상 자막으로 활용할 수 있다.
  2. 구글 폰트 (Google Fonts): 구글 폰트에 등재된 서체 대다수가 OFL 1.1을 따르지만, 일부 서체는 Apache 2.0 또는 Ubuntu Font License 등 상이한 라이선스를 적용받는다. 일괄적으로 상업용 무료로 단정하지 말고 개별 서체 저장소의 라이선스 파일을 점검해야 한다.
  3. Paperlogy (페이퍼로지): 서체 내부 메타데이터에서 라이선스 필드(name 13)는 OFL 1.1로 기재되어 있으나, 설명 필드(name 10)에는 '프레젠테이션을 위한 파워포인트 전용 글꼴'이라는 문구가 함께 존재한다. 폰트 큐레이션 플랫폼 등에서는 영상 자막 사용을 가능으로 분류하면서도 정확한 범위는 저작권자 확인을 권고하고 있으므로, 상업 프로젝트에서는 권리 관계를 신중히 검토할 필요가 있다.
  4. 메이플스토리 서체: 넥슨에서 무료로 배포하지만 OFL 서체가 아니다. 배포되는 형태 그대로 사용해야 하며, 임의로 서체를 수정하거나 웹폰트 등으로 변형 배포하는 행위가 금지된다. 출처 표기가 권장되며 인쇄물이나 온라인 광고물에 사용될 경우 넥슨의 프로모션에 활용될 수 있다는 조건이 붙어 있다.

8.3. 자막 모션 라이브러리 (GSAP)

웹 타임라인에서 자막에 역동적인 모션을 부여할 때 널리 쓰이는 GSAP(GreenSock)은 MIT 라이선스가 아니다. GSAP 3.12.5 버전 및 최신 배포본은 Webflow의 지원에 따라 상업적 이용을 포함해 전면 무료화되었으나, 이는 Webflow Standard License(2025년 기준)를 따른다.

이 표준 라이선스는 웹사이트, 웹 애플리케이션, 디지털 인터페이스 안에서 GSAP를 구현하고 사용하는 것을 허용한다. 다만 Webflow의 핵심 사업 영역인 노코드 시각 애니메이션 저작 도구를 만들어 직접적으로 경쟁하는 용도로는 구현할 수 없도록 제한하고 있다. 순수한 영상 렌더링 파이프라인에서 자막 애니메이션 보조 수단으로 활용하는 것은 허용 범위 내에 해당한다.

8.4. 배경음악 및 효과음 (스톡 음원)

상업 쇼츠에 삽입되는 BGM과 SFX는 음원 공급사의 서비스 약관을 엄격히 준수해야 한다. Artlist와 같은 스톡 음원 플랫폼의 경우, 유료 구독이 활성화되어 있는 기간 동안 제작되고 공개된 프로젝트에 한해 구독 해지 이후에도 해당 영상 내에서의 사용 권리를 보장한다. 그러나 구독이 종료된 이후에 과거에 받아둔 음원을 꺼내어 새로운 영상 프로젝트에 재사용하는 것은 라이선스 위반이다.

또한 유튜브 플랫폼에는 고유의 저작권 식별 시스템인 Content ID가 상시 동작하고 있다. Three.js 영상이 오픈소스 기술로 제작되었더라도 영상 내 음악 트랙에 대한 클리어리스트(화이트리스트) 등록이 누락되면 수익 창출이 제한되거나 저작권 경고를 받을 수 있다.

8.5. AI 음성 합성(TTS)과 법적 저작권 기준

인공지능 음성 모델을 활용하여 내레이션을 생성할 때, 해당 음성의 저작권 귀속 문제는 법률적 기준을 올바르게 이해해야 한다.

미국 저작권청(USCO)이 발표한 AI 가이드라인과 대한민국 저작권법 제2조 및 문화체육관광부·한국저작권위원회의 안내에 따르면, 인간의 개입 없이 프롬프트 입력만으로 자동 생성된 AI 산출물 자체는 저작권 보호 대상이 되지 않는다. 저작권은 오직 '인간의 사상 또는 감정을 표현한 창작물'에만 부여된다.

따라서 인간 창작자가 직접 집필한 대본과, 이를 바탕으로 인간이 창작적으로 음성의 배치, 타이밍, 시각 요소와의 결합을 결정한 표현 부분이 결합될 때 비로소 완성된 영상 저작물로서 온전한 법적 보호를 받게 된다. 아울러 상업적 목적으로 활용하기 위해서는 음성 합성 서비스 제공사의 상업 이용 라이선스 계약을 사전에 충족해야 한다.

에셋 구분대표 라이선스 / 규정상업용 쇼츠 영상 활용 시 필수 확인 사항
3D 렌더러 (Three.js)MIT License비디오 산출물에 고지 불필요, 자바스크립트 코드 배포 시 저작권 고지 필수
오픈소스 서체 (OFL)SIL Open Font License 1.1폰트 파일 자체 재판매 금지, 영상 래스터 그래픽은 상업 이용 가능
기업 무료 서체독자 무료 사용 규정 (예: 넥슨)폰트 수정 및 2차 가공 금지, 원본 형태 유지 및 출처 표기 권장 사항 준수
모션 엔진 (GSAP)Webflow Standard License웹/인터페이스 무료 사용 가능, Webflow 경쟁 노코드 도구 제작 금지
스톡 음악 / SFX플랫폼별 구독 약관 (Artlist 등)활성 구독 중 공개된 프로젝트 사용 보장, 구독 종료 후 신규 프로젝트 재사용 금지
AI 음성 (TTS)서비스사 이용 약관 및 저작권법자동 생성물 자체는 저작권 외, 인간의 대본 및 창작적 편집 기여분만 보호 대상

9. 초보자를 위한 쇼츠 파이프라인 구축 체크리스트

Three.js 기반의 숏폼 파이프라인을 처음 설계할 때 반드시 확인해야 할 실무 권장 사항을 점검한다.

  1. 뷰포트 규격과 해상도 설정: 모바일 디바이스에 최적화된 9:16 종횡비(1080×1920 해상도)를 캔버스 초기값으로 고정한다. 화면 상단과 하단의 UI 가림 영역(쇼츠 타이틀, 채널명, 사운드 아이콘)을 고려하여 핵심 그래픽을 중앙 80% 안전 영역(Safe Area)에 배치한다.
  2. 카메라 시야각(FOV)과 구도: 원근감을 부여하는 PerspectiveCamera 설정 시 화각(FOV)을 적절히 조절하여 왜곡을 방지한다. 오브젝트가 화면 밖으로 이탈하지 않도록 시선 중심점을 명확히 둔다.
  3. 라이팅과 섀도우 최적화: 브라우저 캔버스의 가벼운 연산을 유지하기 위해 불필요한 포인트 라이트를 줄이고, 환경광(AmbientLight)과 메인 직사광(DirectionalLight) 1~2개 위주로 조명을 구성한다.
  4. 타임라인 시계와 애니메이션 제어: 프레임 캡처 시 오차를 없애기 위해 내장 시스템 시계 대신 고정 델타 타임(Delta Time) 기반으로 메쉬의 위치와 회전을 계산하는 구조를 마련한다.
  5. 에셋 디렉터리 구조 표준화: 유지보수를 위해 장면 소스 코드와 오디오, 무자막 플레이트 임시 폴더, 최종 렌더 산출물 디렉터리를 엄격히 분리하여 관리한다.

10. 마무리

앞에서 다룬 Three.js 쇼츠 제작 파이프라인과 생성형 AI 대비 전략적 이점의 핵심만 짧게 정리한다.

  • 생성형 AI 비디오(Seedance급)는 반복 리젠에 따른 크레딧 비용 부담과 파라미터 미세 수정의 어려움이라는 현실적 문제를 안고 있다.
  • 유튜브의 AI 의무 고지 및 비독창적 콘텐츠 심사 환경에서 코드 기반 Three.js 3D는 합성 미디어 검출 위험을 완화하는 유력한 대안으로 검토된다.
  • Three.js 브라우저 프리비즈는 무거운 데스크톱 DCC 대비 즉각적인 60fps 대화형 조작으로 사전 구도 조율 시간을 단축하는 장점이 있다.
  • 3D 장면에 자막을 직접 굽지 않고 무자막 플레이트로 분리 렌더링하는 5단계 파이프라인이 대본 수정 비용을 낮춘다.
  • 브라우저 비디오 추출은 빠른 테스트용 실시간 MediaRecorder 방식과 상업용 고화질 헤드리스 프레임 캡처 방식으로 나뉜다.
  • Three.js MIT 라이선스는 영상 파일에 고지 의무가 없으나 서체(OFL), 모션(GSAP), 음원(스톡), 음성(TTS)은 개별 약관 검토가 필수적이다.

「Three.js 기반 숏폼 파이프라인은 생성형 AI의 과도한 크레딧 소모와 합성 미디어 탐지 리스크를 완화하는 실질적인 대안 수단이며, 코드 기반 프리비즈와 무자막 플레이트 분리 설계를 결합할 때 보다 유연하고 지속 가능한 제작 환경을 구축할 수 있다.」

신규 숏폼 프로젝트를 기획하고 있다면 텍스트 프롬프트에만 전적으로 의존하기보다 Three.js 브라우저 환경에서 먼저 카메라 워크와 플레이트를 점검해 보길 권장한다. 본 문서의 안내는 기술적·실무적 참고 자료이며 구체적인 법적 분쟁이나 최신 플랫폼 정책 변경에 대해서는 서비스 공식 약관과 전문가 검토를 거치는 것이 바람직하다.

자주 묻는 질문

  • Three.js로 제작한 쇼츠 영상을 유튜브에 업로드할 때 영상 설명란에 MIT 라이선스 전문을 반드시 적어야 하나요?

    아닙니다. Three.js의 MIT 라이선스는 소프트웨어의 복제본이나 상당 부분을 재배포할 때 저작권 고지를 포함하도록 규정하고 있습니다. Three.js 코드로 프레임을 렌더링한 동영상(MP4) 파일을 유튜브에 게시하는 것은 소프트웨어 사용 결과물의 공개에 해당하므로, 소스코드 파일을 함께 배포하지 않는 한 설명란에 라이선스 전문을 의무적으로 기재할 필요는 없습니다.

  • Three.js를 사용하면 블렌더(Blender)보다 렌더링 속도가 항상 빠른가요?

    단순한 렌더 속도 비교를 넘어 작업 생산성 관점에서 보아야 합니다. 블렌더에도 EEVEE 실시간 엔진이 탑재되어 있으나, 프로그램을 켜고 프로젝트와 셰이더를 불러오는 오버헤드가 큽니다. 반면 Three.js는 일반 웹 브라우저 탭에서 즉각 구동되며 자바스크립트 변수 변경 즉시 화면에 반영되므로, 숏폼을 위한 구도 점검과 프리비즈 반복 속도에서 유연한 민첩성을 발휘합니다.

  • 3D 장면에 자막을 직접 넣지 않고 무자막 플레이트로 분리하는 이유는 무엇인가요?

    유지보수 비용을 크게 낮추기 위함입니다. 3D 공간에 자막 텍스트를 직접 일체형으로 구워 넣으면, 대본 수정이나 오타 하나 때문에 3D 카메라 연출과 렌더링을 처음부터 다시 수행해야 합니다. 반면 자막이 없는 순수 배경 영상(플레이트)을 먼저 추출하고 그 위에 자막 레이어를 합성하면, 3D 재렌더링 없이 텍스트 레이어만 고쳐 즉시 수정본을 완성할 수 있습니다.

  • 자막 모션에 활용되는 GSAP 라이브러리는 유튜브 상업 영상에서 무료로 쓸 수 있나요?

    네, 순수한 영상 합성 파이프라인에서 자막 애니메이션을 제작하는 용도로는 무료 사용이 가능합니다. GSAP는 MIT가 아니며 Webflow Standard License를 따르지만, 웹 및 디지털 인터페이스 구현에 대해 상업적 무료 이용을 허용하고 있습니다. 단, Webflow와 직접 경쟁하는 노코드 시각 애니메이션 저작 툴을 구축하는 행위는 엄격히 금지됩니다.

  • 구글 폰트(Google Fonts)에 있는 서체는 모두 영상 자막으로 상업적 무료 이용이 가능한가요?

    대부분 가능하지만 서체마다 라이선스가 다르므로 개별 확인이 필요합니다. 구글 폰트 컬렉션의 다수는 SIL Open Font License(OFL 1.1)를 채택하고 있어 영상 래스터 그래픽에 상업적으로 활용할 수 있습니다. 그러나 일부 폰트는 Apache 2.0이나 Ubuntu Font License 등 다른 규정을 적용받으므로, 사용 전 해당 폰트 저장소의 라이선스 파일을 점검해야 합니다.

  • 유료 스톡 플랫폼에서 다운로드한 배경음악을 구독 해지 후 새로운 쇼츠에 다시 써도 되나요?

    원칙적으로 불가능합니다. Artlist 등 주요 유료 스톡 플랫폼의 라이선스는 유료 구독이 유지되는 기간 동안 제작되어 공개된 프로젝트에 한해서만 사용 권리를 인정합니다. 구독이 만료된 이후에 이전에 받아둔 음원 파일을 꺼내어 새로운 영상 프로젝트에 재사용하는 것은 라이선스 계약 위반이며, 유튜브 Content ID 저작권 클레임의 대상이 될 수 있습니다.

  • 인공지능으로 생성한 AI 음성(TTS)을 쇼츠에 적용했을 때 법적으로 저작권 보호를 받나요?

    미국 저작권청과 대한민국 저작권법 기준에 따르면, 인간의 개입 없이 프롬프트 입력만으로 자동 생성된 AI 산출물 자체는 저작권 보호 대상이 되지 않습니다. 하지만 사람이 직접 집필한 대본과, 창작적으로 음성의 배치·타이밍·영상 요소를 결합하고 편집한 부분에 대해서는 인간 창작자의 기여분으로서 저작권 보호를 받을 수 있습니다.

  • Three.js 공식 저장소의 예제 폴더에 있는 3D 모델이나 텍스처도 상업 쇼츠에 마음대로 쓸 수 있나요?

    마음대로 사용해서는 안 되며 모델 파일별 라이선스를 반드시 따로 확인해야 합니다. Three.js 라이브러리 자체는 MIT 라이선스이지만, 예제(examples) 폴더에 포함된 외부 3D 모델(glTF), 텍스처 이미지, 폰트 파일들은 원작자에 따라 개별 라이선스나 사용 조건이 다르게 지정되어 있을 수 있습니다. 상업 프로젝트에서는 직접 제작한 절차적 메쉬나 상업용 권리가 확보된 에셋을 사용하는 것이 바람직합니다.

  • Seedance 같은 생성형 AI 비디오 모델 대신 Three.js를 사용할 때 비용 절감 효과는 어느 정도인가요?

    비디오 생성에 투입되는 크레딧 비용을 크게 줄일 수 있습니다. AI 비디오는 원하는 카메라 궤적과 형태를 얻기 위해 장면당 3~6회의 반복 생성이 빈번하여 60초 쇼츠 1편당 수십 번의 API 호출이 발생합니다. 반면 Three.js로 사전 프리비즈를 진행하여 카메라 구도를 정돈한 뒤 입력 소스로 쓰거나, 인포그래픽 씬을 직접 무자막 플레이트로 렌더링하면 불필요한 크레딧 낭비를 실질적으로 줄일 수 있습니다.

  • 유튜브에서 생성형 AI 영상에 대한 탐지 및 수익 창출 제한 정책은 구체적으로 어떻게 적용되나요?

    유튜브는 사실적으로 보이는 인공지능 변경 또는 생성 콘텐츠에 대해 스튜디오 내 의무 공개를 요구하며, 미고지 시 콘텐츠 삭제나 파트너 프로그램(YPP) 제한을 부과합니다. 또한 C2PA 및 워터마크 기술로 기계적 대량 생성물을 식별하여 '재사용된 콘텐츠'나 '비독창적 콘텐츠'로 분류될 경우 노출 제한 및 수익 창출이 취소될 위험이 존재합니다. 단, Three.js 같은 3D 그래픽을 사용하더라도 플랫폼의 정책 심사에서 자동으로 예외가 적용되는 것은 아니며 기획의 독창성과 가치 전달이 동반되어야 합니다.

  • Three.js를 블렌더 대신 프리비즈(사전 시각화) 도구로 활용할 때 얻을 수 있는 실무적 강점은 무엇인가요?

    가장 큰 강점은 브라우저 기반의 가벼움과 실시간 대화형 조작성입니다. 블렌더는 고사양 시스템과 씬 로딩 시간이 필요하지만, Three.js는 일반 웹 브라우저 탭에서 실행되며 파라미터 조작 즉시 60fps로 반응합니다. 웹 UI 슬라이더를 통해 비전문가 기획자도 즉각 카메라 앵글을 변경해 볼 수 있으며, 링크 하나로 팀원들과 구도를 검토할 수 있어 사전 기획 조율 속도가 빠릅니다.

  • 초보 창작자가 숏폼을 제작할 때 AI 비디오와 Three.js, 블렌더 중 어떤 조합으로 시작하는 것이 가장 효율적인가요?

    Three.js를 완충축으로 삼는 하이브리드 조합을 권장합니다. 모든 장면을 AI 비디오로 만들면 크레딧 비용과 플랫폼 위험이 커지고, 블렌더로만 만들면 1인 제작 속도가 느려집니다. 따라서 기획 및 카메라 구도는 Three.js 브라우저 프리비즈로 신속히 잡고, 설명형 인포그래픽은 Three.js 무자막 플레이트로 직접 렌더링하며, 불가피한 시네마틱 실사 컷에만 선별적으로 AI 비디오를 결합하는 것이 비용과 위험을 고르게 관리하는 현실적 접근법입니다.