브랜드맵 → PRD → 랜딩페이지: AI와 3단계로 퍼스널 브랜딩 완성하기

📝 이 글에서 배울 수 있는 것

• AI와 함께 퍼스널 브랜드맵을 체계적으로 작성하는 방법

• 브랜드맵을 PRD(제품 요구사항 문서)로 전환하는 과정

• PRD를 실제 웹 랜딩페이지로 구현하는 흐름

• AI에게 "마음대로 하지 말고 물어봐"라고 시키는 협업 기법

소요 시간: 약 2~3시간

준비물: Claude Code (또는 다른 AI 코딩 도구), 퍼스널 브랜딩에 대한 기본 고민

🎯 누구를 위한 글인가요?

• 퍼스널 브랜딩 스터디에서 브랜드맵을 작성하고 있는 분

• AI를 활용해 브랜딩을 체계적으로 정리하고 싶은 분

• "머릿속에는 있는데 정리가 안 되는" 브랜딩을 문서화하고 싶은 분

• 브랜드맵을 만들었는데 "그래서 뭐 어쩌라고?"인 분

📚 배경 지식

💡 알아두세요

• 브랜드맵: 브랜드의 정체성, 고객, 시장, 표현, 실행 계획을 정의하는 문서

• PRD: Product Requirements Document. 제품/서비스를 만들기 전에 "뭘 만들 건지" 정리하는 문서

• AskUserQuestion: Claude Code에서 AI가 사용자에게 선택지를 제시하며 확인받는 기능

😫 문제 상황 (Before)

GPTers AI 스터디에서 퍼스널 브랜딩 과제가 나왔다.

이전에 3편에 걸쳐 AI로 브랜드 DNA를 추출하고, 나를 의인화하고, 가상 대화까지 해봤다. 그 과정에서 "현장의 체온 + AI의 속도. 먼저 베푸는 경영 전문가"라는 브랜드 정의까지 나왔다.

근데 여기서 멈추면 그냥 좋은 문장 하나 만든 것에 불과하다.

브랜드 정의를 실제로 써먹으려면:

• 체계적인 브랜드맵 문서가 있어야 하고

• 그걸 기반으로 무엇을 만들지 구체적인 기획서(PRD)가 있어야 하고

• 결국 실제 웹페이지로 구현되어야 한다

문제는, 이 3단계를 혼자 하면 각 단계에서 막힌다는 것. 브랜드맵 19개 항목을 채우다 보면 "이게 맞나?" 싶고, PRD를 쓰려면 "뭘 넣어야 하지?" 싶고, 웹페이지는 "어디서부터 시작하지?" 싶다.

🛠️ 사용한 도구

• 도구명: Claude Code (CLI) , GENSPARK

• 모델: Claude Opus 4.6

• 특이사항: AI에게 "마음대로 작성하지 말고, 확인되지 않은 것은 물어봐"라고 지시

🗺️ 작업 흐름 한눈에 보기

ALT

흐름도의 예

핵심은 각 단계에서 AI가 먼저 질문하고, 내가 확인하는 방식으로 진행한 것이다.

🔧 따라하기

Step 1: 브랜드맵 작성 — "AI야, 물어보면서 채워줘"

목표: 6 PART, 19개 항목의 브랜드맵을 AI와 함께 완성한다.

보통 AI에게 "브랜드맵 만들어줘"라고 하면, AI가 알아서 그럴듯하게 채워버린다. 읽어보면 맞는 말 같지만 내 생각이 아니라 AI의 추측이다.

그래서 이번엔 다르게 접근했다.

브랜드맵 예시 파일을 확인해서 내 브랜드의 맵을 작성해줘.
마음대로 작성하지 말고, 확인되지 않은 것들은 에스크유저퀘스천을 이용해서 물어봐.

이 한마디가 결과를 완전히 바꿨다.

AI가 템플릿을 분석한 뒤, 항목별로 선택지를 제시하며 질문을 시작했다:

• "핵심 가치 3~5개를 골라주세요" → 현장 우선 / 먼저 베풀기 / 쉬운 말로 번역

• "핵심 고객은 어떤 유형이 가장 많나요?" → 법인전환 검토 대표 / 세무·노무 고민 대표

• "경쟁 환경은?" → 경영 컨설팅 회사 / AI 교육 플랫폼

• "수익 구조는?" → 거의 무료 중심 (수익화 고민 중)

• "메시지 톤은?" → 전문적인 조언자

• "향후 유료 서비스는?" → 온라인 코스/강의

총 6차례 질문, 각각 3~4개 선택지. 나는 클릭만 했다.

왜 이 방식이 효과적이었을까?

AI가 질문을 만드는 과정에서, 내가 미처 생각하지 못했던 항목들이 정리됐다. "수익 구조가 어떻게 되나요?"라는 질문을 받았을 때, "아, 나 지금 거의 무료 중심이구나. 수익화를 진지하게 고민해야겠다"는 자각이 생겼다.

AI에게 시키기만 하면 AI의 답이 나오지만, AI에게 물어보라고 시키면 내 답이 나온다.

결과: 19개 항목이 모두 채워진 브랜드맵 완성. Purpose, Vision, Mission부터 고객 정의, 경쟁 환경, 디자인 시스템, 실행 로드맵까지.

✅ 체크포인트 브랜드맵 문서가 완성되어 있어야 합니다. PART 1(브랜드 정의)부터 PART 6(미래 계획)까지 19개 항목이 채워져 있는지 확인하세요.

Step 2: PRD 작성 — "브랜드맵을 보고 뭘 만들지 정리해줘"

목표: 브랜드맵을 기반으로 랜딩페이지 PRD(제품 요구사항 문서)를 작성한다.

브랜드맵이 "나는 누구인가"라면, PRD는 "그래서 뭘 만들 건가"다.

여기서도 같은 원칙을 적용했다.

개인브랜딩맵 파일을 확인해서 PRD 예시파일을 참고하여 PRD를 작성하려고 해.
마음대로 작성하지 말고, 확인되지 않은 것들은 에스크유저퀘스천을 이용해서 작성하자.

AI가 이번에도 핵심 결정 사항을 하나씩 물어왔다:

• "PRD 대상은?" → 퍼스널 브랜드 랜딩페이지

• "핵심 목적은?" → 리드 수집 + 브랜드 인지도 + 무료 도구 유도

• "배포 방식은?" → 기존 홈페이지 내 서브페이지

• "포함 섹션은?" → 자기소개+스토리 / 서비스·도구 / 상담 폼

• "상담 폼은?" → 직접 구현 (Supabase 저장)

5차례 확인 후, AI가 10개 섹션의 PRD를 작성했다:

1. 제품 개요 (목적, 가치 제안, 타깃)

2. 기능 명세서 (페이지 구조, 상세 기능, 데이터 구조)

3. 디자인 시스템 (색상, 타이포, 인터랙션)

4. 성공 지표 (KPI 6개)

5. 기술 스택

6. 반응형 디자인 명세

7. 개발 로드맵 (3주)

8. 위험 요소 및 대응

9. 추가 고려사항

10. 와이어프레임 (ASCII 기반)

포인트: 브랜드맵의 "골드+네이비 톤", "전문적인 조언자 톤", "무료 도구 11개" 같은 내용이 PRD에 자연스럽게 녹아들었다. 앞 단계에서 정리한 게 다음 단계의 재료가 되는 것.

결과: 10개 섹션, 16KB 분량의 PRD 문서 완성.

✅ 체크포인트 PRD에 페이지 구조도(와이어프레임)와 상담 폼 필드 정의가 포함되어 있는지 확인하세요.

Step 3: 랜딩페이지 구현 — "PRD대로 만들어줘"

목표: PRD를 기반으로 실제 동작하는 웹 랜딩페이지를 만든다.

앞의 두 단계에서 모든 결정이 끝났기 때문에, 이 단계는 간단했다.

브랜드맵과 PRD 확인해서 웹페이지 만들어줘

AI가 PRD의 와이어프레임, 디자인 시스템, 기능 명세를 그대로 반영하여 HTML 페이지를 생성했다.

구현된 내용:

• 히어로 섹션: "법인전환, AI로 더 쉽게. 1,000개 기업이 검증한 전문가." + 프로필 사진 + CTA 버튼

• 자기소개 섹션: 숫자 카운터 애니메이션(1,000+ 기업, 저서 2권, ISO 3종, AI 1급) + 브랜드 스토리 + 다섯 가지 얼굴 카드

• 무료 도구 섹션: 계산기 6개 카드 + "전체 보기" 버튼

• 서비스 섹션: 법인전환 컨설팅 / 세무·노무 진단 / AI 활용 교육

• 상담 폼: 이름/연락처/이메일/유형/내용 + 스팸 방지

• 반응형: 모바일/태블릿/데스크탑 3단계 대응 + 모바일 하단 고정 CTA

브라우저에서 열자마자 바로 동작하는 페이지가 나왔다.

결과: 26KB 분량의 완성된 랜딩페이지.

✅ 체크포인트 브라우저에서 페이지가 열리고, 모바일 크기로 줄여도 레이아웃이 깨지지 않는지 확인하세요.

✅ 결과 (After)

Before vs After

산출물 4개

1. 이상수_브랜드맵.md — 6 PART, 19개 항목 퍼스널 브랜드맵

2. 개인브랜딩.md — 사례글 3편 + 브랜드맵 통합 옵시디언 노트

3. 퍼스널브랜드랜딩페이지PRD.md — 10개 섹션 PRD

4. index.html — 실제 동작하는 랜딩페이지

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. "마음대로 하지 말고 물어봐"가 핵심이다. AI에게 결과물만 요청하면 AI의 추측이 나온다. "확인되지 않은 것은 물어봐"라고 시키면, AI가 질문을 만들고 내가 답하는 구조가 된다. 이 과정에서 내 생각이 정리된다.

2. 단계별로 나누면 각 단계가 다음 단계의 재료가 된다. 브랜드맵의 "골드+네이비 톤"이 PRD의 디자인 시스템으로, PRD의 와이어프레임이 실제 페이지 구조로 자연스럽게 이어졌다. 한 번에 다 시키면 이 연결이 끊어진다.

3. 예시 파일을 주면 AI가 구조를 따라한다. "브랜드맵 만들어줘"보다 "이 예시 파일을 참고해서 만들어줘"가 훨씬 나은 결과를 낸다. AI가 19개 항목을 빠짐없이 채운 것은 템플릿 덕분이다.

이렇게 하면 안 돼요

1. "다 알아서 해줘"는 최악의 지시다. AI가 알아서 채우면 읽기엔 좋지만 "내 것"이 아니다. 특히 브랜딩처럼 주관적인 작업에서는 반드시 확인 과정을 넣어야 한다.

2. 한 번에 다 시키지 마라. "브랜드맵 만들고 PRD 쓰고 웹페이지까지 만들어줘"라고 하면, 각 단계의 품질이 떨어진다. 한 단계씩, 확인하고, 다음으로 넘어가야 한다.

🌍 다른 업무에 적용한다면?

이 "AI에게 물어보라고 시키기 + 단계별 진행" 패턴은 브랜딩 외에도 쓸 수 있다:

• 사업 계획서: 비즈니스 모델 캔버스 → 사업 계획서 → 피치 덱

• 서비스 기획: 고객 페르소나 → 기능 명세 → 프로토타입

• 강의 설계: 학습 목표 정의 → 커리큘럼 → 슬라이드

• 채용 공고: 직무 정의 → JD 작성 → 채용 페이지

공통 원칙: 추상적인 것 → 구체적인 것 → 실행물 순서로, 매 단계마다 AI가 물어보고 내가 확인한다.

🚀 앞으로의 계획

• 완성된 랜딩페이지를 기존 홈페이지(lbiz-partners.com)에 서브페이지로 통합

• 상담 폼을 Supabase에 연동하여 실제 리드 수집 시작

• "법인전환" 키워드 중심 블로그 10개 작성 → 랜딩페이지로 유입

📋 재사용 가능한 프롬프트

프롬프트 1: AI에게 "물어보며 작성"하게 시키기

[예시 파일/템플릿]을 확인해서 나의 [문서 종류]를 작성해줘. 마음대로 작성하지 말고, 확인되지 않은 것들은 에스크유저퀘스천을 이용해서 물어봐.

이 프롬프트 하나로 AI의 역할이 "작성자"에서 "인터뷰어"로 바뀐다. [예시 파일/템플릿]과 [문서 종류]를 본인 상황에 맞게 변경하세요.

프롬프트 2: 브랜드맵 → PRD 전환

[브랜드맵 파일]을 확인해서 [PRD 예시 파일]을 참고하여 PRD를 작성하려고 해. 마음대로 작성하지 말고, 확인되지 않은 것들은 에스크유저퀘스천을 이용해서 작성하자.

프롬프트 3: PRD → 웹페이지 구현

[브랜드맵]과 [PRD] 확인해서 웹페이지 만들어줘.

ALT

한국 데이트 웹사이트의 홈페이지

젠스팍- 웹페이지

앞 단계에서 모든 결정이 끝났기 때문에, 이 단계는 한 줄이면 충분하다.

📋 핵심 정리

이 글의 핵심 한 줄:

AI에게 시키기만 하면 AI의 답이 나오지만, AI에게 물어보라고 시키면 내 답이 나온다.

✍️ 이상수 | 엘비즈파트너스 대표 세무·노무·법무 컨설팅 & AI 활용 교육 🌐 lbiz-partners.com