laby-editor
LABY 에디터의 "AI 편집 화면설계" 프로토타입입니다.
강의자가 본인 강의 영상을 AI 편집안으로 다듬은 뒤 바로 업로드하는 흐름을 목표로 합니다.
원래 팀장님이 만든 화면 목업(claude.ai 아티팩트)에서 시작해, 이후 기능을 하나씩 붙여 왔습니다.
실행 방법
빌드 도구 없음. 정적 파일이라 아무 로컬 서버로 열면 됩니다.
python3 -m http.server 8000
# 또는
npx serve .
브라우저로 http://localhost:8000/index.html을 엽니다.
파일 구성
| 파일 | 내용 |
|---|
index.html | 화면 전체 (마크업 + 스타일 + 로직, 순수 바닐라 JS) |
data.js | 자막(cues) · 슬라이드(heads) · AI 프롬프트별 편집안(plans) 목데이터 |
design.md | 디자인 시스템 (Laby-4k와 같은 laby-GUI 기준 + 에디터 전용 확장) |
proxy.mp4 | 미리보기용 강의 영상 (약 80MB) |
CLAUDE.md | Claude Code로 작업할 때 지키는 규칙 |
HANDOFF.md | 개발 전달 문서 — 동작 규칙·수치, 목업 vs 실제 구현, CMS 전달 형식, 결정 기록 |
DESIGN-REVIEW.md | 개발 중인 실제 화면에 대한 디자인 보완 요청 (확정된 항목만) |
dev/index.html | 개발 중인 실제 화면을 캡처 기준으로 재현한 페이지 (/dev/). 상단 현재 / 개선안으로 DESIGN-REVIEW 항목을 켜고 끔 |
현재 기능
AI 편집안
- 프롬프트 입력 / 예시 칩: 자연어로 요청하거나 칩을 눌러 편집안을 생성합니다. AI 관련 요소(라벨·칩·편집안 생성·진행 모달·AI 뱃지)는 보라로 표시
- 진행 모달: 처리 단계를 체크리스트로 보여준 뒤 "저장 / 취소"를 묻고, 저장을 눌러야 Edit List와 타임라인에 반영됩니다.
- 자막 추출 상태: 미추출 / 추출 중 / 완료 세 상태. 자막이 필요한 칩은 완료 전까지 자물쇠로 잠깁니다 (목업 위 "자막 추출 상태 바꿔 보기"로 확인 — 프로토타입 확인용이라 목업 밖에 둠).
자막 스크립트 탭
- 자막 행을 클릭하면 그 시점부터 재생, 재생 중에는 현재 자막 강조 + 자동 스크롤
- 슬라이드 제목(OCR) 헤더가 자막 사이에 목차처럼 들어가며, 클릭하면 슬라이드 시작점으로 이동
- 자막·슬라이드 검색: 탭 상단 검색창에 단어를 치면 해당 줄로 이동하고 주황 형광펜으로 표시 (Enter 다음 / Shift+Enter 이전 / ESC 지우기).
띄어쓰기는 무시하고 찾음. 목록을 거르지 않고 이동만 하며 재생은 하지 않음. 한/영 동의어(괴사 ↔ 네크로시스 ↔ necrosis)는 연결하지 않음
- 슬라이드 단위 ON/OFF: 슬라이드 제목 헤더 오른쪽 ON/OFF 버튼으로 그 슬라이드 구간을 통째로 빼거나 넣음.
일부 문장만 포함된 슬라이드는 "일부"로 표시되고 누르면 전체가 빠짐. 슬라이드 경계에 걸친 문장은 중간에서 잘리지 않도록 문장 경계에 맞춤
- 편집본에 포함된 자막은 왼쪽에 주황 띠, 빠진 자막은 취소선 표시
- 자막·슬라이드 줄에 마우스를 올리면 타임라인에 그 구간이 주황 1px 테두리로 표시됨 (자막 한 줄은 몇 초라 최소 3px 폭)
Edit List 탭
- 모든 행이 시간 · 길이 · ON/OFF 형식 (ON = 기존 Show, OFF = 기존 Hide)
- 삭제 대신 OFF로 두므로 실수로 구간을 잃지 않음. 시간을 클릭하면 그 구간부터 재생
- AI 편집안에서 온 구간은 보라
AI 뱃지 + 선정 이유 표시. 사용자가 자르거나 길이를 바꾸면 AI · 수정으로 바뀌고 원시 경계·무음 스냅 값은 숨김
- 인트로는 목록에 행으로 두지 않고 툴바 "인트로 전체 삽입" 스위치 하나로 다 넣거나 다 뺌. 켜면 떨어져 있는 모든 ON 구간 앞(첫 구간 포함)에 자동으로 붙고, 새로 켠 구간에도 자동 적용. 자르기로 이어진 ON 구간 사이에는 넣지 않음 (ON 구간이 없으면 비활성)
타임라인
- 탐색 구역(재생바): 유튜브처럼 지금까지 재생한 부분은 주황, 남은 부분은 회색. 동그란 손잡이나 막대를 클릭/드래그해 재생 위치 이동 (편집본 재생 중에는 OFF 구간으로 이동 불가)
- 시크바: ON 구간은 파란 박스, OFF 구간은 회색 박스, 인트로 삽입 지점은 짙은 회색 막대, 재생 위치는 검정(다크 모드는 흰색) 세로선 (하단 범례도 같은 막대·선 모양)
- 박스 클릭 → ON↔OFF 즉시 전환
- ON 박스 양 끝 드래그 → 길이 조절 (드래그 중 ESC로 취소)
- 같은 상태끼리 맞닿은 경계의 원 아이콘 클릭 → 두 구간 병합
- ✂ 버튼 또는 스페이스바: 현재 재생 위치에서 구간 나누기 (Cut). 결과를 하단 알림으로 표시 (경계와 너무 가까우면 나누지 않음). 입력창 안에서는 스페이스바가 띄어쓰기로 동작
재생 · 편집 공통
- 결과물 길이 상시 표시: 상단 바에 "편집본 05:50 / 원본 52:29" 형태로 항상 표시 (ON 구간 + 인트로 합계, 편집할 때마다 즉시 갱신).
- 전체 재생 / 편집본 재생: 편집본 재생은 ON 구간만 인트로와 함께 이어서 재생
- 실행취소 / 다시실행: 툴바 ↶ ↷ 버튼 또는 Ctrl+Z / Ctrl+Shift+Z (Ctrl+Y). 되돌린 내용을 하단 알림으로 표시
- 편집 완료 · 업로드: 누르면 최종 길이·ON 구간 수·인트로 수를 요약한 확인 창이 뜨고,
"업로드"를 눌러야 Edit List를 CMS로 전달 (이후 기존과 동일하게 ffmpeg concat으로 새 콘텐츠 생성). "계속 편집"·ESC로 취소
임시로 꺼둔 기능
강의자가 편집 후 바로 업로드하는 흐름에 비해 과한 기능이라 꺼두었습니다.
코드는 남아 있어 index.html의 FEATURES 값을 true로 바꾸면 그대로 복원됩니다.
| 플래그 | 기능 |
|---|
timelineDragSelect | 타임라인을 드래그해 구간을 선택하고 추가/제외 |
versionList | 편집안 목록 탭 (여러 편집안 저장·불러오기) + "새 버전으로 저장" 버튼 |
lengthTarget | 상단 길이 표시 옆 목표 시간(분) 입력 + 여유/초과 색 표시 (업로드 확인 창의 목표 시간 줄 포함) |
autosave | 자동 임시저장 — 편집 상태를 브라우저에 저장해 새로고침·창 닫힘 후 복원. 목업은 새로고침하면 처음 상태로 돌아가도록 꺼둠 (실제 제품에는 구현 권장, HANDOFF 3-11) |
cueToggle | 자막 줄마다 ON/OFF 버튼으로 문장 단위 빼기/넣기 + 버튼을 누른 채 끌어 여러 줄 한 번에 (슬라이드 헤더 ON/OFF는 유지) |
cueRangeSelect | 자막 클릭 → Shift+클릭으로 여러 줄 선택(구 디자인의 주황색 강조) 후 하단 바에서 추가/제외 — ON/OFF 버튼 드래그로 대체 |
알려진 제한사항
- AI 편집안은
data.js에 미리 만들어 둔 결과이며, 진행 모달의 단계 표시는 연출용 타이머입니다 (실제 백엔드 처리와 무관).
- 프롬프트 직접 입력은 칩 문구와 앞부분이 비슷한 편집안을 골라 보여주는 수준입니다.
- 새로고침하면 편집 내용이 모두 사라지고 처음 상태로 돌아갑니다 (목업이라 자동 임시저장을 꺼둠). 실행취소 기록도 마찬가지입니다.
proxy.mp4는 데모용 영상을 통째로 담고 있어 용량이 큽니다. 운영에서는 별도 스토리지/CDN 스트리밍 구조가 필요합니다.
