소개
21기 스타트업 실험실 수업을 청강하면서 저라는 사람과, 제 브랜드에 대해 심층적으로 생각해보는 시간을 가졌습니다.
브랜드의 정의부터 고객과 시장 정의, 실행 계획과 미래 브랜드 확장 로드맵까지.. 고민과 수정을 거듭하며 작성했고 그 내용 중 어느 정도 진행된 그림책 출간에 대해 '클라우드 펀딩을 하는 상황'을 가정하여 웹페이지 PRD 문서를 작성하고 웹페이지를 제작해 보았습니다~~
진행 방법
Claude로 브랜드맵과, 브랜드 맵 내용을 바탕으로 PRD(제품 요구사항 문서)를 먼저 작성합니다.
브랜드맵 문서와 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
Lovable
Manus
히어로 섹션
⭐⭐⭐
⭐⭐⭐⭐
⭐⭐⭐⭐⭐
이중 독자 구조 표현
⭐⭐⭐⭐⭐
⭐⭐⭐⭐
⭐⭐⭐⭐
미리보기 이미지
SVG 픽토그램
수채화 일러스트
수채화 일러스트
작가 소개
✅
✅
✅
카카오 공유 버튼
✅
❌
✅
이스터에그 🎉
✅ 풍선 콘페티
❌
❌
종합 점수
87점
83점
93점
Genspark: 구조 파악이 탄탄하고 작가 소개 · 카카오 공유까지 잘 챙겼습니다. 반응형 요소가 많아서 지루하지 않았고, 히어로 섹의 노란 풍선을 3연속 클릭하면 콘페티가 터지는 이스터에그도 숨겨져 있었습니다 🎊 생성 속도도 비교적 빨라서 프로토타입에 적합해 보입니다(이미지를 SVG로 만든 것이 빠른 속도의 비결인 듯..)
Lovable: 생성 속도가 가장 빨랐습니다. AI로 즉석에서 생성한 수채화 일러스트가 인상적이었습니다. React 기반이라 추후 커스터마이징이 용이한 장점이 있는 반면, PRD에 명시된 카카오 공유 버튼 생성은 미반영되어 조금 아쉬웠어요..
Manus: 세 툴 중 지정한 브랜드 컬러, 포인트 컬러 반영이 가장 잘 되었습니다. 출간 소식 알림 신청용 이름/이메일 입력 폼이 신청 버튼과 구별이 잘 안되는 부분(크기와 쉐입이 동일, 입력폼에 테두리나 그림자 효과가 있었더라면 좋았겠다 싶음)은 조금 아쉬웠으나 전체적인 완성도가 마음에 들었습니다.
결과와 배운 점
🧠 장점 및 성과
PRD 하나로 세 툴에서 일관된 결과물을 확보할 수 있어서 편리했습니다. 매번 새로 설명할 필요 없이 PRD 붙여넣기만 하면 된다니 ㅎㅎㅎ.
카피 퀄리티가 브랜드 맵에서 결정된다는 것을 체감했습니다. 브랜드 맵에서 정리한 슬로건이 그대로 히어로 카피가 됐습니다.
코딩 없이 3개의 서로 다른 페이지 제작 및 비교 완료. 총 소요 시간 약 2시간.
PRD는 단순 문서가 아니라 프롬프트 그 자체임을 알았습니다. 구체적일수록 결과물 퀄리티가 올라갑니다.
각 툴마다 개성이 달랐습니다. Genspark은 이스터에그처럼 예상치 못한 디테일을, Manus는 맥락을 잘 파악하고 히어로 섹션에 페이지 레이아웃과 지시사항을 스스로의 판단으로 일부 수정하여 새로운 페이지 디자인을 선보였습니다.
🤔 한계점 및 아쉬운 점
브랜드 컬러 반영이 미비했습니다. 색상 코드를 명시했지만 전체 톤보다 포인트 정도로만 사용됐습니다.
실제 일러스트 파일이 없어 AI 생성 아이콘이나 이미지로 대체되었습니다. 실제 제작 시에는 삽화 완성 후 교체가 필요합니다.
폼 연동이 아직은 시뮬레이션입니다. 이메일 수집 폼은 Tally 등 외부 서비스와 별도 연동 필요.
툴별 장단점이 달라 최종 선택에 어려움을 겪을 수 있을 듯 합니다. 용도에 따라 다른 툴을 선택하거나 조합이 필요합니다.
🔁 향후 계획
Manus 결과물 베이스로 실제 일러스트 교체 후 페이지 완성해보기
Tally 폼 연동하여 이메일 수집 실제 해 보기
도움 받은 글
스터디장님이신 여행가J님의 브랜드맵 예시와 PRD 예시 문서가 구체적일 뿐 아니라
비즈니스 전반에 걸쳐 내 브랜드에 대한 생각과 전략을 넓힐 수 있어서
한 발 한 발 내딛는 기분으로 즐겁게 실습해 볼 수 있었습니다~
