Communitygithub.com

ystherr/wechat-article-formatter-skill

๐ŸŽจ ๋งˆํฌ๋‹ค์šด์„ ์œ„์ฑ—(WeChat) ์•„ํ‹ฐํด์šฉ ์Šคํƒ€์ผ๋œ HTML๋กœ ํฌ๋งทํŒ…ํ•˜๋ฉฐ, ์ž๋™ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ์™€ ์ตœ์ ์˜ ๊ฐ€๋…์„ฑ์„ ์œ„ํ•œ ์ปค์Šคํ…€ CSS๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

wechat-article-formatter-skill๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์ด ์Šคํ‚ฌ์€ ๋งˆํฌ๋‹ค์šด ๋ฌธ์„œ๋ฅผ ์œ„์ฑ— ๊ฒŒ์‹œ๊ธ€์— ์ตœ์ ํ™”๋œ HTML๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋‚˜ ์ฝ˜ํ…์ธ  ํฌ๋ฆฌ์—์ดํ„ฐ๊ฐ€ ๋งˆํฌ๋‹ค์šด์œผ๋กœ ์ž‘์„ฑํ•œ ๊ธ€์„ ์œ„์ฑ— ๊ณต์‹ ๊ณ„์ •(์˜คํ”ผ์…œ ์–ด์นด์šดํŠธ)์— ๋ฐ”๋กœ ๋ฐœํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ด๋ฏธ์ง€ ์ž๋™ ์—…๋กœ๋“œ์™€ ์ปค์Šคํ…€ CSS ์Šคํƒ€์ผ๋ง์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ฃผ์š” ๊ธฐ๋Šฅ์œผ๋กœ๋Š” ๋งˆํฌ๋‹ค์šด ๋ณธ๋ฌธ์˜ ์ด๋ฏธ์ง€๋ฅผ ์œ„์ฑ— CDN์— ์ž๋™ ์—…๋กœ๋“œํ•˜๊ณ , ๊ตฌ๋ฌธ ๊ฐ•์กฐ, ์ธ์šฉ๊ตฌ, ๋ฆฌ์ŠคํŠธ ๋“ฑ ์œ„์ฑ— ์—๋””ํ„ฐ์—์„œ ํ‘œํ˜„ํ•˜๊ธฐ ์–ด๋ ค์šด ์š”์†Œ๋“ค์„ CSS๋กœ ๋ณด๊ธฐ ์ข‹๊ฒŒ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. Claude Code, Cursor, Codex ๋“ฑ ๋‹ค์–‘ํ•œ AI ์—์ด์ „ํŠธ ํ”Œ๋žซํผ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ธฐ์กด ๋งˆํฌ๋‹ค์šด ๋ฌธ์„œ๋ฅผ ์œ„์ฑ— ๋ฐœํ–‰ ํ˜•์‹์œผ๋กœ ๋น ๋ฅด๊ฒŒ ์ „ํ™˜ํ•ด์•ผ ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํžˆ ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ ๊ฒฝ๋กœ๋ฅผ ์ œ๊ณตํ•˜๋ฉด ์Šคํ‚ฌ์ด ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•˜์—ฌ ๋ณต์‚ฌ ๊ฐ€๋Šฅํ•œ HTML์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์ง€์› ๋Œ€์ƒ~Claude Code~Codex CLI~Cursor
npx skills add ystherr/wechat-article-formatter-skill

์ฆ๊ฒจ ์‚ฌ์šฉํ•˜๋Š” AI์—๊ฒŒ ๋ฌผ์–ด๋ณด๊ธฐ

์ด ์—์ด์ „ํŠธ ์Šคํ‚ฌ์ด ๋ฏธ๋ฆฌ ๋กœ๋“œ๋œ ์ƒˆ ์ฑ„ํŒ…์„ ์—ฝ๋‹ˆ๋‹ค.

๋ฌธ์„œ

wechat-article-formatter-skill์€(๋Š”) ๋ฌด์—‡์„ ํ•˜๋‚˜์š”?

๐ŸŽจ ๋งˆํฌ๋‹ค์šด์„ ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ ์œ„์ฑ— ์•„ํ‹ฐํด์šฉ HTML๋กœ ํฌ๋งทํŒ…ํ•˜๋ฉฐ, ์ž๋™ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ์™€ ์ตœ์ ์˜ ๊ฐ€๋…์„ฑ์„ ์œ„ํ•œ ์ปค์Šคํ…€ CSS๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ์š”

์ด ์Šคํ‚ฌ์€ ๋งˆํฌ๋‹ค์šด ๋ฌธ์„œ๋ฅผ ์œ„์ฑ— ๊ณต์‹ ๊ณ„์ •(WeChat Official Account) ๊ฒŒ์‹œ๊ธ€์— ์ ํ•ฉํ•œ HTML๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์ธ ๋งˆํฌ๋‹ค์šด ๋ณ€ํ™˜๊ธฐ์™€ ๋‹ฌ๋ฆฌ, ์ด ์Šคํ‚ฌ์€ ์œ„์ฑ— ์—๋””ํ„ฐ์˜ ์ œ์•ฝ์‚ฌํ•ญ์„ ๊ณ ๋ คํ•œ ์Šคํƒ€์ผ๋ง์„ ์ ์šฉํ•˜๋ฉฐ, ์ด๋ฏธ์ง€๋ฅผ ์ž๋™์œผ๋กœ ์—…๋กœ๋“œํ•˜๊ณ  CSS๋ฅผ ํ†ตํ•ด ๊ฐ€๋…์„ฑ์„ ๋†’์ž…๋‹ˆ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ

  • ๋งˆํฌ๋‹ค์šด โ†’ ์œ„์ฑ— HTML ๋ณ€ํ™˜: ํ—ค๋”, ๋ฆฌ์ŠคํŠธ, ์ฝ”๋“œ ๋ธ”๋ก, ์ธ์šฉ๊ตฌ ๋“ฑ ์ฃผ์š” ๋งˆํฌ๋‹ค์šด ์š”์†Œ๋ฅผ ์œ„์ฑ— ์นœํ™”์ ์ธ HTML๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
  • ์ž๋™ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ: ๋ฌธ์„œ ๋‚ด ์ด๋ฏธ์ง€ URL์„ ์œ„์ฑ— CDN์— ์ž๋™์œผ๋กœ ์—…๋กœ๋“œํ•˜๊ณ  ์ตœ์ข… HTML์— ํฌํ•จ์‹œํ‚ต๋‹ˆ๋‹ค.
  • ์ปค์Šคํ…€ CSS: ์œ„์ฑ— ์•„ํ‹ฐํด์—์„œ ๊ฐ€๋…์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ์‚ฌ์ „ ์ •์˜๋œ CSS ์Šคํƒ€์ผ์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์ฝ”๋“œ ๊ตฌ๋ฌธ ๊ฐ•์กฐ: ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ฝ”๋“œ ๋ธ”๋ก์— ๋Œ€ํ•œ ๊ตฌ๋ฌธ ๊ฐ•์กฐ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

์ด ์Šคํ‚ฌ์€ ๋‹ค์Œ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

  • Claude Code
  • Cursor
  • Codex
  • ๊ธฐํƒ€ AI ์—์ด์ „ํŠธ ํ”Œ๋žซํผ

๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•:

# ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ์„ ๋ณ€ํ™˜ํ•˜์—ฌ ์œ„์ฑ— HTML ์ƒ์„ฑ
wechat-format input.md

์˜ต์…˜:

์˜ต์…˜์„ค๋ช…๊ธฐ๋ณธ๊ฐ’
--css์ปค์Šคํ…€ CSS ํŒŒ์ผ ๊ฒฝ๋กœ๊ธฐ๋ณธ ๋‚ด์žฅ CSS
--no-images์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ๋น„ํ™œ์„ฑํ™”false
--output์ถœ๋ ฅ ํŒŒ์ผ ๊ฒฝ๋กœstdout

์„ค์ •

ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ๋˜๋Š” ์„ค์ • ํŒŒ์ผ์„ ํ†ตํ•ด ๋‹ค์Œ ํ•ญ๋ชฉ์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

  • WECHAT_APP_ID: ์œ„์ฑ— ์•ฑ ID
  • WECHAT_APP_SECRET: ์œ„์ฑ— ์•ฑ ์‹œํฌ๋ฆฟ
  • WECHAT_ACCESS_TOKEN: ์œ„์ฑ— ์•ก์„ธ์Šค ํ† ํฐ (์„ ํƒ ์‚ฌํ•ญ)

์ถœ๋ ฅ ์˜ˆ์‹œ

๋ณ€ํ™˜๋œ HTML์€ ์œ„์ฑ— ์—๋””ํ„ฐ์— ์ง์ ‘ ๋ณต์‚ฌํ•˜์—ฌ ๋ถ™์—ฌ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ ์ตœ์ข… ๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

  • ์ œ๋ชฉ์€ ์œ„์ฑ— ์Šคํƒ€์ผ์— ๋งž๊ฒŒ ์กฐ์ •๋ฉ๋‹ˆ๋‹ค.
  • ์ฝ”๋“œ ๋ธ”๋ก์€ <pre><code> ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ง€๋ฉฐ ๊ตฌ๋ฌธ ๊ฐ•์กฐ๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.
  • ์ด๋ฏธ์ง€๋Š” ์œ„์ฑ— CDN URL๋กœ ๊ต์ฒด๋ฉ๋‹ˆ๋‹ค.
  • ๋งํฌ๋Š” ์œ„์ฑ—์—์„œ ์ง€์›๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  ์‚ฌํ•ญ

  • ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ๋ฅผ ์œ„ํ•ด์„œ๋Š” ์œ ํšจํ•œ ์œ„์ฑ— ์•ก์„ธ์Šค ํ† ํฐ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ณ€ํ™˜๋œ HTML์€ ์œ„์ฑ— ๊ณต์‹ ๊ณ„์ • ์—๋””ํ„ฐ์—์„œ๋งŒ ์ตœ์ ์˜ ๊ฒฐ๊ณผ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ๋Œ€์šฉ๋Ÿ‰ ๋ฌธ์„œ์˜ ๊ฒฝ์šฐ ์ฒ˜๋ฆฌ ์‹œ๊ฐ„์ด ๋‹ค์†Œ ์†Œ์š”๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ผ์ด์„ ์Šค

MIT

๊ด€๋ จ ์Šคํ‚ฌ