Guizang Social Card Skill: 코딩 에이전트로 매거진풍 소셜 카드를 만드는 스킬

9bow · 6월 11, 2026, 12:30오전

Guizang Social Card Skill 소개

Guizang Social Card Skill은 Claude Code, Codex처럼 셸 접근이 가능한 코딩 에이전트(coding agent) 환경에서 동작하는 에이전트 스킬(agent skill)입니다. 글, 카피, 스크린샷, 제품 노트, 자막, 사진 같은 입력을 받아 샤오훙수(Xiaohongshu/RED) 캐러셀 이미지와 위챗(WeChat) 21:9 + 1:1 커버 쌍 같은 소셜 카드를 만들어 줍니다. 글 한 편을 그대로 피드에 올릴 카드 한 세트로 바꾸는 작업을 에이전트에게 맡기는 것이 핵심입니다.

이 스킬은 하나의 워크플로 안에 두 가지 비주얼 시스템을 담고 있습니다. 하나는 Monocle · Kinfolk · Cereal 잡지의 정제된 레이아웃을 따르는 에디토리얼(Editorial) 스타일로, 스토리텔링이나 라이프스타일·여행·독서·영화 같은 주제에 어울립니다. 다른 하나는 그리드 우선, 단일 앵커 색상, 얇은 헤어라인, 극단적인 타입 대비를 특징으로 하는 스위스 인터내셔널(Swiss International) 스타일로, 제품 리뷰·데이터·프레임워크·튜토리얼·AI 도구 소개에 적합합니다.

기술적으로는 단일 파일 HTML을 Playwright로 렌더링해 PNG로 떨어뜨리는 방식을 택했습니다. 별도의 프런트엔드 빌드 파이프라인 없이 node render.mjs 한 번으로 이미지가 나옵니다. 저자는 이 방식이 에이전트 친화적이라고 설명하는데, HTML과 CSS는 텍스트이므로 에이전트가 직접 쓰고 읽고 수정하고 검증할 수 있기 때문입니다.

Guizang Social Card Skill의 구성 요소

소셜 카드는 정해진 규격과 레이아웃 안에서 만들어집니다. 카드 크기는 세 가지로, 샤오훙수 3:4용 .poster.xhs (1080×1440), 위챗 21:9용 .poster.wide (2100×900), 위챗 1:1용 .poster.square (1080×1080) 입니다.

레이아웃과 테마도 미리 정해진 묶음에서 고릅니다. 레이아웃 스켈레톤은 에디토리얼 16종(M01~M16, Image-Led Cover·Pipeline·Before/After 등)과 스위스 12종(S01~S12, KPI Tower·H-Bar Chart·Matrix + Hero 등)을 합쳐 28종이 있습니다. 테마 프리셋은 에디토리얼 6종(Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, 다크 테마 Midnight Ink)과 스위스 앵커 색상 4종(IKB Klein Blue, Lemon, Lemon Green, Safety Orange)을 합쳐 10종입니다. 저자는 "커스텀 hex 색상은 허용하지 않는다" 고 못 박는데, 자유로운 색 선택보다 시각적 일관성을 지키는 것이 스킬의 핵심 가치라고 보기 때문입니다.

이미지 소싱에도 규칙이 있습니다. 사용자가 제공한 이미지를 가장 먼저 쓰고, 없으면 Unsplash → Pexels → Flickr CC → Wallhaven → 직접 검색 순으로 폭포식으로 내려가며 로컬에 내려받은 뒤 SOURCES.md 를 자동 생성합니다. 이 밖에 풀블리드 이미지에 마스크를 강제하고 인물·제품 영역을 피하는 이미지 오버레이 규칙(references/image-overlay.md), 스크린샷 미화용 텍스처 배경 9종, MapLibre + OSM 기반 지도 컴포넌트가 포함됩니다.

Guizang Social Card Skill의 동작 방식

스킬은 구조화된 7단계 워크플로로 동작합니다. 에이전트는 입력 수집(Intake), 스타일·테마 선택, 레이아웃 선택, 에셋 준비(이미지 소싱 + SOURCES.md 작성), 조합·렌더링(node render.mjs), 전달·검토, 반복(Iterate)의 순서를 밟습니다. 6단계 전달 시점에는 먼저 PNG를 보여 주고, 사용자가 직접 볼지 검증기를 돌릴지 물어보며 자동으로 검증을 돌리지 않습니다.

품질은 정적 스캔이 아니라 Playwright의 실제 렌더링 측정으로 확인합니다. validate-social-deck.mjs 는 영역이 카드를 벗어나는 오버플로(R1), 타입 크기·굵기 상한 위반(R2), 푸터·페이지 번호와의 충돌(R3), 1440 높이 캔버스를 4개 밴드로 나눈 밀도 부족(R4), 프레임 오버플로(R5), 그리고 스위스 템플릿에서 "클수록 얇아진다" 규칙을 어기는 굵은 글꼴(R6)을 잡아냅니다.

node validate-social-deck.mjs path/to/task-dir

저자가 정리한 설계 원칙에는 "화려함보다 절제", "장식보다 구조", "자유보다 레이아웃", "클수록 얇아진다" 같은 항목이 들어 있습니다. 포화된 피드에서는 절제된 팔레트가 오히려 눈에 띄고, 그림자나 카드 장식이 아니라 타입·대비·그리드가 위계를 만든다는 관점입니다.

Guizang Social Card Skill 설치 및 사용

설치는 한 줄 명령으로 끝납니다. 셸 접근이 가능한 에이전트에 붙여 넣거나, 직접 git clone 으로 스킬 디렉토리에 받아도 됩니다.

# 한 줄 설치 (권장)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

# 또는 수동 설치
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

설치하면 Claude Code가 스킬을 자동으로 감지하며, "샤오훙수 캐러셀 만들어 줘", "스위스 스타일 리뷰 카드 만들어 줘" 같은 표현으로 호출됩니다. 에이전트에게 다음처럼 구체적으로 요청할 수 있습니다.

이 글로 스위스 스타일 샤오훙수 캐러셀을 IKB 블루로 5장 만들어 줘.
이 글을 위챗 커버 쌍으로 만들어 줘: 21:9 히어로 + 1:1 공유 카드, 시각적으로 일관되게.

플랫폼별로는 Claude Code와 Codex가 정식 지원되고, Cursor 등 파일 읽기·쓰기와 셸 실행이 가능한 로컬 에이전트에서도 동작합니다. 다만 파일 시스템과 렌더링 파이프라인이 없는 일반 챗봇 환경은 권장되지 않습니다.

Guizang Social Card Skill의 라이선스

Guizang Social Card Skill은 AGPL-3.0 라이선스로 공개되어 있습니다. AGPL-3.0은 카피레프트(copyleft) 라이선스로, 저작권 고지를 유지해야 하고, 수정본·포크·재배포를 포함한 파생 저작물도 동일한 AGPL-3.0(또는 호환 라이선스)으로 전체 소스를 공개해야 합니다. 특히 코드를 배포하지 않고 SaaS나 웹 서비스로만 운영하는 경우에도 소스 공개 의무가 발생한다는 점이 일반 GPL보다 엄격합니다. 상업적으로 활용하려는 경우 이 조건을 먼저 확인하는 것이 좋습니다.

Guizang Social Card Skill 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다!
텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다.

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~