본문으로 건너뛰기
스케치 테마 예제 덱의 렌더 프레임. 「발표 원칙 8가지 중 2가지」 제목 아래 번호 타일 1~8 중 1과 4가 파랗게 켜져 있고, Visibility·Consistency 알약, 「음성 — 로컬에서 합성」「모션 그래픽 — 음성에 맞춰서」 카드, 아래쪽에 내레이션 자막 한 줄이 보인다.

AI 개발 방식 › 발표·콘텐츠

음성 동기 모션 영상 제작 엔진

HTML 덱 하나로 음성 자동 발표·현장 수동 발표·MP4 를 만드는 로컬 제작 엔진 — 네트워크를 운영체제 수준에서 막고 렌더

구현 완료
기간
2026.10 (작업 기록 기준)
상태
제작 엔진 v0.5 · 로컬 시험 20 통과 · 사내 발표 준비 과정에서 만든 도구(발표 수행·결과는 다루지 않음)
맥락
개인 프로젝트 · 사내 AI 활용사례 발표 준비 과정에서 만든 제작 도구(이 사례는 엔진만)
역할
제작 도구 요구 제시(HTML 슬라이드·움직임·음성 내레이션 자동 발표·재사용 엔진), 기본 테마 지정, 발표 자료용 목소리 청취 선택, codex 검증 상한 지시
구현
엔진·도구·문서 구현 Claude · 계획·코드 검증 codex
기술
Node.js 20+ CLI, 순수 HTML/CSS/JS(Web Animations API), playwright-core + 시스템 크롬, ffmpeg(H.264 + AAC), macOS sandbox-exec, 로컬 음성 합성기(Supertonic 기본)

핵심 수치.

실측

20 통과·0 실패

제작 엔진 v0.5 시험, 로컬 맥, 2026-10-23

실측

31.5초

48.4초 분량의 스케치 시연 덱을 렌더하는 데 걸린 시간(46fps·프레임 재사용 73%), M5 Pro·Chrome 155·x264 crf 18

목표

13분 영상 15분 이내 렌더

계획 값 — 실제 발표 길이 영상으로 다시 잰 기록 없음

개요

HTML 덱 하나에서 ① 음성 내레이션 자동 발표 ② 현장 수동 발표 ③ MP4 모션 영상을 모두 만드는 로컬 제작 엔진이다. 음성 합성·재생·렌더를 모두 로컬에서 처리해 대본을 외부로 보내지 않는다. 사내 AI 활용사례 발표를 준비하며 만든 도구이고, 이 사례는 엔진만 다룬다. 엔진으로 만든 발표 영상과 발표 수행·결과는 싣지 않는다.

본인 역할

HTML 슬라이드·움직임·음성 내레이션 자동 발표·재사용 가능한 엔진이라는 제작 도구 요구를 냈고(2026-10-14), 참고 화면 3장과 함께 스케치 테마를 기본 테마로 지정했다. 에이전트는 소리를 들을 수 없어, 발표 자료 준비 과정에서는 합성음의 음질·발음을 직접 듣고 목소리를 골랐다. 엔진 계획의 codex 검증은 3차에서 끝내도록 지시했다. 엔진·도구·문서는 Claude 가 구현했고 계획·코드 검증은 codex 가 했다.

핵심 판단

  • 화면은 HTML, 시간은 가상 시계. 웹 애니메이션을 멈춘 채 가상 시계로 프레임을 넘겨 렌더하고 음성은 PCM 트랙으로 붙여, 같은 원본에서 같은 MP4 가 나오게 했다.
  • 외부 전송 차단은 운영체제 수준으로. 환경변수·프록시 차단으로는 새는 경로(유닉스 소켓·loopback 중계)가 있다는 codex 3차 지적을 받아, sandbox-exec 로 네트워크를 전부 막고 크롬의 단일 실행 소켓 하나만 열었다.
  • 점검 통과는 공개 허가가 아니다. 덱별 금지어·필수 문구 점검(check)을 두되, 발표 허용·보안 검토는 사람이 확인하는 별도 게이트로 남겼다.

화면과 구성도

엔진 예제 「스케치」 테마 덱을 MP4 로 렌더한 한 프레임 — 정지 화면만 싣고 음성은 쓰지 않음(2026-10)

결과

  • 한 덱 형식으로 자동 발표·수동 발표·MP4 를 내는 엔진·CLI, 시험 20 통과·0 실패(2026-10-23, v0.5, 로컬).
  • 렌더 실측: 25.2초 분량의 시험 덱을 24.9초(30.3fps)에, 48.4초 분량의 스케치 시연 덱을 31.5초(46fps, 프레임 재사용 73%)에 렌더했다 — M5 Pro·Chrome 155·x264 crf 18.
  • 바뀐 문장만 다시 합성하는 캐시를 두고, 합성음 앞 무음을 정리해 자막이 말보다 먼저 뜨던 문제를 고쳤다.

한계와 다음 단계

  • 엔진 계획·코드는 codex 1~3차 모두 반려됐고, 3차 지적 10건은 반영 뒤 재검증 없이 시험으로만 확인했다(본인 지시로 종료, 통과 아님).
  • sandbox-exec 는 macOS 전용이고 사용 중단 예정이라 다른 OS 용 차단 수단이 필요하며, 실제 소리 출력 지연은 재지 않았다. README·PRD 의 시험 수(16)가 결과 파일(20)과 다르다.

기술

Node.js 20+ CLI · 순수 HTML/CSS/JS(Web Animations API, 외부 런타임 라이브러리 없음) · playwright-core + 시스템 크롬 · ffmpeg(H.264 + AAC) · macOS sandbox-exec · 로컬 음성 합성기(Supertonic 기본) · 덱별 정책 점검(check)

관련 사례.

발표자 화면. 위쪽에 세션 이름, 자동 진행, 접속 안내, 순서, 경과 시간, 계획 대비, 발표 화면 연결 상태, 음성·자막 켜짐 단추가 있고, 가운데에 현재 슬라이드 미리보기와 단계 표시, 발표자 노트, 오른쪽에 다음 항목·알림·발표 화면 적용 상태, 아래쪽에 이전·재생·다음 등 조작 단추가 있다. 슬라이드는 연습용 가상 발표 자료다.

발표·콘텐츠

시제품

AI 인터랙티브 발표 플랫폼

발표 재생과 AI 질의응답을 결합한 시제품 — 사내 발표 준비 범위, 정식 리허설·실제 휴대폰 접속 시험은 남음

28분 21초·자동 멈춤 0 · R2 무인 자동 진행 7/7, 실제 길이 패키지, 로컬, 2026-10-20

2026.10요약 사례

킷의 HTML 슬라이드 양식 — 「이 문서 보는 법」 장에 조작 키 표와 표기·묶음 색 안내, 아래 진행 막대

방법론·에이전트

운영 중

2-AI 개발 방법론과 에이전트 운영

만드는 AI와 검사하는 AI를 나누고, 검증이 끝나지 않을 때 멈추는 규칙과 「통과」를 부풀리지 않는 기록 규칙을 킷으로 만들어 운영했다

1.5.0 → 1.12.0 · 방법론 킷 판 이력 2026-09 ~ 10, 배포 16파일 — 킷 회귀 878 PASS·0 FAIL은 Codex 응답 대역을 쓴 회귀 시험

2026.04 ~ 2026.10상세 사례