GitHub 오픈소스 탐험

프레젠테이션을 만들 때, 많은 사람들이 디자인에 대한 전문 지식 없이도 매력적인 슬라이드를 원합니다. 그런 고민을 해결하기 위해 등장한 것이 바로 Frontend Slides입니다. 이 프로젝트는 사용자가 원하는 내용을 입력하면, 아름답고 애니메이션이 풍부한 HTML 프레젠테이션을 생성해주는 혁신적인 도구입니다. 특히, 이 도구는 PowerPoint 파일을 웹 슬라이드로 변환하는 기능도 제공하여 기존 자료를 쉽게 활용할 수 있는 장점을 가지고 있습니다. 지금부터 이 프로젝트의 주요 기능과 설치 방법, 실제 사용 사례를 살펴보겠습니다.

주요 기능과 특징

1. 제로 의존성

Frontend Slides는 단일 HTML 파일에 모든 코드와 스타일이 포함되어 있어, npm이나 빌드 도구, 프레임워크 없이도 사용 가능합니다. 이로 인해 설치 및 사용이 매우 간편합니다.

2. 시각적 스타일 발견

디자인에 대한 감각이 부족한 사용자도 걱정하지 마세요. 이 도구는 사용자가 선호하는 스타일을 텍스트로 설명할 필요 없이 자동으로 생성된 시각적 미리보기 중에서 선택할 수 있게 도와줍니다.

3. PowerPoint 변환

기존의 PowerPoint 프레젠테이션 파일을 웹 슬라이드로 변환하는 기능을 제공합니다. 모든 텍스트와 이미지, 노트를 보존하며, 원하는 스타일을 선택하여 HTML 프레젠테이션을 생성할 수 있습니다.

4. 차별화된 스타일

일반적인 AI 스타일을 피하기 위해, 다양한 독특한 디자인 스타일을 제공합니다. 이는 사용자가 더 창의적이고 멋진 프레젠테이션을 만들 수 있도록 돕습니다.

5. 프로덕션 품질

접근 가능하고 반응형이며 잘 주석이 달린 코드를 제공합니다. 사용자는 이를 바탕으로 자신의 필요에 맞게 수정할 수 있습니다.

설치 방법

Plugin Marketplace를 통한 설치 (추천)

가장 간단한 방법은 Claude Code의 플러그인 마켓플레이스를 통해 설치하는 것입니다. 아래의 두 명령어를 입력해 보세요.

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

설치가 완료되면, Claude Code에서 /frontend-slides 명령어를 입력하여 사용할 수 있습니다.

수동 설치

수동으로 설치하고 싶다면, 기술 파일을 Claude Code의 기술 디렉토리에 복사하세요.

mkdir -p ~/.claude/skills/frontend-slides/scripts

# 모든 파일 복사 (또는 이 레포를 직접 클론)
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py ~/.claude/skills/frontend-slides/scripts/

또는 다음 명령어로 레포를 직접 클론할 수 있습니다.

git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

이후, /frontend-slides 명령어로 사용할 수 있습니다.

기본 사용법

새로운 프레젠테이션 생성하기

이제 새로운 프레젠테이션을 생성해 보겠습니다. 아래와 같이 입력해 보세요.

/frontend-slides

> "AI 스타트업을 위한 피치 덱을 만들고 싶어요."

이럴 경우, 스킬은 다음과 같은 과정을 진행합니다:

슬라이드, 메시지, 이미지와 같은 콘텐츠에 대해 질문합니다.
원하는 분위기(인상적, 흥미진진, 차분함 등)에 대해 질문합니다.
비교할 수 있는 3가지 시각적 스타일 미리보기를 생성합니다.
선택한 스타일로 전체 프레젠테이션을 생성합니다.
브라우저에서 결과물을 확인할 수 있습니다.

PowerPoint 변환하기

기존의 PowerPoint 파일을 웹 슬라이드로 변환해보겠습니다. 아래와 같이 입력하세요.

/frontend-slides

> "presentation.pptx를 웹 슬라이드로 변환해 주세요."

이 과정에서:

PPT에서 모든 텍스트, 이미지, 노트를 추출합니다.
추출된 내용을 확인합니다.
원하는 시각적 스타일을 선택합니다.
모든 자산을 포함한 HTML 프레젠테이션을 생성합니다.

활용 시나리오

Frontend Slides는 다양한 상황에서 활용할 수 있습니다. 예를 들어, 스타트업의 투자 유치를 위한 피치 덱을 준비할 때, 기존의 PowerPoint 자료를 변환하여 더욱 매력적인 웹 프레젠테이션으로 만들 수 있습니다. 또한, 학술 발표나 팀 회의에서도 이 도구를 활용하여 시각적으로 돋보이는 자료를 쉽게 만들 수 있습니다.

비슷한 도구와 비교

유사한 도구로는 Google Slides와 Prezi가 있지만, 이들은 대부분 온라인 협업 및 템플릿 기반의 디자인 도구입니다. 반면, Frontend Slides는 사용자가 직접 스타일을 선택하고, 제로 의존성의 HTML 프레젠테이션을 생성할 수 있다는 점에서 큰 차별점을 가집니다.

기술 디렉토리 생성