소개
온라인 강의를 들으며 AI 도구를 혼자 익히는 건 생각보다 어려웠습니다. 집중력도 쉽게 흐트러지고, 중간에 다른 일이 생기면 끝까지 따라가기도 힘들었죠. 그래서 이번엔 토요일 오프라인 모임에서 직접 만나서, ChatGPT, V0, Cursor를 활용해 랜딩페이지를 함께 만들어보는 실습을 진행해봤습니다 💻👫
그 결과, 실행력도 높고 서로 도와주며 훨씬 빠르게 성과를 낼 수 있었어요!
진행 방법
🔧 사용한 도구
ChatGPT: PRD(요구사항 정의서)를 초안부터 작성
V0: PRD 기반으로 기본 랜딩페이지 디자인 생성
Cursor: Todo 목록 기반으로 수정 및 마무리 작업 진행
Google Sheets: 전체 실습 흐름과 프롬프트, 체크리스트 정리
🔁 실습 흐름
GPTs PRD Builder로 PRD 만들기
"1. 풀스택 개발자, 컨설턴트 2.AI, 개발, 자동화, 지식관리, 교육, 콘텐츠 제작, 비즈니스, 인문학, 가족/커뮤니티 등 다양한 분야에 관심이 많으며, 실질적인 생산성과 자기계발, 그리고 지식의 체계적 관리와 공유에 특히 열정적입니다. 바닐라 Javascript를 사용하고 Plain CSS 를 활용해서 간단한 랜딩페이지를 구현해주세요."한국 제품 요구 사항 문서의 스크린 샷
V0에서 PRD를 바탕으로 첫 번째 디자인 시안 생성
자주색 배경이있는 웹 사이트의 홈페이지
Cursor에서 생성된 디자인을 보고 Todo를 생성하고, 순차적으로 수정
Adobe Adobe Adobe Adobe Adobe의 스크린 샷
커서 ai로 변경된 랜딩페이지
게임 웹 사이트를위한 웹 사이트 디자인
Google Sheets에서 제공된 실습 프로세스와 체크리스트를 따라가며 진행
결과와 배운 점
오프라인 모임의 강점은 집중력과 몰입도! 🙌
모르는 것이 있으면 바로바로 동료에게 질문할 수 있어 실시간 해결 가능
Google Sheets로 제공된 체크리스트와 프 롬프트 정리 덕분에 실습 흐름이 명확했고, 작은 작업도 완료할 때마다 성취감을 느낄 수 있었어요 ✅
혼자 할 땐 미뤄두던 것들도, 여럿이 함께하면 확실히 진도가 빨라집니다
다음 계획
이번에 만든 랜딩페이지를 실제 배포까지 연결해보고 싶어요!
도움 받은 글
실습 체크리스트 및 프롬프트가 정리된 구글시트 자료
모각 실습 (11-12시반) 공유 스프레드시트 (공유 가능 시 링크 추가 예정)
