전자책 스터디 사라진 영상 제작 5단계: 클로드 코드와 리모션 활용법

1. 프로젝트 폴더 구조 + CLAUDE.md 셋업
2. 원본(오디오/녹취록/슬라이드) 분석 → 발표자·타임스탬프 매핑
3. 챕터 맵 작성 (CHAPTERS.md) — 11챕터, 발표자별 구간·슬라이드 매칭
4. 녹취록 → 자막(SRT + JSON) 자동 생성 + STT 오인식 보정
5. Remotion 프로젝트 구현 (슬라이드 스크롤 / 자막 / 챕터카드 / 인트로 / 아웃트로)
6. 30초 데모 렌더 → 검수 → 자막 4줄 제한 수정
7. 전체 119분 본 렌더 → study-video.mp4

""C:\Users\송아영\Documents\카카오톡 받은 파일\05-26_주간_회의_AI_글쓰기_전자책_제작_저작권.mp3"
E:\송아영\05-26_주간_회의_AI_글쓰기_전자책_제작_저작권.txt"
그리고 "E:\송아영\사례발표 화면" 이 경로에 발표자 화면 있어.
설명할 때 오디오에 해당하는 화면을 천천히 스크롤하면서 보여주고 싶어

참석자 3은 배꽃이야. 참석자 4는 이응이응, 참석자7은 백구우야.

참석자 6은 AJ (에이제이)
그리고 스크롤 할 이미지에 발표내용이 다들어 있지 않거나 짧을 수 있어.
이럴 땐 리모션 영상 넣어서 내용 전달 잘 할 수 있도록 구성해줘.
필요하다면 화면 이미지 해당부분 재차 보여줘도 되고

자막이 한번에 너무 많이 보여서 화면을 좀 가리는 부분이 많은데
이거 조정 간단한거야. 아니면 리소스나 시간 많이 드는 작업이야?

최대 4줄이 넘지 않도록 하는건 어때?

```tsx
// 슬라이드별 원본 크기를 하드코딩 → 런타임 이미지 로딩 없이 정확한 스크롤 계산
const SLIDE_SIZES: Record<string, { w: number; h: number }> = {
"AJ.png": { w: 1920, h: 29272 }, // 매우 김 → cap 모드
"노명숙.png": { w: 1652, h: 11194 },
"배꽃.png": { w: 1920, h: 12394 },
"백구우.png": { w: 1652, h: 8578 },
"소양강.png": { w: 1652, h: 9164 },
"이응이응.png": { w: 1652, h: 6034 },
};
export const SlideScroll: React.FC<{
slide: string; durationFrames: number; scrollMode: "fit" | "cap";
}> = ({ slide, durationFrames, scrollMode }) => {
const frame = useCurrentFrame();
const meta = SLIDE_SIZES[slide];
const displayW = 1920;
const scale = displayW / meta.w;
const displayH = meta.h * scale; // 화면 폭에 맞췄을 때의 전체 높이
const scrollMax = Math.max(0, displayH - 1080); // 스크롤 가능 거리
const progress = frame / Math.max(1, durationFrames - 1);
let translateY: number;
if (scrollMode === "fit" || scrollMax === 0) {
translateY = -scrollMax * Math.min(1, progress); // 발표 시간에 맞춰 끝까지 균등 스크롤
} else {
const targetY = 16 * (frame / 30); // 표준 16px/초로 스크롤하다
translateY = -Math.min(scrollMax, targetY); // 끝에 닿으면 정지
}
return (
<AbsoluteFill style={{ backgroundColor: "#0a0d12", overflow: "hidden" }}>
<div style={{ width: displayW, height: displayH, transform: translateY(${translateY}px) }}>
<Img src={staticFile(`slides/${slide}`)} style={{ width: displayW, height: displayH }} />
</div>
</AbsoluteFill>
);
};
```

```tsx
// 130자 ≈ 4줄. 문장(.!?) > 쉼표 > 공백 순으로 자연스럽게 끊는다.
function splitText(text: string, maxChars = 130): string[] {
if (text.length <= maxChars) return [text];
const breakPatterns = [/(?<=[.!?])\s+/g, /(?<=,)/g, /\s+/g];
const chunks: string[] = [];
let remaining = text;
while (remaining.length > maxChars) {
let cutAt = -1;
for (const re of breakPatterns) {
for (const m of remaining.matchAll(re)) {
const pos = m.index! + m[0].length;
if (pos > maxChars * 0.55 && pos <= maxChars) cutAt = pos; // 너무 짧지 않게
}
if (cutAt > 0) break;
}
if (cutAt < 0) cutAt = maxChars; // 끊을 곳 없으면 강제 분할
chunks.push(remaining.slice(0, cutAt).trim());
remaining = remaining.slice(cutAt).trim();
}
if (remaining) chunks.push(remaining);
return chunks;
}
```

```tsx
export const StudyVideo: React.FC = () => (
<AbsoluteFill style={{ backgroundColor: "#0f1419" }}>
<Audio src={staticFile("audio.mp3")} startFrom={0} /> {/* 원본 오디오 전체 */}
<Sequence from={0} durationInFrames={5 * 30}><LogoIntro /></Sequence> {/* 인트로 5초 */}
{CHAPTERS.map((ch) => (
<Sequence key={ch.id}
from={secToFrames(ch.startSec)}
durationInFrames={secToFrames(ch.endSec - ch.startSec)}>
<ChapterRenderer chapter={ch} absoluteSecOffset={ch.startSec} />
</Sequence>
))}
</AbsoluteFill>
);
```