소개
시도하고자 했던 것과 그 이유를 알려주세요.
젠스파크 18기 과제로 퍼스널 브랜딩을 위한 웹 앱 작성 과제(AI강사 프로필 사이트 제작 )를 진행하였고, PRD와 젠스파크의 조합으로 결과물을 얻는 과정은 매우 매우 유익한 경험이었습니다. 이러한 학습이 안된 상황에서 결과물을 만들어 내는데는 많은 시간과 인내가 필요 했을텐데 첫 과제를 하면서 매우 유익하였으며, 다음 시간이 매우 기다려 집니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
PRD builder , 젠스파크 AI(유료)
과제 진행 과정:
사전 준비 사항 : PRD 빌더에서 작업을 요청 할 랜더링 사이트의 사진 (사이트에서 이미지 복사) 과 AI강사 프로필 파일(docx)
GhatGPT의 PRD Builder GPTs 오픈
PRD Builder GPTs 대화창에 아래 내용 업로드
. 위 1에서 준비한 사진과 AI강사 프로필.docx + 프로필 싸이트 제작 요청 프로프트(사전 제공된 샘플 활용)
디자인 요소를 추가하여 내용을 보완
PRD문서 재정리 요청 => PRD 문서를 전체적으로 재 정리
추가요청 사항 => "이미지는 gpt1 모델을 이용해줘.” 등 원하는 이미지 생성 모델 요청
"PRD문서를 전체적으로 다시 정리 요청" 프롬프팅
"정리된 PRD문서를 복사하고 붙여넣기 쉽도록 코드블럭 형태로 만들어 줘" 프롬프팅
결과물 확인 하여 생성된 프롬프팅 복사 => 젠스파크에 입력하게 될 프롬프팅입니다.
젠스파크에서 시작점 선택을 위해 화면을 붙여넣고 "뭘 선택하는 해" 질문 프롬프팅 => "간단한 웹사이트 또는 웹앱"
젠스파크 AI실행 후 "개발자" 선택 => "간단한 웹사이트 또는 웹앱" 선택 =>"빌더 시작" 클릭
대화창에 입력 프롬프팅 :
"RPD에서 사용했던 사진 과 AI강사프로필" + 위 9에서 생성한 "RPD에서 생성한 최종 프롬프팅"
미리보기 탭에서 랜더링 결과를 확인하면서 추가로 수정/보완 요청
로고 변경
히어로 스타일변경
프로필 사진 변경
내용 수정 등 등
견적 요청을 입력하여 database에 저장되는 지 확인(database 탭에서 확인 가능)
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
(내용 입력)
완성되었습니다! 🚀✨
## 🎆 AI 스타일 히어로 섹션 완성 요약
### ✨ 새로운 인터랙티브 AI 배경 기능
1. **🎨 Canvas 기반 입자 시스템**
- 50개의 신경망 입자들이 실시간으로 움직임
- 입자 간 연결선이 거리에 따라 동적으로 생성/소멸
- 펄스 애니메이션으로 생동감 있는 효과
2. **🖱️ 마우스 인터랙션**
- **신경망 노드**: 마우스에 가까워지면 밀려나는 효과
- **플로팅 아이콘**: 회전하며 크기가 변하는 반응
- **부드러운 전환**: CSS transform으로 자연스러운 움직임
3. **💫 다양한 AI 요소들**
- **신경망 노드**: 6개의 펄스 애니메이션 노드
- **AI 아이콘**: 🧠⚡🔬💡🎯🚀 등 관련 이모지들이 떠다님
- **바이너리 코드**: 5개 열의 매트릭스 스타일 코드 비
- **회로 라인**: SVG 기반 전자회로 패턴 흐름
- **데이터 스트림**: 8개의 입자가 화면을 가로지르는 효과
4. **🎯 시각적 효과**
- **진한 파란색 그라데이션**: from-blue-900 via-blue-800 to-indigo-900
- **글로우 효과**: 모든 요소에 블루 톤 발광 효과
- **투명도 애니메이션**: 요소들이 나타났다 사라지는 효과
- **색상 조화**: 일관된 블루 컬러 팔레트 (#00A3FF 계열)
### ⚡ 성능 최적화
1. **디바이스별 최적화**
- **데스크탑**: 모든 효과 활성화
- **태블릿**: 일부 요소 수 감소
- **모바일**: 간소화된 애니메이션
- **저사양 기기**: Canvas 비활성화
2. **배터리 친화적**
- `requestAnimationFrame` 사용으로 부드러운 애니메이션
- 화면 밖 요소는 계산에서 제외
- `prefers-reduced-motion` 지원
3. **메모리 관리**
- 오래된 데이터 스트림 자동 제거
- 효율적인 입자 업데이트 알고리즘
### 🎮 인터랙티브 경험
- **몰입감**: 마우스 움직임에 따라 요소들이 실시간 반응
- **직관성**: 자연스러운 물리 법칙을 따르는 움직임
- **재미요소**: 마우스로 요소들을 쫓아다니며 상호작용 가능
- **시각적 피드백**: 모든 인터랙션에 즉각적인 시각적 반응
이제 김지현 AI 강사님의 웹사이트는 정말 미래지향적이고 기술적으로 인상깊은 히어로 섹션을 갖추게 되었습니다! 방문자들이 처음 페이지에 접속하는 순간부터 AI 전문가다운 혁신적인 기술력을 체감할 수 있을 것입니다. 🌟🤖결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
사전에 올바른 PRD를 작성하였을 경우 AI를 통한 생성 결과물의 품질이 달라지고, 무엇보다도 짧은 시간에 원하는 결과물을 얻을 수 있음을 실감하였습니다. 나름 AI를 잘 활용하기 위해 프롬프팅을 AI를 활용했지만 원하는 결과물을 얻어내기 까지는 AI와 사투를 벌이면서 많은 시간을 보내야 했어요., 밤을 새는 경우도 허다 했구요. 이번 과제를 학습하면서 그 동안 내가 사투를 벌이면서 해소가 되지 않았던 부분들을 어느 정도는 해결이 될 것 같고, 더 새로운 것들을 배울 수 있을 것 같아 다음 시간이 기대됩니다.
과정 중에 어떤 시행착오를 겪었나요?
아직 시행 착오는 없었던 것 같고, RPD와 젠스파크를 사용해 보지 않아 사용법을 익히고 이해하는 시간이 필요하여, OT를 진행하는 수업에서 따라하는데 좀 어려움이 있었습니다. 저 처럼 처음 사용해 보는 분들은 아마 같은 상황일 거 같습니다. 아무리 쉽다고 해도 해보지 않은 사람에게는 어렵답니다.
도움이 필요한 부분이 있나요?
온라인으로 교육을 진행할 때 수강자들이 어려운 것은 어쩔 수 없지만 하나 건의를 하자면 현장과 다르게 온라인에서는 어떤 포인트를 선택할 때, 마우스를 움직임이 보이질 않기 때문에 어디를 얘기하는 지 놓지게 됩니다. 마우스의의 화살표를 좀 더 키우거나 칼라로 표현된다면 좋을 거 같아요.
앞으로의 계획이 있다면 들려주세요.
현재 참여 중인 과제를 열심히 학습하여 빠른 이해를 할 수 있도록 하는 게 우선입니다. 활용은 학습 된 상태에서 가능하기 때문입니다.
