laby-editor

LABY 에디터의 "AI 편집 화면설계" 프로토타입입니다. 강의자가 본인 강의 영상을 AI 편집안으로 다듬은 뒤 바로 업로드하는 흐름을 목표로 합니다. 원래 팀장님이 만든 화면 목업(claude.ai 아티팩트)에서 시작해, 이후 기능을 하나씩 붙여 왔습니다.

• 배포 주소: https://laby-editor.vercel.app (main 브랜치가 Vercel에 자동 배포)
• 화면의 자막·슬라이드 제목·구간 데이터는 MED3504 「세포손상」 강의(52분 29초)에서 실제로 추출한 값입니다.

실행 방법

빌드 도구 없음. 정적 파일이라 아무 로컬 서버로 열면 됩니다.

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 스트리밍 구조가 필요합니다.