소개
시도하고자 했던 것과 그 이유를 알려주세요.
인스타그램 등 소셜 미디어에서 정보성 콘텐츠(Listicle)를 전달할 때 가장 효과적인 포맷 중 하나가 카드뉴스입니다. 하지만 매번 카드뉴스를 기획하고, 텍스트를 줄이고, 디자인 툴을 열어 이미지를 만드는 과정은 생각보다 많은 시간과 노력이 소모됩니다.
그래서 이번에는 "피부가 좋아지는 5가지 습관"이라는 주제를 던져주면, AI가 알아서 기획, 카피라이팅, HTML 디자인 생성, 그리고 최종 PNG 렌더링까지 모두 자동으로 수행하는 프로세스를 구축해 보았습니다. 더 나아가, 한 번 성공한 이 프로세스를 앞으로 어떤 주제(예: 건강한 식습관, 코딩 팁 등)를 입력해도 동일하게 동작하도록 재사용 가능한 스킬(Skill)로 패키징하는 것까지 시도했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
이번 작업은 전적으로 Manus AI 에이전트를 활용하여 진행했습니다. Manus는 내장된 스킬 시스템, 샌드박스 내 파일 쓰기 및 셸 명령어 실행(Node.js, Playwright 등) 기능을 모두 갖추고 있어 하나의 채팅창 안에서 완벽한 자동화 파이프라인을 구축할 수 있었습니다.
1. 초기 카드뉴스 제작 프롬프트
먼저 기존에 내장된 카드뉴스 제작 스킬을 호출하여 피부 관련 콘텐츠를 만들었습니다.
사용한 프롬프트:
/card-news-black-and-white 이 스킬을 이용해서 피부가 좋아지는 다섯가지 습관에 대해서 작성해줘
2. 나만의 스킬(Skill)로 패키징
성공적으로 작동한 이 프로세스를 범용적으로 사용하기 위해 Manus의 skill-creator를 활용했습니다.
사용한 프롬프트:
/skill-creator를 사용하여 여기서 사용한 프로세스를 재사용 가능한 스킬로 만들기
Manus는 자체 가이드라인(SKILL.md 작성법, 파일 구조 등)을 분석 한 뒤, 다음과 같이 새로운 스킬을 생성했습니다.
Bash
이 스킬이 적용되면, 앞으로 사용자는 "운동 루틴 5가지 카드뉴스 만들어줘"라는 말 한마디로 위와 완벽히 동일한 품질의 PNG 결과물을 얻을 수 있습니다.
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
•AI의 자율적 툴 체인 활용: AI가 단순 텍스트만 생성하는 것을 넘어, HTML/CSS 코드를 작성하고 이를 Node.js 렌더러(Playwright)를 통해 실제 이미지(PNG)로 변환하는 전 과정을 자율적으로 수행할 수 있다는 점이 놀라웠습니다.
•Smart Brevity의 중요성: 카드뉴스는 가독성이 생명입니다. AI에게 "글자 수를 줄여라"라고 하는 대신, "Lead(1문장) - Body(최대 4줄) - Takeaway(1줄)" 이라는 명확한 구조(Schema)를 주었을 때 훨씬 퀄리티 높은 카피가 나왔습니다.
과정 중에 어떤 시행착오를 겪었나요?
•렌더링 환경 세팅 문제: 샌드박스 환경 내에서 Playwright를 실행할 때, 크로미움(Chromium) 브라우저 바이너리가 설치되어 있지 않아 에러가 발생했습니다. 하지만 Manus가 에러 로그를 스스로 읽고 npx playwright install 명령어를 실행하여 문제를 자체적으로 해결했습니다.
도움이 필요한 부분이 있나요?
•현재는 텍스트와 레이아웃 기반의 흑백 미니멀리스트 디자인입니다. 향후에는 본문 내용에 맞는 적절한 아이콘이나 일러스트(SVG 등)를 AI가 자동으로 검색해서 HTML에 삽입하는 방법도 고민해보고 싶습니다.
앞으로의 계획이 있다면 들려주세요.
•이번에 패키징한 card-news-black-and-white-topic 스킬을 활용하여, 제가 매주 공부하는 IT 트렌드나 개발 팁들을 5장짜리 카드뉴스로 자동 발행하는 뉴스레터 봇을 구축해볼 계획입니다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)
