브랜드 맵을 바탕으로 그림책 클라우드펀딩 소개 페이지 만들기

소개

21기 스타트업 실험실 수업을 청강하면서 저라는 사람과, 제 브랜드에 대해 심층적으로 생각해보는 시간을 가졌습니다.

브랜드의 정의부터 고객과 시장 정의, 실행 계획과 미래 브랜드 확장 로드맵까지.. 고민과 수정을 거듭하며 작성했고 그 내용 중 어느 정도 진행된 그림책 출간에 대해 '클라우드 펀딩을 하는 상황'을 가정하여 웹페이지 PRD 문서를 작성하고 웹페이지를 제작해 보았습니다~~

진행 방법

1. Claude로 브랜드맵과, 브랜드 맵 내용을 바탕으로 PRD(제품 요구사항 문서)를 먼저 작성합니다.

2. 브랜드맵 문서와 PRD 문서(+동화책 콘티문서)를 동일하게 첨부하여 Lovable · Genspark · Manus에서 웹페이지를 제작했습니다.

💼 사용한 도구

• Claude (Sonnet4.6) : 브랜드 맵 제작, PRD 작성, 작업 전반의 구조화

• Genspark : AI 에이전트 기반 웹페이지 자동 생성

• Lovable : React 기반 웹앱 생성 특화 툴

• Manus : 멀티스텝 AI 에이전트, 이미지 생성 포함 웹페이지 제작

🔧 구현한 로직 / 진행 과정

1단계: 브랜드 맵 먼저 만들기

페이지 제작 전에 Claude로 퍼스널 브랜드 맵을 작성했습니다. 브랜드의 핵심 철학·고객·슬로건이 정리되어 있어야 PRD의 카피 퀄리티가 달라지기 때문입니다.

브랜드 맵 핵심 구성:

• Who/Whom/What/How/Why 구조

• 현재 브랜드 vs 지향 브랜드 구분

• 핵심 슬로건 및 톤 앤 매너

💡 팁: 브랜드 맵 없이 바로 PRD를 작성하면 카피가 일반적인 문장이 됩니다. 브랜드의 고유한 언어가 있어야 AI가 그걸 그대로 페이지에 반영합니다.

2단계: PRD 작성 (가장 중요한 단계)

Claude에게 PRD 예시 파일을 제공하고, 브랜드 맵을 기반으로 PRD를 작성하게 했습니다.

PRD에 반드시 들어간 항목:

1. 제품 개요 (목적, 핵심 가치 제안, 타겟 독자)
2. 기능 명세서 (페이지 구조, 섹션별 상세, 카피 원문)
3. 디자인 시스템 (색상 코드, 폰트, 톤앤무드)
4. 성공 지표 KPI (전환율 목표, 판단 기준)
5. 기술 스택 (MVP용 툴 추천)
6. 개발 로드맵 (Phase별 체크리스트)
7. 위험 요소 대응 방안
8. 추가 고려사항 (카카오 공유 버튼 등 한국 특화)

💡 팁: 색상 코드와 카피 원문까지 PRD에 넣으면 세 툴 모두 해당 내용을 그대로 반영합니다. 추상적인 설명보다 구체적인 텍스트가 훨씬 효과적이었습니다.

3단계: 세 툴에 PRD 붙여넣기

완성된 PRD 마크다운 파일과 브랜드 맵, 동화 콘티 파일을 각 툴에 그대로 첨부했습니다. 별도의 프롬프트 엔지니어링 없이 PRD 자체가 프롬프트 역할을 했습니다.

4단계: 결과물 비교

세 툴의 결과물을 섹션별로 비교하였습니다.

✅ 테스트 결과 / 실행 결과

세 툴 모두 PRD의 구조 · 카피 · 색상을 비교적 충실하게 반영했습니다.

Genspark: 구조 파악이 탄탄하고 작가 소개 · 카카오 공유까지 잘 챙겼습니다. 반응형 요소가 많아서 지루하지 않았고, 히어로 섹의 노란 풍선을 3연속 클릭하면 콘페티가 터지는 이스터에그도 숨겨져 있었습니다 🎊 생성 속도도 비교적 빨라서 프로토타입에 적합해 보입니다(이미지를 SVG로 만든 것이 빠른 속도의 비결인 듯..)

Lovable: 생성 속도가 가장 빨랐습니다. AI로 즉석에서 생성한 수채화 일러스트가 인상적이었습니다. React 기반이라 추후 커스터마이징이 용이한 장점이 있는 반면, PRD에 명시된 카카오 공유 버튼 생성은 미반영되어 조금 아쉬웠어요..

Manus: 세 툴 중 지정한 브랜드 컬러, 포인트 컬러 반영이 가장 잘 되었습니다. 출간 소식 알림 신청용 이름/이메일 입력 폼이 신청 버튼과 구별이 잘 안되는 부분(크기와 쉐입이 동일, 입력폼에 테두리나 그림자 효과가 있었더라면 좋았겠다 싶음)은 조금 아쉬웠으나 전체적인 완성도가 마음에 들었습니다.

결과와 배운 점

🧠 장점 및 성과

• PRD 하나로 세 툴에서 일관된 결과물을 확보할 수 있어서 편리했습니다. 매번 새로 설명할 필요 없이 PRD 붙여넣기만 하면 된다니 ㅎㅎㅎ.

• 카피 퀄리티가 브랜드 맵에서 결정된다는 것을 체감했습니다. 브랜드 맵에서 정리한 슬로건이 그대로 히어로 카피가 됐습니다.

• 코딩 없이 3개의 서로 다른 페이지 제작 및 비교 완료. 총 소요 시간 약 2시간.

• PRD는 단순 문서가 아니라 프롬프트 그 자체임을 알았습니다. 구체적일수록 결과물 퀄리티가 올라갑니다.

• 각 툴마다 개성이 달랐습니다. Genspark은 이스터에그처럼 예상치 못한 디테일을, Manus는 맥락을 잘 파악하고 히어로 섹션에 페이지 레이아웃과 지시사항을 스스로의 판단으로 일부 수정하여 새로운 페이지 디자인을 선보였습니다.

🤔 한계점 및 아쉬운 점

• 브랜드 컬러 반영이 미비했습니다. 색상 코드를 명시했지만 전체 톤보다 포인트 정도로만 사용됐습니다.

• 실제 일러스트 파일이 없어 AI 생성 아이콘이나 이미지로 대체되었습니다. 실제 제작 시에는 삽화 완성 후 교체가 필요합니다.

• 폼 연동이 아직은 시뮬레이션입니다. 이메일 수집 폼은 Tally 등 외부 서비스와 별도 연동 필요.

• 툴별 장단점이 달라 최종 선택에 어려움을 겪을 수 있을 듯 합니다. 용도에 따라 다른 툴을 선택하거나 조합이 필요합니다.

🔁 향후 계획

• Manus 결과물 베이스로 실제 일러스트 교체 후 페이지 완성해보기

• Tally 폼 연동하여 이메일 수집 실제 해 보기

도움 받은 글

스터디장님이신 여행가J님의 브랜드맵 예시와 PRD 예시 문서가 구체적일 뿐 아니라
비즈니스 전반에 걸쳐 내 브랜드에 대한 생각과 전략을 넓힐 수 있어서
한 발 한 발 내딛는 기분으로 즐겁게 실습해 볼 수 있었습니다~