Claude Code 플러그인 마켓플레이스를 만들어보자

Lightning Tech Talk — 15 min

오늘의 여정

1
왜 만들었나 — oh-my-cloud-skills 2min
2
플러그인 구조 & 하네스 엔지니어링 3min
3
Remarp 프레임워크 — 프레젠테이션 혁신 3min
4
VSCode Extension 개발기 3min
5
또박(Ttobak) — 동료와 함께 일하기 2min
6
마무리 & 배운 점 2min

왜 만들었나?

😤
반복되는 고통
AI로 PPT 만들면 레이아웃이 깨짐
HTML 직접 작성하면 수정이 너무 어려움
아키텍처 다이어그램은 한땀한땀
고객 세션 준비는 항상 시간 부족
💡
플러그인으로 해결
SA 노하우를 Agent + Skill로 캡슐화
누구나 설치해서 바로 사용
팀 전체의 생산성 향상
지식이 코드로 축적

oh-my-cloud-skills

Claude Code Plugin Marketplace
aws-content-plugin
8 Agents · 5 Skills
프레젠테이션, 다이어그램
문서, 워크숍
aws-ops-plugin
10 Agents · 6 Skills
EKS, 네트워크, IAM
모니터링, 스토리지
kiro-power-converter
1 Agent · 1 Skill
Claude → Kiro
플러그인 변환
kiro-review
1 Agent · 1 Skill
코드 리뷰, 보안 감사
Well-Architected 평가
/plugin marketplace add https://github.com/Atom-oh/oh-my-cloud-skills

하네스 엔지니어링

aws-content-plugin 하네스: PPT 제작 파이프라인

① PPTX 테마 추출
extract_pptx_theme.py
색상 · 폰트 · 로고 자동 추출
theme-override.css 생성
→ 회사 브랜드 자동 적용
② Rejection Loop
remarp_to_slides.py validate
7가지 규칙 자동 검증
CRITICAL → 빌드 차단
→ 레이아웃 깨짐 방지
③ Quality Gate
content-review-agent
100점 만점 자동 평가
85점 미만 → 배포 차단
→ 품질 기계적 보장
PPTX 제공 → Remarp 작성 → validate → review (≥85) → build ✓

하네스 엔지니어링이란?

"AI가 잘 달릴 수 있는 레일을 깔아주는 것"
📄
CLAUDE.md
프로젝트 컨텍스트 제공
빌드/테스트 명령어
코딩 컨벤션 정의
→ 매 세션 자동 로드
🪝
Hooks
PostToolUse: 빌드 경고 감지
SessionStart: 도메인 로드
자동 검증 파이프라인
→ 실수 자동 차단
🏆
Quality Gate
content-review-agent
100점 만점 평가 체계
85점 미만 배포 차단
→ 품질 보장 자동화
플러그인에서 활용되는 하네스
aws-content-plugin → Quality Gate (≥85점) aws-ops-plugin → PostToolUse 보안 감지 kiro-review → SessionStart 자동 로드

프레젠테이션 프레임워크

Marp의 한계 → Remarp 탄생

Reactive Markdown Presentation — 마크다운 → 동적 인터랙티브 HTML 생성
Marp 😕
✗ 프래그먼트 애니메이션 없음
✗ Canvas 애니메이션 불가
✗ 스피커 노트 제한적
✗ 인터랙티브 요소 불가
✗ 테마 커스터마이징 한계
→
Remarp ✨
✓ {.click} 인라인 프래그먼트
✓ ::: canvas DSL 애니메이션
✓ 풍부한 :::notes + 타이밍
✓ :::html + :::css + :::script 블록
✓ PPTX 테마 추출 + CSS
remarp_to_slides.py build → 마크다운을 동적 인터랙티브 HTML로 변환
레이아웃 타입 → @type: title · @type: content · @type: agenda · @type: 2column · @type: left · @type: right

Rejection Loop — AI의 공간 추론 한계 극복

✍️
Remarp 작성
마크다운 편집
→
🔍
validate
7가지 규칙 검증
→
🚨
CRITICAL?
오버플로우, 겹침
→
🏗️
build
HTML 생성
🔴 CRITICAL (빌드 차단)
CONTENT_OVERFLOW: 불릿 8개 이상
CANVAS_OVERLAP: 요소 겹침
CANVAS_COMPLEXITY: 시각 요소 8개+
🟡 WARNING (검토 권장)
INTERACTIVE_FIRST: 카드/탭 미사용
MISSING_NOTES: 스피커 노트 누락
STATIC_HTML: fragment 없는 HTML

개발기

Remarp VSCode Extension

Markdown Preview
.remarp.md 실시간 렌더링
슬라이드 파싱 → HTML 변환
사이드바: 노트 + 이슈 배지
←→ 키보드 네비게이션
HTML Preview
빌드된 HTML 직접 로드
리소스 경로 → webview URI
CSP 자동 주입
remarp-source 메타 연결
PPT-like 비주얼 편집 모드
드래그
요소 위치 이동
리사이즈
크기 조절
속성 패널
폰트/색상/마진
Cmd+Shift+E 또는 슬라이드 위 Edit 버튼 → 변경사항이 :::css / :::canvas 블록에 자동 기록
이슈 어노테이션 시스템
1
사이드바 프롬프트 바에서 이슈 입력 → <!-- issue: 텍스트 --> 자동 삽입
2
노란 배지로 시각화 → × 버튼으로 개별 제거 가능
3
Claude Code에서 /slide-fix → AI가 이슈 읽고 자동 수정 후 어노테이션 제거

함께 일하는 방식

📝
미팅 중 — 같은 기록을 공유
한 명이 녹음하면 실시간 자막 + 번역이 팀 전체에 공유. 미팅 끝나면 AI 요약이 SA와 AM에게 동일하게 전달됩니다.
✅
미팅 후 — 액션 아이템이 명확
AI가 대화에서 액션 아이템을 추출하고 담당자를 제안합니다. "네가 하는 거 아니었어?" 가 사라집니다.
🔍
고객 미팅 전 — 같은 맥락으로 준비
고객사 뉴스 크롤링 + AI 브리핑이 팀 KB에 자동 축적. AM이 발견한 기회를 SA가 기술로 뒷받침하는 흐름이 자연스러워집니다.
🔗
도구 연결 — Claude Code에서 미팅 데이터 접근
MCP Server로 연동하면 Claude Code에서 "지난 미팅에서 고객이 요청한 아키텍처가 뭐였지?" 같은 질문을 바로 할 수 있습니다.

또박(Ttobak) — 왜 만들었나

SA + AM 협업을 위한 AI 미팅 어시스턴트
SA + AM 협업의 현실
미팅 끝나면 기억이 다름
액션 아이템 누가 맡았는지 불분명
고객사 맥락이 각자 머릿속에만 존재
뉴스/기술 동향을 따로따로 추적
고객 심층 조사도 각자 따로 수행
함께 쓰는 도구로 해결
미팅 녹음 → AI가 동일한 요약 공유
액션 아이템 자동 추출 + 담당자 지정
고객 인텔리전스를 팀 KB로 축적
뉴스 브리핑을 AM과 SA가 함께 확인
Deep Research Agent로 고객사 심층 분석
ttobak.atomai.click | Go + Next.js · 9 CDK Stacks · Bedrock Agent + Claude

배운 점

🎯
제약이 품질을 만든다
AI에게 자유를 주면 결과가 불안정합니다. Rejection Loop, Quality Gate, CLAUDE.md 같은 제약을 잘 설계하는 것이 핵심입니다.
🔄
Dogfooding의 힘
자기가 만든 도구를 직접 쓰면 개선점이 명확하게 보입니다. 이 발표도 Remarp로 만들면서 버그를 3개 잡았습니다.
📦
지식을 코드로 축적
노하우가 문서에 머물면 찾기 어렵습니다. Agent와 Skill로 캡슐화하면 팀 누구나 한 줄로 활용할 수 있습니다.
🤝
공유가 성장을 가속
혼자 쓰려고 만들었지만, 공유하니까 피드백으로 더 좋아졌습니다. 오늘 이 톡도 그 과정의 일부입니다.

감사합니다!

oh-my-cloud-skills
github.com/Atom-oh
또박(Ttobak)
ttobak.atomai.click
"만들어 보고, 직접 쓰고, 공유하자"
오준석 (Junseok Oh) · Sr. Solutions Architect · AWS