LESSON 04

이미지 카드 자동 생성

HTML 템플릿 하나로 모든 비율

오늘의 목표

브랜드 색·글꼴이 고정된 HTML 카드 템플릿을 만들고, variants.json의 후크·포인트로 채널별 비율의 이미지를 스크립트로 생성합니다.

예상 소요 시간 약 50분

내 컴퓨터:

이미지는 디자인이 아니라 템플릿입니다

용어 한 줄: HTML 템플릿은 글자 자리만 비워둔 웹 페이지 한 장입니다. {{hook}} 같은 자리표시자에 글을 끼워 넣고, Playwright(자동 브라우저)가 그 화면을 사진으로 찍어 이미지 파일로 만듭니다.

매번 디자인 도구를 여는 대신, HTML 한 장을 스크린샷으로 찍어 이미지를 만듭니다. HTML은 Claude Code가 가장 잘 다루고, 데이터만 바꿔 넣으면 100장도 같은 품질로 나옵니다.

만들 카드는 세 종류입니다.

종류용도비율
인용 카드후크 한 줄 + 브랜드1:1, 4:5, 16:9
캐러셀포인트 3개를 3~5장으로1:1 또는 4:5 × N
링크 카드원본 썸네일 + 제목1.91:1

따라하기 1: 브랜드 값 정하기

#12 프롬프트 4-1🔴 고급

templates/brand.json을 만들어줘: 배경색, 글자색, 강조색 각 1개(내 블로그/로고 색: [#…]), 글꼴(Pretendard), 로고 텍스트 또는 파일(assets/logo.png), 하단에 넣을 핸들(@내아이디).

색이 없다면 홈페이지 만들기 6강의 방법으로 세 가지만 정하세요.

따라하기 2: 템플릿

#13 프롬프트 4-2🔴 고급

templates/quote.html을 만들어줘. brand.json 값을 쓰고, {{hook}}, {{handle}} 자리표시자. 1080×1080 기준. 여백 넉넉히, 강조색은 한 곳에만.

#14 프롬프트 4-2b🔴 고급

quote.html을 같은 템플릿에서 클래스만 바꿔 1080×1350(4:5)과 1920×1080(16:9)에도 대응되게 해줘. 후크 글자는 길이에 따라 자동으로 줄어들게 (최대 3줄).

#15 프롬프트 4-3🟢 초급

templates/carousel.html도 만들어줘. 표지(제목) + 포인트 슬라이드(번호, 한 줄 제목, 두 줄 설명) + 마지막(CTA, 핸들). 1080×1350.

🧪 실습

  • templates/quote.html을 브라우저에 끌어 놓아(또는 열어) 카드 모양이 보이는 것을 확인했다
  • brand.json의 색·핸들이 내 것으로 바뀌어 있다

따라하기 3: 렌더링 스크립트

#16 프롬프트 4-4🔴 고급

scripts/render-cards.py를 만들어줘.

  • posts/XXX/variants.json을 읽어 채널별로 필요한 카드를 결정 (channels.json의 image_ratio, image_count)
  • 템플릿에 값을 넣고 Playwright로 해당 크기 스크린샷 → cards/{채널}-{번호}.png
  • 한글 글꼴이 깨지지 않게 폰트 파일을 직접 로드
  • 결과 목록과 각 파일 크기를 출력

실행은 클로드 데스크탑 Code 탭에서 이렇게 시키세요.

scripts/render-cards.py를 posts/2025-01-camping-chair에 대해 실행해서 카드를 만들어줘. 만들어진 파일 목록도 알려줘.

권한 요청에 뜬 명령을 읽고 수락합니다. 에러가 나면 그대로 "이거 고쳐서 다시 해줘"라고 맡기면 됩니다. 아래 Windows/Mac 안내는 그런 에러가 났을 때 참고하세요.

터미널로도 할 수 있어요

python3 scripts/render-cards.py posts/2025-01-camping-chair

Playwright 브라우저가 없다는 에러가 나면 python -m playwright install chromium. 폰트가 네모로 나오면 templates에서 폰트 경로가 C:\… 절대경로인지 확인 — Claude에게 "폰트를 상대경로로, file:// 로 로드하게".

같은 에러면 python3 -m playwright install chromium. 렌더 결과 글자가 흐리면 "deviceScaleFactor 2로 찍고 원래 크기로 줄여줘".

🧪 실습

  • cards/ 폴더에 채널별 png가 생긴 것을 열어 확인했다
  • 글자가 네모(□)로 깨지지 않고 한글이 제대로 보인다
  • 후크 글자가 3줄 안에 다 보인다

따라하기 4: 검수 ⏸

cards/를 열어 봅니다. 확인할 것:

  • 후크가 3줄 안에 다 보이는가 (잘리면 후크를 줄이거나 글자 크기 조정)
  • 인스타 4:5에서 위아래 여백이 어색하지 않은가
  • 강조색이 한 곳에만 쓰였는가
  • 핸들과 로고가 작지만 읽히는가

수정은 템플릿에서. "quote.html의 후크 글자를 8% 키우고 아래 여백을 늘려줘" → 다시 렌더.

더 해보기(선택): 사진을 배경으로

원본에 사진이 있으면 카드 배경으로:

#17 프롬프트 4-5🟢 초급

quote.html에 {{bg_image}} 옵션을 추가해줘. 있으면 사진을 어둡게 깔고 그 위에 글자. 없으면 지금처럼 단색.

variants.json의 채널 항목에 bg_image: "../sources/img/01.jpg"를 넣으면 됩니다. 인스타는 사진 배경, 링크드인은 단색 — 이런 채널별 기본값도 channels.json에 넣을 수 있습니다.

Code 탭에서는 이렇게 시키세요.

바뀐 파일을 "카드 템플릿과 렌더 스크립트"라는 메시지로 커밋해줘.

권한 요청에 뜬 명령(git add, git commit)을 읽고 수락합니다.

터미널로도 할 수 있어요

git add .
git commit -m "카드 템플릿과 렌더 스크립트"

🧪 실습

  • 템플릿을 한 번 이상 고쳐서 다시 렌더링하고, 전후 이미지를 나란히 봤다
  • 카드 4:5 버전에서 위아래 여백이 어색하지 않은지 확인했다
  • "카드 템플릿과 렌더 스크립트" 커밋을 했다

오늘의 체크리스트

  • brand.json, quote.html, carousel.html이 있다
  • render-cards.py가 채널별 비율로 카드를 만든다
  • 카드를 눈으로 검수하고 템플릿을 한 번 이상 고쳤다
  • 커밋했다

다음 강의

5강, 예약 발행. variants와 카드를 스케줄러에 올리고 시간표에 배치합니다.