이 영상의 주제
이 영상은 파워포인트(PPT) 대신 HTML, CSS, JavaScript와 생성형 AI(Claude, ChatGPT 등)를 활용하여 웹 기반의 발표용 슬라이드를 제작하는 방법을 다룹니다. 기존 PPT의 한계를 넘어 더 높은 애니메이션 자유도, 실시간 인터랙티브 차트, 3D 모델 구현 및 시뮬레이션 기능이 포함된 발표 자료를 쉽게 만드는 과정을 소개합니다. 웹 개발 입문자 및 프레젠테이션 제작에 AI를 활용하고자 하는 초·중급자를 대상으로 하며, 영상을 통해 기존의 고정관념을 벗어난 역동적인 프레젠테이션 웹페이지 제작 방식과 AI 에이전트 활용 팁을 얻을 수 있습니다.
다루는 기술 스택 / 키워드
- HTML / CSS / JavaScript
- Claude / ChatGPT / Gemini
- Chart.js (웹 차트 라이브러리)
- Three.js (3D 렌더링 라이브러리)
- CSS 애니메이션 / CSS Art
- GitHub / GitHub Pages (웹 호스팅 및 배포)
- Cursor (AI 에디터) / AI Agent / MCP (Model Context Protocol)
타임스탬프별 핵심 포인트
| 시간 | 내용 |
|---|---|
| 00:00 | 전통적인 PPT 제작의 한계와 웹 기술(HTML/CSS)을 발표 자료에 도입하는 발상의 전환 |
| 00:34 | 웹 기술을 활용한 프레젠테이션의 강점 (애니메이션 자유도, 실시간 반응형 차트, 3D 및 시뮬레이션 탑재) |
| 01:10 | [제품 소개형] AI(Claude)를 활용해 샴푸 제품 소개 페이지를 디자인하고 CSS 애니메이션과 서브 페이지를 구현하는 예시 |
| 01:55 | [차트] Chart.js 라이브러리를 연동하여 동적이고 인터랙티브한 선 차트, 파이 차트, 레이더 차트를 생성하는 방법 |
| 02:31 | [편집용] 기술적인 설명이나 복잡한 다이어그램(예: 리눅스 메모리 취약점 해킹 과정)을 직관적인 애니메이션 슬라이드로 제작하는 팁 |
| 03:22 | [3D] Three.js를 활용하여 3D 자동차 모델링, 3D 색공간(CIELAB) 분포도, 3D scatter 차트 등을 슬라이드 내에 구현하는 과정 |
| 04:12 | GitHub 배포를 통한 파일 공유 편의성, 모바일 반응형 레이아웃 및 브라우저 개발자 도구를 이용한 전체 화면 캡처 기능 소개 |
| 04:29 | HTML/CSS 기반 제작 시 유의해야 할 단점 (한글 폰트 매핑 한계, AI의 기본 다크모드 선호 성향, 대용량 코드 수정의 한계) |
| 05:02 | Cursor 에디터와 AI Agent, 스타일 가이드 문서(.md) 및 MCP/Skills 설정을 활용해 고품질 웹 슬라이드를 자동 생성하는 생산성 최적화 팁 |
기본 정보
| 항목 | 내용 | |—|—| | 채널 | 코딩애플 | | 카테고리 | 프로그래밍 | | 게시일 | 2026-05-20 | | 영상 길이 | 5:43 | | 처리 엔진 | gemini-3.5-flash | | 원본 영상 | YouTube에서 보기 |