Cursor 로 PRD와 TODO로 차근차근 퍼스널 랜딩페이지 만들기1

소개

스터디장님의 1주차 OT를 유튜브로 다시 보면서 차근차근 시도해보았습니다

진행 방법

Tip: https://chatgpt.com/g/g-PuPOUqhcR-prd-builder

https://chatgpt.com/g/g-PuPOUqhcR-prd-builder

스터디장님의 PRD 빌더로 PRD 파일을 만들었습니다.

PRD를 만들 때에는 2~3번에 걸쳐 대화를 나누며 최대한 더 좋은 PRD를 얻어내고자 노력하였습니다.

그 이후에는 TODO.MD를 만들었습니다.

생성된 TODO와 PRD를 기반으로 개발을 시작했습니다.

기술 스텍을 보니 REACT는 제가 처음 다루어보는 거라 잘 될런지 몰라서 설렘반 두려움반으로 시작했습니다. 저는 FLASK만 써봤거든요.

## 5. Tech Stack

| 구성 요소 | 기술 선택 이유 |
|------------|----------------|
| Frontend | React + Vite – 빠르고 간단한 개발 |
| 스타일링 | Tailwind CSS – 직관적이고 반응형 지원 |
| 폼 처리 | EmailJS or Formspree – 백엔드 없이 이메일 전송 |
| 애니메이션 | Framer Motion – 스크롤, 페이드인 효과 |
| 배포 | Vercel – 빠른 무료 배포 및 도메인 연결 |
| 기타 | React Icons, Google Analytics(선택), SEO 설정 |

---

결과와 배운 점

1. 저는 PRD만 썼는데 TODO까지 해야 한다는 점을 알았습니다

2. 해당 파일을 기반으로 개발을 시작하면 천천히 차근차근 작업한다는 사실을 알았습니다. 퀄리티가 좋은 웹페이지의 기반이 되는 것 같습니다. 맨 처음 요청 후 시간이 체감상 5분은 지난 것 같습니다.

3. NODE.JS와 NPM을 덕분에 처음 설치하였습니다. 예전부터 REACT가 좋다고 해서 한번은 써보고 싶었는데 좋은 계기가 되었습니다.

NODE.JS를 설치하고 나면 무조건 커서를 껐다켜야 인식하는것 같습니다. 아니면 재부팅을 하셔야 할 것 같습니다.

이렇게 되니 바로 로컬에서 잘 실행이 되었습니다!

추후에는 아래와 같이 요청하면서 사이트를 좀 더 업데이트하고자 하였습니다.

# 포트폴리오를 관리하는 관리자 페이지를 만들어줘 
안의 내용을 내가 스스로 수정할 수 있게 말이야 

# 깃허브 링크를 연결해주는게 아니라 그냥 내가 만든 사이트들을 거기에 넣어두고 싶어 

# 포트폴리오에 나의 유튜브 채널도 올리고 싶으니 포트폴리오에는 사이트와 유튜브 채널등도 공유할 수 있어야 해