Manus AI와 함께 뚝딱 만든 그림책 랜딩페이지 제작기
소개
21기 Manus스킬과 스타트업실험실 과제를 이리저리 잘 버무려... Manus AI(이하 마누스)로 제가 쓰고 그린 그림책의 사전 독자 반응 테스트용 랜딩페이지를 만들어 보는 작업을 해 보았습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Manus AI : 문서 분석 → 디자인 기획 → 코드 생성 → 배포까지 원스톱
1단계 — 문서 먼저
스타트업실험실 스터디장님이 제공해 주신 예시파일들을 마누스에 먼저 첨부하였습니다.
해당 대화에서 이미 제 브랜드와 책에 대한 이야기가 자세히 오갔기 때문에 마누스가 예시 파일을 읽고 저의 브랜드 가치와 동화책의 내용에 맞게 새로운 브랜드맵과 PRD 문서를 만들어 주었어요.
아무 배경 없이 "랜딩페이지 만들어줘"라고만 하면 결과물이 엉망이 된다는 걸 이미 경험으로 알고 있었기 때문에, 문서의 내용을 꼼꼼히 보고 수정하는 데 시간을 들였습니다.
•PRD (Product Requirements Document): 페이지 목적, 타깃 독자, 섹션 구성, CTA 문구 등을 정리한 기획서
•브랜드맵: 브랜드 철학, 컬러 팔레트, 톤앤매너, 폰트 방향 설정용
•그림책 콘티 전문 : 실제 책 내용 중 랜딩페이지에 쓸 수 있는 장면과 문구 발췌용
이 세 파일을 마누스에 첨부하면서 "이 문서들을 분석해서 랜딩페이지를 만들어줘" 라고 요청했어요.
2단계 — 마누스가 디자인 방향을 제안함
마누스가 문서를 분석한 뒤, 세 가지 디자인 방향을 제안해줬어요. 저는 브랜드 철학과 가장 잘 맞는 "한지 수채화 — 조용한 시(Quiet Poetry)" 방향을 선택했습니다.
아이보리 한지 배경 위에 수채화가 번지는 느낌, 노란 풍선이 유일한 밝은 포인트가 되는 구성
디자인 방향이 확정되자 AI가 컬러 팔레트, 폰트 조합, 애니메이션 방식까지 스스로 결정하고 코드에 반영했어요.
3단계 — 이미지 생성 후 코딩 시작
마누스가 먼저 랜딩페이지에 필요한 일러스트 이미지 4장을 생성했어요. 히어로 배경, 풍선 크기 변화 시각화, 장면 일러스트, 작가 소개 배경 등이었습니다. 이미지가 준비된 뒤에야 본격적인 코딩이 시작됐어요.
4단계 — 섹션별 구현
총 7개 섹션이 순서대로 만들어졌습니다. 하나의 페이지에서 스크롤을 통해 각 섹션으로 자연스럽게 이동하는 원페이지 사이트로 부드러운 반응형 애니메이션과 호버 효과가 친밀감을 줄 수 있게 구현되었습니다.
히어로 섹션 (책 제목 + 핵심 카피 + CTA 버튼)
책 소개 (이중 독자 구조 카드)
미리보기 (책 속 세 장면 발췌)
공감 유도 ("이런 분께 닿길 바랍니다")
작가 소개
알림 신청 폼 (이름 + 이메일)
공유 버튼 + 푸터
5단계 — 배포
마누스 내의 Publish 버튼 한 번으로 실제 URL이 생성됐어요. 별도 서버 설정 없이 바로 공유 가능한 상태가 됐습니다.
✅ 실행 결과
•문서 첨부 → 완성 페이지까지 약 1시간 소요
•별도 코딩 없이 React + Tailwind CSS 기반 반응형 웹페이지 완성
•모바일 하단 고정 CTA 버튼, 스크롤 진행 표시줄, 폼 제출 후 감사 메시지 등 세부 UX까지 자동 구현
결과와 배운 점 (Results and Lessons Learned)
🧠 장점 및 성과
• 문서 품질이 곧 결과물의 품질이라는 걸 체감했어요. PRD와 브랜드맵을 미리 잘 써둔 덕분에 AI가 방향을 잃지 않았습니다.
•코딩을 몰라도 "어떻게 보여야 하는지"를 언어로 설명할 수 있으면 충분했어요.
🤔 한계점 및 아쉬운 점
•알림 신청 폼이 현재는 시뮬레이션 상태예요. 실제 이메일 수집을 위해선 Tally나 Google Forms 연동이 추가로 필요합니다.
•AI가 생성한 이미지가 제 그림책 원본 스타일과 일치하지는 않아서 실제 출판용으로는 원본 일러스트를 따로 업로드해야 합니다.
•브랜드 세부 정보(SNS 계정, 실제 연락처 등)는 직접 수정해야 해요.
🔁 향후 계획
•Tally 폼 연동으로 실제 이메일 수집 시작
•신청자 수 데이터를 모아 출판사 투고 시 시장 반응 근거 자료로 활용
마치며
코딩을 못 해도, 돈이 없어도, 시간이 없어도 — 문서를 잘 쓸 수 있다면 랜딩페이지 하나는 이제 쉽게 만들 수 있는 시대가 된 것 같아요! 일단 AI가 나를 잘 알도록 대화하고 자료를 충분히 제시한다면 똑똑하게 원하는 방향을 제시하기도 하니까요. 이런 시기일수록 자기 자신에 대한 깊은 고찰과 기록이 중요하겠다는 생각을 해 봅니다~~
댓글 0개
로그인하고 댓글을 작성하세요