"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와 함께한 도전, 쉽진 않았지만 해보길 잘했다는 생각이 듭니다. 실패든 성공이든, 그 과정에서 배우는 게 가장 크니까요. 아직 사실 실패상황인것 같긴합니다만..
다음엔 더 잘할 수 있겠죠? 😉
