remotion-slide-evolution-flow

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

Evolution Flow Slide

언제 쓰나

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

타입

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

마크다운 패턴

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

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

==

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

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

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

>>

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

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

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

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

<< 기존 가입
![](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, 또는 여러 장으로 나누는 편이 낫다.