Interactive Slides MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

세 가지 모드: 슬라이드 데크, 스크롤 스토리, 인터랙티브 데크
자체 포함된 HTML — 하나의 파일, 모든 브라우저
GSAP 애니메이션, Google Fonts, Chart.js(CDN)
탐색: 키보드/클릭/터치/스와이프/스크롤 휠
pptxgenjs를 통한 선택적 .pptx 내보내기

라이브 데모

실제 사용 모습

interactive-slides-skill.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "interactive-slides-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "interactive-slides-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/sylvial928/interactive-slides",
          "~/.claude/skills/interactive-slides"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add interactive-slides-skill -- git clone https://github.com/sylvial928/interactive-slides ~/.claude/skills/interactive-slides

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Interactive Slides

한 페이지 분량의 자료를 투자자 자료로 전환

👤 창립자와 PM이 프레젠테이션을 진행합니다. ⏱ ~30 min beginner

언제 쓸까: 콘텐츠가 있습니다. 몇 분 안에 실제 데크의 모양을 원합니다.

사전 조건

Node + pptxgenjs(선택 사항, .pptx 내보내기에만 해당) — npm i -g pptxgenjs
스킬 장착 — ~/.claude/skills/interactive-slides에 git 복제

흐름

스킬을 발동하세요

/interactive-slides — 모드: 슬라이드 데크. 내용: <한 페이지 분량>. 테마: 최소한의 어둠.✓ 복사됨

→ Deck.html을 생성합니다. 브라우저에서 열립니다
섹션 반복

MRR에 대한 꺾은선형 차트가 있는 '견인력' 섹션을 추가하세요.✓ 복사됨

→ 슬라이드 내부에 렌더링된 Chart.js 꺾은선형 차트
.pptx 내보내기

itch.pptx로 내보냅니다.✓ 복사됨

→ 편집 가능한 .pptx가 저장되었습니다. PowerPoint에서 완전히 편집 가능한 텍스트

결과: 오늘 데모하고 내일 .pptx 형식으로 이메일을 보낼 수 있는 자료입니다.

함정

내보낸 .pptx에 애니메이션이 부족함 — HTML 애니메이션은 왕복되지 않습니다. 실시간 대화를 위한 HTML, 핸드오프를 위한 .pptx 유지

함께 쓰기: mcp-echarts

두루마리 이야기 설명 도구 만들기

👤 기술 작가 및 마케팅 담당자 ⏱ ~60 min intermediate

언제 쓸까: 스크롤을 통해 시각적으로 표시되는 미디엄 스타일의 긴 형식의 작품이 필요합니다.

흐름

모드를 선택하세요

모드: 스크롤 스토리. 내용: 이 글. 스크롤로 트리거되는 차트와 시각적 개체를 추가하세요.✓ 복사됨

→ 출력은 GSAP 고정 섹션이 있는 스크롤 페이지입니다.
간격 조정

'문제' 섹션의 핀 스크롤 속도를 늦추세요.✓ 복사됨

→ 스크럽 타임라인이 조정되었습니다.

결과: 독자들이 실제로 완성하는 매력적인 두루마리 작품입니다.

함정

효과 오버로딩 — 섹션당 하나의 애니메이션; 휴식은 조용해야 한다

워크숍을 위한 대화형 데모 자료

👤 워크숍을 운영하는 교육자 및 DevRel ⏱ ~90 min intermediate

언제 쓸까: 작은 대화형 연습 문제가 인라인으로 포함된 슬라이드를 원합니다.

흐름

모드: 대화형

모드: 대화형 데크. 실시간으로 업데이트되는 입력 필드 + Chart.js를 포함합니다.✓ 복사됨

→ 유선 대화형 요소; 입력 시 차트 업데이트
설문조사 추가

클릭수를 로컬에서 기록하고 집계하는 '하나 선택' 슬라이드를 추가하세요.✓ 복사됨

→ 클릭 시 로컬 전용 카운터 업데이트

결과: 백엔드가 없어도 라이브 느낌이 나는 데크입니다.

조합

다른 MCP와 조합해 10배 효율

interactive-slides-skill + mcp-echarts

ECharts를 통해 차트를 생성하고 데크에 삽입

mcp-echarts를 SVG로 사용하여 수익 차트를 렌더링합니다. '견인' 슬라이드에 삽입하세요.✓ 복사됨

interactive-slides-skill + claude-code-design-skills

덱 테마에 브랜드 토큰 적용

데크 팔레트 및 유형에 브랜드-acme 토큰을 사용하십시오.✓ 복사됨

interactive-slides-skill + magic-ui-mcp

Interactive Deck 모드를 위한 선별된 UI 구성 요소

대화형 모드: 신뢰 로고 슬라이드에 Magic UI 선택 윤곽을 사용합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
/interactive-slides (SKILL)	mode + content + theme	이미 가지고 있는 콘텐츠에서 데크나 스크롤 스토리가 필요할 때마다	0

비용 및 제한

운영 비용

API 쿼터: 없음
호출당 토큰: 보통 - 데크 콘텐츠가 HTML 길이입니다.
금액: 무료
팁: 슬라이드당 문장은 80단어 미만으로 유지하세요. 그렇지 않으면 데크가 빨리 부풀어 오릅니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 없음

데이터 외부 송신: GSAP, Google Fonts, Chart.js가 CDN에서 로드됩니다. 완전히 오프라인이 필요한 경우 라이브러리를 인라인하는 기술을 요청하세요.

CDN 종속성은 수신자가 애니메이션을 보려면 네트워크가 필요함을 의미합니다. 에어갭 데모의 경우 인라인 빌드를 요청하세요.
대화형 데크는 상태를 localStorage에 저장합니다. 자료가 공개적으로 공유되는지 확인하세요.

문제 해결

자주 발생하는 오류와 해결

화살표 키를 눌러도 슬라이드가 진행되지 않습니다.

키보드 리스너가 바인딩되어 있는지 확인하세요. 일부 브라우저는 HTML 파일이 file://에서 제공될 때 차단됩니다. 로컬 서버를 사용해 보세요: python3 -m http.server.

확인: Open dev console; inspect keyup handler

.pptx 누락된 애니메이션 내보내기

애니메이션은 HTML 전용입니다. .pptx는 텍스트 + 레이아웃을 내보냅니다. 라이브에는 HTML을 사용하세요. 이메일 전달을 위한 .pptx.

확인: Open the .pptx in PowerPoint; check layout only

글꼴이 오프라인에서 잘못 보입니다.

오프라인 사용을 위해 base64 데이터 URI와 함께 @font-face를 포함하도록 스킬에 요청하세요.

확인: Open airplane-mode; load the HTML

대안

Interactive Slides 다른 것과 비교

대안	언제 쓰나	단점/장점
mck-ppt-design-skill	HTML이 아닌 컨설팅 스타일의 .pptx 슬라이드를 원합니다.	덜 상호작용적입니다. 더 많은 슬라이드 폴리쉬
mermaid-skill	데크가 아닌 다이어그램이 필요합니다	다른 유물
markmap-mcp-server	덱보다 마인드맵이 더 잘 맞는다	다양한 서술형

Interactive Slides