✓ Saved to localStorage
✎ 여기를 클릭하거나 E 키로 편집 모드 OK
Arrow Keys / Space / Scroll
Claude Code + Frontend Slides

코딩 없이 만드는
웹 기반 프레젠테이션

기존 PPT의 한계를 넘어, AI가 감각적인 디자인과 애니메이션이 적용된 슬라이드를 자동으로 생성합니다

Frontend Slides | by Claude Code
01 / 11

기존 PPT, 왜 한계인가?

🎨

디자인 제약

정해진 템플릿 안에서만 작업 가능, 독창적인 레이아웃 구현이 어려움

💤

애니메이션 한계

단순한 전환 효과만 제공, 세련된 모션 구현이 불가능

💻

호환성 이슈

OS/버전별 깨짐 현상, 폰트 누락, 레이아웃 틀어짐

시간 소모

디자인에 과도한 시간 투자, 내용보다 형식에 에너지 낭비

02 / 11

Frontend Slides란?

📊

기존 PPT

  • 고정된 템플릿
  • 제한된 애니메이션
  • 전용 소프트웨어 필요
  • 호환성 문제 빈번
🚀

웹 슬라이드

  • 자유로운 레이아웃
  • 고급 CSS/JS 애니메이션
  • 브라우저만 있으면 OK
  • 어디서든 동일한 결과
03 / 11

설치 & 준비

Terminal
# 1. Claude Code 실행
$ claude

# 2. Frontend Slides 스킬 설치
$ /install-skill https://github.com/anthropics/
  claude-code-skills/frontend-slides

✓ Skill installed successfully!
04 / 11

사용 방법

01

주제 입력 또는 자료 첨부

슬라이드 주제만 텍스트로 입력하거나, PPT/PDF 파일을 폴더에 넣어 변환

주제만으로도 OK
02

스킬 참조 명령어 실행

"프론트엔드 슬라이드 스킬을 참고해서 만들어줘" 라고 명령 — 핵심 포인트!

SKILL 참조 필수
03

디자인 스타일 선택

12가지 프리셋 중 원하는 분위기를 선택하면 AI가 자동으로 완성

12 PRESETS
04

결과 확인 & 수정

HTML 파일로 생성되며, 브라우저에서 바로 확인 가능. 수정도 간편!

BROWSER READY
05 / 11

AI가 자동 생성하는 것들

감각적 레이아웃

콘텐츠에 맞는 최적의 구성을
AI가 자동으로 설계

🎬

모션 효과

스크롤 기반 애니메이션,
페이드 인, 슬라이드 전환

🎨

타이포그래피

프리미엄 웹 폰트 자동 적용,
완벽한 폰트 페어링

📱

반응형 대응

모바일부터 데스크톱까지
완벽하게 적응

06 / 11

12가지 디자인 프리셋

목적과 분위기에 맞는 프리셋을 선택하세요

07 / 11

핵심 장점

코딩 지식 불필요

AI에게 주제만 알려주면 HTML/CSS/JS 코드를 자동 생성

🌐

웹 네이티브 결과물

브라우저 하나면 어디서든 동일하게 재생 — 호환성 걱정 없음

✏️

간편한 수정

텍스트 변경은 AI에게 다시 요청하거나, 에디터에서 직접 수정 가능

🎯

PPT 변환 지원

기존 PPT/PDF 파일을 넣으면 웹 슬라이드로 자동 변환

08 / 11

이런 곳에 활용하세요

💼

사내 발표

팀 미팅, 프로젝트 리뷰, 업무 공유에 차별화된 퀄리티

📢

피치덱

투자 유치, 사업 제안서를 인상적으로 전달

🎓

강의 / 튜토리얼

교육 자료를 인터랙티브하게 제작

🎤

컨퍼런스 발표

기술 컨퍼런스에서 돋보이는 발표 자료

📰

포트폴리오

개인 프로젝트나 작업물을 웹으로 쇼케이스

🔗

URL 공유

Vercel 배포로 링크 하나로 전 세계 어디서든

09 / 11

실습 — 직접 만들어보기

01

유튜브 영상으로 발표 자료 만들기

영상 URL만 전달하면 AI가 내용을 분석하고 슬라이드를 자동 생성

YouTube URL → Slides
02

PDF를 발표 자료로 만들기

PDF 문서를 폴더에 넣고 명령하면 핵심 내용을 추출해 슬라이드로 변환

PDF → Slides
03

PPT로 발표 자료 만들기

기존 PPT 파일을 웹 슬라이드로 변환 — 디자인과 애니메이션 자동 업그레이드

PPT → Web Slides
10 / 11

PPT가 반드시 필요한 게 아니라면,
웹 슬라이드로 시작하세요

업무 효율과 퀄리티, 두 마리 토끼를 잡는 가장 쉬운 방법

$ 프론트엔드 슬라이드 스킬 참고해서 만들어줘

Claude Code × Frontend Slides

11 / 11