소개
언젠가 나만의 웹사이트를 한번쯤 만들어보고 싶다는 마음이 있었어요. 그런데 막상 어떻게 시작할지 막막했는데, Cursor라는 도구를 알게 되면서 용기를 내봤어요. 거기다 Playwright MCP를 이용하면 자동화된 페이지 생성이 가능하다니, 도전해보기로 했죠! 😆
진행 방법
1. 쇼핑몰 템플릿 생성부터 뉴스 클리핑 사이트로!
Cursor에게 "쇼핑몰 사이트 만들어줘" 라고 프롬프트 입력
만들어진 사이트 구조를 뉴스 클리핑 사이트로 수정
생각보다 너무 쉽게 만들어져서 당황(!)과 기쁨 동시에!
2. Stagewise로 디자인 수정
Cursor의 자체 앱인 Stagewise에서 디자인을 수정했어요
이렇게 쉽게 디자인이 바뀌다니 유레카!!!
3. 배포를 향해: GitHub & Vercel
도메인 구입!
완성된 파일을 GitHub에 업로드하기 위해 API 키 제거 등 보안 정리
GitHub에 올린 뒤, Vercel로 배포 시도!
결과와 배운 점
프론트엔드 페이지가 생각보다 쉽게 만들어져서 놀람과 감동이 있었어요 😭
수정도 직관적이고 쉬워서 웹사이트 제작의 진입 장벽이 확 낮아진 느낌!
하지만... 배포는 초보자에겐 또 다른 장벽 😥
백엔드와 프론트엔드를 함께 GitHub에 올리는 부분에서 실패했어요.
다행히 프로그래머 지인의 도움으로 방향을 잡을 수 있었어요.
"파이썬 서버를 따로 두거나, Cursor에게 route.ts 안에 구현하라고 시도해보세요."
앞으로는?
아직 개념이 하나하나 부족하지만, 하나씩 익혀가며 다음 도전을 준비 중입니다!
모르는 게 많아서 더 재미있는 것 같아요 🤩
도움 받은 글 (또는 사람)
프로그래머 지인 🙏
로즈님 지민님, 현우님, 지인 프로그래머
다음 할일
배포까지 금주중 완성해보기!!
싸이트 도메인 연결하고 검색에 걸리게 하기 까지 해보기!