본 문서는 강사가 별도의 복잡한 강의 녹화/판서 툴을 사용하지 않고, 오직 xSlide 강의 모드 하나만으로 웹캠 PIP 제어, 고품질 마이크 믹싱, 실시간 화면 레코딩 및 마커 데이터 기반 파이널컷 편집 연동까지 완결하는 시스템 설계서입니다.

1. 웹캠 PIP (Picture-in-Picture) 스튜디오 설계

강의 모드 진입 시 슬라이드 화면 위에 오버레이되는 웹캠 화면을 강사가 자유자재로 컨트롤할 수 있어야 강의 가독성이 극대화됩니다.

 
 
┌──────────────────────────────────────────────────────────────┐
│ [ xSlide Lecture Viewer (16:9) ] │
│ │
│ ┌───────────────────────┐ │
│ │ 슬라이드 본문 콘텐츠 │ │
│ │ (텍스트, 차트, GSAP) │ │
│ └───────────────────────┘ │
│ │
│ [웹캠 PIP] ◄── 드래그 이동 가능 │
│ ┌──────────┐ │
│ │ (강사) │ │
│ │ │ ◄── 더블클릭: 형태 전환 │
│ │ │ (원형 <-> 사각형) │
│ └──────────┘ │
└──────────────────────────────────────────────────────────────┘

💡 구현 기능 명세

  1. 자유로운 이동 및 리사이즈 (Draggable & Resizable):
    • pointer-events: auto가 적용된 독립형 PIP 레이어를 설계하여 마우스나 터치 드래그로 슬라이드 내 원하는 곳 어디로든 끊김 없이 이동하게 합니다.
    • 우측 하단 모서리를 드래그하여 웹캠 화면 크기를 10%에서 40%까지 자유롭게 조절하게 만듭니다.
  2. PIP 스타일 퀵 토글 (더블 클릭 및 단축키):
    • 원형(Circle) 모드: 슬라이드 본문을 가리지 않고 얼굴 위주로 보여줄 때 사용 (border-radius: 50%).
    • 사각형(16:9) 모드: 강사의 제스처나 상반신을 넓게 보여줄 때 사용 (aspect-ratio: 16/9).
    • 단축키 지원: 강의 중 C 키를 누르면 카메라 온/오프, W 키를 누르면 PIP 형태(원/사각형)를 실시간 전환합니다.
  3. 크로마키(Green Screen) 백그라운드 모드:
    • 강사 뒤쪽 배경이 녹색/청색 스크린인 경우, WebGL(또는 간단한 CSS blend-mode/Canvas filter)을 사용해 크리에이터 모드처럼 배경을 지우고 투명한 강사 실루엣만 슬라이드 위에 떠 있도록 처리합니다.

2. 브라우저 Native 기반 고품질 강의 레코딩 시스템

외부 녹화 툴(OBS, 파이널컷 등)이 익숙하지 않은 초보 강사들을 위한 xSlide 브라우저 자체 원클릭 MP4/WebM 녹화 솔루션입니다.

 
 
[웹캠 비디오 트랙] ─────────┐
├─► [Canvas + WebRTC Capture] ──► [MediaRecorder] ──► [MP4/WebM 파일]
[슬라이드 캔버스 + 판서] ────┘ ▲
│ (AudioContext로 믹싱)
[마이크(강사)] + [시스템 소리] ──────────┘

💡 기술 아키텍처 및 구현 방식

  • 화면 캡처 API (getDisplayMedia):
    • 강의 시작 버튼을 누르면 브라우저 Native 캡처 프롬프트를 띄워 현재 xSlide 강의 탭을 선택하도록 유도합니다.
    • 이렇게 캡처된 MediaStream은 해상도 손실 없이 깨끗한 벡터 해상도를 60fps로 기록합니다.
  • 듀얼 오디오 하이브리드 믹싱:
    • 마이크를 통한 강사의 음성 스트림(getUserMedia)과 슬라이드 안에 내장된 동영상/효과음 등 시스템 오디오 스트림을 브라우저의 AudioContext API를 이용해 하나의 마스터 오디오 트랙으로 합쳐서 인코딩합니다. 소리가 밀리거나 어느 한쪽이 작게 녹음되는 오류를 방지합니다.
  • 실시간 레코더 (MediaRecorder):
    • 믹싱된 비디오 트랙과 오디오 트랙을 MediaRecorder API에 주입하여 클라이언트 브라우저 단에서 고속 압축합니다.
    • 강의 종료 버튼을 누르면 다운로드 다이얼로그가 뜨며, 로컬 컴퓨터에 즉시 MP4/WebM 파일로 저장되므로 서버의 저장 공간이나 트래픽 부하가 전혀 발생하지 않습니다.

3. 프로 강사를 위한 외부 편집기(Final Cut, OBS) 연동 아키텍처

강의 퀄리티를 최상으로 높여 유튜브나 유료 강의 플랫폼에 배포하려는 프로 강사들을 위해, xSlide 하나로 리소스를 만들고 파이널컷에서 최종 컷 편집을 끝내는 고품질 연동 아키텍처입니다.

💡 파이널컷(Final Cut Pro) 및 Premiere Pro 컷 편집 지원 워크플로우

 
 
[xSlide 강의 녹화 완료]
│
├───► 고화질 영상 파일 (웹캠 PIP 제외한 '순수 슬라이드+판서' 영상) - (Track A)
├───► 웹캠 전용 고화질 영상 파일 (슬라이드 제외한 '순수 강사 얼굴' 영상) - (Track B)
└───► 챕터 마커 데이터 XML (각 슬라이드별 전환 타임스탬프 기록) - (Metadata)
│
▼ [Final Cut Pro / Premiere Pro 가져오기]
(XML 로드 시 타임라인 위에 두 트랙이 완벽히 싱크를 맞춰 정렬되며,
슬라이드가 넘어간 위치마다 마커/컷분할 포인트가 자동으로 생성되어 1분 만에 편집 완결!)
  1. 더블 트랙 분리 레코딩 (Dual Track Recording) 모드:
    • 녹화 시 화면상에서는 웹캠 PIP를 보며 강사가 편하게 말하지만, 녹화 파일은 **"슬라이드 화면 트랙(Audio 포함)"**과 "강사 카메라 풀화면 트랙" 두 개의 개별 MP4 파일로 분리하여 내보내는 모드를 옵션으로 제공합니다.
    • 이렇게 하면 파이널컷에서 슬라이드 크기와 강사 얼굴 크기를 편집할 때 화질 저하가 전혀 없고, 자막 처리나 화면 배치를 마음대로 편집할 수 있어 다른 툴이 필요 없어집니다.
  2. FCPXML / SRT 자막 및 마커 파일 자동 추출:
    • 강의 도중 슬라이드 페이지를 넘길 때마다 xSlide 시스템은 그 시각의 정확한 타임스탬프를 기록합니다.
    • 녹화가 끝나면 영상 파일과 함께 **chapter_markers.fcpxml (파이널컷용 마커 파일)**을 같이 제공합니다.
    • 이 XML 파일을 파이널컷에 드래그하면, 타임라인 상에 슬라이드가 바뀐 지점마다 마커(Marker)가 자동으로 표시되어 강사가 컷 편집 지점을 쉽게 찾고 잘라낼 수 있습니다.
  3. 크로마키 전용 배경 전환:
    • 강사 얼굴을 파이널컷에서 투명하게 얹고 싶을 때를 대비해, xSlide 내에서 웹캠 영역의 배경을 단색 그린스크린(#00FF00)으로 강제 채워주는 기능을 제공하여 비전문가도 스튜디오급 합성을 할 수 있게 돕습니다.