Manus AI로 10분 만에 뚝딱! 인스타그램 카드뉴스 제작기
1. 소개 및 시도 배경
마누스 AI로 스킬을 만들고 그 스킬로 내가 하고 있는 강의 카드뉴스를 제작함
AI가 일상화된 시대일수록 역설적으로 '인간적인 연결'과 '깊은 대화'의 가치는 더욱 중요해지고 있습니다. 이러한 메시지를 담고 있는 'Art of Hosting(아트 오브 호스팅)'의 핵심 가치를 사람들에게 쉽고 세련되게 전달하고 싶었습니다. 특히 시각적 효과가 큰 인스타그램 카드뉴스 형식을 빌려, 텍스트 위주의 정보를 임팩트 있는 콘텐츠로 변환하는 실습을 진행했습니다.
2. 진행 방법과 사용 도구
이번 실습에는 자율형 AI 에이전트인 Manus와 새롭게 추가된 card-news-black-and-white 스킬을 활용했습니다.
사용 도구: Manus AI, PIL (이미지 처리)
활용 방법:
Manus에게 주제(Art of Hosting)를 전달하고 스토리라인 구성 요청
'하베스팅(Harvesting)' 사례 이미지 검색 및 흑백 최적화
Smart Brevity 원칙에 따른 카드별 텍스트 정제
HTML/CSS 템플릿 기반의 자동 PNG 렌더링
1차 디자인 시나리오2차 디자인 결과
사용한 프롬프트 전문
"방금 Manus에 /card-news-black-and-white 스킬 추가 AI시대 사람들과 의미있는 대화를 나눌 수 있는 공간으로 초대하는 ART of Hosting 과 관련된 메시지를 인스타 용 카드뉴스를 만들어줘. 하베스팅 사례를 이미지로 넣어서 기반으로 만들어줘. 하단 로고는 @Growin으로 바꿔줘."
핵심 코드 블록 (HTML 템플릿 예시)
HTML
<div class="card">
<div class="progress-bar"><div class="progress-fill" style="width: 57.2%;"></div></div>
<div class="page-number">04 / 07</div>
<div class="lead">하베스팅:
대화의 수확</div>
<div class="divider"></div>
<div class="body-text">대화의 흐름과 결과물을 시각화하여 공유하세요.</div>
<div class="image-container">
<img src="data:image/png;base64,{base64_str}" alt="하베스팅 사례">
</div>
<div class="bottom-box">
<div class="bottom-text">기록된 지혜는 힘이 됩니다.</div>
</div>
</div>
3. 스킬 수정하기
스킬 디자인을 회사로고를 넣어주고 색을 변경하게 했습니다
회사 브랜드를 고려하여 인스타 내용을 디자인 하도록 대화 형식으로 수정했음
수정도 쉬워서 많이 사용할 수 있을 것 같습니다
4. 결과와 배운 점
배운 점과 나만의 꿀팁
Smart Brevity의 힘: 카드뉴스는 정보 전달보다 '시선 끄기'가 중요합니다.
Manus가 제안한 짧고 강렬한 문장들이 흑백 디자인과 만났을 때 가독성이
극대화되었습니다.이미지 최적화: 컬러 이미지를 그대로 쓰지 않고, 흑백 변환 및 대비(Contrast) 조정을 거치니 미니멀한 디자인 톤앤매너가 완벽하게 유지되었습니다.
시행착오 및 해결
렌더링 환경 이슈: 초기 실행 시 Playwright 브라우저 환경 문제로 렌더링 에러가 발생했으나, Manus가 스스로 Python 기반의 대체 스크립트를 작성하여 문제를 해결하는 과정을 보며 AI 에이전트의 자율성을 실감했습니다.
앞으로의 계획 앞으로는 제가 쓰고 있는 블로그글을 카드뉴스로 자동화 할 수 있는
스킬을 만들어 볼 예정입니다.
4. 도움 받은 글
Art of Hosting 공식 커뮤니티: 대화의 기술과 하베스팅 개념 참고
Manus Skill 가이드:
card-news-black-and-white스킬 사용법 및 템플릿 구조 참고
