"17기 AI 학습 여정을 웹페이지로 정리하면 더 열심히 할 수 있지 않을까?"
그런 마음에서 시작한 도전이었습니다. 스터디장님(성장피터님)의 Cursor 강의를 따라, PRD를 작성하고 웹페이지를 만드는 데 도전해봤어요. 평일에 수업에 집중하기 어려운 환경이라 일요일 저녁 시간을 활용해 영상 따라가며 조금씩 완성해보았습니다. 성공인지 실패인지는 아직 잘 모르겠지만, 어쨌든 "무언가"는 나왔습니다 😅
진행 방법
사용한 도구들:
🛠️ Cursor: 코딩 + AI 통합 개발 환경
📄 PRD Builder: https://chatgpt.com/g/g-PuPOUqhcR-prd-builder
진행 흐름:
PRD Builder로 퍼스널 브랜딩용 PRD를 작성하고
birdrom폴더에prd.md로 저장했습니다.Cursor에게
@prd.md를 읽고todo.md를 만들어달라고 지시했어요.소넷 4로 지정했지만 무료 체험인데도 안 되는 이슈가 발생 🤷 Auto와 소넷3.5를 번갈아가며 채팅패널을 통해 작업을 진행했습니다.
@
todo.md를 참조하여 개발을 진행해주세요라고 지시했습니다.개발을 진행하려니 node.js 설치 오류부터 시작해서 다양한 에러 가 계속!
에러 화면을 캡처해서 Cursor에 붙여 넣으며 계속 해결 요청
run이라고 뜨는걸 계속 누르며 진행하면 뭔가가 만들어집니다.
기능이 많으면 좋겠다 싶어서 이것저것 다 넣어달라고 했습니다만..
처음엔 계속 아래와 같이 에러 화면이 나왔습니다. 캡쳐하여 다시 커서에 붙여넣기 "해결해줘"를.. 남발했더니 이젠 흰화면이 나왔습니다.. 흑흑
그 다음엔 아예 흰 화면 🙈
이쯤 되니… 이건 실패인가 싶어서 실페사례 작성하려고 하던중 도시아재님의 사례글을 발견했습니다. https://www.gpters.org/nocode/post/cursor-prd-gpts-landing-kcV1xbvbIM8D4N4
“바닐라 JS + Plain CSS로 간단한 랜딩페이지를 구현해 주세요”라는 문장을 Cursor에 입력했더니...
새로운 포트넘버(?)가 생성되었습니다.
👉 드디어 화면이 떴습니다!! 🎉
근데 뭔가.. 좀 달랐습니다.. 하단의 바닐라 랜딩 페이지를 누르니까 웹페이지스러운 화면이 나왔습니다.
결과와 배운 점
완성된 웹페이지가 진짜 제가 만든 건지는 확신이 없지만, 뭔가 떠 있긴 합니다 😅
의도한 기능(예: 7월 30일까지 남은 시간 카운트)은 반영되지 않았지만, 페이지 자체는 생성됨
실질적인 배움은...
AI를 사용할 때는 명확하고 단순한 지시가 중요하다는 점!
스터디원들의 실패/성공 사례는 정말 큰 자산이라는 점!
도움 받은 글
도시아재님의 사례글 — 해결의 실마리를 줬어요 🙏
마무리 메시지
"마지막까지 뭐든 해보기!"
Cursor와 함께한 도전, 쉽진 않았지만 해보길 잘했다는 생각이 듭니다. 실패든 성공이든, 그 과정에서 배우는 게 가장 크니까요. 아직 사실 실패상황인것 같긴합니다만..
다음엔 더 잘할 수 있겠죠? 😉
