# Remotion Slide Evolution Flow

> Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용.

- Skill: `canine89/remotion-slide-evolution-flow` (Agent Skill)
- Install (CLI): `npx skillmds@latest add canine89/remotion-slide-evolution-flow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/canine89/remotion-slide-evolution-flow/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: canine89 (https://skillmd.com/u/canine89)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/canine89/remotion-slide-evolution-flow

---


# Evolution Flow Slide

## 언제 쓰나

- 기존 상태와 개선 상태를 한 화면에서 대비할 때
- 입력 → 처리 → 결과처럼 가운데 변화 축이 핵심일 때
- before/after 비교를 단순 나열이 아니라 인과 흐름으로 보여주고 싶을 때

## 타입

```typescript
{
  type: "evolution-flow",
  badge: "카테고리명",
  title: "메인 타이틀",
  fromTitle: "이전 상태",
  fromImage: "before.png",   // optional
  fromBullets: [
    "기존 문제 1",
    "기존 문제 2",
  ],
  toTitle: "이후 상태",
  toImage: "after.png",      // optional
  toBullets: [
    "변화 결과 1",
    "변화 결과 2",
  ],
  theme: "blue",
}
```

## 마크다운 패턴

```markdown
# [개선] 검색 경험이 어떻게 바뀌었나

<< 기존 검색
- 결과 목록이 길게 이어진다
- 먼저 읽어야 할 답이 눈에 띄지 않는다

==

>> 개선된 검색
- 핵심 답이 먼저 보인다
- 다음 클릭이 자연스럽게 이어진다
```

좌우 섹션에서 대괄호 표기는 배지로 처리한다.

```markdown
<< [기존]
- 결과 목록이 길게 이어진다

>>
```

또는 배지와 제목을 같이 쓸 수 있다.

```markdown
<< [기존] 검색 경험
>> [개선] 검색 경험
```

이미지가 있으면 좌우 섹션 안에 넣는다.

```markdown
# [개선] 가입 플로우가 빨라졌다

<< 기존 가입
![](signup-before.png)
- 입력 단계가 길다
- 중도 이탈이 많다

==

>> 개선된 가입
![](signup-after.png)
- 핵심 입력만 남았다
- 완료까지의 흐름이 분명하다
```

## 작성 원칙

- 왼쪽은 출발 상태, 오른쪽은 도착 상태만 적는다
- 가운데 `==`는 레이아웃 전환 신호일 뿐이며, 그 아래에 불릿이나 설명을 쓰지 않는다
- 좌우 섹션의 `[텍스트]`는 실제 배지로 렌더한다
- 좌우 불릿은 같은 개수로 맞출 필요는 없지만, 대응 관계가 느껴지게 쓴다
- 좌우 타이틀은 명사형보다 상태형이 더 읽기 좋다
- 이미지가 있더라도 핵심 메시지는 불릿으로 다시 명시한다
- 변화 이유나 과정 설명이 필요하면 이 타입 안에 우겨 넣지 말고 다음 슬라이드로 분리한다

## 이미지 플레이스홀더

- `fromImage` / `toImage`가 없고 해당 섹션의 불릿도 없을 때, `ImagePlaceholder`가 자동으로 렌더된다
- 플레이스홀더는 테마 배경색 밝기에 따라 색상이 자동 전환된다
  - 밝은 배경: 검정 계열 반투명 + accent 포인트
  - 어두운 배경: 흰색 계열 반투명 + accent 포인트
- 화살표도 배경 밝기에 따라 자동 전환된다 (밝은 배경: 검정 계열, 어두운 배경: 흰색 계열)
- 컴포넌트: `src/slides/components/ImagePlaceholder.tsx`

## 레이아웃 구조

- 상단: 메인 배지 + 타이틀 (중앙 정렬)
- 중단: 2열 그리드 (`1fr 1fr`, gap 60px) — 좌우 배지 + 불릿/이미지
- 화살표: 좌우 배지 사이를 연결하는 dashed line + 화살촉
  - 왼쪽 배지의 오른쪽 끝(세로 중심) → 오른쪽 배지의 왼쪽 끝(세로 중심)
  - `useRef` + `offsetLeft`/`offsetWidth`로 배지 DOM 위치를 측정하여 좌표 계산
  - CSS transform에 영향 받지 않는 offset 속성을 사용해야 입장 애니메이션과 무관하게 정확한 위치 확보
  - 화살표는 `position: absolute`로 그리드 위에 오버레이

## 애니메이션 원칙

- 왼쪽 패널이 먼저 등장한다
- 화살표는 왼쪽 배지 등장 후 배지에서 배지로 흐른다
- 오른쪽 패널은 마지막에 도착 상태처럼 들어온다
- dashed line은 continuous 슬라이드(1시간)로 계속 흐름 애니메이션 유지
- 요소 전체를 크게 흔들기보다, 흐름의 방향이 읽히는 이동과 순차 등장에 집중한다

## 비권장 상황

- 그냥 이미지 한 장과 설명 몇 줄이면 충분할 때
- 시간 순서가 4단계 이상으로 길게 이어질 때
- 좌우보다 가운데 설명이 훨씬 길어질 때

이 경우는 `split`, `title-bullets`, 또는 여러 장으로 나누는 편이 낫다.