소개
뇌과학 스터디 오프모임에서 함께한 실습
커서(Cursor), 러버블(Lovable), 깃허브(Github) 등 다양한 도구를 활용해 강의 랜딩페이지 만들어보기
초보자도 시작할 수 있는 바이브코딩 기초 실전 학습
진행 방법
Google AI Studio 회원가입 → PRD(요구사항 정의서) 작성 요청
"Digital Parenting" 강의 관련 소개 및 자료를 아카이빙할 랜딩페이지를 만드려고 하는데 영문으로, 페이지 구성을 prd 형태로 써줘.작성된 영문PRD를 Lovable에 붙여넣고 한국어로 표현하도록 함. 기본 랜딩페이지 초안 생성 (생각보다 잘만들어져 나옴)
한국 웹 사이트의 스크린 샷
Github 회원가입 및 러버블에서 고양이 버튼 눌러서 깃허브에 연결 (깃허브에 폴더+코드 처음 올려봄)
키워드 목록을 보여주는 애드워즈 대시 보드의 스크린 샷
Cursor에서 repo clone 해서 Github 연동
여기서 무난히 넘어가면 바로 챗으로 요청!!!
Vercel을 통한 배포 (러버블 딱지 떼고 만들어보기)
Vercel 회원가입 (GitHub 로 가입!!)
이 랜딩페이지를 Vercel로 배포하고 싶어.위에까지 오프모임 실습에서 해봄. 집에와서 이어서 작업
Vercel token key 복사해서 커서에 알려주기
배포가 잘 안되어 해결해보라고 요청하니 커서가 여러 방법으로 시도했지만 실패.
아래 프롬프팅 줘서 성공!!!
Git에 commit, push 해주고 Vercel 에서 배포해서 페이지를 확인할 후 있게 해줘커서의 마지막 작업 메시지
- 빌드 타깃 환경 불일치가 원인이었습니다. 프로덕션 대상으로 다시 빌드 한 뒤 즉시 배포하겠습니다.배포 완료. 링크
https://digital-parent-2vljjhx97-ina-lees-projects.vercel.app/
결과와 배운 점
세팅부터 간단하지 않았지만, 함께 모여 문제 해결하며 첫걸음을 내딛게되어 뿌듯함
Lovable이 빠르게 페이지를 그럴싸하게 만들어주는 게 인상적이었음
Cursor를 통해 채팅 기반으로 수정/요청이 되는 점이 신기했음
사례글쓰면서 실습과정을 복기하면서 다시 복습한 효과 → 학습에 큰 도움이 됨
도움 받은 글 (옵션)
https://www.gpters.org/dev/post/brain-science-tDz8fPL5ko643i9
그리고 스터디장님의 친절한 실습 안내!!!
