블로그 글 내용을 이미지 카드로 자동 변환하는 스킬을 만듭니다.
1. 옵션 선택
이미지 카드의 비율과 크기를 정합니다. 아래 프롬프트의 초록색 부분을 고른 크기로 바꿔 쓰면 됩니다. 기본값은 16:9 (1200×675)입니다.
카드 비율 / 크기
16:9 — 블로그 썸네일, 유튜브
1:1 — 인스타그램, 링크드인
9:16 — 인스타 스토리, 쇼츠
4:3 — 프레젠테이션
2. 이미지 카드 스킬 만들기
아래 프롬프트를 복사해서 코워크에 붙여넣으세요. 위에서 선택한 옵션이 초록색 부분에 반영되어 있습니다.
코워크에 입력 (핵심 프롬프트)
현재 폴더에 image-card-maker라는 이름의 스킬을 만들어줘. 스킬 이름: image-card-maker 스킬 설명: 블로그 글을 분석해서 이미지 카드를 생성하는 스킬 스킬이 실행되면 다음 순서로 동작해야 해: 1. 사용자가 지정한 .md 파일을 읽는다 2. 글 내용을 분석해서 이미지 카드 기획을 한다 - 몇 장의 슬라이드로 나눌지 결정 - 각 슬라이드의 제목, 핵심 내용, 배치 구성을 정리 - 전체 색상 테마와 디자인 방향을 결정 3. 기획 내용을 주제명 폴더 안에 "원본파일명_카드기획.md" 파일로 저장한다 4. 기획대로 모든 슬라이드를 하나의 HTML 파일로 코딩한다 - 모든 카드를 하나의 HTML 파일에 포함 - 각 카드는 1200x675px 크기의 개별 섹션으로 구성 - HTML의 viewport 메타 태그를 반드시 설정할 것: <meta name="viewport" content="width=1200"> - 깔끔하고 읽기 쉬운 디자인 - 한국어 웹폰트 적용 (Pretendard 또는 Noto Sans KR) - 각 카드 섹션에 고유한 id를 부여 (slide-1, slide-2, ...) 5. HTML 파일에서 각 카드 섹션을 개별 이미지(PNG)로 캡처해서 저장한다 6. 최종 결과물을 주제명 폴더 안의 "이미지/" 폴더에 정리한다 - cards.html (전체 HTML) - slide_01.png, slide_02.png, ... (개별 이미지)
.claude/skills/image-card-maker/SKILL.md 파일이 생성되었으면 다음으로
3. 이미지 카드 생성하기
스킬을 실행해서 글의 이미지 카드를 만듭니다. 상황에 맞는 프롬프트를 복사해서 사용하세요.
기본 요청
AI_업무_활용_5가지_방법 이미지 카드 만들어줘
슬라이드 수 지정
AI_업무_활용_5가지_방법 이미지 카드 5장으로 만들어줘
스타일 지정
AI_업무_활용_5가지_방법 이미지 카드 만들어줘. 파란색 테마로, 아이콘 많이 사용해줘
4. 결과물 확인
스킬이 실행되면 다음과 같은 파일들이 생성됩니다.
📁 생성된 파일 구조
실제 파일 수는 슬라이드 수에 따라 달라집니다
AI_업무_활용_5가지_방법/
주제 폴더
AI_업무_활용_5가지_방법.md
본문
AI_업무_활용_5가지_방법_카드기획.md
기획서
이미지/
cards.html
전체 HTML
slide_01.png
이미지
slide_02.png
이미지
…
cards.html 파일을 브라우저에서 열면 모든 이미지 카드를 한눈에 미리 볼 수 있습니다. 수정이 필요하면 “2번 슬라이드 제목을 바꿔줘”처럼 요청하세요.
5. 글쓰기 스킬에 연결하기
글 작성 후 매번 따로 이미지를 만들기 번거롭다면, blog-writer 스킬에 자동으로 이미지 카드를 만들도록 연결할 수 있습니다.
코워크에 입력 (스킬 수정 프롬프트)
blog-writer 스킬을 수정해줘. 변경사항: 글 작성이 완료되면 자동으로 image-card-maker 스킬을 실행해서 이미지 카드를 생성하고 해당 주제명 폴더 안의 이미지/ 폴더에 저장할 것
이렇게 연결하면 글 작성 → 사실 검증 → 이미지 카드 생성 → 저장이 한 번에 자동으로 진행됩니다.
이미지 카드 자동 생성 완성!
이제 글을 쓰면 첨부 이미지까지 자동으로 만들어집니다.
✍️ Claude로 블로그 글 작성하기7 / 8강