1) 기존 문제점
① 라이브 수업 종료 후 별도 데스크톱 NLE에 가져와 편집·인코딩해야 해 배포가 지연되고, 서버 인코딩 방식은 트랜스코딩 비용과 큐 지연이 상시 발생했습니다.
② 강사별 편집 역량 편차로 콘텐츠 품질이 들쭉날쭉했고, 자막 작업·퀴즈 카드 제작 등 반복 업무에 많은 시간이 소요되었습니다.
③ 학교·학원 환경의 보안 제약으로 설치형 프로그램 배포가 어렵고, 이기종 OS에서 동일 환경을 보장하기 어려웠습니다.

2) 프로젝트 목표
① “브라우저만으로 프로급 편집/출력”을 실현하는 WASM 기반 스튜디오 제공
② 라이브 자동 녹화→웹 진입→템플릿·자막 자동화→즉시 배포까지의 원패스 파이프라인 구축
③ 서버 인코딩 제거로 비용/대기시간을 최소화하고, 강사 누구나 10분 내 결과물을 만드는 생산성 달성

3) 서비스 구축 시 주안점
① 성능: Worker 병렬 처리, OffscreenCanvas로 프리뷰 지연 최소화, FFMpeg.wasm 모듈 트리셰이킹/코덱 셋 최소화
② 안정성: Chunked I/O·세그먼트 기반 처리로 메모리 스파이크 억제, 오토 세이브/버전 스냅샷
③ 사용성: 템플릿 마법사·자막 자동 싱크·단축키로 “클릭 수/편집 단 steps”를 체감 절감
④ 호환성: H.264/AAC 표준 출력 프리셋, 브라우저별 폰트/캔버스 차이 흡수 렌더러
⑤ 보안/권한: 교육 계정 SSO, 에셋 접근 토큰화, 브라우저 로컬 저장 데이터 암호화

1) 프로젝트 개요
① 라이브 수업이 종료되면 강의가 자동 녹화·수집되고, 강사가 웹사이트에 접속해 별도 프로그램 설치 없이 즉시 편집/출력할 수 있는 AI 기반 웹 영상 편집 플랫폼을 구축했습니다.
② 서버 인코딩이 아닌 브라우저에서 WebAssembly + FFMpeg.wasm으로 인코딩/트랜스코딩을 수행하여 서버 부하와 비용을 혁신적으로 절감하고, 네트워크 상태에 관계없이 빠른 편집 피드백을 제공합니다.
③ 제공된 에디터는 멀티 트랙 타임라인, 실시간 미리보기, 템플릿 기반 합성, 전환/필터, 이미지/오디오/텍스트/자막(STT) 추가·편집, 트랙/에셋 관리, 영상 분할 및 리플 편집, 에셋 쉐입/레이아웃 관리 등을 통합했습니다.
④ UI는 다크 테마 기반의 스튜디오 레이아웃(좌측 에셋 패널–중앙 프리뷰–하단 타임라인)을 채택했으며, 모달 마법사로 템플릿 선택→배경/레아웃 적용→자막/효과 자동 합성의 3스텝 워크플로우를 제공합니다.

2) 작업 범위
① 아키텍처/플랫폼 설계
- 브라우저 인코딩 파이프라인(Worker 기반 멀티스레드, 파일 I/O는 IndexedDB 스트리밍) 설계
- 미디어 그래프(디코드→이펙트→컴포즈→엔코드)와 프리뷰 파이프라인(저지연 프레임 버퍼) 분리
- 템플릿 메타 스키마(JSON) 및 타임라인 데이터 모델(계층형 트랙·클립·키프레임) 정의
② 프런트엔드 개발
- React/TypeScript로 스튜디오 UI 구현(타임라인 확대/스크럽/스냅, 다중 선택, 단축키)
- 실시간 프리뷰 엔진(OffscreenCanvas+WebGL)과 오디오 파형/피크 미터 렌더러 개발
- 자막/텍스트 스타일러(폰트/모션 프리셋, 자막 싱크 조절, 자동 줄바꿈) 구현
③ WASM 인코딩/미디어 처리
- FFMpeg.wasm 번들 최적화(코덱 셋 축소, lazy load) 및 Worker 간 공유 버퍼 전송
- H.264/AAC, 해상도/프레임레이트/비트레이트 프리셋, 컷 편집 무재인코딩(Smart Trim) 지원
- 배경 제거/블러, 색보정, 전환(크로스 디졸브/슬라이드 등) 이펙트 파이프라인 구축
④ AI/자동화
- STT 기반 자동 자막 생성(Web Speech API/Vosk 연계), 발화 구간 탐지 및 타임코드 매핑
- 템플릿 자동 채우기(제목·설명·퀴즈 카드 등) 및 자막 스타일 프리셋 적용 마법사
⑤ 백엔드/연계
- 라이브 녹화 자산 수집 및 권한 토큰 발급 API, 에셋 업로드(S3) 및 서빙(CloudFront) 구성
- 작업 이력/버전 관리, 협업을 위한 공유 링크 및 복구 스냅샷
⑥ 품질/운영
- 성능 계측(렌더/인코딩 FPS, 메모리 사용량)과 크래시 로깅(Sentry) 탑재
- E2E/시나리오 테스트(Playwright) 및 주요 편집 동작 유닛 테스트 작성

3) 핵심 기능
① 브라우저 내 인코딩 및 실시간 편집
- FFMpeg.wasm으로 서버 무의존 인코딩/트랜스코딩
- Worker 기반 병렬 처리로 미리보기 프레임 드롭 최소화
- 템플릿/에셋/자막/오디오/전환 효과를 타임라인에서 즉시 반영
② 템플릿 기반 편집 마법사
- 배경/레이아웃/전환 프리셋 선택 → 콘텐츠 자동 배치 → 자막/효과 일괄 스타일링
- 교육 콘텐츠에 최적화된 카드형 레이아웃, 퀴즈 오버레이, 하이라이트 스티커 제공
③ STT 자막 & 싱크 보정
- 자동 자막 생성 후 단축키로 구간 병합/분할/타임라인 스냅
- 다국어/용어 사전 적용, 가독성 높은 오버레이 스타일 프리셋
④ 트랙/타임라인 편집
- 다중 트랙(비디오/오디오/텍스트/자막/이미지)과 키프레임 기반 모션/투명도/오디오 페이드
- 리플/롤 편집, 스플릿/슬립/슬라이드, 정밀 스크럽

4) 주안점
① 서버 비용 제로에 가까운 렌더링 구조: 서버 인코딩/큐 대기 제거, 사용자 단 인코딩으로 즉시성 확보
② 대용량 안전성: 1시간 이상 대용량 소스 처리 시 메모리 누수 방지(Chunked I/O, 스트리밍 엔코드)
③ 교육 현장 최적 UX: 템플릿·자막 자동화로 ‘녹화→편집→배포’ 리드타임을 강사 기준 최소화
④ 신뢰성/복구성: 비정상 종료 시 작업 스냅샷 자동 저장, 재진입 즉시 복구
⑤ 접근성: 키보드 퍼스트 편집(단축키), 명도 대비/폰트 사이즈 가이드 준수

5) 성과
① 서버 인코딩 비용 68% 절감: 브라우저 인코딩 전환으로 월간 트랜스코딩 서버 비용 대폭 절감
② 편집 리드타임 52% 단축: 템플릿·STT 자동화로 강의 1편 평균 제작 시간이 절반 수준으로 감소
③ 렌더 성공률 99.2%: 1시간 이상 소스 기준 재시도 포함 최종 성공률 99%대 확보

6) 진행 단계
① 기획·PoC(2024.05): WASM 인코딩 타당성·메모리 모델 검증, 템플릿 스키마 확정
② 개발(2024.06~11): 스튜디오 UI, 프리뷰 엔진, STT·템플릿·타임라인 핵심 기능 구현 및 통합
③ 테스트·런칭(2024.12): 대용량 시나리오/브라우저 호환성 검증, 성능 튜닝 후 운영 배포