소개
지난 젠스파크 줌 미팅 때 공유해주셨던 ChatGPT PRD 기능과 젠스파크 AI개발자를 활용해 웹사이트를 만드는 방법을 적용해, 실제 사용을 목적으로 한 웹사이트를 만들어 봤습니다.
진행 방법
ChatGPT PRD 를 활용해 구체화된 프롬프트 를 (코드블럭) 만들고 이를 젠스파크에 적용해 웹사이트 구체화
Tip: https://www.pulmuonefoundation.org/여기를 레퍼런스로 해서 내프로필사이트를 만들어줘 스타일, 디자인, 동작, 구조를 전체적으로 가져오고, 사진이나 이미지도 비슷한 스타일로 만들어서 사이트에 반영해줘, 어떤 프롬프트로 요청하면 될지 프롬프트를 제공해줘
Tip:
다른 유형의 사람들을 보여주는 웹 페이지
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
# ✅ Product Requirements Document (PRD)
프로젝트명: 홍엘린 AI 강사 개인 프로필 웹사이트
버전: MVP v1.1
작성일: 2025-09-08
---
## 1. 🧭 프로젝트 개요 (Project Overview)
전문 에듀테크 강사이자 AI 교육 콘텐츠 전문가인 홍엘린 강사님의 커리어, 철학, 활동 내용을 소개하고 협업 및 강의 요청을 받을 수 있는 개인 프로필 웹사이트를 구축합니다.
Pulmuone Foundation Classroom 사이트를 디자인 레퍼런스로 하여, 따뜻하고 신뢰감 있는 사용자 경험을 제공합니다.
---
## 2. 🚩 문제 정의 & 기회 요약 (Problem & Opportunity)
### ❌ 문제점
- 온라인 브랜딩 채널 부족
- 강의/협업 요청 수단 제한
### ✅ 기회
- Pulmuone 스타일의 따뜻한 디자인 차별화
- 웹사이트 기반 협업 유입 확대
- 생성형 AI/교육 콘텐츠 전문가 이미지 강화
---
## 3. 👤 사용자 & JTBD
| 사용자 유형 | JTBD |
|------------|------|
| 학부모 | "신뢰할 수 있는 영어교육 전문가를 찾고 싶다" |
| 교육기관 | "신뢰할 수 있는 강사를 섭외하고 싶다" |
| 협업 제안자 | "콘텐츠 제작, 강연 협업 제안을 하고 싶다" |
---
## 4. 🧩 핵심 기능 (Core Functionalities)
| 섹션 | 설명 |
|------|------|
| Hero Section | 이름, 직책, 키워드, 부드러운 스크롤 애니메이션 |
| About Me | 일러스트 + 교육 철학 소개 |
| Expertise | 강의 주제별 카드 + 아이콘 (호버 효과) |
| Career Timeline | 연도별 커리어 (slide-in 애니메이션 포함) |
| Certifications | 자격증 카드 + 호버 확대 |
| Contact & Estimate | 견적/강의 요청 폼 + 제출 확인 메시지 |
| Footer | 로고, 저작권, 소속 정보 등 |
---
## 5. 🛠️ 기술 스택 (Tech Stack)
| 구성 요소 | 기술 |
|-----------|------|
| Frontend | React + Vite |
| Styling | Tailwind CSS |
| Animation | Framer Motion or AOS |
| Form 처리 | EmailJS or Google Sheets API |
| Hosting | Vercel or Netlify |
| Assets | DALL·E 일러스트, Flat SVG 아이콘 |
---
## 6. 🗂️ 파일 구조 (File Structure)
```bash
/elin-profile-site
├── public/
│ └── assets/
├── src/
│ ├── components/
│ ├── pages/
│ ├── styles/
│ ├── App.jsx
│ └── main.jsx
├── tailwind.config.js
├── vite.config.js
└── index.html
```
---
## 7. 🎨 디자인 가이드 (Design Guide)
### 🎨 색상 팔레트
| 이름 | 코드 | 용도 |
|------|------|------|
| Mint Green | #40C9A2 | CTA, 버튼 |
| Soft Pink | #FBC4D6 | 배경 강조 |
| Pastel Yellow | #FBE881 | 카드 호버 |
| Deep Navy | #20203A | 타이틀/텍스트 |
| Light Gray | #F5F5F5 | 배경 |
### 🖋️ 폰트
- Pretendard / Noto Sans KR
- Weight: 700 (타이틀), 500 (섹션명), 400 (본문)
### 🔳 레이아웃
- 최대 너비: 1200px
- 중앙 정렬
- 패딩: px-6 py-20
- Flexbox + Grid 사용
---
## 8. ✨ 인터랙션 & 애니메이션
| 요소 | 설명 |
|------|------|
| 버튼 호버 | 색상 변화 (`bg-mint → yellow`) + 부드러운 전환 |
| 카드 호버 | scale-105 + shadow-lg |
| 스크롤 애니메이션 | fade-up, slide-in, stagger (Framer 또는 AOS) |
| Hero scroll | bounce chevron 애니메이션 |
| 네비게이션 | sticky + scroll spy |
| 모바일 메뉴 | slide-in 메뉴 전환 |
| 폼 제출 피드백 | SweetAlert2 또는 Framer Motion 모달 |
---
## 9. 📬 견적문의 & 문의 내역 기능
### 📥 문의 폼 항목
- 이름
- 이메일
- 문의유형 (강의 요청 / 견적 문의 / 기타)
- 내용
- 예산 (선택)
- 제출 버튼
### 📤 처리 방식
- EmailJS 또는 Google Sheets 연동 (MVP)
- 향후: Notion, Airtable, Firebase 연동 가능
- 확인 메시지 애니메이션 포함
---
## 10. 🔭 향후 고도화 (Post-MVP)
- 유튜브 강의 영상 삽입
- 블로그/칼럼 연동
- 다국어 전환 기능
- 문의 내역 대시보드
- 상담 챗봇 연동 (AI 기반)
결과와 배운 점
한국어 앱의 스크린 샷
아직 기초적인 수준임에도 불구하고 스터디에서 공유해주신 내용을 기반으로 향후 영어교육 전문가의 커리어를 쌓고자 하는 아내의 초기 사이트를 만들 수 있다는 점이 신기하기도 하고 뿌듯하기도 했습니다.
추후에는 사이트의 완성도를 높이기 위한 프롬프트 엔지니링을 배워가고 싶고,
완성본의 부분 수정을 하기 위해서는 어떻게 수정 프롬프트를 입력하는게 효과적인지 배우고 싶습니다.
도움 받은 글 (옵션)
지난주 젠스파크 스터디시 공유해주셨던 내용과 프롬프트를 활용해 템플릿과 사이트 내 적용 내용을 변경해 적용했습니다.
