대본 라이브러리 화면
음성 인식으로 대본이 자동 스크롤되는 텔레프롬프터. 폰·키보드·오퍼레이터가 한 화면을 같이 몰고, 네트워크가 끊겨도 돌아간다.
대본 라이브러리 화면
// the brief
대부분의 텔레프롬프터는 정해진 속도로 대본을 올린다. 그러면 사람이 기계 속도에 자기를 맞춰야 한다. 조금 빨라지거나 한 박자 쉬면 대본이 저 혼자 앞서가고, 그걸 따라잡느라 말이 흔들린다. 발표·촬영처럼 다시 못 찍는 순간일수록 이 어긋남이 치명적이다.
현장의 조건도 까다롭다. 발표자·오퍼레이터·리모컨이 한 대본을 동시에 제어해야 하고, 대본은 보통 PDF나 워드 파일로 온다. 촬영장 와이파이는 믿을 게 못 되고, 녹화물은 폰에서 바로 저장돼야 한다. '목소리로 따라 흐르는 스크롤' 하나만 되면 되는 게 아니라, 이 모든 게 안 깨지고 맞물려야 쓸 수 있는 도구가 된다.
// approach
기성 프레임워크로 얹기보다, 이 문제 전용으로 엔진을 설계했다. 핵심은 스크롤 속도를 사람에게 맞추는 것. 말하는 위치를 실시간으로 문서 좌표에 붙여 그 지점이 항상 화면 시선 라인에 오도록 대본을 흘린다. React 19 + Vite로 화면을, Hono(CF Worker)·D1로 백엔드를, Dexie로 오프라인 저장을 맡겼다.
속도를 내는 데는 AI 도구를 적극적으로 엮었다. 다만 무엇을 만들고 어디서 멈출지, 현장에서 안 깨지는 경계가 어디인지에 대한 판단과 마감은 전부 사람이 쥐었다. 실사용자가 있는 프로덕션 앱이라, 지오메트리·동기화처럼 빌드 통과만으로는 안 잡히는 부분은 헤드리스 브라우저로 실측하고 순수 로직은 회귀 테스트로 못 박았다.
속도를 사람에게 맞춘다. 사람이 기계에 맞추는 게 아니라.
// key decisions
라이브 현장에선 발표자 폰·오퍼레이터 노트북·키보드가 한 대본을 같이 제어한다. PLAY_PAUSE 같은 토글 명령을 쓰면 두 사람이 거의 동시에 누를 때 서로 상쇄돼 상태가 뒤집힌다. 그래서 모든 제어를 PLAY/PAUSE 같은 절대 액션(멱등)으로 설계했다. 몇 번을 누가 눌러도 결과가 같다. 오퍼레이터가 개입하면 4초 창 동안 음성 추적을 눌러뒀다가, 만료되면 현재 시선 위치에서 다시 이어받아 '두 운전자'가 싸우지 않게 했다.
서버형 STT(종량 과금)를 붙이면 인식 정확도는 오르지만, 사용자가 늘수록 비용이 커져 무료 앱을 유지할 수 없다. 그래서 브라우저 온디바이스 음성 인식만 쓰기로 했고, 그 대가로 한 문장 안에서 한국어·영어를 섞어 말할 때의 인식 한계는 '수용된 한계'로 분명히 정했다. 대신 음성 입력 지점을 matcher.feed() 하나의 시임으로 좁혀, 나중에 어떤 인식 엔진이 오든 이 접점에만 꽂으면 되도록 열어뒀다.
촬영장 네트워크는 믿을 게 못 된다. 그래서 Dexie로 기기 안에 먼저 저장하고 연결되면 LWW로 동기화하는 오프라인 우선 구조로 잡은 뒤, 데이터 유실 지점을 하나씩 막았다. 편집 자동저장은 화면을 떠나는 순간 마지막 입력까지 강제로 흘려보내고, 동기화는 실제로 써진 문서만 '반영됨'으로 돌려보내며, 큰 문서 하나가 전체 전송을 막지 못하도록 청크로 나눴다.
세 결정의 공통점은 화려한 기능이 아니라 '현장에서 안 깨지는 것'이다. 텔레프롬프터는 생방송·촬영처럼 되돌릴 수 없는 순간에 쓰인다. 그 압박을 기준선으로 삼고 설계했다.
// voice
음성 추적의 진짜 어려움은 '인식'이 아니라 '지금 어디를 읽고 있나'를 문서 위 좌표로 정확히 잡는 데 있다. 앞 문단에 우연히 비슷한 세 단어가 나오면 스크롤이 엉뚱한 데로 낚아채여 발표자를 놓친다. 그래서 평상시엔 전방 점프를 12단어로 캡하고, 정말로 건너뛴 경우에만 별도 recovery 경로로 넓게 재배치하도록 나눴다. 여기에 장문 스크립트를 끊김 없이 흘리려 content-visibility 가상화를 쓰는데, 이때 브라우저가 단어 좌표를 문단 로컬로 뒤틀어버리는 함정이 있어 모든 위치를 offsetParent 체인으로 다시 누적해 계산한다. 매처는 순수 함수로 떼어내 Node에서 세 시나리오(우연한 앞 일치 무시·진짜 스킵 재획득·연속 추적 무흔들림)를 회귀 테스트로 지킨다.
// result
prompter.kkclabs.com에 라이브로 운영 중인 프로덕션 앱이다. 발표·촬영 현장에서 목소리로 대본을 몰고, 폰을 리모컨 삼아 넘기고, 네트워크 없이도 쓴다. PDF·워드 대본을 그대로 가져와 바로 올리고, 녹화물은 iOS 설치형 PWA의 저장 제약까지 감안해 공유 시트로 내보낸다. 로그인은 패스키(WebAuthn)로 간편하게, 데이터는 기기와 클라우드가 조용히 맞춰진다. 그리고 무료로 유지된다.
// 이런 걸 만들어 드립니다.