rupy1014
0f5734912e
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
84 lines
2.0 KiB
Markdown
84 lines
2.0 KiB
Markdown
# VibePPT
|
|
|
|
Claude Code를 활용한 HTML 프레젠테이션 생성 프로젝트
|
|
|
|
## 소개
|
|
|
|
이 프로젝트는 Claude Code를 사용하여 HTML 기반 프레젠테이션을 생성하는 예시입니다.
|
|
복잡한 PPT 소프트웨어 없이, 텍스트 명령만으로 세련된 발표 자료를 만들 수 있습니다.
|
|
|
|
## 사용법
|
|
|
|
### 1. Claude Code 실행
|
|
|
|
```bash
|
|
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 변수를 수정하여 테마를 변경할 수 있습니다:
|
|
|
|
```css
|
|
:root {
|
|
--primary: #7C3AED; /* 메인 컬러 */
|
|
--primary-light: #A78BFA; /* 밝은 메인 컬러 */
|
|
--bg-purple: #F5F3FF; /* 배경색 */
|
|
}
|
|
```
|
|
|
|
## 라이선스
|
|
|
|
MIT
|