챕터별 상세
HTML/CSS 방식을 선택하는 이유와 장점
생성형 AI 이미지 도구는 텍스트나 레이아웃을 완벽하게 제어하기 어렵지만 HTML/CSS 방식은 폰트 크기, 컬러, 간격을 1픽셀 단위로 정밀하게 조정할 수 있다. 한 번 템플릿 코드를 작성해두면 데이터만 바꿔서 수백 장의 이미지를 동일한 품질로 생성 가능하다. Claude 구독자라면 별도의 유료 이미지 생성 API 비용 없이 무료로 무한 생성이 가능하다는 경제적 이점이 있다.
컨텍스트 수집 및 원문 자료 준비
카드 뉴스의 소재가 될 원문 데이터를 수집하기 위해 Claude Opus 4.7 업데이트 블로그 URL을 입력값으로 제공했다. Claude Code는 해당 링크의 내용을 읽어와 한국어로 번역하고 문장 구조를 유지한 채 마크다운 파일로 저장했다. 이 과정은 단순 복사가 아니라 AI가 카드 뉴스 제작에 적합하도록 핵심 요약과 번역을 동시에 수행하는 단계이다.
Plan Mode를 통한 제작 설계
구현에 앞서 인스타그램 규격인 4:5 비율(1080x1350)과 커버, 본문, CTA 카드로 구성된 전체 구조를 계획했다. Claude Code의 Plan Mode를 사용하여 필요한 HTML 파일 구조와 CSS 스타일 가이드를 사전에 정의했다. 무작정 코드를 생성하기보다 계획 단계를 거침으로써 토큰 소모를 줄이고 의도에 맞는 결과물을 얻을 확률을 높였다.
Plan Mode는 Claude Code가 실제 작업을 수행하기 전 단계별 실행 계획을 세우고 사용자에게 확인받는 모드이다.
카드 뉴스 HTML 생성 및 Playwright 캡처
Bypass Permission 모드를 활성화하여 8장의 카드 HTML 파일을 자동으로 생성하고 로컬 환경에 저장했다. 생성된 HTML은 브라우저에서 즉시 확인 가능하며 코드 편집기에서 텍스트 줄바꿈이나 폰트 크기를 수동으로 미세 조정했다. 이후 Playwright CLI를 실행하여 브라우저에 렌더링된 HTML 화면을 지정된 해상도의 PNG 이미지 파일로 일괄 변환했다.
Playwright는 웹 브라우저 자동화 라이브러리로, 여기서는 웹 페이지를 이미지로 캡처하는 용도로 사용되었다.
skill-creator를 이용한 워크플로우 스킬화
반복되는 작업을 자동화하기 위해 skill-creator 플러그인을 사용하여 '카드 뉴스 생성 스킬'을 등록했다. 기존에 수행했던 컨텍스트 수집, HTML 생성, 이미지 변환 로직을 하나의 스킬로 묶어 Claude Code가 기억하도록 설정했다. 이제 새로운 블로그 URL만 던져주면 사전에 정의된 디자인 스타일과 워크플로우에 따라 카드 뉴스가 즉시 생성된다.
Claude Code의 스킬은 특정 작업 흐름을 학습시켜 나중에 명령어 하나로 재실행할 수 있게 만드는 기능이다.
프로젝트 구조 리팩토링 및 실전 적용
여러 에피소드를 체계적으로 관리하기 위해 연도/월/일 기반의 디렉터리 구조로 프로젝트를 리팩토링했다. CLAUDE.md 파일에 프로젝트의 규칙과 구조를 명시하여 Claude Code가 작업 맥락을 항상 유지할 수 있도록 했다. 실제 테스트에서 새로운 링크를 입력하자 등록된 스킬이 작동하며 1분 내외의 짧은 시간에 완성된 카드 뉴스 이미지 세트가 생성됨을 확인했다.
CLAUDE.md는 해당 프로젝트의 가이드라인, 기술 스택, 규칙 등을 적어두어 AI가 참고하게 하는 설정 파일이다.
언급된 리소스
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 04. 21.수집 2026. 04. 21.출처 타입 YOUTUBE
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
