소개
커서 AI 로 "스터디 플래너" 웹 사이트 만들어보기1 - PRD.MD와 TODO.MD로 개발 시작하기
이 사례글에서는 커서 AI로 스터디 플래너를 만들어보는 과정을 사례글로 공유하고자 합니다.
우선 첫 스타트로 로컬에서 돌아가는 상태로 만들어보고자 하였습니다.
그동안 대화를 나눈것들 먼저 공유합니다.
2일 전 (14개)
하루 전 (20개)
오늘 (5개)
진행 방법
커서 AI 사용
Tip: 우선 PRD.MD와 TODO.MD를 얻어내고 이것을 기반으로 개발을 시작했습니다.
Tip: VITE+REACT 조합이 제가 예전에 개발하던 FLASK 보다는 모바일과 PC 모두에서 더 좋아보여서 맨 처음 요청시에도 VITE+REACT 기반으로 개발을 요청했습니다.
Tip: 개발은 7월 28일 밤 11시부터 시작하였습니다.
역할 개선 프롬프트
1) 역할: 당신은 대한민국에서 가장 유명한 파이썬 전문 가입니다. 전세계에서도 알아주는 전문가입니다. 당신은 파이썬 코딩 능력 관련해서 뛰어난 능력을 가지고 있습니다.
2) 질문 이유: 코딩과 관련하여 잘 모르는 초등학교 교사인 저에게 당신은 아주 훌륭한 코드를 제공해줄수 있습니다. 당신을 통해 코딩을 배우고 활용하고자 합니다.
3) 말투와 어조: 현명하고 친절한 말투로 부탁합니다. 구체적인 정보가 좋습니다.
4) 양식: 우선 당신은 방법을 저에게 알려주고 그 방법을 코드로 제공을 원하는지 저에게 물어보셔야 합니다. 해당 [아이디어]를 실현시킬 수 있는 적절한 방법을 차근차근 제안해 주세요.
5) 지시문: 나는 당신에게 나의 [아이디어]를 줄 것입니다. 그럼 당신은 나의 [아이디어] 에 알맞게 파이썬 코드를 설계하는 방법을 먼저 알려줍니다. 그 뒤에 저에게 코드를 원하 는지 물어봅니다. 내가 원한다고 답할 때만 코드를 주세요. 만약 코드를 달라는 별도의 말 이 없는 경우는 절대 전체 코드를 주지 마세요아이디어 제안 프롬프트
[아이디어] 1. 목표 - 저는 초, 중, 고 학생의 스터디 플래너 웹사이트를 만들 것입니다. - 우선 먼저 개발 시작은 고등학교 학생입니다. - 인강의 갯수를 입력하고 주 단위-일 단위의 목표 갯수를 입력하면 예상 날짜가 기록되고 사용자는 인강현황을 체크하고 일단위, 주단위 피드백을 받으며 인강을 관리받을 수 있어야 합니다. - 문제집의 정보를 입력하고 문제 갯수 혹은 페이지 단위로 관리할 수 있어야 합니다. - 공부 일기장 대시보드를 구성하여 오늘 해야할 인강, 문제수, 페이지수 등을 한눈에 볼 수 있어야 하며 실질적인 코치를 받아야 합니다. 2. 요구사항 - 당신은 대한민국에서 최고로 계획을 잘 짜는 사람입니다. - 당신은 수능 상위 0.01% 학생으로서 학생에게 실질적인 공부조언을 할 수 있어야 하며 체계적인 계획과 실천을 도울 수 있어야 합니다 - 당신은 웹사이트를 전문적으로 개발한 전문가로서 웹사이트를 잘 제작합니다. - 당신은 뛰어난 UI 디자이너로서 사용자로 하여금 모바일과 PC모두 깔끔한 UI를 제공합니다. - 당신의 이러한 뛰어난 능력은 사이트 개발의 질을 높일 수 있습니다. - 사이트 개발은 VITE+REACT 조합으로 개발합니다. - 배포는 VERCEL을 통해서 진행합니다 - DB는 SUPABASE를 통해 관리합니다. - 우선 로컬에서 개발할 때부터 .ENV를 통해 SUPABASE로부터 DB를 관리하도록 합니다. - 위의 목표를 가능하게 하는 PRD를 주세요
PRD 요청 프롬프트
코드를 주려고 하길래 PRD를 요청하였습니다.
PRD를 그냥 파일로 안만들어주어서 파일로 달라고 요청했습니다.
그러면서 TODO.MD까지 만들어달라고 했어요.
그랬더니 이렇게 TODO.MD까지 만들어주었습니다.
개발 요청 프롬프트
그래서 만들어진 PRD.MD와 TODO.MD를 대화창에 드래그해서 끌어놓고 개발 요청 프롬프트를 입력하고 기다려보았습니다.
그랬더니 알아서 이렇게 작업 목록을 개발을 시작했습니다. 시간이 꽤나 걸리는 작업이었습니다.
.ENV 파일을 직접 만들어주지 않기에 EXAMPLE파일을 통해 내용을 대충 참고하여 제가 수동으로 만들어서 적용했습니다. .ENV 파일에는 다른 사람에게 노출되지 말아야 할 아주 중요한 정보들을 넣어두는 곳이라 GIT에 배포되지 않는 파일입니다.
개발 서버를 시작하는 명령어는 npm run dev 입니다.
처음 실행시키고 로컬에서 실행하니 바로 오류가 나와서 오류 개선을 요청하였습니다.
오류
[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
C:/Users/gusrl/OneDrive/바탕 화면/studyplan/app/src/index.css:undefined:null
at We (C:\Users\gusrl\OneDrive\바탕 화면\studyplan\app\node_modules\tailwindcss\dist\lib.js:35:2121)
at LazyResult.runOnRoot (C:\Users\gusrl\OneDrive\바탕 화면\studyplan\app\node_modules\postcss\lib\lazy-result.js:361:16)
at LazyResult.runAsync (C:\Users\gusrl\OneDrive\바탕 화면\studyplan\app\node_modules\postcss\lib\lazy-result.js:290:26)
at LazyResult.async (C:\Users\gusrl\OneDrive\바탕 화면\studyplan\app\node_modules\postcss\lib\lazy-result.js:192:30)
at LazyResult.then (C:\Users\gusrl\OneDrive\바탕 화면\studyplan\app\node_modules\postcss\lib\lazy-result.js:436:17)
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.
일반적으로 로컬에서 실행시에는 http://localhost:네자리숫자 의 형태로 되어있습니다.
숫자가 달라지기도 해서 실행할 때마다 확인했습니다. 컨트롤 누른채로 클릭하면 바로 열 수 있어요. (복사 불여넣기 필요없음)
그런데 경로 문제가 발생하여 어디서 해당 명령어를 실행해야 하는지 한번 더 확인했습니다.
그런데 서버를 실제로 실행해보니 ui가 너무 이쁘지가 않았습니다.
아마도 css 경로가 잘못된것 같았습니다. 혹은 다른 문제가 있을 것으로 예상되어 아래와 같이 우선 질문하였습니다.
그 뒤에도 오류가 1번 더 나왔고 에러를 그대로 복사해서 알려주었더니
한번의 수정을 거친 뒤에
메인화면이 이상하게 내려가있는것으로 보여서 ui 수정후 실제 기능들을 하나씩 구현해나갔습니다.
ui가 이제 잘 보이기 시작하니 마음 편하게 기능들을 구현할 수 있게 되었습니다.
결과와 배운 점
PRD를 요청해야 한다.
PRD를 기반으로 TODO.MD를 요청해야 한다.
원하는 개발 방식이 있다면 미리 말을 해줘야 한다. (VITE+REACT , FLASK 등)
원하는 배포 방식이 있다면 미리 말해주는 것이 좋다 ( VERCEL 혹은 RENDER 등 웹 서버 어디에 배포를 할 것인지 말하면 그것에 맞춰서 개발해주기도 함 ), 다만 방해가 된다고 판단되면 웹서버 배포방식은 추후 요청해도 좋다.
사용할 DB를 미리 언급하는 것도 시도해보았다. 필자는 SUPABASE로 사용하고 싶었고 그것을 미리 말했기 때문에 PRD와 TODO가 그쪽으로 제안을 해주었다.
VITE+REACT 조합으로 서버를 개발하는 경우 NODE.JS 설치가 필수임. 설치후 커서를 껐다가 키도록 하자
명령어를 알아두면 좋음 npm run dev를 통해 로컬에서 서버를 실행시킬 수 있다.
npm run dev의 명령어는 터미널에서 실행하며 해당 기능이 안될 경우 폴더 경로를 변경해야 할 수 도 있다. 필자의 경우 app 이라는 폴더에 대부분의 모든 것들이 개발해주었기에
"cd app" 의 명령어로 폴더를 app 으로 이동한 뒤에 npm run dev를 입력했더니 로컬에서 테스트할 수 있었다.
현재는 PRD와 TODO.MD만 활용했지만 추후 사이트 개발시에는 TRD(기술)도 만들어서 해보고 싶다는 생각이 들었습니다.
도움 받은 글 (옵션)
17기 웹앱 스터디