[4/4 토요 모각] 끌림영상 X 포미 파이프라인 시각화 설계도 만들기

김 김지연2026. 4. 7.조회 0

소개

끌림영상 X 포미 파이프라인 시각화 설계도 만들기

각각의 시각화 가이드라인 맵 설정
부모(끌림) - 자식(포미 숏폼) 구조 확인

진행 방법

4/4 토요 모각 때 진행한 내용 소개

영상 생성 모델 변경 : Grok → veo3.1 lite

config.yaml @beautifulMention https://ai.google.dev/gemini-api/docs/video?hl=ko&_gl=1*1y3vhex*_up*MQ..*_ga*MzYwOTQ2ODE2LjE3NzUyNzA3NDg.*_ga_P1DBVKWT6V*czE3NzUyNzA3NDckbzEkZzAkdDE3NzUyNzA3NDckajYwJGwwJGgzNTIyODI2NzA.&example=dialogue

영상 생성은 이제 veo3.1 lite 을 쓰려고 해. 컨피그 정보 및 기타 이미지참조등의 모든 참조정보를 함께 수정해줄래?

자막 서체 변경 : 카라오케 서체 → 다른 서체를 인터넷에서 찾아달라고 한 뒤 브랜드의 성격에 맞는 서체로 변경

'부모(끌림영상) - 자식(포미 숏폼)'에 맞는 서체 선택
끌림=Paperlogy 5 Medium / 포미=이서윤체 선택

2-4. 카라오케 자막 제거 + 브랜드별 서체 교체
**3단계에 걸친 사용자 피드백 반영:**
1. **서체 비교 요청** → `font-preview.html` 제작하여 8개 서체 프리뷰 제공
2. **서체 선정**: 사용자가 끌림=Paperlogy 5 Medium, 포미=이서윤체 선택
3. **카라오케 제거 요청**: 처음엔 "올록볼록만 제거" → "색상 변경도 제거" → **"카라오케 아예 삭제"**
- ❌ **Failed (1차)**: activeScale만 1.0으로 변경하여 올록볼록만 제거.
  색상 변경 카라오케는 유지 → 사용자가 "카라오케 자체를 없애줘" 추가 요청
- ❌ **Failed (2차)**: KaraokeSubtitle.tsx 파일을 삭제하지 않고 SimpleSubtitle.tsx를 추가.
  → 사용자가 "남겨두면 갑자기 나올 수 있으니 아예 삭제" 요청
- ✅ **Corrected (최종)**: KaraokeSubtitle.tsx **파일 삭제** + SimpleSubtitle.tsx로 완전 대체.
  subtitle-style.yaml에서도 카라오케 관련 키(activeScale, activeColor, keywordColor) 모두 제거

클로드 코드 베스트 사례를 폴더째 설치하기
C:\dev\kkulim-video\.claude\skills
C:\dev\kkulim-video\.agent\skills

https://github.com/shanraisshan/claude-code-best-practice

클로드, 안티그래비티 양쪽에 스킬 설치해줘.

끌림·포미 코드베이스 분석 후 초보자용 인터랙티브 시각화 설계 제작

끌림영상 설계도, 끌림영상 파이프라인 맵, 포미 브랜드 설계도

config.yaml 코드베이스를 분석해서 지금 이 프로젝트를 처음 사용하는 초등학생이 이해할 수 있도록 시각화 설계도를 만들어줘. 그리고 각 단계를 선택하면 상세 내용을 볼 수 있도록 연계된 자료로 만들어주면 좋겠어. 

한눈에 잘 보이도록 해주고 , html로 만들어줘.

for-me 코드베이스를 분석해서 지금 이 프로젝트를 처음 사용하는 초등학생이 이해할 수 있도록 시각화 설계도를 만들어줘. 그리고 각 단계를 선택하면 상세 내용을 볼 수 있도록 연계된 자료로 만들어주면 좋겠어. 

한눈에 잘 보이도록 해주고 , html로 만들어줘.

(1) 끌림영상 설계도 (`pipeline-visual-guide.html`)

* 타깃 독자: 이 프로젝트를 처음 보는 사람이나 초보자 (초등학생 눈높이)

* 주요 목적: "이 자동화 시스템이 대충 어떤 순서로 굴러가는 거지?"를 가장 빠르고 거부감 없이 파악하게 만드는 것

http://localhost:8080/docs/pipeline-visual-guide.html

(2) 끌림영상 파이프라인 맵 (`pipeline-map.html`)

* 타깃 독자: 이 시스템을 직접 관리하고 수정해야 하는 운영자/개발자 (사용자님과 저 같은 실무자)

* 주요 목적: "이 시스템 안에서 정확하게 어떤 API가 호출되고, 어떤 프롬프트 명령어가 쓰이며, 과거에 어떤 에러가 났었는지" 한눈에 관제(Control/Monitor)하는 것

http://localhost:8080/docs/pipeline-map.html

(3) 포미(For Me) 브랜드 설계도 (`for-me/visual-guide.html`)

* 타깃 독자: 포미 브랜드의 콘텐츠를 직접 기획하거나 제작하는 사람. 끌림영상 본체 파이프라인의 기본 구조는 이미 알고 있되, "포미만의 차별점이 뭔지" 빠르게 파악하고 싶은 실무자

* 주요 목적: "끌림영상이라는 공장에서 '포미'라는 제품을 만들 때, 무엇이 같고 무엇이 다른지를 한눈에 이해시키는 것." 즉, 공유 자산(엔진, 에이전트)과 고유 자산(브랜드 정체성, 서체, 시리즈 규칙)의 경계를 명확히 보여주는 것이 핵심

http://localhost:8080/for-me/visual-guide.html

4/4 개발일지

# 2026-04-04 영상 모델 전환 · 시각화 설계도 · 스킬 설치 · 자막 서체 교체

**작업자**: Antigravity  
**작업 시간**: 2026-04-04 12:00 ~ 16:30 (약 4.5h)  
**브랜치**: main (설정·문서 변경)

---

## 1. Objective

1. 영상 생성 모델을 Grok Imagine Video(fal.ai) → **Veo 3.1 Lite**(Google Gemini API)로 전환
2. 끌림·포미 코드베이스 분석 후 **초보자용 인터랙티브 시각화 설계도** 제작
3. Claude Code Best Practice **스킬 설치** (Claude Code + Antigravity 양쪽)
4. 카라오케(올록볼록) 자막 **완전 제거** → 브랜드별 서체 교체

---

## 2. Pivot Points & Trial & Error

### 2-1. 영상 생성 모델 전환 (Grok → Veo 3.1 Lite)

- ❌ **이전 상태**: `fal-video` (Grok Imagine Video)를 사용 중. fal.ai 경유, 480p/720p, 6~15초.
  → 화질과 안정성 이슈로 교체 결정
- ✅ **전환 완료**:
  - `config.yaml`의 `providers.video`를 `"veo-video"`로 변경
  - `veo-video` 섹션에 `model: "veo-3.1-lite-generate-preview"` 설정
  - `skills/veo-video/generate.py`가 Lite 모델을 기본값으로 사용하는 것 확인
  - 기존 `fal-video` 설정은 주석 처리하여 보존 (롤백 대비)

**핵심 차이점**:

| 항목 | Grok (이전) | Veo 3.1 Lite (현재) |
|------|------------|-------------------|
| API 경유 | fal.ai (FAL_KEY) | Gemini API (GEMINI_API_KEY) |
| 해상도 모드 | draft 480p / final 720p | draft 720p / final 1080p |
| 영상 길이 | 6~15초 | 5/6/8초 (고정) |
| 오디오 | 없음 | SynthID 워터마크 내장 |
| 확장 기능 | 지원 | 미지원 |

### 2-2. 시각화 설계도 제작

- ❌ **Failed**: 처음에 텍스트 기반 마크다운으로 작성 시도
  → 초등학생이 이해하기 어려움, 시각적 임팩트 부족
- ✅ **Corrected**: 인터랙티브 HTML로 전환. 다크 모드, 카드 확장식, 아이콘·이모지·컬러 코딩 적용

**제작한 설계도 3종 + 보조 1종**:

| 파일 | 대상 | 내용 |
|------|------|------|
| `docs/pipeline-visual-guide.html` | 끌림 전체 | 파이프라인 흐름도 (에이전트 7단계 + 스킬 4종) |
| `for-me/visual-guide.html` | 포미 전체 | 브랜드 아키텍처 (3시리즈 + 7단계 + 끌림 관계도) |
| `docs/config-guide.html` | 공유 설정 | config.yaml 7개 영역 시각화 (설정값 테이블 + 쉬운 설명) |
| `docs/font-preview.html` | 서체 비교 | 8개 한국어 서체 인터랙티브 프리뷰 (카라오케/차분 비교) |

설계도 포함 요소:
- 전체 흐름 다이어그램 (노드 → 화살표 → 노드)
- 클릭 확장식 카드 (단계별 상세: 입력/출력/설정파일/쉬운 설명)
- 시리즈 분류 시각화 (문장 70% / 응원 20% / 시간 10%)
- 끌림 ↔ 포미 공유/고유 관계도
- 끌림 vs 포미 스펙 비교표
- 폴더 구조 트리

### 2-3. Claude Code Best Practice 스킬 설치

- **출처**: https://github.com/shanraisshan/claude-code-best-practice
- **설치 위치**:
  - Claude Code: `.claude/skills/claudecode-best-practices/SKILL.md`
  - Antigravity: `.agents/skills/claudecode-best-practices/SKILL.md`
- **내용**: 스킬/서브에이전트/커맨드 frontmatter 작성법, CLAUDE.md 작성 가이드, 컨텍스트 관리, 워크플로우 팁 등 AI 코딩 도구 운용 모범 사례

### 2-4. 카라오케 자막 제거 + 브랜드별 서체 교체

**3단계에 걸친 사용자 피드백 반영:**

1. **서체 비교 요청** → `font-preview.html` 제작하여 8개 서체 프리뷰 제공
2. **서체 선정**: 사용자가 끌림=Paperlogy 5 Medium, 포미=이서윤체 선택
3. **카라오케 제거 요청**: 처음엔 "올록볼록만 제거" → "색상 변경도 제거" → **"카라오케 아예 삭제"**

- ❌ **Failed (1차)**: activeScale만 1.0으로 변경하여 올록볼록만 제거.
  색상 변경 카라오케는 유지 → 사용자가 "카라오케 자체를 없애줘" 추가 요청
- ❌ **Failed (2차)**: KaraokeSubtitle.tsx 파일을 삭제하지 않고 SimpleSubtitle.tsx를 추가.
  → 사용자가 "남겨두면 갑자기 나올 수 있으니 아예 삭제" 요청
- ✅ **Corrected (최종)**: KaraokeSubtitle.tsx **파일 삭제** + SimpleSubtitle.tsx로 완전 대체.
  subtitle-style.yaml에서도 카라오케 관련 키(activeScale, activeColor, keywordColor) 모두 제거

---

## 3. Key Decisions

| # | 결정 | 이유 |
|---|------|------|
| 1 | Veo 3.1 **Lite** 선택 (Full 아닌 Lite) | 숏폼 제작에 Lite 충분. 비용 효율적, preview API 사용 가능 |
| 2 | 기존 fal-video 설정을 **주석 처리** (삭제 안 함) | 향후 Veo가 불안정할 때 빠른 롤백 가능 |
| 3 | 시각화를 **마크다운이 아닌 HTML**로 | 인터랙티브 확장, 다크 모드, 반응형 등 표현력 필요 |
| 4 | `KaraokeSubtitle.tsx` **완전 삭제** | 미사용 컴포넌트가 남아있으면 다른 경로에서 참조될 위험 |
| 5 | `SimpleSubtitle.tsx` 신규 생성 | word timing 데이터는 유지하되 **라인 단위 fade-in/out만** 적용 |
| 6 | 폰트를 **CDN(@font-face)**으로 로딩 | 로컬 설치 불필요. Remotion 서버 렌더링 시에도 자동 로딩 |
| 7 | 스킬을 **양쪽 도구에 동시 설치** | Claude Code ↔ Antigravity 전환 시에도 동일한 모범 사례 참조 |

---

## 4. Results

### 변경된 파일 목록

#### 설정 변경
| 파일 | 변경 내용 |
|------|----------|
| `config.yaml` | providers.video → "veo-video", veo-video 섹션 추가, fal-video 주석 처리 |
| `edit-rules/subtitle-style.yaml` | 끌림: NanumMyeongjo → Paperlogy-5Medium (500), 카라오케 설정 제거 |
| `for-me/edit-rules/subtitle-style.yaml` | 포미: Pretendard Bold → 이서윤체(LeeSeoyun), 카라오케 설정 제거 |

#### Remotion 컴포넌트
| 파일 | 변경 내용 |
|------|----------|
| `skills/remotion/src/components/SimpleSubtitle.tsx` | **[NEW]** 심플 자막 — 문장 전체 표시, fade-in/out |
| `skills/remotion/src/components/KaraokeSubtitle.tsx` | **[DELETE]** 카라오케 완전 삭제 |
| `skills/remotion/src/ShortForm.tsx` | KaraokeSubtitle → SimpleSubtitle 교체, 카라오케 props 제거 |
| `skills/remotion/src/fonts.css` | **[NEW]** CDN 폰트 로딩 (Paperlogy + 이서윤체 + Pretendard + Noto Sans KR) |
| `skills/remotion/src/Root.tsx` | fonts.css import 추가 |

#### 문서 · 설계도
| 파일 | 변경 내용 |
|------|----------|
| `docs/pipeline-visual-guide.html` | 끌림 파이프라인 시각화 (CSS lint 수정 포함) |
| `docs/config-guide.html` | **[NEW]** config.yaml 설정 시각화 설계도 |
| `docs/font-preview.html` | **[NEW]** 8개 한국어 서체 인터랙티브 비교 |
| `for-me/visual-guide.html` | **[REWRITE]** 포미 브랜드 시각화 (최신 설정 반영) |

#### 스킬 설치
| 파일 | 변경 내용 |
|------|----------|
| `.claude/skills/claudecode-best-practices/SKILL.md` | **[NEW]** Claude Code용 Best Practice 스킬 |
| `.agents/skills/claudecode-best-practices/SKILL.md` | **[NEW]** Antigravity용 Best Practice 스킬 |

### 최종 자막 스펙

| | 끌림 | 포미 |
|---|---|---|
| 서체 | Paperlogy 5 Medium (wt 500) | 이서윤체 LeeSeoyun (Regular) |
| 크기 | 46px | 50px |
| 카라오케 | ❌ 완전 제거 | ❌ 완전 제거 |
| 표시 방식 | 라인 단위 fade-in/out | 라인 단위 fade-in/out |
| 배경 | rgba(0,0,0,0.45) r12 | rgba(0,0,0,0.4) r12 |
| 테두리 | #000 1px | #000 2px |

---

## 5. Next Steps

- [ ] **Remotion 빌드 테스트**: SimpleSubtitle + 새 폰트로 실제 영상 렌더링 확인
- [ ] **Veo 3.1 Lite 실전 테스트**: 끌림 에피소드로 T2V/I2V 정상 작동 확인
- [ ] **포미 에피소드 시범 생성**: 이서윤체 자막 가독성 실제 영상에서 검증
- [ ] **이서윤체 font_size 미세 조정**: 필요시 50 → 52px 등 조정
- [ ] **Veo draft → final 전환 테스트**: 720p vs 1080p 품질 차이 비교
- [ ] **font-preview.html 개선**: 실제 영상 배경 위에 자막 프리뷰 기능 추가 (선택)
---
> **교훈 1**: 사용자가 "올록볼록만 빼줘" → "카라오케도 빼줘" → "파일도 삭제해"로 요구가 점진적으로 강화됨. **처음부터 "이 기능을 완전히 제거할까요, 일부만 수정할까요?"를 물어봤으면** 3단계 수정을 1단계로 줄일 수 있었음.

> **교훈 2**: 미사용 코드 파일을 "나중에 쓸 수 있으니" 남겨두는 것은 위험. 특히 컴포넌트 import 경로가 남아있으면 **의도치 않게 활성화**될 수 있다. "안 쓰면 삭제"가 정답.

> **교훈 3**: 시각화 설계도를 만들 때 마크다운보다 **인터랙티브 HTML**이 초보자 이해도에서 압도적으로 효과적. 클릭-확장 패턴은 정보 과부하를 방지하면서도 필요한 깊이를 제공한다.

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

현재 안티그래비티의 (폴더) 구조를 알게 됨
에러 수정이나 코드 변경은 파이프라인 맵을 보면 호환 가능
부모-자식 간의 공유 체제 & 불일치나 상충되는 곳은 없는지? (브랜드별 차별화 전략)
끌림영상(본체)과 포미(For Me)는 서로 완전히 다른 파이프라인 두 개가 굴러가는 것이 아니라 "공통된 하나의 엔진(끌림영상 파이프라인)을 쓰되, '포미' 영상을 만들 때만 몇 가지 설정을 덮어씌워서(Override) 사용한다"는 것이 현재 설계의 핵심

과정 중에 어떤 시행착오를 겪었나요?

자막 서체를 변경했지만 여전히 설계도에 남아 있어서 삭제함

도움이 필요한 부분이 있나요?

좀 더 디테일한 구조나 스타일, 방식 등의 이해, 학습, 응용 능력 키우기

앞으로의 계획이 있다면 들려주세요.

변경된 설계도에 따라 다양한 영상 제작

도움 받은 글

물결님의 토요일 모각 내용

댓글 0개

로그인하고 댓글을 작성하세요