AI가 PPT의 새로운 시대를 열었습니다
바로 'HTML 슬라이드' 인데요

어디서 열어도 폰트가 깨지기 않고
보다 더 자유로운 표현이 강점이죠
 
게다가 텍스트도 화면 안에서
그대로 수정할 수 있는데,
나만의 모션그래픽도 만들어
바로 추가할 수 있습니다

이런 고퀄리티 HTML 슬라이드
누구나 쉽게 만들 수 있게
마스터 프롬프트와 사용법을 정리했습니다

고퀄리티 모션그래픽
바로 만들어 쓰는 법도 모두 알려드릴게요

이제 PPT는 HTML 슬라이드로
만들어 보시기 바랍니다

-------------------------------------------------------------------------------

???? 영상 속 프롬프트와 레퍼런스
(사용하실 때 구독과 좋아요, 댓글 부탁드립니다 ^^)

━━━━━━━━━━━━━━━━━━━━
1단계. 초안 ｜ 마스터 프롬프트
━━━━━━━━━━━━━━━━━━━━
※ 챗지피티는 맨 앞에 @Sites 를 붙여 주세요.
    클로드는 그대로 쓰시면 됩니다.

폴더에 있는 자료를 기반으로 [주제] 슬라이드를 만들어줘.

디자인은 폴더 안에 있는 '디자인 레퍼런스'를 활용하고,
분량은 [7장] 내외로 만들어줘.

폰트는 [눈누 폰트 주소] 이걸 사용하고,
줄바꿈은 단어 단위로 해서 단어가 중간에서 끊기지 않게 해줘.

마우스를 대면 움직이는 반응형 슬라이드를 HTML로 만들고,
내용 이해를 돕는 이미지도 직접 만들어서 넣어줘.

수치가 들어가는 장은
https://www.chartjs.org/docs/latest/s...
에서 데이터에 맞는 차트를 골라 넣어줘.

효과나 이펙트는
https://seoul-one-day-many-stories.pe...
여기를 참고해줘.

━━━━━━━━━━━━━━━━━━━━
2단계. 결과물 수정 ｜ 예시 프롬프트
━━━━━━━━━━━━━━━━━━━━
※ 아래는 예시입니다. 페이지 번호와 내용은
    여러분 슬라이드에 맞게 바꿔 쓰세요.
※ 초안을 만든 챗지피티와 클로드 대화창에
    이어서 입력하세요.

[ 내용 수정 ]

1. 텍스트 크기 조정
전체 텍스트를 지금보다 조금 더 키워줘.

2. 장표 추가
2페이지와 3페이지 사이에 최근 3년 동안의 매출과
차량 생산 개수를 조사해서 추가해줘.

3. 장표 삭제
4페이지는 삭제해줘.

4. 장표 순서 변경
2페이지와 3페이지의 순서를 서로 바꿔줘.

5. 편집 모드 추가
글자를 직접 클릭해서 수정할 수 있는 편집 모드를 넣어줘.

6. 편집 모드 해제 (글자 수정이 끝나면 꼭 해주세요)
앞서 설정한 편집 모드를 해제해줘. 수정한 텍스트는 모두 그대로 저장해줘.

[ 효과 추가 ]

7. 채우기 효과
숫자랑 그래프에 마우스를 대면 자동으로 채워지는 효과를 추가해줘.

8. 연동 효과 (레버)
6페이지에 Performance, Thrust, Rocket 이렇게 있는데, 이미지 오른쪽에 세로 레버가 있고, 이 레버에 따라 3가지 사양을 선택하면 관련 내용과 이미지가 연동돼서 오른쪽에 나오게 수정해줘.

8-1. 연동 효과 (연도)
3페이지에 2023, 2024, 2025 이렇게 연도가 있는데, 연도를 누르면 현재 나오는 매출과 차량 생산량뿐 아니라 주요 재무 수치가 연동돼서 그래프로 나오게 수정해줘.

9. 사이드 페이지
5페이지 아래에 '사이버캡 생산'과 '로봇택시 서비스 확대' 같은 내용을 누르면 아래에서 사이드바가 올라와서 관련된 세부 내용을 알려주도록 수정해줘. 주변은 어둡게 하고, 흐림 효과는 넣지 말아줘.

10. 클릭할 때마다 요소 등장
1페이지를 제외하고 각 장표별로 빈 화면에서 시작하고, 마우스를 클릭하거나 엔터를 칠 때마다 요소들이 순서대로 나오게 변경해줘.

11. 자동 발표
'발표 시작하기'를 누르면 2페이지부터 자동 발표가 진행되도록 바꿔줘.


━━━━━━━━━━━━━━━━━━━━
3단계. 모션그래픽 ｜ 예시 프롬프트
━━━━━━━━━━━━━━━━━━━━

12. 모션그래픽 만들기
폴더 속 '모션그래픽 레퍼런스' 영상을 참고해서 [테슬라를 홍보하는] 15초 길이의 모션그래픽 영상을 만들어줘. 최대한 역동적으로 만들어줘.

13. 슬라이드에 넣기
방금 만든 영상을 1페이지와 2페이지 사이에 삽입해줘. 전체화면으로 자동 재생되도록 설정해줘.

13-1. 마지막 페이지로 넣기 (응용)
방금 만든 영상을 넣어 마지막 페이지를 추가해줘. '[테슬라, 가능성을 움직이다]'를 이 마지막 페이지의 제목으로 해줘.

14. 쇼츠 비율로 만들기
12번 프롬프트 뒤에 "쇼츠용으로 만들어줘"를 한 줄 추가하세요.

15. 음악 없이 만들기
12번 프롬프트 뒤에 "음악은 넣지 말아줘"를 한 줄 추가하세요.


━━━━━━━━━━━━━━━━━━━━
레퍼런스 사이트
━━━━━━━━━━━━━━━━━━━━
▶ 디자인 레퍼런스 (핀터레스트) : https://kr.pinterest.com/
▶ 무료 폰트 (눈누, 허용범위 OFL) : https://noonnu.cc/
▶ 모션그래픽 레퍼런스 : https://jasonzhu.ai/en/prompts/claude...

[ 에이커가 만든 HTML 슬라이드 ]
▶ 서울 관광 : https://seoul-one-day-many-stories.pe...
▶ 테슬라 (영상 시연용) : https://tesla-business-roadster-brief...