VibePPT

Claude Code를 활용한 HTML 프레젠테이션 생성 프로젝트

소개

이 프로젝트는 Claude Code를 사용하여 HTML 기반 프레젠테이션을 생성하는 예시입니다. 복잡한 PPT 소프트웨어 없이, 텍스트 명령만으로 세련된 발표 자료를 만들 수 있습니다.

사용법

1. Claude Code 실행

claude

2. PPT 생성 요청

"클로더즈 첫 수업" 주제로 30분짜리 발표 자료 만들어줘.
- 빌더가 되자는 메인 메시지
- AI 활용법 설명
- CLAUDE.md 작성법
- 실습 단계 포함
- 발표자 노트도 넣어줘

3. 기존 PPT 수정

@ppt.html 참조해서 슬라이드 5번 내용을 더 간결하게 수정해줘

@ppt.html 스타일 유지하면서 "MCP 서버 소개" 슬라이드 3장 추가해줘

예시 명령어

요청	설명
@ppt.html 참조해서 새 주제로 PPT 만들어줘	기존 스타일 기반 새 PPT 생성
@ppt.html 슬라이드 10번 뒤에 실습 슬라이드 추가해줘	특정 위치에 슬라이드 삽입
@ppt.html 발표자 노트 수정해줘	발표자 노트 편집
@ppt.html 색상 테마를 파란색으로 바꿔줘	디자인 변경

기능

• 키보드 네비게이션 (←, →, Space)
• 발표자 노트 (P키로 열기)
• 슬라이드 인디케이터
• 반응형 디자인
• 다양한 레이아웃 (카드, 타임라인, 비교표 등)

파일 구조

vibeppt/
└── ppt.html    # HTML 프레젠테이션 파일

발표 모드

1. ppt.html을 브라우저에서 열기
2. P 키를 눌러 발표자 노트 창 열기
3. 화살표 키 또는 스페이스바로 슬라이드 넘기기

커스터마이징

CSS 변수를 수정하여 테마를 변경할 수 있습니다:

:root {
  --primary: #7C3AED;        /* 메인 컬러 */
  --primary-light: #A78BFA;  /* 밝은 메인 컬러 */
  --bg-purple: #F5F3FF;      /* 배경색 */
}

라이선스

MIT