나만의 프로필 페이지 만들기
코딩 파이썬 1도 모르는 저라는 사람이, AI를 통해 프로필 웹을 만들다니요.
결과물을 확인하면서도 도통 실감이 안 나네요
이번 스터디를 만난 행운 덕분이겠죠
우선, 기획과 브랜딩은 저에게는 너무나 어려운 주제라
스터디에서 언급된 용어들을 구분 정리해서 이해에 애썼습니다
텍스트로 주루룩 열거하니 직관적이지 못해 쉽게 찾아보고 쓰기 위해 캔바 코드로 나만의 개념 정리를 하였습니다
스터디에서 J님 설명하신 부분을 마구 돌려보기 하며 딱 그대로만 진행 했습니다
프로젝트 만들어 나만의 데이터가 될 수 있는 자료들을 찾아 넣었습니다
우선, 그동안 나와 나눈 일과 관련 된 모든 대화와 첨부 파일들을 바탕으로 PRD를 요청했습니다
결과를 긁어와 내용을 첨삭하고
다시 다른 창을 열어
스터디 때 알려주신 프롬프트 그대로를 넣고
수정 한 PRD 내용을 첨부하고 다듬고
lovable에서 페이지 제작 요청 가능하도록 코드 블럭으로 받았습니다
# 📘 웹페이지 기획서 (PRD – Product Requirement Document)
## 프로젝트명
**N잡하는 정사장 | 진짜 써먹는 AI**
## 작성자
정연진 ([email protected])
---
## 1. 🎯 목표 (Goal)
- “PC 활용 + AI 도구 = 디지털 생산성 10배 향상”
- SNS 브랜딩이 필요한 1인 사업자에게 실용적인 실전 코칭 제공
- “나도 할 수 있다”는 자신감을 주는 실전 중심 커리큘럼 기반 퍼스널 브랜딩
- 디지털 문맹 탈출 → AI 도구 습득 → SNS 콘텐츠 발행 → 생산성 향상 → 수익화까지 연결
---
## 2. 👥 핵심 타겟 (Target Audience)
- 디지털 도구가 낯선 40~50대 1인 기업가, 프리랜서, 전문직
- SNS 마케팅이 필요하지만 콘텐츠 제작이 어려운 분
- 반복 업무를 자동화하고 싶은 사람
- ‘써먹을 수 있는’ 실전 중심 디지털 교육을 원하는 사람
---
## 3. 💡 핵심 메시지 (Key Messages)
- “일 잘하고 싶은 대표님들의 디지털 입문서”
- “디지털 도구 → 업무 생산성 → 콘텐츠 수익화까지 한 큐”
- “컴맹도 괜찮아요, 차근차근 알려줄게요”
- “디지털 지식 정리, AI 툴 활용, SNS까지 완성되는 실전 코칭”
---
## 4. 📄 페이지 구성 (Page Structure & Navigation)
**상단 네비게이션 메뉴**: Home | About | Service | Testimonials | Content | Contact
---
### ① 🏠 Home (홈)
- 메인 슬로건: **“디지털 지식 격차 해소로 AI 활용 10배 업그레이드”**
- Before & After 실습 사례 소개
- 주요 강의 콘텐츠 및 특징 요약
- 강의 신청 / 코칭 신청 CTA 버튼
---
### ② 👩💼 About (정사장의 이야기)
- 수입물류대행 → AI 코치 전환 스토리
- 정연진 프로필 요약
- Google 공인 교육전문가
- GPTers 소속 AI 커뮤니티 강사
- AI 활용 강사 1급
- 디지털튜터 1,2급
- SNS 콘텐츠 제작자
- 인터뷰 톤의 스토리텔링 구조
---
### ③ 📚 Service (무엇을 하나요?)
- 강의 형태: 그룹 클래스 / 개인 코칭 / 기업 강의
- 사용 툴:
- ChatGPT, Gemini, Claude, Canva, Notion, DeepL, 클로바노트, 브라우저 등
- 실습 중심 커리큘럼 소개
- 참여 전 디지털 역량 진단 Google Form 링크
- 실습 환경 예시 이미지 or 스크린샷
---
### ④ 🗣 Testimonials (수강 후기)
- 릴스챌린지, PC 스터디 참여자 후기 이미지/영상
- 인스타그램 후기 링크
- 실제 Before-After 캡쳐
- 피드백 인용 예시
> “디지털 아무것도 모르던 내가 콘텐츠를 발행하게 됐어요!”
---
### ⑤ 📌 Content & Insight (콘텐츠)
- [인스타그램](https://www.instagram.com/jungsajang_ai/) / [리틀리 링크](https://litt.ly/digaiverse)
- 콘텐츠 카드:
- ChatGPT 프롬프트 예시
- 챕터별 실습 영상 임베드
- PDF / PPT 다운로드 버튼
- 툴별 튜토리얼 링크 (패들렛 모음 연동)
---
### ⑥ 📩 Contact (강의 신청 / 문의)
- Google Form 연동
- 1:1 코칭 신청 버튼
- 이메일: [email protected]
- CTA 문구:
- “정사장한테 배우면 됩니다 → 지금 신청하기 👇”
- “디지털 초보, 지금이 기회예요!”
---
## 5. ⚙️ 기술 요건 (Tech Requirements)
- 플랫폼: Canva 웹사이트 빌더 / Notion + Super / lovable
- 필수 기능:
- 반응형 (모바일 우선)
- SNS 연동
- 구글폼 및 이메일 수집
- 패들렛/콘텐츠 다운로드 가능
---
## 6. 🎨 디자인 & 톤앤매너 (Design Direction)
- 톤: 친근하고 유쾌하지만 전문성 있는 말투
- 컬러: **다크그레이 + 민트 포인트**
- 폰트: 세리프 계열
- 이미지 스타일: 커피잔, 노트북, 손글씨 정리된 메모
---
## 7. 📣 CTA 예시 모음
- “컴맹 탈출하고 싶으신 분들, 여기예요”
- “AI 툴로 콘텐츠 만들기? 정사장이 알려드립니다”
- “나도 디지털 브랜딩 할 수 있어요 → 수업 신청하기”
---
## 8. 🗓 운영 일정 (Timeline)
| 항목 | 일정 | 비고 |
|-------------------|-------------|----------------------------------|
| 콘텐츠 정리 | ~ 8월 5일 | Canva 카드, 후기 정리 포함 |
| 디자인 적용 | 8월 1주차 | Canva or lovable 템플릿 사용 |
| 신청 폼 연동 | 8월 1주차 | 구글 폼 세팅 |
| 웹사이트 오픈 | 8월 2주차 | SNS 홍보 개시 |
---
## ✅ 추가 제안 (웹디자이너 관점)
- 상단 고정 네비게이션 바 구현 (스크롤 시 고정)
- 각 Section에 Anchor ID 부여 → 부드러운 스크롤 이동
- 후기와 콘텐츠 섹션에 캐러셀 슬라이드 삽입
- 콘텐츠 섹션에는 Grid 기반 카드 레이아웃 제안
- 홈 배너엔 5초 간격 전환되는 메인 슬로건 타이포그래피 애니메이션
18년차 웹디자이너 이자 퍼스널 브랜딩 전문가가 되어서 웹 페이지를 만들어야 한다 아래 내용으로 여러 page로 구성하고 상단에 각 페이지로 들어가는 페이지 버튼이 있어야 한다 확인해서 PRD 구성해서 마크다운, 코드블럭으로 출력해줘 출력전에 다양한 방향애서 3회이상 검토해줘
----
(새로뽑은 PRD첨부)
lovable 프로필 웹
드디어 완성입니다 수업 진행 그대로 하고 딱 1번으로 완성 된 페이지 치고는 완성도가 높은편 인것 같습니다만,
한번 개념을 이해하고 실행하니 수정할 내용이 마구 보이네요 ^^
같은 프롬프트로 어떤 결과가 나오는지 궁금해서 캔바 코드와 클로드 코드로도 진행 해 보았습니다
canva 프로필 웹
claude 프로필 웹
3가지 전부 1회씩 동일 프롬프트 진행했습니다
차이점이 많이 보이네요
claude 는 오류가 심한거 같구요
수정 방안을 고민해 봐야 겠습니다
이 좋은걸 이 재미있는걸 이제야 알았다니.. ㅋㅋ
유사개발자 되는 날까지 가 보겠습니다 가즈아!!!!
너무 너무 감사했어요 우리 커리어 전환 스터디 리더 J님 그리고 모두 ...
