# 비디오 편집과 디자인

> 기준일: 2026-09-19
> 대상: 영상의 장면·레이어·스킨·글자·배경음악을 조정하는 회원, AI 상담 및 도움말 작성자

## KB-VID-001 · 비디오와 렌더링 화면의 역할

**비디오 편집은 문장에 보여 줄 장면과 장식 요소를 구성하는 선택 단계**입니다. 대본과 음성을 먼저 준비하면 문장별 장면을 편집할 수 있습니다. 화면에서 보이는 결과를 완성 MP4로 저장하려면 뒤의 **렌더링** 단계를 실행해야 합니다.

- **3단계 비디오:** 문장별 장면, 컷 분할, 영상·이미지·GIF·오디오 레이어, AI 이미지·영상, 스킨, 배경음악, 브랜드·광고.
- **4단계 썸네일:** 별도 대표 이미지 생성과 영상 앞장 설정.
- **5단계 렌더링:** 제목·부제목, 자막 스타일, 출력 폴더, 최종 영상 생성.
- **6단계 배포 준비·UUP 전달:** SNS 게시 제목·본문·해시태그와 전달 설정.

영상 안의 표시 제목과 SNS 게시 제목은 별개입니다. 비디오 편집을 건너뛰어도 대본·음성과 필요한 소스가 준비되어 있으면 렌더링으로 진행할 수 있습니다.

관련 문서: [대본과 음성](03-script-and-audio.md), [렌더링·썸네일·캐러셀](05-render-thumbnail-and-carousel.md).

## KB-VID-002 · 문장별 영상 장면 지정

**목적:** 내레이션 문장마다 어떤 원본의 어느 부분을 보여 줄지 고릅니다.

**선행조건:** 프로젝트에 소스 영상과 대본 문장이 있어야 합니다. 원본이 누락되었다면 **영상 준비**에서 다시 연결합니다.

1. **비디오**를 열고 왼쪽 문장 목록에서 편집할 문장을 선택합니다.
2. 오른쪽 **장면 → 사용할 영상**에서 소스를 선택합니다.
3. **원본에서 구간 선택**을 펼쳐 영상을 탐색합니다.
4. **현재 위치를 시작으로**, **현재 위치를 끝으로**를 누르거나 **시작 (초)**·**종료 (초)**를 직접 입력합니다.
5. **선택 구간 재생**으로 확인하고 필요한 **영상 효과**를 고릅니다.
6. 다른 문장도 같은 방법으로 확인합니다. 다른 파일이 필요하면 **영상 불러오기**를 사용합니다.

선택한 원본 구간과 문장에 배정된 화면 길이는 다를 수 있습니다. 화면은 두 길이를 함께 표시합니다. 선택 구간이 길면 컷 끝에서 자르고, 짧으면 0.5배속까지 감속하거나 마지막 화면을 유지합니다. 다음 컷으로 넘어가면 다음 영상으로 전환합니다.

**전체 자동 배치**는 문장 전체에 장면을 다시 배치합니다. 직접 지정한 구간이 있으면 이를 자동 배치로 바꾼다는 확인이 표시됩니다. 특정 문장만 다듬으려면 해당 문장의 장면을 직접 수정하세요. 자동 배치가 상품 설명에 항상 가장 적합한 장면을 고른다는 뜻은 아닙니다.

## KB-VID-003 · 타임라인과 컷 분할

**목적:** 한 문장 안에서 화면을 여러 컷으로 나누거나 겹쳐 넣는 요소의 등장 시간을 조절합니다.

1. 편집할 문장을 선택하고 미리보기 또는 타임라인의 재생 위치를 원하는 시점으로 옮깁니다.
2. **분할**을 누르면 문장 안의 장면을 컷으로 나눕니다. 레이어를 선택한 상태에서는 이 장면 분할 버튼이 비활성화됩니다.
3. 분할된 컷을 선택해 오른쪽 **장면**에서 소스와 구간을 바꿉니다.
4. 영상·이미지·GIF·오디오 블록은 드래그해 시간을 이동하고 양 끝을 당겨 표시 길이를 조절합니다.
5. **타임라인 확대**와 좌우 이동 버튼을 사용하면 짧은 구간을 자세히 볼 수 있습니다.
6. 실수했다면 **되돌리기**, **다시하기**를 사용합니다. 삭제하려는 레이어나 분할한 컷을 먼저 선택해야 **삭제**가 활성화됩니다.

타임라인의 문장은 내레이션과 연결되어 있습니다. 컷 분할은 대본 문장 자체를 새 문장으로 나누는 작업과 다릅니다. 편집 되돌리기 이력은 영구 백업으로 안내하지 않습니다.

## KB-VID-004 · 영상·이미지·오디오 레이어

**목적:** 메인 장면 위에 보조 영상·이미지를 얹거나 효과음을 더합니다. 여러 레이어를 추가할 수 있습니다.

1. **비디오** 오른쪽에서 **영상 → 영상 추가**, **이미지 → 이미지 추가**, **오디오 → 오디오 추가**를 선택합니다.
2. 타임라인에서 추가한 레이어를 선택합니다.
3. **나타나는 시간 (초)**·**끝나는 시간 (초)**로 사용 구간을 정합니다.
4. 시각 요소는 미리보기에서 드래그해 옮기고 가로·세로 위치, 너비·높이, 불투명도를 조절합니다.
5. **가운데 배치**, **맨 앞으로**, **숨기기 / 다시 표시**를 필요에 맞게 사용합니다.
6. 제거하려면 선택한 레이어의 **삭제** 또는 **레이어 삭제**를 누릅니다. 잘못 삭제했다면 바로 **되돌리기**를 사용합니다.

영상 레이어는 메인 영상 위에 겹쳐 재생됩니다. 문장의 메인 원본을 교체하려면 **장면 → 사용할 영상**을 사용하세요. 영상 레이어의 기본 음량은 무음이며, 오디오가 있는 파일은 **음량 (%)**을 올려 소리를 사용할 수 있습니다. 영상·오디오의 **원본 시작 (초)**는 원본 파일에서 어디부터 사용할지 정하는 값입니다.

**스킨 위에 표시**를 켜면 제목·자막·광고 표시·워터마크보다 위에 그려집니다. 광고나 중요한 문구를 가리지 않는지 완성본까지 확인하세요. **흰 배경 투명 처리**는 이미지·GIF의 흰색에 가까운 부분을 비치게 하므로 흰 글자나 상품의 흰 부분도 사라질 수 있습니다.

## KB-VID-005 · KLIPY 스티커와 GIF

**목적:** 검색한 움직이는 스티커·GIF를 영상의 특정 구간에 표시합니다.

1. **비디오 → GIF**를 펼칩니다.
2. **스티커 (투명)** 또는 **GIF**를 고릅니다.
3. 검색어를 입력하고 **검색**을 누릅니다. 더 많은 결과가 필요하면 **더 보기**를 사용합니다.
4. 결과를 누르면 화면 중앙에 기본 3초 길이로 추가됩니다. 남은 타임라인 길이가 짧으면 그 범위에 맞춰집니다.
5. 미리보기에서 위치를 옮기고, 타임라인 또는 시간 입력으로 표시 구간을 조절합니다.

GIF는 지정 구간 동안 반복 재생하며 별도 음량이나 원본 시작 구간을 설정하지 않습니다. 현재 GIF 추가 흐름은 KLIPY 검색 결과를 사용합니다. 일반 GIF 파일을 파일 선택기로 직접 넣는 기능으로 안내하지 않습니다. 검색 화면에는 **Powered by KLIPY**가 표시됩니다.

GIF의 **스킨 위에 표시**와 **흰 배경 투명 처리**는 기본으로 켜집니다. 흰 글씨·흰 그림이 사라지면 흰 배경 투명 처리를 끄세요. 스티커 검색 결과가 없다면 GIF로 전환하거나 다른 검색어를 사용합니다. 검색·다운로드가 실패하면 표시된 오류를 확인하고 네트워크를 점검한 뒤 다시 시도합니다. 검색 결과의 사용 가능 여부가 모든 상업적 이용 권리를 자동으로 보장하지는 않습니다.

## KB-VID-006 · AI 이미지와 8초 영상 만들기

**목적:** 상품 참조 이미지와 장면 설명으로 보조 이미지를 만들고 선택 이미지를 짧은 영상으로 변환합니다.

**선행조건:** 설정에서 사용 가능한 Gemini 계열 인증을 준비합니다. Google 유료 API 비용이 발생할 수 있습니다.

1. **비디오 → 이미지 → AI 만들기**를 엽니다.
2. 상품 외형을 유지하려면 **이미지 추가** 후 **참조 이미지**를 선택합니다.
3. **장면 설명**에 배경·동작·카메라 등 원하는 모습을 입력합니다.
4. 필요하면 이미지·영상 모델을 선택하고 **모델 저장**을 누릅니다.
5. **Gemini 이미지 생성**으로 이미지를 만듭니다. 참조 없이 설명만으로 이미지 생성도 가능합니다.
6. 참조 이미지를 선택한 상태에서 **선택 이미지로 8초 영상 생성**을 누르면 세로 720p의 8초 영상을 요청합니다.
7. 결과를 확인하고 문장 장면 또는 레이어의 위치·길이를 다듬습니다. 생성 영상은 사용할 영상 목록에서 **(AI 생성)**으로 구분됩니다.

참조 이미지가 있으면 외부 생성 요청에 함께 전송됩니다. 생성 대기 중 **생성 대기 취소**를 눌러도 이미 시작한 공급자 요청은 과금될 수 있습니다. 상품 외형·문구·손 모양·움직임의 정확성을 보장하지 않으므로 결과를 검토하고 필요한 경우 설명을 고쳐 다시 생성합니다.

## KB-VID-007 · 스킨과 내 디자인

**목적:** 글꼴·영상 구도·색상 등 시각 스타일을 적용하고 반복해서 사용할 디자인을 저장합니다.

1. **비디오 → 스킨**을 엽니다.
2. **쇼츠 스킨**의 분류를 선택하고 카드 미리보기를 눌러 적용합니다.
3. 렌더링 단계에서 제목·자막을 세부 조정합니다.
4. 재사용하려면 **내 디자인 저장·관리**에서 현재 디자인을 저장합니다.

스킨 적용 후에도 프로젝트의 제목 문구·음악 파일·출력 폴더는 유지됩니다. 기본 스킨은 삭제되지 않습니다. 스킨 목록을 읽지 못하면 **다시 불러오기**를 사용합니다. 현재 앱에서 보이는 목록을 기준으로 안내하며, 업데이트될 수 있는 스킨 개수를 고정 판매 문구로 약속하지 않습니다.

## KB-VID-008 · 배경음악과 브랜드·광고

**배경음악:** **비디오 → 배경음악 → 음악 선택**에서 파일을 고르고 볼륨을 조정합니다. 기본 볼륨은 35%입니다. 음악이 짧으면 반복하고 끝부분은 자연스럽게 사라지게 처리합니다. **음량 검사**는 음량 비교에 따른 경고이며 목소리의 명료도를 보장하는 청감 검사가 아닙니다. 직접 들어 보고 조정하세요. **해제**로 배경음악을 제거할 수 있습니다.

**영상 내 광고 표시:** **비디오 → 브랜드·광고**에서 빠른 고지 문구를 선택하거나 **영상 내 고지**를 입력하고 크기·불투명도를 조절합니다. 기본 고지 문구는 대본 언어를 따르며 직접 쓴 문구는 별도로 유지됩니다.

**워터마크:** 같은 패널에서 **워터마크 문구**를 입력하고 색상·불투명도를 정합니다. **텍스트가 화면을 돌아다니기**를 켜면 이동 속도를 조절할 수 있고, 끄면 좌측 상단 안전 영역에 고정됩니다. 문구를 비우면 워터마크가 표시되지 않습니다.

영상 안 광고 표시와 게시 본문의 광고·제휴 고지는 별개입니다. 게시 본문의 고지는 **배포 준비·UUP 전달**에서 검토합니다. 제휴 링크가 있는 전달에서는 영상 내 광고 표시도 필요합니다. 앱의 예시 문구와 가독성 경고가 실제 게시물의 법적 적합성을 확정하지는 않습니다.

## KB-VID-009 · 제목·부제목과 자막

**제목:** **렌더링 → 제목**에서 **1줄 강조**, **2줄 메인**을 입력합니다. **AI 표시제목 추천** 후보를 선택한 뒤 직접 수정할 수 있습니다. 영상 구도, 정렬, 글꼴 스타일, 크기, 자간, 행간, 가로·세로 위치, 색상을 조절하며 미리보기로 확인합니다.

제목을 숨기려면 **제목·부제목 표시 안 함**을 켭니다. 1줄 제목만 지우면 프로젝트 이름이 대신 표시될 수 있으므로 빈칸만으로 숨기는 방법을 안내하지 않습니다. 숨겨도 저장된 문구·크기·위치는 유지됩니다.

**영상 구도:** 풀스크린은 화면을 채우므로 원본 비율이 다르면 중앙 기준으로 일부 잘릴 수 있습니다. **4:5 제목 여백**은 원본 전체를 맞추는 방식입니다. 상품의 가장자리가 잘리면 구도를 확인하세요.

**자막:** **렌더링 → 자막**에서 크기·세로 위치·글꼴 스타일을 조절합니다. 미리보기에서 위아래로 드래그해도 같은 위치 값이 바뀝니다.

- **짧은 구절로 나눠 순차 표시:** 음성은 문장 단위로 그대로 읽고 화면 자막만 짧은 구절로 나눕니다. 문장 음성 구간 안에서 글자 수 비례로 표시 시간을 배분합니다.
- **한 줄 제한을 완화:** 긴 문장을 두 줄로 표시하도록 허용합니다.
- 구절 나누기를 꺼도 한 줄 폭을 넘는 문장은 나뉠 수 있습니다.
- 미리보기·최종 렌더·SRT는 같은 구절을 사용합니다. 단어별 음성 인식 타임코드를 자동 정밀 정렬한다고 설명하지 않습니다.

## KB-VID-010 · 자주 묻는 질문

**Q. 스킨과 음악 메뉴가 렌더링 화면에 없어요.**

A. 현재는 **비디오** 오른쪽 패널에 있습니다. 제목·자막은 **렌더링**에서 조절합니다.

**Q. 대본을 바꾸지 않고 화면만 교체할 수 있나요?**

A. 비디오에서 문장을 선택한 뒤 장면의 소스·구간을 바꾸세요. 음성 문구와 화면 장면은 따로 편집합니다.

**Q. GIF를 넣었는데 제목 위에 겹쳐요.**

A. GIF의 **스킨 위에 표시**가 기본으로 켜집니다. 이를 끄거나 위치·등장 시간을 옮기세요.

**Q. 자막을 짧게 나누면 목소리도 끊어서 다시 만드나요?**

A. 해당 옵션은 표시 구절을 나눕니다. 음성은 문장 단위를 유지합니다.

**Q. 미리보기가 좋아 보이면 배포해도 되나요?**

A. 최종 렌더를 생성하고 검증된 MP4를 재생해 확인하세요. 썸네일 앞장 등 최종 출력에만 적용되는 요소가 있습니다.

## KB-VID-011 · 원본 자막 지우기: 영상별 영역 지정과 결과 확인

**목적:** 원본 영상에 이미 찍혀 있는 글자를 줄이고 처리한 작업 영상을 제작 소스로 사용합니다. 셀비에서 새로 얹는 대본 자막의 스타일 변경과는 다른 기능입니다. 위치는 **1단계 영상 준비**이며 비디오 편집 단계가 아닙니다.

**선행조건:** 원본 영상이 프로젝트에 들어 있고 파일을 읽을 수 있어야 합니다. 처리할 영상마다 영역을 지정합니다.

1. **영상 준비**에서 처리할 영상 카드의 **자막 지우기 영역 지정**을 누릅니다.
2. 해당 카드 안의 영상을 재생하거나 슬라이더를 움직여 글자가 보이는 장면에서 멈춥니다. 화면이 안 보이면 **영상 프레임 불러오기**를 사용합니다.
3. 미리보기의 빈 곳을 드래그해 글자를 포함하는 사각형을 그립니다. **영역 추가** 버튼으로도 만들 수 있으며 **영상당 최대 8개**입니다.
4. 영역 안쪽을 끌어 옮기고 손잡이를 끌어 크기를 조절합니다. 영역 목록의 **X·Y·너비·높이 (%)**로 직접 조절할 수도 있습니다.
5. 필요 없는 영역은 목록의 **삭제** 또는 선택 후 **Delete** 키로 제거합니다. 처리하지 않을 영상은 카드의 **이 영상은 지우기 제외**를 켭니다.
6. 다음 영상 카드에서도 그 영상의 글자 위치에 맞게 영역을 따로 지정합니다. **이전 영상 / 다음 영상**으로 이동할 수도 있습니다.
7. 여러 영상의 같은 위치를 처리하려는 경우에만 **현재 영역을 다른 영상에도 복사**를 누릅니다. 아직 처리하지 않은 기존 영상에 영역을 복사하며, 복사한 뒤에도 각 영상에서 독립적으로 수정할 수 있습니다. 이미 처리된 결과 영상에는 덮어 적용하지 않습니다.
8. 소스 목록 아래 **원본 자막 지우기 → 자막 제거 후 결과 영상 담기**를 누릅니다. 영역이 있는 처리 대상 수를 먼저 확인합니다.
9. 진행 표시 또는 **작업 트레이에서 보기**로 상태를 확인합니다. 처리된 영상은 완료되는 순서대로 소스 목록에 담깁니다.
10. 완료 후 **처리 전·후 비교**로 원본과 결과 프레임을 나란히 확인합니다. 처리한 작업 파일이 제작에 사용되며 원본 파일 자체는 수정하지 않습니다.

각 영상의 영역을 그리거나 수정하는 것만으로 다른 영상의 영역이 바뀌지 않습니다. 공통 위치를 원할 때만 명시적인 복사 버튼을 사용하세요. 복사는 자동으로 새로 추가할 모든 영상에 같은 설정을 상속시키는 기능이 아닙니다.

**결과가 만족스럽지 않다면:** 처리된 카드에서 **원본으로 되돌리기**를 누른 뒤 영역을 다시 지정하고 실행합니다. 이미 처리된 결과 영상에는 영역을 직접 다시 그리지 않습니다. 지정한 사각형 전체를 불투명한 상자로 덮는 대신 그 안의 글자 픽셀을 찾아 주변 배경색으로 메우므로 복잡한 배경·움직이는 물체에서는 흔적이 남을 수 있습니다. 글자가 모두 완벽하게 복원·제거된다고 보장하지 않습니다.

**부분 실패와 취소:** **처리 취소**를 누르면 취소 처리 상태를 확인합니다. 먼저 처리한 영상은 소스 목록에 유지됩니다. 중간 영상에서 실패해도 먼저 완료한 결과가 모두 되돌아가는 것은 아닙니다. 어느 영상에서 멈췄는지와 오류를 확인한 뒤 영역·원본·환경 문제를 해결하고 **자막 지우기 다시 실행**을 사용합니다. 이미 처리한 영상의 설정을 바꾸려면 그 영상만 먼저 원본으로 되돌립니다. 처리 대상이 없거나 건너뛴 영상은 표시된 이유를 확인합니다.

**Q. 한 영상에 그렸더니 다른 영상에도 같은 위치를 쓰고 싶어요.**

A. 해당 영상에서 영역을 확인한 다음 **현재 영역을 다른 영상에도 복사**를 누릅니다. 이후 각 영상의 결과를 별도로 확인하세요.

**Q. 새로 만든 대본 자막도 이 기능으로 지우나요?**

A. 이 기능은 원본에 찍힌 글자를 처리합니다. 셀비가 얹는 자막의 문구·시간·모양은 **대본·음성**과 **렌더링 → 자막**에서 조절합니다.

## 구현 근거

- `frontend/src/main.ts`: `renderVideo`, `renderSegmentScene`, `renderEditorTimeline`, `renderLayerInspector`, `renderGifSearch`, `designInspectorTabs`, `designSkinBody`, `designBgmBody`, `designBrandBody`, `designTitleBody`, `designSubtitleBody`.
- `frontend/src/main.ts`: `renderBlurViewer`, `renderBlurCard`, `blurRegionRows`, `handleBlurResult`; 영상별 영역 조작과 처리·실패·취소 안내.
- `frontend/src/state.ts`: `MAX_BLUR_REGIONS`, `addBlurRegion`, `removeBlurRegion`, `applyRegionsToAllSources`; 최대 8개와 개별 영역·명시적 복사.
- `app_scenes.go`: `renderScenes`, `renderVideoSeconds`; 문장 음성 길이와 컷의 출력 시간 연결.
- 기준일의 화면 문구와 소스 구현을 대조했다. 이번 문서 정비에서 실제 유료 생성·GUI 드래그·SNS 게시를 새로 실행해 검증한 것은 아니다.