텔레프롬프터

텔레프롬프터는 영상 촬영, 라이브 방송, 발표, 카메라 앞 원고 낭독을 돕는 도구입니다. 원고를 큰 글자로 보여 주고 일정한 속도로 위로 움직여서, 발표자가 종이를 내려다보지 않고도 카메라와 가까운 시선을 유지할 수 있게 합니다. 브라우저 기반 텔레프롬프터는 원고 붙여넣기, 스크롤 속도, 글자 크기, 줄 간격, 전체 화면, 미러 모드를 빠르게 조정할 수 있어 1인 제작자나 회의 발표에 특히 유용합니다. 미러 모드는 반사식 프롬프터 유리와 함께 사용할 때 필요하고, 전체 화면은 녹화 중 방해 요소를 줄여 줍니다. 핵심은 단순한 텍스트 표시가 아니라 말하는 속도와 시선, 전달 흐름을 안정시키는 것입니다.

부드러운 스크롤은 requestAnimationFrame으로 구동됩니다. 매 애니메이션 틱마다 사용자가 선택한 속도 값과 이전 프레임 이후의 시간 델타를 기준으로 이동할 픽셀 수를 계산한 뒤 원고 컨테이너에 transform: translateY(-Npx)를 적용합니다. transform 기반 스크롤은 GPU 합성 스레드에서 처리되므로 사양이 낮은 하드웨어에서도 60fps를 유지합니다. 매 프레임 레이아웃을 트리거하는 scrollTop 기반 접근과는 다릅니다. 읽기 속도는 대략 speed = 분당 단어 수 × 평균 단어 너비(px) / 60으로 계산됩니다. 예를 들어 150 WPM 내레이션에서 평균 단어 너비가 50px이면 약 125 px/s의 스크롤이 필요합니다. 글꼴 크기, 줄 간격, 뷰포트 너비는 모두 같은 속도 설정에서 유효 WPM을 바꾸므로, 녹화 전에 슬라이더로 간단한 교정 테스트가 필요합니다. 미러 모드는 원고 컨테이너에 transform: scaleX(-1)을 적용하여, 45도 빔 스플리터 텔레프롬프터 유리를 통해 읽을 수 있는 수평 반전 텍스트를 생성합니다. 카메라는 유리를 통해 방해 없이 촬영합니다. 전체 화면 표시는 element.requestFullscreen()을 사용하여 브라우저 UI와 알림이 녹화에 간섭하지 못하도록 하며, document.fullscreenchange 이벤트로 Esc 키 종료를 추적합니다. 원고와 모든 사용자 설정(속도, 글꼴 크기, 줄 간격, 미러)은 변경될 때마다 localStorage에 저장되므로 새로고침하면 리허설 상태를 정확히 복원합니다. 휠이나 touchstart를 통한 수동 스크롤 입력은 애니메이션 루프를 일시 정지하고 진행률 카운터를 새 스크롤 위치에 재동기화하므로, 라이브 중 재생 헤드를 초기화하지 않고도 수동 조정이 가능합니다.

• 스크롤 루프: requestAnimationFrame으로 60fps에서 transform: translateY(-Npx) 적용 — GPU에서 합성 처리, 프레임당 레이아웃 없음
• 속도 공식: scrollPxPerSecond = wpm × averageWordWidthPx / 60; 150 WPM, 50px/단어 기준 약 125 px/s
• 미러 모드: 렌즈 앞 45도 각도의 빔 스플리터 프롬프터 유리를 위한 transform: scaleX(-1)
• 전체 화면: element.requestFullscreen()과 document.exitFullscreen()에 fullscreenchange 이벤트로 Esc 키 추적
• 지속성: localStorage에 원고, 속도, 글꼴 크기, 줄 간격, 미러 플래그를 저장하여 새로고침 시 리허설 복원
• 수동 재정의: wheel 및 touchstart 이벤트가 애니메이션 루프를 일시 정지하고 진행률을 새 스크롤 위치에 재동기화
• 글꼴 크기 경험 법칙: 시청 거리 1m당 약 24~32px로 원고를 눈의 피로 없이 읽을 수 있음