메뉴
Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | remotion-slide-evolution-flow |
| description | Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용. |
{
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가 자동으로 렌더된다src/slides/components/ImagePlaceholder.tsx1fr 1fr, gap 60px) — 좌우 배지 + 불릿/이미지useRef + offsetLeft/offsetWidth로 배지 DOM 위치를 측정하여 좌표 계산position: absolute로 그리드 위에 오버레이이 경우는 split, title-bullets, 또는 여러 장으로 나누는 편이 낫다.
Remotion 슬라이드의 compare 타입 전용 스킬. 2~4개 항목을 나란히 비교하는 슬라이드를 설계하거나 수정할 때 사용.
슬라이드를 PDF로 내보내기. 각 슬라이드를 PNG로 렌더한 뒤 pdf-lib으로 합쳐서 단일 PDF 파일을 생성한다. "PDF로 뽑아줘", "PDF 내보내기" 등의 요청에 사용.
Remotion 슬라이드의 quote 타입 전용 스킬. 핵심 문장이나 인용구를 큰따옴표 장식과 함께 크게 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 stat 타입 전용 스킬. 큰 숫자와 짧은 설명으로 임팩트를 주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 steps 타입 전용 스킬. 번호가 매겨진 순차 프로세스를 연결선과 함께 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 기반 타이포 중심 발표 슬라이드 생성의 상위 오케스트레이터 스킬. 슬라이드 주제와 내용을 보고 적절한 개별 타입 스킬(title-image, title-tags, title-bullets, split)을 선택해 구성할 때 사용.