Claude Code 커스텀 스킬로 게시글 작성, 스크린샷까지 자동화한 과정

매번 똑같은 작업을 반복하고 있었어요

ALT

햄스터 두 마리가 바퀴 위에서 놀고 있다

콘텐츠를 생성할 때마다 반복되는 루틴이 있었습니다.

영어 아티클을 읽고, 핵심을 추출하고, 한국어로 재구성하고, SEO 키워드를 넣고, 나만의 인사이트를 추가하고. 한 편 쓸 때마다 1~2시간. 그리고 매번 "이전에 어떤 톤으로 썼더라?" "키워드는 어디에 넣었더라?" 하면서 이전 글을 뒤적거렸습니다.

어느 순간 생각했습니다. "이 워크플로우를 Claude Code에 통째로 가르칠 수 없을까?"

그게 Claude Code 커스텀 스킬이었고, 이 글은 /post라는 스킬을 직접 만들면서 겪은 과정을 그대로 기록한 제작기입니다. SKILL.md 파일 하나로 게시글 작성을 자동화한 실전 사례입니다.

커스텀 스킬이 뭔가요?

Claude Code 커스텀 스킬은 Claude에게 업무 매뉴얼을 주는 것입니다.

.claude/skills/스킬이름/SKILL.md 파일에 마크다운으로 워크플로우를 적으면,
Claude가 해당 상황에서 자동으로 그 매뉴얼을 따릅니다.

헷갈리기 쉬운 개념들을 정리하면 이렇습니다.

스킬의 핵심 특징 3가지:

• 평소에는 컨텍스트를 차지하지 않음 — 메타데이터(이름, 설명)만 로드

• 필요할 때만 전체 내용을 읽음 — /스킬이름으로 호출하거나 관련 작업 감지 시 자동 로드

• 마크다운만으로 동작 — 별도 코딩 불필요

1단계: 내 워크플로우를 종이에 적었습니다

가장 먼저 한 건 평소 게시글 작성 과정을 분해하는 것이었습니다.

원문 읽기 → 핵심 추출 → 글 형태 결정 → SEO 키워드 조사
→ 제목 짓기 → 본문 작성 → 인사이트 추가 → 저장

이 흐름을 그대로 SKILL.md의 Step으로 옮겼습니다.

여기서 핵심은 "머릿속 판단 과정"까지 적는 것입니다. "원문이 뉴스면 브리핑 템플릿, 비교 글이면 비교 분석 템플릿을 쓴다" — 이런 암묵적 판단을 Claude는 못 하기 때문에, 전부 명시해줘야 합니다.

2단계: 입력 방식 분기 — "원문이 뭘로 올지 모른다"

게시글 원문은 형태가 제각각입니다. URL일 수도, 텍스트 복붙일 수도, 유튜브 링크일 수도, 스크린샷일 수도 있습니다. 각 입력 방식에 따라 어떤 도구를 쓸지 SKILL.md에 명시했습니다.

### 입력 방식
- **URL**: WebFetch로 원문 가져오기
- **유튜브 URL**: WebFetch로 자막 추출
- **텍스트**: 직접 분석
- **파일 경로**: Read로 파일 읽기
- **이미지/스크린샷**: Read로 이미지 분석

이렇게 적어두면 Claude가 "URL이 들어왔으니 WebFetch를 써야겠다"라고 알아서 분기합니다.

3단계: 템플릿 5종 — 글의 뼈대를 미리 만들었습니다

매번 글 구조를 새로 짜는 게 가장 큰 시간 낭비였습니다. 자주 쓰는 구조를 5가지 템플릿으로 표준화했습니다.

각 템플릿에 H 태그 구조, 필수 섹션, 문구 예시까지 적어뒀습니다.
Claude가 템플릿을 따라가기만 해도 일정 수준 이상의 구조가 보장됩니다.

4단계: SEO 리서치 자동화 — 키워드 조사를 Claude에게 맡겼습니다

이전에는 직접 구글 트렌드에 검색하면서 키워드를 뽑았습니다. 이걸 SKILL.md에 3줄로 자동화했습니다.

WebSearch로 3가지 검색을 자동 수행:
1. "[주제] trend 2026" — 트렌드 키워드
2. "[주제] 활용법 OR 사용법 OR 사례" — 한국어 롱테일
3. "site:gpters.org [주제]" — 지피터스 기존 글 중복 체크

Claude가 WebSearch를 3번 호출하고, 키워드를 정리하고, 제목 후보 3개를 제안합니다.
저는 고르기만 하면 됩니다!

5단계: "한 발 더" 섹션 — 차별화 포인트를 강제했습니다

단순 번역/요약 글과 차별화하기 위해, 모든 게시글 마지막에 "생각해볼 지점" 섹션을 넣도록 SKILL.md에 강제했습니다. AI가 정리해준 콘텐츠만 복붙해서 내보내기에는 화룡점정 .. 부족하다고 느꼈어요.

인사이트 유형을 5가지로 분류해서 Claude가 상황에 맞는 걸 고르도록 했습니다.

유형을 정해두면 Claude가 "여기서는 '예측' 유형이 어울리겠다"라고 판단해서 적절한 인사이트를 생성합니다.
저는 해당 인사이트로 claude code와 대화하며 저만의 생각이 담긴 인사이트 섹션을 완성하게됩니다!

7단계: Playwright로 이미지 캡처까지 — 가장 최근 업그레이드

이미지가 있어야 SEO 성과도 좋아지는데요.
"스크린샷이 있으면 훨씬 좋겠다"는 생각이 들었습니다.

그래서 Playwright로 원문 URL의 스크린샷을 자동 캡처하는 기능을 스킬에 추가했습니다.
동작 방식은 이렇습니다.

원문 URL 입력 → Playwright 스크립트 자동 생성 → 히어로 + 콘텐츠 영역 캡처
→ 게시글에 마크다운 이미지로 삽입 → 임시 스크립트 자동 삭제

코드는 단순합니다.

import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto(url, { waitUntil: 'networkidle' });
await page.screenshot({ path: 'hero.png' });

이 몇 줄로 원문 페이지의 스크린샷이 게시글에 자동으로 들어갑니다.
글에 시각 자료가 추가되니 가독성이 확 올라갔습니다.

최종 결과물: 폴더 구조

.claude/skills/post/
├── SKILL.md                    # 스킬 본체 (460줄)
└── examples/                   # 작성된 게시글 + 캡처 이미지
    ├── 2026-02-09-*.md
    ├── 2026-02-10-*.md
    ├── 2026-02-11-*.md
    ├── 2026-02-12-*.md
    └── claude-use-cases-*.png  # Playwright 캡처 이미지

SKILL.md 하나와 examples/ 폴더가 전부입니다. examples/에 이전 글이 쌓이면서
Claude가 스타일을 참고하는데, 글을 쓸수록 톤과 구조가 일관되는 효과가 있습니다.

핵심 팁 3가지:

• description을 구체적으로 — Claude가 언제 이 스킬을 로드할지 판단하는 기준입니다

• 도구 사용법을 명시 — "WebSearch로 검색해라", "Read로 파일 읽어라" 등

• 예시를 넣어라 — 추상적 지시보다 구체적 예시가 훨씬 효과적입니다

또는 description에 적은 키워드를 말하면 자동으로 로드됩니다.

스킬 제작에서 느낀 3가지

1. 암묵지를 형식지로 바꾸는 경험 자체가 가치 있습니다.

"SEO 키워드는 제목에 넣고, 도입부 100자 이내에 한 번 더 쓰고, 본문에 3~5회 자연스럽게 넣는다" — 머릿속에만 있던 노하우를 마크다운으로 적는 순간, 재현 가능한 시스템이 됩니다. Anthropic이 공식 skill-creator 스킬을 제공하지만, 직접 만들면서 "내 워크플로우를 분해하는 과정" 자체가 핵심이었습니다.

2. examples/ 폴더가 Few-shot 학습을 만듭니다.

새 글 작성 시 Claude가 이전 글을 참고합니다. 4번째 글은 1번째 글보다 확실히 "내 글" 같았습니다. 파일 시스템 위에서 자연스럽게 Few-shot learning이 일어나는 구조입니다.

3. 스킬은 한 번 만들고 끝이 아닙니다.

글을 쓸 때마다 부족한 규칙이 보이고, 그때마다 SKILL.md를 고칩니다. Playwright 캡처도 글 쓰다가 "사진이 있으면 좋겠는데?" 해서 즉석으로 추가했어요. 앞으로도 고도화해볼 예정입니다.