[Claude Code] "발표 자료 만들어줘" — Claude Code skill-creator 기반 스킬 빌드 및 플러그인 배포 가이드

1. 도입부 (Introduction)

현대적인 소프트웨어 개발 워크플로우에서 엔지니어에게 요구되는 것은 단순한 프로그래밍 역량만이 아니다. 자신이 설계한 아키텍처를 증명하고, 새로운 기술 도입의 당위성을 공유하며, 프로젝트 결과물을 시연하는 과정에서 '프레젠테이션'은 필수불가결한 업무 중 하나로 자리 잡았다. 그러나 PPTX나 Keynote와 같은 전통적인 슬라이드 저작 도구는 코드 스니펫의 구문 강조(Syntax Highlighting)가 깨지기 쉽고, 레이아웃 정렬과 일관된 테마 적용에 불필요하게 많은 물리적 자원을 낭비하게 만든다.

이러한 비효율을 극복하기 위해 최근 많은 개발자들이 웹 표준 기술(HTML, CSS, JavaScript)을 활용한 동적 프레젠테이션으로 선회하고 있다. 하지만 매번 발표 자료를 만들 때마다 기초 뼈대 코드를 작성하고 반응형 스타일을 조정하는 작업 또한 만만치 않은 오버헤드다. 평소 이 문제로 비효율을 느끼던 중, Anthropic의 차세대 터미널 에이전트인 Claude Code를 접하게 되었고, 이를 단순한 코딩 비서를 넘어 "나만의 지능형 웹 PPT 생성 엔진"으로 진화시킬 수 있는 구체적인 가능성을 발견했다.

 

2. 주요 특징 및 핵심 로직 (Main Features & Logic)

Claude Code 기반의 프레젠테이션 생성 시스템은 단일성 프롬프트 수행에 그치지 않고, 에이전트 스스로 기술 스펙과 모범 사례를 수립한 뒤, 검증 및 수렴 단계를 거치는 고도의 순환 루프 구조를 갖추고 있다. 이 시스템의 핵심은 개발자가 작성 규칙을 일일이 수동으로 제어하지 않더라도 시스템이 공식 문서 스펙을 스스로 수렴하여 표준 코딩 규격을 빌드해 준다는 점이다.

전체 시스템은 정보 수집부터 에이전트 격리 분할, 그리고 플러그인 패키징 및 원격 마켓플레이스 연동으로 이루어지는 순환 아키텍처로 맞물려 동작한다. 이 복잡다단한 흐름을 한눈에 조감할 수 있도록 다단계 라이프사이클을 구조화하면 다음과 같다.

 

 

3. 상세 가이드 및 심층 분석 (Detailed Guide)

3.1 1단계: skill-creator 실행 및 구체적 기능 정의

프레젠테이션 자동화 엔진을 만드는 첫 시작은 터미널 상에서 skill-creator 스킬을 기동하여 개발 규칙서인 SKILL.md를 뽑아내는 일이다. 기존 Anthropic 공식 도구를 사용한 단순 슬라이드 출력은 디자인 일관성이 떨어지고 터치 스와이프나 방향키 전환, 최적화된 마크다운 렌더링을 유연하게 처리하지 못하는 한계가 있었다.

이를 타개하기 위해 순수 HTML5 표준 명세와 최신 CSS 변수(Custom Properties), 모던 네비게이션 자바스크립트를 정밀하게 주입하기 위한 가이드라인 요청을 터미널에 입력한다.

# skill-creator 플러그인을 기동하여 나만의 웹 슬라이드 생성 스킬 구축 시작
> /skill-creator
"순수 HTML, CSS, JS만으로 동작하는 최고 수준의 프레젠테이션 웹 슬라이드 자동 생성 스킬을 설계해줘.
포함해야 하는 필수 사양은 다음과 같다:
1. CSS Snap Scroll 기술을 적용하여 정확히 100vh 단위로 섹션 스냅이 걸릴 것.
2. Left/Right, Up/Down 방향키 및 Space/Backspace 키 이벤트를 바인딩한 부드러운 스크롤 인터랙션.
3. 'F' 키를 통해 브라우저 자체의 전체화면(FullScreen) 토글 제어가 가능할 것.
4. 상단에는 뷰포트 스크롤과 유기적으로 동기화되는 슬라이드 진행 프로그레스 바(ProgressBar)를 배치할 것."

 

요청을 받은 Claude Code는 지정된 아키텍처 규칙을 분석하여 프로젝트 로컬 경로에 .claude/skills/web-slides/SKILL.md 문서를 컴파일한다. 이때 생성되는 SKILL.md는 아래와 같은 프론트매터 규격을 탑재하여 에이전트가 코드를 임의로 변경할 때 일관성을 유지할 수 있도록 안전장치를 마련한다.

---
name: web-slides
description: 가독성 높고 부드러운 전환이 포함된 고퀄리티 개발자 전용 HTML 웹 슬라이드 생성 스킬
keep-coding-instructions: true
---

# Web Slides Generation Rules
당신은 마크다운 기반의 원고를 아주 수려하고 세련된 HTML 프레젠테이션 파일로 변환하는 시니어 프론트엔드 엔지니어입니다.
코드를 빌드하거나 수정할 때, 반드시 아래의 설계 표준 및 코딩 패턴 규칙을 100% 준수해야 합니다.
...

 

3.2 2단계: 핵심 웹 슬라이드 템플릿 엔진의 아키텍처 분석

자동화 엔진이 최종적으로 완성하는 프레젠테이션 파일(slides-round4.html)의 핵심 구동부는 순수 웹 기술의 조화로 이루어져 있다. 외부 종속 라이브러리(Reveal.js 등) 없이 가볍고 일관된 동작을 구현하기 위해 채택한 3대 핵심 프론트엔드 기술을 심층 분석한다.

A. CSS Snap Scroll 레이아웃 기법

각 슬라이드가 브라우저 화면에 정확히 1대1 크기로 일치하고, 스크롤 동작 시 바운스 현상 없이 부드럽게 고정되도록 CSS 스냅 포인트를 배치한다.

html {
    height: 100%;
    /* Y축 방향으로의 강제 스냅 뷰포트 설정 */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

section.slide {
    height: 100vh;
    width: 100vw;
    /* 슬라이드의 상단 경계선을 기준으로 스냅을 정렬 */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

• 기술적 가치: 기존의 absolute 포지셔닝 기반 슬라이드는 화면 해상도 변화 시 폰트가 깨지거나 구조가 무너지는 한계가 있었다. 반면 scroll-snap-type은 브라우저 네이티브 렌더링 레벨에서 슬라이드 스크롤을 제어하므로 CPU 점유율이 획기적으로 낮아지고 모바일 터치 스와이프 환경까지 추가 코드 없이 정밀하게 커버한다.

 

B. 고성능 자바스크립트 키보드 및 스크롤 추적 루프

키보드 방향키 제어 시 브라우저가 기본적으로 가지고 있는 페이지 다운/업 거동을 제어하고, 실시간 스크롤 비율을 계산하여 상단 진행 바의 너비($W_{progress}$)를 아래 수식과 같이 동적으로 계산한다.

$$W_{progress} = \frac{Y_{scroll}}{H_{document} - H_{viewport}} \times 100\%$$

이 공식을 실시간 처리 장치와 키보드 바인딩 이벤트 리스너로 이식한 설계 구조는 다음과 같다.

class SlidePresentation {
    constructor() {
        this.slides = document.querySelectorAll('section.slide');
        this.progressBar = document.querySelector('.progress-bar');
        this.currentSlide = 0;
        
        this.init();
    }

    init() {
        this.setupKeyboardBindings();
        this.setupScrollTracking();
    }

    setupKeyboardBindings() {
        window.addEventListener('keydown', (e) => {
            // 브라우저 기본 포커스 스크롤 거동 무력화 및 제어권 장악
            if (['ArrowDown', 'ArrowRight', 'Space'].includes(e.key)) {
                e.preventDefault();
                this.goToSlide(this.currentSlide + 1);
            } else if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
                e.preventDefault();
                this.goToSlide(this.currentSlide - 1);
            } else if (e.key === 'f' || e.key === 'F') {
                this.toggleFullscreen();
            }
        });
    }

    setupScrollTracking() {
        window.addEventListener('scroll', () => {
            const scrollTop = window.scrollY;
            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
            const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
            
            // CSS 변수 또는 인라인 스타일 갱신을 통한 가속 최적화
            this.progressBar.style.width = `${progress}%`;
            
            // 현재 활성화된 슬라이드 인덱스 동적 판별
            const index = Math.round(scrollTop / window.innerHeight);
            if (index !== this.currentSlide) {
                this.currentSlide = index;
                this.updateNav(index);
            }
        });
    }

    goToSlide(index) {
        if (index >= 0 && index < this.slides.length) {
            this.slides[index].scrollIntoView({ behavior: 'smooth' });
        }
    }

    toggleFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen()
                .catch(err => console.error(`전체화면 전환 실패: ${err.message}`));
        } else {
            document.exitFullscreen();
        }
    }
}

 

3.3 3단계: 로컬 스킬을 팀 공유용 플러그인(Plugin)으로 격상하기

프로젝트 저장소 내에 보관된 .claude/skills/ 파일들은 단순 '로컬용 지침'이다. 이를 다수의 다른 독립 프로젝트에서 라이브러리처럼 호출하고 패키징하기 위해, Claude Code 규격의 플러그인(Plugin) 형태로 마이그레이션을 단행해야 한다.

플러그인 체계로의 안전한 전환을 위해, 아래 디렉토리 아키텍처와 패키지 신분증 역할을 수행하는 plugin.json 명세서를 구성한다.

web-slides-plugin/
├── .claude-plugin/
│   └── plugin.json       <-- 플러그인 정보 명세서
└── skills/
    └── web-slides/
        └── SKILL.md      <-- HTML 슬라이드 생성 규칙 지침서

plugin.json의 구성 명세는 다음과 같이 간결하고 직관적으로 작성해야 에이전트의 구문 분석 엔진이 버전 스펙을 혼동하지 않는다.

{
  "name": "web-slides",
  "description": "순수 웹 표준 기술 기반 고화질 HTML 프레젠테이션 생성 자동화 플러그인",
  "version": "1.0.4",
  "author": "coding_whale"
}

 

3.4 4단계: 엔터프라이즈 환경을 위한 사설 마켓플레이스 연동 및 배포

팀 내에 수십 명의 백엔드 및 인프라 엔지니어가 공존하고 수십 개의 독립 마이크로서비스 저장소가 분산 운영되는 환경에서, 개별적으로 소스 코드를 이식하여 관리하는 방식은 버전 파편화와 형상 관리 오염을 초래한다. 이를 원천 해결하기 위해 중앙 공유식 저장소를 선언하고 마켓플레이스 파일(marketplace.json)을 구축하여 배포 인프라를 수립해야 한다.

 

원격지 마켓플레이스의 뼈대가 될 marketplace.json 색인 파일의 구조는 다음과 같다.

{
  "name": "corporate-claude-hub",
  "owner": "organization-infrastructure-team",
  "plugins": [
    "web-slides"
  ]
}

이 배포 구조가 완성되면, 팀 내 신입 개발자나 완전히 독립된 외부 인프라 관리자도 자신의 로컬 터미널에서 단 두 줄의 명령만으로 동일한 강력한 프레젠테이션 자동화 도구를 즉시 가동할 수 있게 된다.

# 1. 사내 표준 공유 마켓플레이스 저장소를 자신의 Claude 에이전트에 동기화
> /plugin marketplace add [https://github.com/my-org/claude-plugins](https://github.com/my-org/claude-plugins)

# 2. 검증이 완료된 고성능 슬라이드 자동 생성기 툴 플러그인 원격 다운로드
> /plugin install web-slides

 

4. 실무 팁 및 예외 상황 대응 (Tips & Notes)

4.1 크롬/사파리 스냅 스크롤 렌더링 끊김 현상 해결

모바일 디바이스나 일부 구형 사파리 브라우저 환경에서 CSS scroll-snap-type이 걸린 화면을 마우스 휠이나 스와이프로 급격히 스크롤할 때, 브라우저 스레드 점유율 문제로 섹션 중앙 정렬이 일시적으로 어긋나는 이탈 현상이 발생할 수 있다.

이 경우 CSS에 물리적인 가속 처리를 유도하고, JS의 scrollIntoView 휠 이벤트를 상호 차단함으로써 해결할 수 있다.

section.slide {
    /* 하드웨어 가속 유도로 GPU 자원 활용 강제화 */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    /* 스냅 고정 시 바운스 현상 가두기 */
    backface-visibility: hidden;
}

 

4.2 컨텍스트 포화 및 토큰 낭비 방지 팁

Claude Code에 "템플릿 수정해줘"라고 포괄적인 명령을 내리면, 에이전트가 매번 수백 라인에 달하는 전체 HTML 소스 코드를 다시 생성하여 출력한다. 이는 사용자에게 불필요한 대기 시간을 줄 뿐만 아니라 엄청난 양의 API 입력/출력 토큰($Tokens_{io}$)을 소모하게 만들어 비용 폭탄의 주범이 된다.

이를 예방하기 위해, SKILL.md 내부 지침서에 다음과 같은 '지능적 분리 치환 프로토콜(Selective Replacer)' 규칙을 강제로 명시해야 한다.

[TO_THE_AGENT]: HTML 코드의 특정 UI나 내부 JS 함수 하나만 리팩터링해야 하는 상황이라면, 전체 파일을 다시 출력하지 마십시오.
반드시 수정 대상 파일에서 변경이 일어난 함수나 CSS 클래스 블록의 전후 5라인을 포착하여 '부분 치환(Partial Patch)' 형태로 응답 코드를 작성해야 합니다.
예:
<<<<<<< ORIGINAL
function init() { ... }
=======
function init() { // 최적화된 초기화 루프 수행 ... }
>>>>>>> UPDATED

• 효과: 이 통제 지침이 스킬에 탑재되면, 한 번 코드를 작성할 때 소모되던 토큰 비용을 최소 $70\%$ 이상 획기적으로 절감할 수 있으며, 응답 렌더링 속도 역시 크게 향상된다.

 

4.3 전체화면(FullScreen API) 보안 차단 오류 대응

브라우저의 표준 보안 명세에 따라, 사용자의 직접적인 마우스 클릭이나 키보드 타이핑 등 '명시적인 사용자 제어 이벤트(User Gesture Active)'의 흐름 바깥에서 코드가 강제로 requestFullscreen()을 호출하면 브라우저 보안 샌드박스가 이를 불법 악성 하이재킹으로 간주하여 즉시 무력화 처리를 해버린다.

따라서 전체화면 모드를 구현할 때는 타이머(setTimeout)나 로딩 완료 이벤트(DOMContentLoaded) 시점에 자동으로 전체화면으로 들어가게 설계하는 방식을 절대 지양하고, 반드시 아래 코드 구조처럼 물리 키보드 바인딩 컨텍스트 내부로 완전히 격리해서 묶어두어야 오류가 생기지 않는다.

// ❌ 보안 샌드박스로 인해 차단 및 예외 발생 유발 코드
document.addEventListener('DOMContentLoaded', () => {
    document.documentElement.requestFullscreen(); // 브라우저 차단!
});

//  반드시 실제 물리 제어 신호 내부에서 트랜스미션 처리
window.addEventListener('keydown', (e) => {
    if (e.key === 'f' || e.key === 'F') {
        document.documentElement.requestFullscreen(); // 정상 수행 허용
    }
});

 

 

5. 마무리 (Conclusion)

Claude Code의 skill-creator 및 에이전트 병렬 서브시스템을 융합한 나만의 웹 PPT 생성기 자동화는 반복적인 슬라이드 제작에 드는 물리적 리소스를 획기적으로 줄여주는 실용적인 자동화 성과물이다. 한 걸음 더 나아가, 이렇게 정제된 핵심 스킬 자산을 재사용 가능한 플러그인 패키지로 승격시키고, 이를 조직 전역의 원격 사설 마켓플레이스로 전파 및 통제하는 파이프라인 구조는 현대적 관점에서의 'AI 인프라 자산화 및 운영 기법'의 강력한 템플릿을 보여준다.

🏷️ 관련 태그 (10가지) #ClaudeCode #Anthropic #SkillCreator #웹PPT #SubAgent #플러그인 #마켓플레이스 #HTML프레젠테이션 #생산성자동화 #개발자학습노트