GitHub 오픈소스 탐험

요즘 많은 사람들이 온라인 프레젠테이션을 준비하며 어려움을 느끼고 있습니다. 특히 디자인에 대한 지식이 부족할 경우, 매력적인 슬라이드를 만드는 것은 더욱 힘든 일입니다. 그런데 이러한 고민을 해결해줄 멋진 오픈소스 프로젝트가 있습니다. 바로 Frontend Slides입니다. 이 프로젝트는 비전문가도 쉽게 아름답고 애니메이션이 풍부한 HTML 프레젠테이션을 만들 수 있게 도와줍니다.

왜 Frontend Slides인가?

Frontend Slides는 비전문가와 디자인에 익숙하지 않은 사용자들을 위해 개발되었습니다. CSS나 JavaScript를 몰라도 사용할 수 있도록 설계되어 있어, 누구나 간편하게 멋진 웹 프레젠테이션을 만들 수 있습니다. 특히, 기존의 PowerPoint 파일을 웹으로 변환할 수 있는 기능도 제공하여, 기존 자료를 쉽게 활용할 수 있게 해줍니다. 또한, AI의 일반적인 미적 감각을 피한 독특한 스타일을 제공하여, 개성 있는 프레젠테이션을 만들어냅니다.

주요 기능

제로 의존성: 모든 것이 하나의 HTML 파일 안에 있습니다. npm, 빌드 도구, 프레임워크가 필요 없습니다.
비주얼 스타일 발견: 디자인 취향을 말로 설명하기 어려운 사용자도 생성된 시각적 미리보기를 통해 선택할 수 있습니다.
PPT 변환: 기존의 PowerPoint 파일을 웹 형식으로 변환하여 모든 이미지와 내용을 보존합니다.
생산 품질: 접근 가능하고 반응형이며, 주석이 잘 달린 코드를 제공하여 사용자가 자유롭게 커스터마이징할 수 있습니다.

설치 가이드

플러그인 마켓에서 설치 (추천 방법)

가장 간편한 방법은 Claude Code의 플러그인 마켓을 통해 설치하는 것입니다. 두 개의 명령어로 쉽게 설치할 수 있습니다.

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

설치 후, /frontend-slides를 입력하여 사용할 수 있습니다.

수동 설치

만약 직접 파일을 복사하여 설치하고 싶다면, 다음 명령어를 실행하세요.

# 스킬 디렉토리 생성
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/

혹은 GitHub에서 직접 클론할 수도 있습니다.

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는 비슷한 도구들인 Google Slides나 Canva와 비교할 때 몇 가지 장점이 있습니다. 이러한 도구들은 대개 클라우드 기반으로 제공되며 디자인에 대한 선택이 제한적일 수 있습니다. 반면 Frontend Slides는 한 번의 설치로 오프라인에서도 사용할 수 있으며, 독특한 스타일을 제공하여 개인의 취향에 맞는 프레젠테이션을 제작할 수 있도록 합니다.

프레젠테이션을 쉽게 만드는 방법, Frontend Slides