개인(본형) 퍼스널 브랜딩을 진행한 미니사례 과제

https://www.jbfg.com/ko/main.do 여기를 레퍼런스로 해서 내프로필사이트를 만들어줘 스타일, 디자인, 동작, 구조를 전체적으로 가져오고, 사진이나 이미지도 비슷한 스타일로 만들어서 사이트에 반영해줘, 어떤 프롬프트로 요청하면 될지 프롬프트를 제공해줘

위내용에 디자인 가이드도 추가해줘, 그리고 상세한 인터렉션이 반영되어야함, 호버시 색상변경, 스크롤에 따라 부드럽게 움직이는 애니메이션등을 고려해서 작성하고 마지막에 추가해줘

좋습니다. PRD 문서를전체적으로 다시 정리해서 제공합니다.

Stable Diffusion 이미지는 사용하지 않고 gpt1 모델을 이용해서 이미지를 뽑고 싶으니 관련 내용만 수정해서 적어줘, 그리고 내장 데이터 베이스 지원이 되니까, 그부분도 고려해서 다시 한번 정리해줘

좋습니다. PRD 문서를전체적으로 다시 정리해서 제공합니다.

정리된 prd 문서를 복사하고 붙여넣기 쉽도록 코드블럭형태로 만들어줘

# 📝 Product Requirements Document (PRD)  
## 🧑‍💼 퍼스널 브랜딩 랜딩페이지 – 구본형 님  
**(GPT 이미지 생성 + 내장 DB 연동 기반, JB금융 스타일 적용)**  

---

## 1. 📌 프로젝트 개요

| 항목 | 내용 |
|------|------|
| **프로젝트명** | 구본형 퍼스널 브랜딩 웹사이트 |
| **목적** | JB금융 스타일의 기업형 디자인을 적용한 웹사이트를 통해, 디지털 마케팅 전문가로서의 경력, 실적, 전문성을 신뢰감 있게 브랜딩 |
| **대상 사용자** | 정부기관, 스타트업, 마케팅 에이전시 등 |
| **활용 목적** | 바우처/입찰 제안, 포트폴리오 공유, 디지털 명함, 브랜딩 툴 |

---

## 2. ❓ 문제 정의 & 기회 포착

### 💡 문제
- PDF 포트폴리오만으로는 검색 및 공유 불편
- 성과 및 이력을 시각적으로 표현하기 어려움
- 온라인에서의 전문가 브랜딩 부족

### 🚀 기회
- GPT 이미지 생성 + 내장 DB → 유지보수 자동화, 이미지 퀄리티 확보
- 기업형 UI/UX → 신뢰도와 설득력 있는 브랜딩 가능
- 성과 기반 콘텐츠 구성 → 강력한 전문가 인식 제공

---

## 3. 🧍‍♂️ 사용자 페르소나 & JTBD

| 사용자 | 니즈 (JTBD) |
|--------|-------------|
| 정부기관 바우처 담당자 | 실적과 이력을 빠르게 파악하고 싶다 |
| 스타트업 대표 | 실무 경험이 풍부한 마케팅 전문가를 찾고 싶다 |
| 마케팅 대행사 | 신뢰할 수 있는 파트너를 제안서에 포함시키고 싶다 |

---

## 4. ⚙️ 핵심 기능 구성 (MVP 기준)

| 섹션 | 기능 요약 |
|------|-----------|
| **Hero Section** | 구본형 님 프로필 사진 + 슬로건 + GPT 생성 3D 이미지 배경 |
| **About Me** | 경력 요약, 핵심 키워드, 링크 버튼 |
| **Career Timeline** | 연도별 커리어 (퍼펙트스톰, 마블러스 등) 타임라인으로 구성 |
| **Portfolio Cards** | 프로젝트별 카드형 정리, 클릭 시 상세 팝업 or 모달 |
| **성과 시각화** | KPI 수치 (MAU, ROAS 등) count-up 및 차트 |
| **PR/News Section** | 수상, 기사, 공모전 등 카드 형태 나열 |
| **Global Map** | 해외 프로젝트 경험 지도 시각화 |
| **Contact & Footer** | 이메일, SNS 링크, 캘린더(예약), 푸터 구성

---

## 5. 🧪 기술 스택

| 항목 | 기술 |
|------|------|
| **Frontend** | React + Vite |
| **Styling** | Tailwind CSS |
| **Animation** | Framer Motion |
| **Image Generation** | GPT-4o 내장 이미지 생성기 사용 |
| **Database** | 내장 DB (JSON or SQLite or IndexedDB) |
| **배포 플랫폼** | Vercel 또는 GitHub Pages |
| **디자인 툴** | Figma 기반 디자인 시안 및 컴포넌트 구조 |

---

## 6. 🗂️ 폴더/파일 구조 예시

```bash
project-root/
├── public/
│   └── images/             # GPT 이미지 + 프로필 사진 저장
├── src/
│   ├── assets/             # 폰트, 색상, 공통 리소스
│   ├── components/         # Hero, Timeline, PortfolioCard 등
│   ├── data/               # JSON 데이터 (portfolio.json, timeline.json 등)
│   ├── db/                 # 내장 DB 로직 (SQLite or IndexedDB)
│   ├── pages/
│   │   └── MainPage.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
└── vite.config.js
```

---

## 7. 🎨 디자인 가이드

| 항목 | 설정값 |
|------|--------|
| **Primary Color** | `#002D91` |
| **Accent Colors** | `#18A0FB`, `#F5F9FF` |
| **Font Family** | `Noto Sans KR`, `Pretendard` |
| **Button Style** | 라운드형, Hover 시 색 반전 및 그림자 |
| **아이콘** | Heroicons or Feather Icons |
| **이미지 톤** | GPT 생성 이미지: 3D 블럭 스타일 + 기업 감성 |
| **레이아웃** | 12컬럼 반응형 그리드 |
| **반응형** | 모바일, 태블릿, 데스크탑 자동 적용 구성

---

## 8. ✨ 인터랙션 & 애니메이션

### 공통 인터랙션

| 액션 | 효과 |
|------|------|
| Hover (버튼/카드) | 색 반전, Scale-up, 그림자 |
| 클릭 (카드) | 상세 팝업 모달 |
| Scroll 진입 | `fade-in`, `slide-up`, `count-up` 등 |
| Footer 버튼 | `scrollTo({ top: 0, behavior: 'smooth' })` 실행 |

### 스크롤 애니메이션

| 섹션 | 효과 |
|------|------|
| Hero | 슬로건 + GPT 이미지 등장 애니메이션 |
| Timeline | 연도별 이력 `left to right` 슬라이드 |
| Portfolio | 카드형 요소 `staggered fade-in` |
| 성과 수치 | `count-up` (MAU, 앱설치 등) |
| 지도 영역 | 진입 시 지역별 마킹 `zoom-in`

---

## 9. 🧠 내장 DB 활용 구조

| 데이터 항목 | 방식 | 예시 |
|-------------|------|------|
| portfolio.json | JSON 파일 or IndexedDB | 프로젝트명, 설명, 썸네일, 링크 |
| timeline.json | JSON | 연도, 포지션, 회사 |
| news.json | JSON | 기사명, URL, 날짜 |
| kpi.json | JSON | MAU, CPA, ROAS 등 |

※ Firebase 또는 Supabase로 확장 가능성 고려

---

## 🔄 확장 기능 제안

| 기능 | 설명 |
|------|------|
| GPT Hero 이미지 교체 | 계절, 테마별로 배경 자동 생성 |
| 메타태그 자동 삽입 | SEO 및 SNS 공유 최적화 |
| PDF 다운로드 버튼 | 포트폴리오 자동 다운로드 |
| 상담 예약 기능 | 캘린들리 등 외부 연동 |
| 관리자 콘텐츠 등록 기능 | 내장 DB를 활용한 간단한 CMS 구현 가능

---

## ✅ 다음 액션

| 항목 | 설명 |
|------|------|
| 🎨 디자인 시작 | Figma 기반 와이어프레임 구성 |
| 🖼️ GPT 이미지 생성 | 3D 스타일 Hero 배경 요청 |
| 💻 코드 템플릿 | React + Tailwind 기본 구조 제공 |
| 📦 DB 세팅 | JSON/SQLite 구조 제공 및 예제 데이터 포함 |
| 🌐 배포 지원 | GitHub Pages or Vercel 구성 지원 |

---

## 📌 요약

- JB금융 스타일 기반 신뢰도 높은 랜딩페이지
- 구본형 님의 전문성과 성과 중심 경력을 시각화
- GPT 이미지 생성과 내장 DB로 유지관리 용이
- 확장 가능성과 배포까지 고려한 실용적 PRD 구성