AI를 이용한 일일 인스타그램 카드뉴스 요약 및 생성 자동화

작년부터 개발·운영 중인 록 음악 커뮤니티 리얼그루브는 매일 새로운소식에 업로드한 글들을 X(옛 트위터)에도 요약해 올리고 있다¹.

추가로 인스타그램에도 콘텐츠를 업로드해보려 했지만, 카드뉴스에 사용할 이미지 제작과 편집에 생각보다 많은 시간이 필요했다. 이미 글 작성, 개발, 유지보수를 혼자 진행하고 있는 상황이라 지속적으로 운영하기에는 부담이 컸고, 결국 사실상 방치 상태가 되었다.

그러던 중 클로드(Claude)를 이용해 인스타그램 카드뉴스를 만드는 영상을 보게 되었고, “매일 올리는 새로운소식을 카드뉴스 형태로 자동 제작하면 어떨까?”라는 생각이 들었고, 이후 실제로 구현과 운영까지 진행하게 되었다.

이 글에서는 인스타그램 카드뉴스 템플릿 선택부터 구현, 그리고 실제 카드뉴스 제작 과정까지 정리해보려 한다.

구현 결과 #

설명하기 앞서 구현 결과는 아래와 같다. (6월 5일자 카드뉴스)

제작 순서 #

앞서 언급한 영상을 참고해 카드뉴스를 아래와 같은 순서로 제작했다.

카드뉴스 내용을 담을 HTML 템플릿 제작
새로운소식 게시글을 클로드로 정리해 Markdown(.md) 생성
Markdown 내용을 기반으로 카드뉴스 HTML 생성
playwright를 이용해 HTML 페이지를 이미지로 캡처
생성된 결과 검수 후 인스타그램 업로드
템플릿 완성 후에는 2~5번 과정 반복

카드뉴스 제작에 사용할 글은 DB에서 직접 추출(Export)²했다.

카드뉴스 템플릿 제작 #

가장 먼저 클로드를 이용해 생성한 카드뉴스 내용을 담을 HTML 템플릿을 제작했다. 영상에서도 언급하듯이 HTML은 이미지보다 내용 입력과 수정이 쉽고, 세밀한 제어와 템플릿화에도 유리하다.

템플릿은 Canva에서 제공하는 무료 카드뉴스 템플릿 중 단순한 디자인을 참고해 아래와 같이 구성했다.

인스타그램 카드뉴스에서 많이 사용하는 1080x1350 비율 적용
제목, 본문, 해시태그, 로고 영역 구성
리얼그루브 웹사이트에서 사용하는 색상과 폰트 적용

기본적인 Cover, Cardnews, CTA 외에도 List 형태 템플릿을 추가로 제작했다. 금~토요일에는 국내외를 가리지 않고 앨범 발매나 공연 발표 등으로 업로드되는 소식 수가 많아지는데, 이 경우 모든 내용을 상세 카드로 만들기보다 제목 위주로 빠르게 정리하는 것이 최대한 많은 소식을 실을 수 있었기 때문이다.

마지막으로, 아래 이미지처럼 제작된 카드뉴스 전체를 한 화면에서 확인할 수 있는 검수 페이지( 구현결과 영역의 이미지)도 함께 구현했다.

AI를 이용한 카드뉴스 내용 제작 #

카드뉴스 내용은 매일 새로운소식 게시판 글을 클로드를 이용해 Markdown(.md) 파일 형태로 정리하도록 구성했으며,진행 과정은 아래와 같다.

새로운소식 제목, 본문, 해시태그, 작성일 목록 추출²
추출한 데이터를 클로드에 입력
클로드가 내용을 읽고 카드뉴스용 Markdown 생성

카드뉴스 제작은 제작 지시사항을 정리한 Skill 형태로 구성했으며, 주요 규칙은 아래와 같다.

문체: 토스 스타일의 해요체 사용 (~합니다, ~했습니다 와 같은 합쇼체 금지)
HTML Entity 디코딩:  , <, > 등을 실제 문자로 변환
Cover: 제목 및 헤드라인 5개 생성
Cardnews: 제목 요약, 300자 이내 본문 요약, 해시태그 생성
List: 명시적으로 요청한 경우에만 생성

추가로 인스타그램 업로드 시 사용할 게시글 캡션도 함께 생성하도록 구성했고, 생성된 내용은 Markdown 파일 마지막에 포함했다.

카드뉴스 HTML 생성 #

앞서 생성한 카드뉴스 내용이 저장된 마크다운 파일 내용을 기반으로 각각의 카드뉴스 HTML 파일을 생성했다. 이 과정 역시 앞서 미리 만들어둔 템플릿 HTML에 내용을 채워 넣는 방식으로 동작하도록 스킬로 만들어 사용하였다.

또한 검수 편의를 위해 카드뉴스 전체를 한 화면에서 확인할 수 있는 페이지도 함께 구성했다. 이 화면을 통해 들여쓰기, 줄바꿈, 문장 길이, 내용 추가·삭제 등을 최종 확인하고 수정했다.

생성한 HTML을 이미지로 캡처 #

완성된 카드뉴스 HTML은 인스타그램 업로드를 위해 이미지로 변환해야 했고, 이를 위해 playwright를 사용했다.

playwright는 Microsoft에서 개발한 브라우저 자동화 및 E2E 테스트 도구로, UI 없이 백그라운드에서 Chromium 실행 가능

각 카드뉴스 화면은 Chromium 브라우저의 Viewport 크기를 카드뉴스 크기와 동일한 1080x1350으로 설정한 뒤, screenshot 기능을 이용해 이미지로 캡처했다.

인스타그램 게시 #

최종 검수를 마친 카드뉴스 이미지를 인스타그램에 업로드하고, 함께 생성한 게시글 캡션을 추가하면 하루 카드뉴스 제작 과정이 완료된다.

추가 적용 #

카드뉴스 제작 자동화를 구성한 뒤 약 한 달 정도 운영하면서 몇 가지를 추가로 개선했다.

스킬 업데이트:
- 제목 길이를 줄이기 위해 밴드명의 영문 표기를 제거
- 카드뉴스에 맞게 문장 길이 및 표현 수정
- 치환: 뮤직비디오 → MV, N번째 스튜디오 앨범 → 정규 N집 등으로 변경
- 비속어 제외: F**k, Shit, Damn 등의 표현은 생략하거나 순화
Claude에 /harness 플러그인을 설치한 뒤, 카드뉴스 생성부터 이미지 제작, GitHub Push까지 단독으로 수행할 수 있는 스킬과 QA 에이전트 추가
- QA 에이전트는 생성된 HTML 카드뉴스가 앞서 정의한 규칙대로 작성되었는지 검증하고, 결과를 보고한 뒤 필요한 수정 작업까지 진행
영어 한글 표현 맞는지 검사 체크. 한글(English) 같은 형식일 경우 체크, 만타스(Mantas) 일 경우 통과, 만티스로 입력될 경우 사용자에게 알리고 진행하도록 추가

마치며 #

AI를 이용한 카드뉴스 제작 자동화 프로세스를 구현한 뒤 약 한 달 정도 운영해본 결과, 크게 수정이 필요한 부분은 없었다. 생각보다 AI가 핵심 내용을 잘 파악해 요약해주는 경우가 많아 그대로 사용하기도 했다.

물론 주제와 어긋나거나 문맥의 의미가 미묘하게 달라지는 경우도 있었는데, 이런 경우에는 직접 내용을 수정하거나 추가 지시를 통해 다시 생성하도록 했다.

이번 작업에서는 “사람이 하지 않아도 되는 작업은 최대한 줄이자”는 방향으로 접근했다. 완전 자동화도 가능했지만, 내용과 카드뉴스 레이아웃에 대한 최종 검수는 직접 진행했다. 그 결과 사람이 직접 카드뉴스 내용 제작, 이미지 편집 등 최소 1~2시간 정도 예상되는 작업을 약 30분 이내로 줄일 수 있었다.

또한 이미지 편집 툴 대신 HTML 기반으로 카드뉴스를 제작하면서 템플릿 재사용과 유지보수도 훨씬 수월해졌다. 개발자가 익숙한 방식으로 콘텐츠 제작 파이프라인을 구성할 수 있다는 점도 만족스러웠다.

현재는 새로운소식 글을 DB에서 JSON 형태로 직접 추출²해 입력 데이터로 사용하고 있다. 앞으로는 이 과정 역시 개선해, 별도의 데이터 추출 없이 프롬프트만으로 카드뉴스를 생성할 수 있는 형태도 시도해볼 생각이다. 그렇게 된다면 전체 제작 과정은 지금보다 훨씬 단순해질 것으로 예상된다.

스레드(Threads)도 운영했지만, X(옛 트위터)와 달리 반복 업로드로 메타 정책 위반에 걸려 운영 종료. ↩︎
새로운소식 글 내용 추출 기능을 구현하기 전까지 직접 추출하여 사용. ↩︎ ↩︎ ↩︎