canine89 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",
}
마크다운 패턴
# [개선] 검색 경험이 어떻게 바뀌었나
<< 기존 검색
- 결과 목록이 길게 이어진다
- 먼저 읽어야 할 답이 눈에 띄지 않는다
==
>> 개선된 검색
- 핵심 답이 먼저 보인다
- 다음 클릭이 자연스럽게 이어진다
좌우 섹션에서 대괄호 표기는 배지로 처리한다.
<< [기존]
- 결과 목록이 길게 이어진다
>>
또는 배지와 제목을 같이 쓸 수 있다.
<< [기존] 검색 경험
>> [개선] 검색 경험
이미지가 있으면 좌우 섹션 안에 넣는다.
# [개선] 가입 플로우가 빨라졌다
<< 기존 가입
- 입력 단계가 길다
- 중도 이탈이 많다
==
>> 개선된 가입
- 핵심 입력만 남았다
- 완료까지의 흐름이 분명하다
작성 원칙
- 왼쪽은 출발 상태, 오른쪽은 도착 상태만 적는다
- 가운데
==는 레이아웃 전환 신호일 뿐이며, 그 아래에 불릿이나 설명을 쓰지 않는다 - 좌우 섹션의
[텍스트]는 실제 배지로 렌더한다 - 좌우 불릿은 같은 개수로 맞출 필요는 없지만, 대응 관계가 느껴지게 쓴다
- 좌우 타이틀은 명사형보다 상태형이 더 읽기 좋다
- 이미지가 있더라도 핵심 메시지는 불릿으로 다시 명시한다
- 변화 이유나 과정 설명이 필요하면 이 타입 안에 우겨 넣지 말고 다음 슬라이드로 분리한다
이미지 플레이스홀더
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, 또는 여러 장으로 나누는 편이 낫다.