메뉴
슬라이드 프로젝트의 발표용 프레젠터 생성. 클릭/키보드로 슬라이드를 넘기고, 하이라이터 마커 기능 포함. "발표용으로 만들어줘", "프레젠터", "presenter", "발표 모드" 등의 요청에 사용.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Remotion 슬라이드의 compare 타입 전용 스킬. 2~4개 항목을 나란히 비교하는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 evolution-flow 타입 전용 스킬. 왼쪽 상태에서 오른쪽 상태로 무엇이 어떻게 바뀌었는지, 그 변화 축과 결과를 3열 흐름으로 설명할 때 사용.
슬라이드를 PDF로 내보내기. 각 슬라이드를 PNG로 렌더한 뒤 pdf-lib으로 합쳐서 단일 PDF 파일을 생성한다. "PDF로 뽑아줘", "PDF 내보내기" 등의 요청에 사용.
Remotion 슬라이드의 quote 타입 전용 스킬. 핵심 문장이나 인용구를 큰따옴표 장식과 함께 크게 보여주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 stat 타입 전용 스킬. 큰 숫자와 짧은 설명으로 임팩트를 주는 슬라이드를 설계하거나 수정할 때 사용.
Remotion 슬라이드의 steps 타입 전용 스킬. 번호가 매겨진 순차 프로세스를 연결선과 함께 보여주는 슬라이드를 설계하거나 수정할 때 사용.
| name | remotion-presenter |
| description | 슬라이드 프로젝트의 발표용 프레젠터 생성. 클릭/키보드로 슬라이드를 넘기고, 하이라이터 마커 기능 포함. "발표용으로 만들어줘", "프레젠터", "presenter", "발표 모드" 등의 요청에 사용. |
마크다운 슬라이드를 브라우저에서 클릭/키보드로 넘기며 발표할 수 있는 프레젠터.
Remotion의 @remotion/player를 사용하여 모든 애니메이션(뱃지 바운스, 타이틀 fade-in, 불릿 stagger 등)이 그대로 동작한다.
npm run slides:present -- markdowns/<topic>/<topic>.md
Vite 서버가 포트 4000에서 시작된다.
define으로 시작 시점에 읽는다.theme: 변경, frontmatter 수정, 이미지 참조 변경 후에는 기존 slides:present 프로세스를 종료하고 다시 실행해야 한다.src/presenter/
├── Presenter.tsx # Player + 클릭/키보드 제어
├── index.tsx # React 진입점
├── index.html # HTML
├── types.d.ts # 가상 모듈 타입
└── vite.config.ts # Vite 설정 (port 4000, 가상 마크다운 모듈)
| 동작 | 효과 |
|---|---|
| → / 스페이스 / PageDown | 다음 슬라이드 |
| ← / PageUp | 이전 슬라이드 |
| Home | 첫 슬라이드 |
| End | 마지막 슬라이드 |
| F | 풀스크린 토글 |
하단에 Prev / Next 버튼과 슬라이드 번호 표시.
SLIDE_MARKDOWN_FILE 환경변수로 마크다운 파일을 읽음markdowns/<topic>/파일명으로 자동 치환parseSlideMarkdown()으로 파싱하여 SlideData[] 생성@remotion/player의 Player 컴포넌트로 렌더링프레젠터는 Remotion 컴포지션이 아니라 독립 Vite 앱이므로 Root.tsx에 등록하지 않는다.