고정관념을 약간 벗어나면 더 쉽고 더 멋있게 PPT 문서를 만들 수 있는 방법도 있습니다.
바로 HTML CSS로 코딩해서 PPT 스타일의 슬라이드를 만드는 것임
HTML도 실은 문서작성용 언어니까요.
코딩 안해봐도 상관없는게 AI한테 만들어달라고 하면 빠릅니다.
PPT를 HTML로 만들면
- 3D 넣기 쉬움
- 차트 다양함
- 인풋에 실시간으로 반응가능
- 시뮬레이션
- 페이지스냅
- 번역
- 반응형디자인
- 배포
장점이 100개 있어서 진짜 쓸만한지 확인하려고 직접 만들어봤습니다.
1. 제품 소개형 PPT
(prompt) 샴푸제품을 소개하는 PPT 슬라이드하나를 HTML CSS 사용해서 PPT 느낌으로 구현해주셈프롬프트는 대충 이런 식으로 입력하면 알아서 만들어줍니다.
샴푸 제품을 소개하는 ppt 슬라이드를 하나 디자인해달라고 해봤습니다.
그랬더니 이쁘게 만들어주는군요.
놀라운게 뭐냐면 샴푸이미지가 없으니까 직접 css아트로 그려놓은 만행을 볼 수 있는데
근데 퀄리티는 괜찮은게 얼탱이없습니다.
css잘하면 애니메이션도 넣을 수 있다는걸 아실텐데
잎사귀들이 떠다니는 애니메이션도 넣어주고 그랬습니다.
css로 뭘 구현할 수 있는지 아는 분들은 더 다양한걸 만들어볼 수 있겠군요.
다음 페이지도 만들어봤습니다.
HTML은 기본적으로 웹문서기 때문에 페이지를 다양하게 넣기도 좋습니다.
2. 재무자료
(prompt) PPT 슬라이드하나를 HTML CSS 사용해서 PPT 느낌으로 구현해주셈,
근데 Chart.js 라이브러리 써서 재무자료 아무거나 보여줘야함 HTML파일에 쓸 수 있는 Chart.js 라이브러리를 쓰면 차트랑 표같은걸 이쁘게 만들 수 있습니다.
그랬더니 도넛 파이차트 라인차트 굉장히 잘 만들어주고
마우스 올렸을 때 라벨도 잘 보여주고
쓸데없는 애니메이션도 있습니다.
Chart.js 에는 여러가지 차트 타입이 있어서
이 중에서 사장님이 좋아할거같은 차트 골라서 쓰면 되겠습니다.
차트데이터 수정은 직접 코드로 수정해도 될 정도로 쉬운 편임
3. 영상편집
실은 영상편집할 때도 쓰기 좋습니다.
정보성 유튜버들은 자료를 보여줘야하는데 그것도 PPT의 일종 아니겠습니까.
그래서 이미 코딩좀 알던 유튜버들은 HTML로 PPT 만들어서 보여주고 있습니다.
그래서 리눅스 copy fail 취약점 사건을 HTML PPT로 만들라고 해봤습니다.
폰트 작은거 빼면 봐줄만 합니다.
다이어그램도 잘 그려줍니다.
원하는 애니메이션 넣으라고 하면 이쁘게 넣어줍니다.
4. 3D
CSS와 자바스크립트를 만져봤으면
3D 웹페이지도 만들 수 있는걸 알기 때문에 3d로 이거저거 구현해달라고 해도 됩니다.
3d 모델이 있으면 그거 집어넣어서 씬을 만들 수도 있습니다.
3D로 색상 분포표 비슷한걸 만들어봤습니다.
3D 모델을 넣으려면 Three.js 라이브러리 쓰는게 가장 쉬울텐데
마우스로 컨트롤도 되게 하고 싶으면 orbit control도 넣으라고 하면 되겠습니다.
단점
체리피킹한 결과만 보여주면 뭐합니까 당연히 단점이 있습니다.
- 한글 폰트를 잘 몰라서 환각으로 폰트를 넣어줌
- 폰트가 너무 작음
- 다크모드를 너무 좋아함
- GPT와 Gemini는 레이아웃 찐빠가 아직도 있음
- 장수가 많아지면 일관성이 점점 없어짐
이런 특징이 있는데 이런건 명령줘서 해결하면 되겠습니다.
아니면 frontend-slides라는 스킬이 있던데 에이전트 쓰시면 그걸 넣어서 한 번 만들어보도록 합시다.
아무튼 다 만들고 나면 html 파일이다보니까
브라우저로 열어서 F11 눌러서 전체화면으로 보여주면 PPT랑 똑같습니다.
제출할 일이 있으면 스크린샷이나 PDF로 빼는 법이 있으니 그걸써도 됩니다.
버전관리하려면 Git을 써도 되고 팀원끼리 협업하려면 Github을 쓸 수도 있지 않을까요.
