브랜드맵과 PRD 파일을 활용하여 나의 브랜드 홈페이지 생성하기

소개

지난 2주차에 작성한 '브랜드 전략', '브랜드의 핵심가치, 미션, 비전 도출', '작성한 사례'를 기반으로 '브랜드 맵'과 'PRD'를 생성하여, [나의 브랜드 홈페이지]를 생성했습니다.

진행 방법

• 사용한 도구 : 클로드, 젠스파크

스터디를 진행하면서 만든 '브랜드 맵'의 초안과 'PRD' 초안을 스스로 한땀한땀(?) 다시 되새기면서 수정했어요.

# 📌 성장 설계소, 묘묘 — Personal Brand Map

> 브랜드의 정체성, 고객, 시장, 표현, 실행 계획을 정의하는 문서  
> 기준: 2026 · Student Ver. · 증거 기반 작성

---

## 슬로건

| 용도 | 슬로건 |
|------|--------|
| A — 프로필용 | **막막함을 지도로, 기술을 도구로 만드는 성장 아키텍트** |
| B — 채널·랜딩용 | **당신의 막막함을 성장의 구조로 바꾸는 곳, 묘묘의 성장 설계소** |

> A는 묘묘(사람)를 소개할 때. 이름 아래 부제, 링크드인, 포트폴리오 커버.  
> B는 성장 설계소(공간·브랜드)를 소개할 때. 랜딩 페이지, SNS 바이오, 강의 소개 헤더.

---

## PART 1. 브랜드 정의 — The Core Identity

### 1. 브랜드 정수 (Brand Essence)

**Purpose — 존재 이유**  
기술이 어렵다는 이유로 소외되는 사람이 없도록.  
막막함을 단계로 쪼개서 누구나 걸을 수 있는 길로 만든다.

**Vision — 비전**  
연령과 배경에 관계없이, 누구나 기술을 자신의 언어로 이해하고 자기 도구로 쓰는 세상.  
기술이 특정 세대나 계층의 것이 아닌 상태.

**Mission — 미션**  
AI 리터러시 교육과 학습 설계를 통해, 디지털 소외 계층이 기술을 자신의 속도로 익히도록 돕는다.  
현재는 복지관 강의 · 하루링 앱 개발 · 인공지능학과 학업 실행 중.

---

### 2. 핵심 가치 (Core Values)

| 가치 | 의미 | 실행 기준 |
|------|------|-----------|
| **구조화** | 혼란을 단계로 만든다. 막막함은 정리되지 않은 것이지, 불가능한 것이 아니다. | 모든 교육 콘텐츠는 '왜 → 무엇 → 어떻게' 순서로 설계한다. |
| **포용 설계** | 연령·배경·기술 수준을 가리지 않는 교육을 설계한다. | 학습자 맥락이 출발점. 기술 용어보다 학습자 언어를 우선한다. |
| **실행 우선** | 준비 완료 전에도 진행하면서 완성한다. | 학습과 실행은 순서가 아니라 동시다. 과정도 콘텐츠다. |
| **투명한 공유** | 자신의 혼란과 실패를 자원으로 공개한다. | 완성된 결과보다 과정을 공유한다. 사례글·스터디 기록이 브랜드 증거다. |
| **AI 리터러시** | AI를 교육 설계의 구성 요소로 통합한다. | 멀티 LLM 큐레이션·프롬프트 설계 능력을 꾸준히 발전시킨다. |

---

### 3. 브랜드 철학 (Closing Principle)

> "복잡함은 지도가 없어서 어려운 것이지, 본래 어려운 것이 아니다.  
> 막막함을 단계로 만드는 사람이, 길이 된다."
......

# 📋 묘묘 브랜드 랜딩페이지 PRD

> 브랜드 맵 기반 · 비전공 성인 학습자 대상 · 신뢰 기반 전환 구조

---

## 1. 제품 개요

### 1.1 프로젝트명

**묘묘 브랜드/서비스 소개용 랜딩페이지**

### 1.2 목적

- 비전공 성인 학습자에게 묘묘의 브랜드 정체성과 전문성을 명확하게 전달한다.
- "AI가 어렵고 막막하다"는 사용자의 감정을 **학습자 맥락 중심의 구조적 해결 가능성**으로 전환한다.
- 강의, 코칭, 상담 문의로 이어질 수 있는 **신뢰 기반 전환 구조**를 만든다.
- 묘묘가 단순히 AI를 설명하는 사람이 아니라, **복잡함을 단계로 번역해주는 성장 설계자**라는 인식을 형성한다.

### 1.3 핵심 가치 제안

> **"당신의 막막함을 성장의 구조로 바꾸는 곳, 묘묘의 성장 설계소"**

보조 메시지:
- AI를 가르치는 사람이 아니라, **AI를 당신의 언어로 설계해주는 사람**
- 기술 중심 설명이 아니라, **학습자 맥락으로 번역된 단계형 안내**
- 완성된 전문가의 거리감보다, **같이 길을 찾는 차분한 실행가**

### 1.4 핵심 사용자

**1차 타깃: 비전공 성인 학습자**

| 특징 | 내용 |
|------|------|
| 상황 | AI 전환이 필요하다는 것은 알지만, 어디서부터 시작해야 할지 모른다 |
| 문제 | 정보는 많은데 내 상황에 맞는 설명이 없어 막막하다 |
| 니즈 | 기술 자체보다 "내 일/내 삶에 어떻게 적용하는가"가 중요하다 |
| 선호 | 전문 용어보다 쉬운 번역, 빠른 진도보다 단계별 설명, 질문 가능한 구조 |
.....

그리고, 스터디할 때 샘플로 만든 홈페이지의 디자인이 마음에 들게 나오지 않았기 때문에 클로드와 디자인에 대한 내용을 이야기 나누고 PRD 파일을 조금 더 업데이트 해봤습니다.

위의 파일을 수정한 후, 젠스파크에 2개의 파일을 첨부하고 홈페이지를 생성했습니다.

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

이후에는 디자인이 마음에 들지 않아서, 클로드와 대화하면서 디자인 요구 사항을 수정하는 프롬프트를 생성하고, 젠스파크에 프롬프트를 입력하는 방식으로 수정했습니다.
수정할 때, 이미지를 추가 삽입 & SNS 연락처를 추가하는 것도 같이 입력했어요.

아래 내용을 기준으로 현재 페이지를 수정해줘.

── 1. 폰트 교체 ──
Noto Serif KR을 전체 제거하고 아래 폰트로 교체한다.
• 헤딩(h1~h3): Pretendard, font-weight 700
• 본문 전체: Pretendard, font-weight 400
• 브랜드 철학 인용구만: Gowun Batang

폰트 로드:
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">
Playfair Display, Noto Serif는 페이지 어디에도 사용 금지.

── 2. 이미지 배치 ──
① 히어로 섹션 우측: 학습/교육 분위기 이미지 생성
② 해결 방식 섹션: 노트/지도 연상 이미지 생성
③ 신뢰 근거 섹션: 교육 현장 이미지 (placeholder, 향후 교체 예정) 생성

모든 이미지: object-fit: cover, border-radius: 16px

── 3. 푸터 SNS 연락처 추가 ──
페이지 최하단에 아이콘+텍스트 형태로 가로 나열.
• 이메일: myomyo.lab@gmail.com
• 인스타그램: https://www.instagram.com/myomyo.log/
• 스레드: https://www.threads.com/@myomyo.log
• 브런치: https://brunch.co.kr/@myomyo-log
폰트: Pretendard 14px / 각 링크 target="_blank"

디자인이 또 매우 별로입니다. 저 이미지 생성한 방식이 히어로 섹션에 들어가면서 정말 옛스러운 디자인이 되었거든요.
역시 디자인에 대한 건 공부가 많이 필요한 부분인 것 같습니다.
여러 번의 시행착오 끝에 히어로 섹션의 프롬프트를 아래와 같이 수정했습니다

히어로 섹션을 아래 기준으로 전면 재설계해줘.

── 핵심 방향 ──
이미지를 완전히 제거한다.
텍스트 타이포그래피 하나로 히어로 전체를 채운다.
배경은 #FDFAF7 단색만 사용.
점선 곡선 그래픽도 전부 제거.

── 레이아웃 ──
좌우 분할(left text / right image) 레이아웃 완전 폐기.
히어로 전체를 좌측 정렬 풀스크린으로 변경.
min-height: 100vh, 상하 패딩 120px.

── 헤딩 ──
텍스트: "막막함을 지도로, 기술을 도구로 만드는 성장 아키텍트"
폰트: Pretendard, font-weight: 600
크기: 데스크톱 72px / 모바일 40px
"기술을 도구로" 부분만 강조:
  background: #F4A57A, color: #FDFAF7, padding: 2px 10px, border-radius: 4px
letter-spacing: -0.03em, line-height: 1.15

── 서브 카피 ──
헤딩 아래 40px 간격.
"AI가 어렵고 복잡하게 느껴지는 사람을 위해,
묘묘는 배움을 당신의 언어와 속도에 맞게 구조화합니다."
Pretendard 18px, color: #6B6460

── CTA ──
서브 카피 아래 48px 간격, 버튼 3개 가로 배치 gap 12px:
① "강의 신청" — background: #F4A57A, color: #1A1511, border-radius: 100px, padding: 14px 32px
② "코칭 신청" — background: 투명, border: 1.5px solid #1A1511, 동일 라운드
③ "상담 문의하기 →" — 텍스트만, 배경·테두리 없음

── 제거 항목 ──
이미지 카드, 배지 2개, 배경 점선 곡선 그래픽 전부 삭제.

그리고, '강의 신청', '코칭 신청', '상담 문의' 버튼을 생성해줬는데..
그 부분도 그냥 링크 없이 두는 게 아쉬운 마음에 구글 폼을 생성해서 연결까지 했습니다.

결과와 배운 점

'브랜드맵'이 잘 설계되어야만 그 다음 단계가 매끄럽게 이어진다는 걸 다시 한번 확인할 수 있었습니다. 시간이 갈수록 AI는 발전하지만 '나'는 나만이 만들어나갈 수 있는 것이라는 걸 배웠습니다.

여행가J님이 주신 '브랜드맵 예시', 'PRD' 파일을 참고하면서 생성해준 결과물을 보며 차근차근 정리해나가며 '나'라는 사람의 방향성을 조금 더 정리할 수 있는 시간이었습니다.

사실 파편적으로 흩어진 정보가 너무 많아서 어떻게 나를 표현하면 좋을 지 고민이 많았거든요.
특히, '강의 신청'하는 부분을 넣느냐 마느냐 같은.. 그런 개인적인 의문에 대해 고민이 있었지만, 정체성을 가지는 부분에서는 우선 담는 게 맞다는 그런 결론이요.

젠스파크에서 홈페이지를 만드는게 저는 조금 더 잘 맞아서, 젠스파크에서 했는데.. 크레딧 소모를 최소한으로 하고 싶어서 클로드랑 최대한 대화를 나누면서 프롬프트를 정리한 경험이 특히 큰 경험이 되었습니다. 하지만, 디자인 부분은 언제나 아쉽습니다. 이 부분의 감각을 좀 더 키워보고 싶네요.

도움 받은 글 (옵션)

여행가J이 제공해주신 '브랜드맵 예시', 'PRD' 파일에 큰 도움을 받고, 저의 파일을 생성했습니다. 감사합니다!