[Cursor] Cursor 사용법 1탄 Front서비스 (+Chatgpt를 이용한 PRD 작성)

 
프로젝트는 프롬프트엔지니어링을 통해 웹페이지 제작입니다.

이번 포스팅은 ChatGPT에 요구사항/기능/제약조건을 입력 후 PRD(Product Requirements Document, 제품 요구사항 문서)를 산출물로 받습니다. 
다음 정리된 산출물을 기반으로, Cursor를 사용해 실제 코드 작성 및 프로젝트 구조화를 진행합니다.
 
 

ChatGPT를 통한 PRD 작성

다음 프롬프트를 통해 Chatgpt에 PRD 생성 요청을 진행합니다. 
프롬프트에는 Chatgpt에 개발자 역할 부여 및 개요/기능/제약조건을 명시합니다. 이렇게 역할 부여 및 제약조건을 명시하는 이유는 해당 방법이 조금 더 나은 결과물을 볼 수 있다는 논문이 있기 때문입니다.

너는 Frontend 개발을 하는 10년차 개발자이며 PM이야. 
신규 프로젝트에 들어가기 위한 PRD를 작성할 예정이야

# 개요
- chatgpt api를 이용해 현재 주식에 대해 요약할 수 있는 기능이 있는 웹앱

# 기능
- 홈 화면에는 주식 종목을 검색할 수 있는 기능
- 홈 화면에는 한시간마다 갱신되는 검색 순위(1위~10위)
- 검색 시 결과를 깔끔하게 보여줄 수 있는 화면


# 제약조건
- **Tailwind + Flex 기반**
- 모바일/웹 둘 다 사용할 수 있는 반응형 웹페이지

 
프롬프트 입력 시, 1.개요부터 8.예상일정까지 총 8단계에 RPD 산출물을 얻을 수 있었습니다. 다만 내용이 너무 많기에 필요한 부분을 정리하였습니다. 

 
 

Cursor Settings

 
Chatgpt로 PRD 생성이 완료되었으면, Cursor에 해당 PRD를 바라보고 개발을 할 수 있게 만들어야합니다.
Project Rules, User Rules, Notepad 등 다양한 방법이 있으나, 이번 프로젝트에서는 Project Rules에 적용하여 진행합니다.(Notepad의 경우 Beta 버전으로 진행되고 있으며, 사라질 수 있는 기능입니다.)
 
1. Cursor Settings을 연 후, [Rules,Memories,Command..] 탭으로 이동 및 Project Rules에서 [+Add Rule] 버튼을 선택합니다. 그리고 필요한 프로젝트 룰 네이밍을 적습니다. 해당 룰 파일은 추후 프로젝트 / 경로에 위치하게 됩니다. 

2. Chatgpt로 얻은 RPD 결과물을 Project Rule로 작성합니다. 이 때, "Apply Manually"로 적용하여 @ 입력시 해당 RPD가 적용될 수 있게 설정합니다.

 
위를 통해 저장된 Project Rule 파일은 아래처럼 프로젝트 / 경로 하위 .cursor/rules 에 저장되게 됩니다.

 
 

Cursor를 통한 프롬프트 엔지니어링

 
사전 조건으로 다음 명령어를 통해 필요한 패키지(java,npm,gradle..)를 설치합니다. (Fedora 버전)

# repoistory update
dnf update -y  

# java install & version check
dnf install java -y
java --version

# npm install & version check
dnf install npm -y
npm --version

# gradle file download & unzip & link & version check
wget https://services.gradle.org/distributions/gradle-9.2.0-bin.zip
mkdir /opt/gradle
unzip -d /opt/gradle gradle-9.2.0-bin.zip
sudo ln -s /opt/gradle/gradle-9.2.0/bin/gradle /usr/local/bin/gradle
gradle -v

 
위 repo 및 cursor 세팅이 완료되면 cursor를 통한 개발을 실행합니다.
다음 프롬프트를 이용해 project rule 설정을 바라보고 개발을 시작하게 합니다. 

@project-rule.mdc 를 참고해 아래 조건으로 새로운 프로젝트를 생성해줘.

# Project Name
front-stock

# Description
주식 정보를 요약하는 웹 애플리케이션.
메인 서버(API-GW)와 GPT-Manager 서버(별도)로 구성된 구조.

# Directory Structure
실제 현업에서 사용하는 구조로 구성해줘.

 
정상적으로 완료가 되면 다음 폴더 구조를 가진 프로젝트가 생성이 되어지고, 

 

결과물

 
아래 명령어를 통해 front 서버를 실행합니다. 그리고 최초 요청과 동일한 기능이 존재하는 지 확인해봅니다. 최초 요청 시, 1~10위였으나 5까지만 표시된 걸로 보여 이 부분은 프롬프트를 수정해가며 수정을 진행합니다.

 
 
각 종목을 클릭하게 되면, 결과물로 넘어가게 되고, 다음 화면처럼 보이게 됩니다.

 
 
다음은 백엔드 및 GPT API를 구성해보겠습니다.