#이 모션 슬라이드,#전부 Claude가 만들었습니다

만드는 법은 세 단계입니다

1. 1

   개요를 마크다운으로 씁니다

   장마다 할 말 한 문장, 보여 줄 숫자와 인용, 듣고 나서 남아야 할 것을 적습니다. 프롬프트보다 개요가 결과를 더 크게 좌우합니다. 샘플 개요를 내 내용으로 바꾸거나, 이미 만든 PPT나 줄거리가 있으면 Claude Code에 이 형식으로 바꿔 달라고 하면 됩니다.

   샘플 개요 내려받기(이미지 포함)개요 쓰는 법

   ## S5. 열 달 만에 직원 셋 중 둘이 AI로 일합니다
   
   - 메시지: 사내 AI 도구가 일상 업무 도구가 됐습니다
   - 들어갈 내용
     - 사용자 35명(3월) → 812명(직원 1,200명 중 68%)
     - 최근 30일 활성 604명
     - 직원이 만든 앱 312개(만든 사람 256명)
   - 청자가 이해할 것: "일부가 아니라 대부분이 쓰고 있다."

   • 모션 쇼릴
   • 3D 데이터 조형
   • 개념 설명
2. 2

   프롬프트를 Claude Code에 붙여 넣습니다

   개요 파일이 있는 폴더에서 Claude Code를 열고, 여기서 복사한 프롬프트를 붙여 넣으면 끝입니다. 장면 설계와 HTML 작성, 화면을 직접 캡처해 겹친 곳을 고치는 것까지 Claude Code가 알아서 합니다. 모델은 Claude Opus 5.5 이상을 권장합니다.

   실행하는 법

   스타일다크 파티클 모션모션 쇼릴3D 데이터 조형미니어처 세계개념 설명한 도형 UI 변신줌 아웃한 줄의 선개요 파일저장할 HTML

   슬라이드 개요.md 를 끝까지 읽고, 슬라이드 없이 영상만 봐도 이해되는 세련된 16:9 모션 디자인 영상을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘. 시각적으로 모던하게, 파티클과 선으로 내용을 받쳐 줘.
   
   1. 장면 설계
   - 개요의 장 하나를 장면 하나로 한다. 장마다 메시지와 '청자가 이해할 것'을 한 문장으로 줄여, 장면 하나에 메시지 하나만 둔다.
   - 장면마다 핵심 숫자 하나 또는 그림 하나를 크게 둔다. 숫자가 여럿이면 가장 중요한 하나만 크게, 나머지는 작은 보조 숫자로 2~3개까지.
   - 표와 긴 목록은 넣지 않는다. 시간순 일정은 선 위의 점(타임라인)으로, 비율은 점·막대·고리 그림으로 바꿔 넣는다.
   - Part 이름은 제목 위 작은 머리글로 둔다.
   - 장면마다 내용과 같은 모양의 파티클 움직임을 고른다(3번 목록).
   - 장면 길이는 읽는 데 필요한 만큼(보통 8~15초), 전체 3~5분.
   - (선택) 만들기 전에 장면 표(번호·메시지·숫자나 그림·파티클·길이)를 먼저 보여 주고 확인을 받는다.
   
   2. 화면
   - 1920×1080 무대를 만들고, 창 크기에 맞춰 비율을 유지한 채 확대·축소한다.
   - 배경은 아주 어두운 남색(#050913 근처)에 은은한 빛 번짐, 옅은 격자, 가장자리 어둡게.
   - 강조색은 시점별로 하나씩: 지난 일과 현재는 파랑(#4F8CFF), 앞으로 할 일은 주황(#FFB54A). 장면이 바뀌면 파티클과 배경 빛이 그 색으로 천천히 바뀐다. 한 장면에 두 시점이 함께 나오면 위치로 나눠 각각의 색을 쓴다(왼쪽 파랑, 오른쪽 주황).
   - 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), 한글은 단어 단위 줄바꿈(word-break: keep-all).
   - 글자 크기: 제목 60px 이상, 본문 26px 이상, 출처·기준 21px 안팎. 좌우 여백 140px, 요소 사이도 넉넉히.
   
   3. 파티클
   - canvas 하나에 파티클 200~250개. 가까운 파티클끼리(120px 안팎) 옅은 선으로 잇고, 겹치는 곳이 밝아지게 합성한다.
   - 장면이 바뀌어 모드가 바뀌면 파티클이 새 자리로 부드럽게 옮겨 간다.
   - 모드와 쓰는 곳
     - ring: 표지·마무리. 화면 가운데를 감싸는 고리
     - flow: 흐름·타임라인. 왼쪽에서 오른쪽으로 흐르는 여러 줄
     - scatter: 흩어진 출발점, 따로 노는 상태
     - drift: 인용·설명. 천천히 떠다니는 배경
     - split: 한 줄기가 두 방향으로 갈라짐(두 가지 방식으로 시작)
     - converge: 숫자 요약. 가운데로 모임
     - hub: 중심에서 여러 기능으로 퍼짐(플랫폼·구성도)
     - stations: 한 곳에서 여러 지점으로 이동(지역·확산)
     - rise: 아래에서 위로 오름(증가·차트)
     - fade: 오르며 옅어짐(사라진 일·줄어든 것)
     - grid: 격자로 물결치듯 깜빡임(만든 것이 많음)
     - stages: 단계 원들을 잇는 흐름(로드맵·지금 위치)
     - merge: 여러 줄기가 하나로 합류(통합)
     - burst: 한 점에서 퍼짐(행사·확산의 순간)
     - 맞는 모드가 없으면 내용과 같은 모양의 모드를 새로 만든다.
   - 파티클이 도식을 따라 흐를 때는 SVG 도식과 같은 좌표를 써서 선과 점 위를 정확히 지나가게 한다.
   - 파티클은 글자 뒤에서 내용을 받치는 역할. 장면마다 세기(투명도)를 정하고, 제목·본문 영역 안에서는 파티클을 흐리게 해 글자를 가리지 않게 한다.
   
   4. 움직임
   - 장면 안 요소는 정해진 시각에 차례로 나타난다(아래에서 올라오며 선명해짐, 좌우에서 밀려옴, 흐림이 걷힘).
   - 선과 도식은 SVG로 그리고, stroke-dashoffset으로 그려지듯 나타나게 한다.
   - 숫자는 0이나 이전 값에서 카운트업, 막대는 바닥에서 자란다.
   - 인용이 여러 개면 한 장면에서 하나씩 바꿔 보여 준다.
   - 장면이 바뀔 때 이전 장면은 0.5초 안에 사라진다.
   
   5. 그래프·소개·지도·사진
   - 추이 그래프(값 10개 이상): 막대가 왼쪽부터 차례로 자란다. 최근 구간만 밝은 색, 개요의 '그래프에 표시할 일'은 세로 점선과 짧은 라벨로. 값 라벨은 처음·마지막·최고값과 꺾인 곳(연휴 등)만. 그래프 위에는 장의 핵심 숫자를 크게 카운트업한다.
   - 제품·도구 소개: 로고가 먼저 나타나고 이름과 한 줄 소개가 이어서 펼쳐지며, 옆에 화면 캡처가 떠오른다. 다음 단계에서 로고가 왼쪽 가운데로 옮겨 가고 기능이 동심원으로 하나씩 그려지며 오른쪽에 설명이 붙는다. 파티클은 동심원을 따라 돈다.
   - 장소가 있는 내용: 점으로 찍은 지도 위에 장소마다 원(크기는 횟수·인원에 비례)과 라벨. 옆에 장소별 막대, 그 아래로 현장 사진 띠가 천천히 옆으로 흐른다. 지도는 공개 행정구역 경계 데이터(GeoJSON)를 받아 점으로 바꿔 HTML 안에 넣고, 장소는 실제 위경도로 찍는다.
   - 사진이 있는 장면: 화면 오른쪽 2/3를 사진으로 채우고, 왼쪽으로 어두워지는 그라데이션 위에 글을 둔다. 사진은 천천히 확대되며, 인용이 바뀔 때 사진도 교차 전환된다.
   - 이미지는 개요 '장표 자산'에 있는 것만 쓴다. 없으면 그 장치는 쓰지 않는다.
   
   6. 문구
   - 장면 제목은 존댓말 문장(~했습니다, ~합니다), 나머지는 명사형 개조식. 표지·마무리는 명사구도 된다. 장면 하나에 본문 3줄 이내.
   - 숫자·이름·인용은 개요에 있는 것만 쓴다. 새 숫자를 만들지 않고, 인용과 질문은 원문 그대로. 인용 출처는 '— 팀 이름'.
   - 숫자에는 단위를 붙이고, 기준일·출처는 화면 아래 작은 글씨로.
   
   7. 재생과 조작
   - 기본은 발표 모드: 장면에 들어가면 등장 움직임이 재생되고, 다 나타난 상태로 멈춰 기다린다(파티클은 계속 움직임). →·Space·Enter·PageDown·클릭으로 다음, ←·PageUp으로 이전(이전 장면은 다 나타난 상태로). 인용처럼 장면 안에서 차례로 바뀌는 곳은 바뀔 때마다 멈춘다. 재생 중에 다음을 누르면 다음 장면으로 바로 넘어간다.
   - 모바일: 탭으로 다음, 화면 왼쪽 1/3 탭은 이전, 좌우 스와이프로 이전·다음. window의 click 대신 pointerdown·pointerup으로 처리한다(아이폰 Safari는 화면 탭을 window click으로 보내지 않음). touch-action: none. 마우스 클릭은 어디를 눌러도 다음이고, 한 번 눌러 두 장 넘어가지 않게 한다.
   - A로 자동 재생(영상 모드) 켜고 끄기. 자동 재생에서는 장면이 정해진 길이만큼 흐르고 Space 일시정지, 마지막 장면에서 멈춘다. F 전체화면, H·Home 처음부터.
   - 화면 아래에 진행 막대(장면 경계 눈금)와 '현재 번호 / 전체 · 장면 이름'.
   - 주소 옵션: ?s=N(N번 장면부터), ?auto(자동 재생으로 시작), ?record(자동 재생 + 진행 막대·안내 숨김, 화면 녹화용), ?loop, ?speed=1.5
   - 지금 장면 번호를 주소 끝에 #N으로 표시한다(history.replaceState). 새로고침하거나 #N으로 열면 그 장면부터 시작하고, 주소의 #N을 바꾸면 그 장면으로 다시 연다. #N이 있으면 ?s보다 먼저 따른다.
   - 검수용 옵션: ?t=초(장면 안 그 시각으로 이동, 이미 지난 움직임은 끝난 상태로), ?hold(장면 요소가 다 나타난 상태로 멈춤). 예: ?s=5&hold
   - 외부 파일은 글꼴 CDN 하나만. 개요에 '장표 자산' 이미지가 있으면 상대 경로로 넣는다.
   
   8. 검수
   - 브라우저 자동화(Playwright 등)로 1920×1080에서 장면마다 ?s=N&hold로 열어 캡처해 직접 본다. 인용이 바뀌는 장면은 인용마다 캡처한다.
   - 확인할 것: 글자 겹침, 화면 밖으로 잘림, 파티클이 글자를 가림, 도식과 파티클 경로가 어긋남, 어색한 줄바꿈, 한쪽이 비어 보이는 배치, 사진 위 글자가 잘 읽히는지, 지도 위 장소 위치.
   - 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
   - 고친 뒤 다시 캡처하고, 확인한 장면과 확인하지 못한 장면을 나눠 알려 준다. 캡처 파일은 끝나면 지운다.

   전체 보기

   프롬프트 복사
3. 3

   브라우저로 열어 발표합니다

   만들어진 HTML 파일을 더블클릭하면 됩니다. 장면마다 움직임이 끝나면 멈춰 기다리고, 쓰던 프레젠터 리모컨도 그대로 동작합니다.

   발표 옵션MP4로 뽑기

   → Space 클릭

   다음 장면

   ← PageUp

   이전 장면(완성된 화면으로)

   A

   자동 재생 켜고 끄기

   F

   전체 화면

   휴대폰

   탭하면 다음, 화면 왼쪽 1/3을 탭하면 이전입니다. 좌우로 밀어도 넘어가고, 가로로 돌리면 화면이 꽉 찹니다.