화면설계서 · LABY-CMS 3.0
v0.1 초안 · 2026-09-17
기존 LABY 에디터 v0.1 구조 기반
기존 에디터의 Cut → Show/Hide → 저장 구조를 그대로 둡니다. AI는 Edit List를 자동으로 채워 넣는 역할만 하므로, CMS의 기존 concat 저장 로직은 수정할 필요가 없습니다. 아래는 실제 강의 영상의 자막·OCR 데이터로 동작하는 화면입니다 — 자막을 클릭하고, 프롬프트 칩을 눌러 보십시오.
프로토타입 확인용
| 구성 요소 | 동작 정의 |
|---|---|
| 콘텐츠명 | 편집 대상 콘텐츠 제목. CMS 콘텐츠 목록에서 ‘편집’으로 진입할 때 전달받습니다. |
| 결과물 길이 | 상단에 편집본 길이 / 원본 길이를 항상 표시합니다(ON 구간 + 인트로 합계). 편집할 때마다 즉시 바뀝니다. |
| 자막 추출 상태 | 세 상태를 가집니다. 완료면 모든 프롬프트 사용 가능, 추출 중이면 진행률과 함께 자막 필요 프롬프트가 잠김, 미추출이면 ‘자막 추출’ 버튼이 노출되고 시간 연산형 프롬프트만 허용됩니다. 화면 위쪽 ‘자막 추출 상태 바꿔 보기’로 확인하십시오(프로토타입 확인용이라 목업 밖에 둡니다). |
| AI 프롬프트 입력 | 자연어 입력 후 ‘편집안 생성’. 결과는 Edit List와 시크바에 즉시 반영되며 이 시점에 렌더링은 발생하지 않습니다. |
| 프롬프트 예시 칩 | 자주 쓰는 프롬프트를 칩으로 제공. 자막이 없으면 자막 필요 칩에 자물쇠가 표시되고 비활성화됩니다. |
| 플레이어 | 편집 전에는 원본 전체를 재생합니다. 편집안 생성 후 ‘편집본 재생’으로 전환하면 Show 구간만 이어서 재생합니다. |
| 자막 스크립트 / Edit List 탭 | 기본은 자막 스크립트. 편집안이 생성되면 Edit List 탭으로 자동 전환됩니다. |
| 자막 행 | 시간과 발화 텍스트. 클릭하면 시크바가 해당 시간으로 이동합니다. 재생 중에는 현재 자막이 강조되고 자동 스크롤됩니다. 편집안에 포함된 구간의 자막은 왼쪽에 주황 띠가 붙습니다. 마우스를 올리면 타임라인에 그 문장 구간이 주황 테두리로 표시됩니다(슬라이드 헤더는 슬라이드 전체 구간). 결과물에서 빠진 문장은 취소선으로 표시되어 자막만 읽어도 결과물의 대본이 보입니다. 편집은 슬라이드 헤더의 ON/OFF, Edit List, 타임라인에서 합니다. |
| 자막 검색 | 자막 탭 상단 검색창에 단어를 입력하면 자막과 슬라이드 제목에서 찾아 해당 줄로 이동하고 주황 형광펜으로 표시합니다. Enter로 다음, Shift+Enter로 이전 결과, ESC로 검색을 지웁니다. 음성인식이 띄어 적는 경우가 있어 띄어쓰기는 무시합니다. 목록을 거르지 않으므로 앞뒤 맥락을 보며 바로 ON/OFF 할 수 있고, 재생 위치는 바꾸지 않습니다. |
| 슬라이드 구분 헤더 | OCR로 추출한 PPT 제목을 자막 흐름 사이에 삽입해 목차 역할을 합니다. 시간이 자막 행과 같은 열에 정렬되고 ppt 뱃지로 구분됩니다. 클릭하면 해당 슬라이드 시작 지점으로 이동합니다. 제목을 인식하지 못한 구간은 회색 처리합니다. 헤더 오른쪽 ON/OFF 버튼으로 그 슬라이드 구간을 통째로 빼거나 넣습니다 — 일부 문장만 포함된 슬라이드는 ‘일부’로 표시되고, 누르면 전체가 빠집니다. |
| Edit List | 모든 행이 시간 · 길이 · ON/OFF의 같은 형식을 가집니다. 시간은 원본 영상 기준 하나만 씁니다. ON/OFF 버튼으로 결과물에 넣을지만 정하며, 이것이 기존 에디터의 Show/Hide와 같은 값입니다. 시간을 클릭하면 그 구간의 시작 지점부터 재생합니다 — 편집본 재생 중이면 그 구간부터 편집본이 이어집니다. |
| ON / OFF | ON은 결과물에 포함(기존 Show), OFF는 제외(기존 Hide)입니다. 행을 지우는 대신 OFF로 두면 되돌리기가 쉽고, 삭제 버튼이 없어 실수로 구간을 잃지 않습니다. OFF로 바뀌어도 행과 내용은 그대로 보이고 색만 흐려집니다 — 접히거나 사라지지 않으므로 목록의 줄 위치가 흔들리지 않습니다. 인트로는 행으로 두지 않고 툴바의 ‘인트로 전체 삽입’ 스위치로 다 넣거나 다 뺍니다. |
| 행 뱃지 | AI AI 편집안이 고른 구간(사용자가 경계를 고치면 AI · 수정), ppt 슬라이드 전환 지점(자막 스크립트). 사용자가 만든 구간 행에는 뱃지가 없습니다. 인트로는 Edit List에 행으로 두지 않습니다 — 툴바 스위치를 켜면 떨어져 있는 모든 ON 구간 앞(첫 구간 포함)에 자동으로 붙고, 타임라인에 짙은 회색 막대로 표시됩니다. |
| 탐색 구역 | 시간 눈금 아래 놓인 재생바로, 유튜브처럼 지금까지 재생한 부분은 주황, 남은 부분은 회색으로 채워지고 동그란 손잡이가 현재 재생 위치를 가리킵니다. 클릭하거나 드래그하면 그 위치로 이동해 재생하며, 헤드와 아래 시크바의 재생 위치 표시가 함께 움직입니다. 편집본 재생 중에는 OFF 구간으로 이동할 수 없어 커서가 금지 표시로 바뀝니다. 전체 재생 모드에서는 어디든 이동할 수 있습니다. |
| 시크바 | ON 구간은 파란 박스, OFF 구간은 회색 박스로 표시합니다. 짙은 회색 막대는 인트로 삽입 지점, 세로선은 현재 재생 위치입니다. 박스를 클릭하면 ON↔OFF가 즉시 전환됩니다. ON 박스는 양 끝을 드래그해 길이를 조절합니다(드래그 중 ESC로 취소). 서로 맞닿은 ON 박스는 옅은 테두리로 경계를 구분합니다. 편집으로 생긴 경계는 자동으로 합쳐지지 않으며, 같은 상태끼리 맞닿은 경계에는 작은 원 아이콘이 떠서 클릭하면 그 둘만 하나로 병합할 수 있습니다. 재생 위치 이동은 위쪽 탐색 구역이 담당합니다. |
| 편집 완료 · 업로드 | 누르면 최종 길이 · ON 구간 수 · 인트로 수를 요약한 확인 창이 뜨고, ‘업로드’를 눌러야 확정된 Edit List를 CMS로 전달합니다. ‘계속 편집’이나 ESC로 돌아갈 수 있습니다. 이후 처리는 기존 편집 기능과 동일하게 ffmpeg concat으로 새 콘텐츠를 생성하고 DB에 등록합니다. |
프롬프트는 자막이 있어야 처리되는 것과 자막 없이도 되는 것으로 갈립니다. 이 구분이 화면에 드러나야 사용자가 기다릴지 바로 쓸지 판단할 수 있습니다.
| 상태 | 화면 표시 | 시간 연산형 | 주제 추출형 · 요약형 |
|---|---|---|---|
| 미추출 | 회색 배지 + ‘자막 추출’ 버튼 | 사용 가능 | 잠김 — 칩에 자물쇠, 클릭 시 추출 안내 |
| 추출 중 | 진행률 배지 (예: 38%) | 사용 가능 | 잠김 — 완료 시 자동 해제 |
| 완료 | 초록 배지 + 추출 일시 | 사용 가능 | 사용 가능 |
편집 화면에서 처음 추출을 시작하면 사용자가 몇 분을 기다립니다. CMS에 영상이 업로드되는 시점(기존 Node 파일 모니터링 서비스가 FTP 파일을 감지하는 지점)에 추출 작업을 큐에 넣어 두면, 편집 화면에 들어왔을 때 이미 ‘완료’ 상태입니다. 편집 화면의 ‘자막 추출’ 버튼은 누락분을 수동으로 거는 예외 경로로만 두십시오.
AI가 만들어 내는 것은 새로운 데이터 구조가 아니라 기존 Edit List와 같은 형태입니다. 사용자가 손으로 Cut하고 Show/Hide를 누르던 것을 AI가 대신 채울 뿐입니다.
| 기존 (수동) | AI 편집 | 비고 |
|---|---|---|
| 사용자가 Cut으로 분할점 지정 | AI가 구간 경계를 산출 후 무음 지점으로 스냅 | 경계가 문장 중간에서 잘리지 않음 |
| 각 구간 Show/Hide 클릭 | AI가 ON/OFF를 미리 설정 | 사용자는 검토·수정만 |
| — | intro 클립을 ON 구간마다 앞에 삽입 | ‘인트로 전체 삽입’ 스위치로 다 넣거나 다 빼기 |
| 저장 → ffmpeg concat | 동일 | CMS 저장 로직 수정 불필요 |
현재 에디터가 넘기는 포지션 값 형식에 type(clip / intro)과 asset 필드만 추가하면 됩니다. 인트로 행은 원본 구간이 아니라 별도 파일을 가리키므로 시작·종료 시간 대신 자산 ID를 갖습니다. AI가 산출한 선정 사유와 원시 경계는 화면 표시용이므로 저장 시에는 보내지 않아도 됩니다.
Lab241 연구소 · LABY-CMS 3.0 AI 편집 화면설계 초안
화면의 자막·슬라이드 제목·구간 데이터는 MED3504 「세포손상」 강의(52분 29초)에서 실제로 추출한 값입니다.