Claude Code로 카드뉴스 만들기 — 10분 만에 인스타 카드뉴스 자동 제작하는 방법

Figma, Canva 없이 카드뉴스 만드는 방법을 찾고싶었어요.

카드뉴스를 만들 때 피그마나 캔바를 활용했는데요.
템플릿을 정해두고 자동화를 한다고하더라도 맘에 드는 이미지나 글을 위해서는 휴먼터치가 필요했고, 100% 자동화를 하기엔 퀄리티가 맘에 들지않는 경우가다반사였습니다.

Claude Code 카드뉴스 스킬은 터미널에서 주제를 입력하면 기획부터 PNG 이미지 변환까지 자동으로 처리하는 커스텀 스킬입니다. Canva나 Figma를 열 필요 없이, Claude Code가 카드별 HTML을 직접 설계하고 1080x1350px PNG로 뽑아줍니다.

카드뉴스를 만들어야 할 때마다 같은 루틴이 반복됐어요.

ALT

다양한 항목이 포함된 웹사이트의 스크린샷

Canva 열기 → 템플릿 고르기 → 텍스트 바꾸기 → 색상 맞추기 → 장당 미세 조정

→ 5장이면 30분, 7장이면 1시간.

디자인 베이스가 아니라서 만들 때마다 "이거 괜찮나?" 하면서 미세하게 고치다 시간을 다 써버렸습니다.

어느 날 생각했어요. "Claude Code한테 '이 주제로 카드뉴스 만들어줘'라고 말하면 바로 PNG가 나오면 안 되나?"

그래서 만든 게 /card-news 스킬이에요. 주제를 알려주면 기획 → HTML 작성 → PNG 변환 → ZIP 압축까지 한 번에 끝나는 워크플로우입니다. 지금까지 5세트, 총 30장 넘게 뽑았고, 한 세트 만드는 데 10분이면 돼요.

Claude Code 카드뉴스 스킬이란?

Claude Code 카드뉴스 스킬은 인스타그램용 카드뉴스를 자동으로 만들어주는 Claude Code 커스텀 스킬입니다.

터미널에서 /card-news를 호출하고 주제를 알려주면, Claude가 알아서 기획하고, 카드별로 HTML을 짜고, Puppeteer로 PNG 이미지를 뽑아서, ZIP으로 묶어줍니다.

입출력을 정리하면 이래요:

결과물 스펙:

• 1080 x 1350px (인스타 4:5 비율)

• 베이지 배경 + 주황 포인트 톤

• 카드마다 다른 레이아웃 (채팅 버블, 코드 블록, 구조도 등)

• 2배 해상도 렌더링 (Retina 대응)

여기까지 오는 데 3번의 시도가 있었어요.

v0 — 그냥 HTML 파일 하나 만들었어요 (2월)

처음엔 스킬 같은 거 없이, Claude에게 "카드뉴스 HTML 만들어줘"라고 해서 파일 하나를 받았습니다.

한 HTML 안에 카드 5장이 쭉 나열되어 있는 형태. 브라우저에서 열어보고, 마음에 드는 부분을 수동으로 스크린샷 찍었어요.

문제가 바로 보였습니다:

1. 한 파일에 다 들어있으니 카드별로 PNG 추출이 안 됨

2. 수동 스크린샷이니까 크기가 매번 달라짐 (1080px이어야 하는데 1076px이 되기도 하고)

3. 디자인 기준이 없으니 Claude가 매번 다른 색상, 다른 폰트를 씀

쓸 수는 있었지만, "이걸 반복하면 귀찮겠다"는 게 명확했어요.

v1 — JSON으로 자동화해볼까? → 실패

"그러면 구조화하면 되지 않나?"

카드 내용을 JSON으로 정의하고, 빌드 스크립트(build.mjs)가 자동으로 HTML을 생성하는 방식을 시도했어요.

비개발자 분들을 위해 쉽게 설명하면, 레시피(JSON)를 적으면 자동 요리 기계(빌드 스크립트)가 요리를 만들어주는 구조예요.

카드 데이터(JSON) → 자동 변환기(build.mjs) → HTML → PNG

이론적으로는 완벽했는데, 결과물이 처참했습니다.

모든 카드가 똑같은 레이아웃이에요. 제목 위치 같고, 본문 위치 같고, 아이콘 위치 같고. 5장을 넘기면 "이거 파워포인트 아니야?" 하는 느낌.

카드뉴스의 핵심은 카드마다 비주얼이 달라야 한다는 건데, 자동화가 오히려 그걸 막고 있었어요.

배운 것: 자동화할 수 있다고 해서 자동화해야 하는 건 아니다. 특히 비주얼이 핵심인 콘텐츠에서는.

v2 — 자동화를 포기하고, 대신 가드레일을 세웠어요

여기서 발상을 완전히 바꿨어요.

"Claude가 카드마다 자유롭게 HTML을 짜되, 지켜야 할 규칙만 정해주자."

남긴 자동화: capture.mjs (PNG 변환)

자동화를 완전히 포기한 건 아니에요. 기계적이고 반복적인 단계 하나만 남겼습니다.

capture.mjs는 폴더 안의 card-01.html, card-02.html... 파일들을 찾아서, Puppeteer(브라우저 자동화 도구)로 열고, 정확히 1080x1350px 크기로 스크린샷을 찍어서 PNG로 저장합니다. 마지막에 전부 ZIP으로 묶어줘요.

비유하자면 .. ~

capture.mjs = 사진관 자동 촬영 부스

HTML 파일들을 줄 세워놓으면, 한 장씩 들어와서 정확히 같은 크기로 사진을 찍어줘요. 사람이 찍으면 매번 각도가 달라지는데, 부스가 찍으면 100장이든 똑같은 품질이 나옵니다.

세운 가드레일: 디자인 시스템

Claude에게 자유를 주되, 넘으면 안 되는 선을 정했어요. 이게 SKILL.md에 적힌 디자인 규격입니다.

색상 — 4개만 써

처음에 Claude가 파란색, 초록색, 보라색을 마음대로 쓰길래 "색을 너무 많이 쓰지마, 조잡해"라고 피드백했고, 그게 규칙이 됐어요.

레이아웃 — 매번 달라야 해

카드마다 다른 비주얼을 쓰라는 규칙도 넣었어요. 채팅 버블, 파일 트리, 코드 블록, 구조도, 타임라인 등 10가지 비주얼 레퍼토리를 만들어서, Claude가 내용에 맞는 걸 골라 쓰도록 했습니다.

기타 가드레일들:

• 본문 텍스트는 최소 26px (모바일에서 안 읽히면 의미 없으니까)

• 콘텐츠는 수직 중앙 배치 (상단에 붙으면 허전해 보여서)

• 카드당 텍스트 2~3줄 + 시각 요소 (너무 많으면 PPT, 너무 적으면 정보 부족)

• 주황색은 accent에만 (넘버링, 아이콘에 남발하면 촌스러움)

이 규칙들은 전부 실제 결과물을 보고 피드백한 것들이에요. 처음부터 규격을 정한 게 아니라, 만들고 → "이건 별로" → 수정 → 규칙화하는 사이클을 반복해서 나온 겁니다.

실전 — 이 구조로 5세트를 만들었어요

ALT

한국어 텍스트가 있는 한국어 웹사이트

v2 구조가 잡힌 뒤로 실전에서 계속 써봤습니다.

체감 효율

이전 (Canva): 주제 정하기 → Canva 열기 → 템플릿 찾기 → 5장 각각 편집 → 미세 조정 → 내보내기. 30분~1시간.

이후 (스킬): /card-news 호출 → 작성글 기반으로 기획 요청 → 기획 확인 → 완성. 10분.

시간만 줄어든 게 아니라 디자인 일관성이 올라갔어요. 가드레일 덕분에 매번 같은 톤앤매너가 유지되니까, 5세트를 나란히 놓아도 "같은 브랜드에서 만든 거구나" 하는 느낌이 납니다.

수정이 필요할 때

"3번째 카드 제목 바꿔줘"라고 하면 해당 HTML만 수정하고 capture.mjs를 다시 돌리면 돼요. 전체를 다시 만들 필요가 없으니까 수정 비용이 거의 없습니다.

3번 갈아엎으며 배운 것

1. 자동화 ≠ 퀄리티

가장 큰 교훈이에요. JSON으로 구조화하면 퀄리티가 올라갈 줄 알았는데, 오히려 떨어졌습니다.

카드뉴스처럼 비주얼이 핵심인 콘텐츠는 카드마다 레이아웃이 달라야 하는데,
자동화는 그걸 "균일하게" 만들어버려요. 발표자료랑 카드뉴스의 차이가 바로 이거예요.

결론적으로 자동화는 기계적인 단계에만 적용해야 합니다. 우리 스킬에서는 "HTML을 PNG로 변환하는 것"만 자동화하고, "어떤 비주얼을 쓸지"는 Claude의 판단에 맡겼어요.

2. 피드백 루프가 디자인 시스템을 만든다

디자인 시스템을 처음부터 완벽하게 설계한 게 아니에요.

결과물 확인 → "색이 너무 많아" → 4톤으로 제한
결과물 확인 → "위에 너무 붙어있어" → 수직 중앙 정렬
결과물 확인 → "텍스트가 너무 작아" → 최소 26px
결과물 확인 → "주황을 여기저기 쓰니까 촌스러워" → accent에만 사용

실제로 만들고 → 눈으로 보고 → 피드백하고 → 규칙화하는 사이클을 반복하니까, 자연스럽게 디자인 시스템이 만들어졌어요. "일단 만들어보고 고치는 게 최고"라는 건 디자인에서도 통합니다.

3. 스킬의 적절한 추상화 수준

Claude Code 스킬을 만들 때 "어디까지 규칙으로 적고, 어디부터 Claude에게 맡길까?"가 핵심이에요.

가드레일은 품질 하한선을 보장하고, 자유도는 창의적 결과물을 만듭니다. 둘 다 필요해요.

이 구조, 다른 콘텐츠에도 쓸 수 있어요

카드뉴스 스킬의 구조를 요약하면 이래요:

SKILL.md (가드레일 + 워크플로우)
  ↓
Claude가 자유롭게 작업
  ↓
자동화 스크립트 (기계적 변환)
  ↓
결과물

이 패턴은 카드뉴스뿐 아니라 비주얼이 중요한 모든 콘텐츠 자동화에 적용할 수 있어요. 프레젠테이션, 인포그래픽, 이메일 뉴스레터 디자인 등. 핵심은 "규칙은 세우되 레이아웃은 맡긴다"예요.