Claude Skills로 WeChat 공식 계정에 원클릭 게시

WeChat 공식 계정을 운영해 본 적이 있다면, 이런 경험이 있을 것입니다. 에디터에서 정성껏 레이아웃한 글을 공식 계정 관리 화면에 복사하면 서식이 완전히 깨집니다. 이미지는 하나하나 다시 업로드해야 합니다. 코드 블록은 일반 텍스트가 되어버립니다. 맞춰놓은 여백과 글꼴 크기도 다시 설정해야 합니다. 기술 글 하나를 게시하는 데 레이아웃 조정만으로 30분이 걸립니다.

저는 계속 Markdown으로 블로그를 써왔는데, 이 문제를 해결하기 위해 Claude Skills 기반의 자동 게시 워크플로를 구축했습니다. 이제 전체 프로세스는 "이 글을 공식 계정에 올려줘"라는 한마디면 됩니다. Claude가 렌더링, 레이아웃, 이미지 업로드, 초안 제출까지 모두 자동으로 완료합니다.

이 글에서는 구축 과정 전체를 기록합니다. 그대로 재활용할 수 있습니다.

Skills가 무엇인지 아직 모르시는 분은 먼저 "Claude Skills란 무엇인가"를 참고해 주세요. Skill의 생성과 사용 방법에 대해 더 알고 싶으시면 "Claude Skills 실전 가이드"를 참조하세요.

사전 조건

시작하기 전에 다음 조건이 갖춰져 있는지 확인하세요.

조건	설명
Claude Code	Claude Code CLI 설치가 필요합니다. 공식 설치 가이드
WeChat 공식 계정	인증된 공식 계정이 필요하며, AppID와 AppSecret을 취득해야 합니다
Node.js	런타임 환경. Skill 스크립트는 `npx -y bun`으로 실행됩니다

WeChat API 인증 정보 취득 경로: mp.weixin.qq.com 로그인 → 왼쪽 메뉴 "설정 및 개발" → "기본 설정" → 개발자 ID(AppID)와 개발자 비밀키(AppSecret)를 복사합니다.

주의: AppSecret은 리셋 시에만 한 번 표시됩니다. 반드시 안전하게 보관하세요. 또한 "기본 설정"에서 서버 IP를 화이트리스트에 추가해야 합니다.

Skill 설치

baoyu-post-to-wechat은 GitHub에서 호스팅되며, Claude Code의 Skill 설치 명령어로 원클릭 설치가 가능합니다.

claude skill install jimliu/baoyu-skills --skill baoyu-post-to-wechat

설치가 완료되면 프로젝트에 다음 파일 구조가 생성됩니다.

your-project/
├── .agents/skills/
│   └── baoyu-post-to-wechat/
│       ├── SKILL.md              # Skill 核心指令
│       ├── scripts/
│       │   ├── wechat-api.ts     # API 发布脚本
│       │   ├── wechat-browser.ts # 浏览器发布脚本
│       │   └── md/               # Markdown 渲染引擎
│       │       ├── render.ts
│       │       └── themes/       # 主题 CSS 文件
│       └── references/           # 详细参考文档
└── skills-lock.json              # Skill 版本锁定

skills-lock.json에는 설치된 Skill의 소스와 버전 해시가 기록되어, 팀 구성원이 동일한 버전을 사용하는 것을 보장합니다.

{
  "version": 1,
  "skills": {
    "baoyu-post-to-wechat": {
      "source": "jimliu/baoyu-skills",
      "sourceType": "github",
      "computedHash": "cb28e409..."
    }
  }
}

설정

설정은 API 인증 정보와 환경 설정의 2단계입니다.

API 인증 정보

.baoyu-skills/.env 파일을 생성하고, WeChat 공식 계정의 인증 정보를 입력합니다.

# 项目级配置（仅当前项目生效）
mkdir -p .baoyu-skills
cat > .baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

사용자 디렉토리에 배치하여 모든 프로젝트에서 공유할 수도 있습니다.

# 用户级配置（所有项目生效）
mkdir -p ~/.baoyu-skills
cat > ~/.baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

인증 정보 검색 우선순위: 환경 변수 > 프로젝트 레벨 .baoyu-skills/.env > 사용자 레벨 ~/.baoyu-skills/.env.

보안 주의: .baoyu-skills/.env에는 민감한 정보가 포함되어 있습니다. 반드시 .baoyu-skills/를 .gitignore에 추가하여 실수로 리포지토리에 커밋되지 않도록 하세요.

환경 설정(EXTEND.md)

.baoyu-skills/baoyu-post-to-wechat/EXTEND.md에서 기본 환경을 설정합니다. 제 설정은 다음과 같습니다.

# WeChat Publishing Preferences

## Default Settings

- default_theme: yudesk
- default_author: yux

지원되는 설정 항목:

설정 항목	기본값	설명
`default_theme`	`default`	렌더링 테마(default, grace, simple, yudesk)
`default_publish_method`	`api`	게시 방식(api 또는 browser)
`default_author`	비어 있음	기본 저자명
`need_open_comment`	`1`	댓글 활성화 여부
`only_fans_can_comment`	`0`	팔로워만 댓글 가능 여부

설정 우선순위: CLI 매개변수 > 글 frontmatter > EXTEND.md > Skill 기본값.

글 작성

표준 Markdown 형식으로 글을 쓰면 됩니다. 제 블로그는 MDX 커스텀 컴포넌트(BlogImage, QuoteCard, VideoEmbed 등)를 사용하고 있지만, Skill이 게시 시 자동으로 표준 Markdown으로 변환해 주므로 수동 처리가 필요 없습니다.

변환 규칙:

MDX 컴포넌트	변환 결과	예시
`<BlogImage>`	`![alt](src)` + 이미지 설명	이미지 + 이탤릭 caption
`<QuoteCard>`	`> 인용 내용 — 저자`	인용 블록
`<VideoEmbed>`	`> 🎬 동영상 제목 + 링크`	인용 블록 + 동영상 링크
`<ArticleCard>`	`> 📄 글 제목 + 링크`	인용 블록 + 글 링크
`<GlossaryCard>`	`> 📖 용어: 정의`	인용 블록
`<ProfileCard>`	`이름 — 역할`	볼드 텍스트

또한 블로그 내부 링크(/blog/..., /docs/...)는 자동으로 일반 텍스트로 변환되고, import/export 문은 제거됩니다. 즉, 블로그의 MDX 파일을 그대로 게시에 사용할 수 있어 두 개의 콘텐츠를 유지할 필요가 없습니다.

글의 frontmatter

글의 frontmatter에서 다음 필드가 게시에 사용됩니다.

---
title: 文章标题
author: 作者名
description: 文章摘要（用于公众号的文章摘要）
coverImage: cover.png  # 封面图（本地路径或 URL）
---

커버 이미지를 지정하지 않으면, Skill은 다음 순서로 검색합니다: frontmatter의 coverImage/featureImage/cover/image → 글 디렉토리의 imgs/cover.png → 글 내 첫 번째 이미지.

게시

모든 준비가 완료되면, 게시는 매우 간단합니다.

방법 1: 대화형 게시

Claude Code에서 직접 말합니다.

帮我把 content/blog/my-article.mdx 发到公众号

Claude가 자동으로 의도를 인식하고, baoyu-post-to-wechat Skill을 로드하여, 환경 설정 로드 → 파일 타입 판별 → HTML 렌더링 → 이미지 업로드 → 초안 제출 순서로 실행합니다.

방법 2: 커맨드라인 게시

스크립트를 직접 호출할 수도 있습니다.

npx -y bun .agents/skills/baoyu-post-to-wechat/scripts/wechat-api.ts article.md --author yux

지원되는 매개변수:

매개변수	설명
`--theme <name>`	테마: default, grace, simple, yudesk
`--author <name>`	저자명(최대 16자)
`--summary <text>`	글 요약(최대 128자)
`--cover <path>`	커버 이미지 경로
`--dry-run`	렌더링만 하고 게시하지 않음, 미리보기용

게시 프로세스 해설

게시를 실행하면 백그라운드에서 다음 단계가 실행됩니다.

Markdown 파일
    │
    ▼
① MDX 전처리: BlogImage → ![](), QuoteCard → blockquote ...
    │
    ▼
② Markdown 렌더링: marked 엔진 + highlight.js 코드 하이라이팅
    │
    ▼
③ 테마 적용: base.css + yudesk.css, CSS 변수 해석
    │
    ▼
④ CSS 인라인화: juice가 <style>을 inline style로 변환(WeChat 요구사항)
    │
    ▼
⑤ 이미지 업로드: <img>를 순회하여 WeChat CDN에 업로드, src 교체
    │
    ▼
⑥ 커버 처리: 커버 이미지 업로드, thumb_media_id 취득
    │
    ▼
⑦ 초안 제출: draft/add API 호출, 공식 계정 초안함에 저장

몇 가지 핵심 기술 세부사항:

CSS 인라인화: WeChat 공식 계정은 <style> 태그와 외부 스타일시트를 지원하지 않으므로, 모든 CSS를 요소의 style 속성에 인라인화해야 합니다. Skill은 juice 라이브러리를 사용하여 자동으로 처리하고, 동시에 CSS 변수(예: var(--md-primary-color) → #0F4C81)와 calc() 식을 실제 값으로 치환합니다.
이미지 업로드: WeChat은 글 내 모든 이미지를 WeChat CDN에 저장할 것을 요구합니다. Skill은 HTML 내 모든 <img> 태그를 순회하여, 로컬 이미지나 외부 URL 이미지를 WeChat 소재 라이브러리에 업로드한 후, WeChat CDN의 URL로 원본 src를 교체합니다.
브랜드 요소: 게시 시 브랜드 헤더 이미지와 푸터 이미지가 자동으로 추가되어 공식 계정 글의 비주얼 통일성이 유지됩니다.

고급편: 커스텀 테마

Skill에는 4개의 테마가 내장되어 있습니다: default(클래식), grace(엘레강스), simple(심플), yudesk(기술 블로그). 나만의 테마를 만들고 싶다면 themes/ 디렉토리에 CSS 파일을 추가하기만 하면 됩니다.

제가 사용하는 yudesk 테마를 예로 들면, 디자인 컨셉은 "간결, 전문적, 코드 친화적"입니다.

/* yudesk 主题核心样式 */

/* 标题：居中、深色 */
h1, h2 { text-align: center; color: #1a1a1a; font-weight: bold; }

/* 段落：适当字距，灰色文字 */
p { letter-spacing: 0.05em; color: #555; }

/* 引用块：左侧主色边线 */
blockquote { border-left: 3px solid var(--md-primary-color); background: var(--blockquote-background); }

/* 代码块：GitHub 风格，浅灰背景 */
pre.code__pre { background: #f6f8fa !important; border: 1px solid #e1e4e8; border-radius: 4px; }

/* 行内代码：主色调 */
code { color: var(--md-primary-color); background: rgba(15, 76, 129, 0.08); }

커스텀 테마 작성 절차:

.agents/skills/baoyu-post-to-wechat/scripts/md/themes/ 아래에 my-theme.css를 새로 생성합니다
yudesk.css를 참고하여 스타일을 작성합니다(h1~h6, p, blockquote, pre, code, table 등의 요소를 오버라이드)
EXTEND.md에서 default_theme: my-theme을 설정하거나, 게시 시 --theme my-theme을 지정합니다

테마 CSS에서 CSS 변수 var(--md-primary-color), var(--md-font-size) 등을 사용할 수 있으며, 렌더링 엔진이 CSS 인라인화 단계에서 자동으로 실제 값으로 치환합니다.

var(--md-primary-color) → #0F4C81
hsl(var(--foreground))  → #3f3f3f
calc(16px * 1.3)        → 21px

이 단계는 자동으로 수행되므로 수동 처리가 필요 없습니다.

전체 프로세스 요약

작성부터 게시까지의 완전한 프로세스:

단계	작업	설명
1. 글 작성	Markdown/MDX로 콘텐츠 작성	블로그의 MDX 컴포넌트 사용 가능, 자동 변환됩니다
2. Skill 설치	`claude skill install jimliu/baoyu-skills`	최초 1회만 필요
3. 인증 정보 설정	`.baoyu-skills/.env` 작성	최초 1회만 필요
4. 환경 설정	EXTEND.md 편집	선택사항, 기본 테마/저자 설정
5. 게시	"공식 계정에 올려줘" 또는 `npx -y bun ... wechat-api.ts`	원클릭으로 완료
6. 확인	mp.weixin.qq.com 로그인 → 콘텐츠 관리 → 초안함	미리보기 후 게시 클릭

글은 게시 후 공식 계정의 초안함에 저장됩니다(직접 게시되지 않음). 관리 화면에서 미리보기와 편집 후 정식으로 게시할 수 있습니다.

"Claude Skills란 무엇인가" -- Skills의 핵심 개념과 점진적 공개 아키텍처를 이해하기
"Claude Skills 실전 가이드" -- Skills의 활성화, 설치, 생성 모범 사례 배우기
"Claude Subagent 완전 가이드" -- Skills와 Subagents의 연계 사용 알아보기

Claude Skills로 WeChat 공식 계정에 원클릭 게시

사전 조건

Skill 설치

설정

API 인증 정보

환경 설정(EXTEND.md)

글 작성

글의 frontmatter

게시

방법 1: 대화형 게시

방법 2: 커맨드라인 게시

게시 프로세스 해설

고급편: 커스텀 테마

트러블슈팅

코드 블록의 모바일 줄바꿈

요약이 너무 길어 잘림

커버 이미지는 필수

CSS 변수 호환성

전체 프로세스 요약

관련 글

댓글