카드뉴스 에디터 고도화 — JSON 자동화와 Claude 스킬 제작 (2편)

📌 이 글 요약

프롬프트를 넣으면 JSON이 나오고, 에디터에 붙여넣으면 카드뉴스가 완성됩니다. Claude 스킬까지 만들면 스크린샷만 끼우면 끝입니다.

📋 목차

1. v2에서 v3로 — JSON 자동화 탭 추가
2. JSON 워크플로우 — 3단계로 끝나는 카드뉴스
3. Claude 스킬 제작 — 규칙을 기억하게 만들기
4. 2편 정리 — v1부터 스킬까지의 진화

1편에서 만든 v2 에디터는 쓸 만했습니다. 그런데 매번 제목, 설명, 태그를 손으로 입력해야 했습니다. 카드뉴스 4장이면 입력 항목이 최소 12개입니다.

블로그 글 하나 발행할 때마다 이 과정을 반복하다 보니 피로가 쌓였습니다. 그래서 Claude에게 이렇게 요청했습니다.

JSON을 붙여넣으면 전체 카드 내용이 자동으로 세팅되는 탭을 추가해줘.
프리셋 템플릿도 같이 넣어줘.

이 요청으로 v3에 추가된 기능은 세 가지입니다.

• JSON 임포트 탭 — JSON을 붙여넣으면 전체 카드 내용이 자동 세팅
• 프리셋 4종 — 수업자료 홍보 / 웹교구 소개 / 수업팁 / 자유 구조를 바로 불러오기
• 프롬프트 복사 버튼 — Claude에게 붙여넣을 JSON 생성 프롬프트 자동 복사

이 변화 하나로 작업 방식이 완전히 달라졌습니다. 항목 하나하나 직접 입력하던 방식에서, JSON 붙여넣기 한 번으로 끝나는 방식으로요.

지금 제가 쓰는 워크플로우는 이렇습니다.

JSON은 이렇게 생겼습니다. 카드 한 장 기준입니다.

{
  "cards": [
    {
      "theme": "purple",
      "tag": "학습지",
      "title": "헌법이란\n무엇인가",
      "desc": "통합사회 3단원\n기본권 핵심 정리",
      "caption": "",
      "layout": "center",
      "imgSlots": 1,
      "titleSize": 50,
      "descSize": 24,
      "footerText": "kstephullab.com"
    }
  ]
}

이 워크플로우로 카드뉴스 4장 제작 시간이 15분 → 3분으로 줄었습니다. 중요한 건 caption 필드입니다. 마지막 카드에 해시태그와 소개글을 미리 적어두면, 인스타에 올릴 때 복사 버튼 한 번으로 끝납니다.

JSON 자동화의 핵심은 포맷을 고정하는 것입니다. AI가 매번 조금씩 다른 형식으로 출력하면 에디터가 제대로 읽지 못합니다. 그래서 다음에 설명할 Claude 스킬이 필요합니다.

📎 에디터 제작 과정이 궁금하다면 → 1편: 바이브 코딩으로 에디터 만들기에서 확인하실 수 있습니다.

Claude 스킬이란 간단히 말하면 AI에게 주는 작업 매뉴얼입니다. SKILL.md 파일에 출력 규칙을 적어두면 Claude가 매번 그 규칙대로 JSON을 출력합니다.

스킬 없이 쓰면 이런 문제가 생깁니다. 오늘 Claude가 내놓은 JSON과 내일 내놓은 JSON이 조금씩 다릅니다. 제목이 12자를 넘거나, 태그가 5글자가 되거나, 줄바꿈 형식이 바뀌거나 합니다. 그러면 에디터가 읽지 못하거나 레이아웃이 무너집니다.

카드뉴스 JSON 스킬에 담긴 핵심 규칙은 이렇습니다.

# 카드뉴스 JSON 스킬 핵심 규칙

## 출력
- JSON 코드블록만 출력 (설명 문장 없음)
- 필드: theme / tag / title / subtitle / desc / caption
         layout / imgSlots / titleSize / descSize / footerText

## 제약
- 제목(title): 한 줄 최대 12자, \n으로 줄바꿈, 2줄 이내
- 태그(tag): 6글자 이내 (4자 권장)
- caption: 마지막 카드(CTA)에만 작성
  → 소개 한 줄 + 해시태그 5~10개 + kstephullab.com
- imgSlots: 스크린샷 필요한 카드만 1~4

## 이미지 크기
- imgScale: 10~300 (기본 100, 확대 가능)

## 테마 가이드
- 수업자료/교육: purple
- 기술/디지털: neon 또는 dark
- 따뜻한/소식: warm 또는 sunset
- 심플/전문: slate 또는 charcoal

스킬 설치 후에는 Claude에게 이렇게만 입력하면 됩니다.

카드뉴스: 수업자료 홍보
주제: 헌법 학습지
장수: 4

이 세 줄이면 에디터에 바로 붙여넣을 수 있는 JSON이 나옵니다. 캡션까지 포함해서요. 스킬은 한 번 만들어두면 다음 달, 내년에도 같은 품질로 계속 씁니다.

다음 편에서는 이 스킬 파일을 직접 공개합니다. 설치 방법 3단계와 실제 출력 JSON 예시까지 보여드립니다.

📎 스킬 파일 다운로드와 설치 방법은 → 3편: Claude 카드뉴스 스킬 공개에서 확인하실 수 있습니다.

v3에서 달라진 게 하나 더 있습니다. 인스타 캡션 입력란입니다. 카드 만들 때 해시태그와 소개글을 같이 써두면, 인스타에 올릴 때 복사 버튼 한 번으로 끝납니다. 작은 기능인데 매번 캡션을 따로 작성하던 시간이 없어졌습니다.

📎 Claude로 만드는 다양한 자동화 도구 사례 → AI 수업자료 제작기 허브

더 많은 AI 자동화 도구 제작 사례 보기

📌 나만의 카드뉴스 에디터 만들기 시리즈

• 1편: 바이브 코딩으로 에디터 만들기 — 프롬프트 2개 공개
• 2편 (현재): JSON 자동화와 Claude 스킬 제작 — 15분 → 3분
• 3편: Claude 카드뉴스 스킬 공개 — 누구나 쓸 수 있는 인스타 자동화
• 4편: JSON 대량 처리 자동 생성기 심화편 (예정)

풀어쓰는 사회학AI | 메인 허브 | AI 수업자료 제작기