커서(Cursor) AI 팁 : Requirements.md 활용으로 프로젝트 일관성 유지하기

커서를 사용하면서 생기는 가장 흔한 실수들… 당신은 피하고 있나요?

커서를 사용하다 보면 예상치 못한 순간이 있어요. 갑자기 코드가 예상대로 안 돌아가거나, 프로젝트 방향이 엉뚱한 쪽으로 가는 경우 말이에요. 대부분 이런 문제는 명확하지 않은 요구사항과 부족한 커뮤니케이션에서 비롯되죠. 하지만 해결 방법은 생각보다 간단해요.

바로 Requirements.md 파일을 활용하는 거예요.

Requirements.md 파일은 그냥 단순한 요청서가 아니에요. 이 파일을 잘 활용하면 AI와의 협업을 극대화하고, 코드의 일관성을 유지할 수 있는 중요한 도구가 돼요. 이 파일을 어떻게 쓰느냐에 따라 프로젝트가 큰 변화를 맞이할 수 있어요.

Requirements.md란?

쉽게 설명드리면, 우리가 만들 프로젝트의 요구사항을 AI가 이해할 수 있도록 정리한 요청서라고 생각하시면 돼요.

이 파일을 활용하면 AI가 코드의 전반적인 구조나 세부 사항을 파악하고, 이를 바탕으로 코드를 작성하거나 디버깅하는 데 도움을 줄 수 있어요. 그 결과, 프로젝트 구조에 맞는 안정적인 코드를 생성하고 오류를 줄일 수 있어요.

작성 후, 커서의 @멘션 기능을 통해 이 요청서를 불러와 코드를 새로 생성하거나 수정할 때 유용하게 사용할 수 있어요.

또한, 프로젝트에 변경사항이나 업데이트가 생기면 이 요청서도 꼭 함께 업데이트해야 일관성 있는 개발이 가능해요.

요구사항은 가능한 한 상세하게 작성하는 것이 좋고, 기본적으로 프론트엔드와 백엔드 두 가지 요청서를 작성하는 것이 좋아요.

이제 제가 실제 프로젝트에서 사용했던 `frontend_instruction.md` 파일을 통해 요청서를 어떻게 작성하고 활용하는지 보여드릴 테니, 여러분의 프로젝트에 맞는 요청서를 추가로 작성해서 활용해 보시면 좋을 것 같아요.

• frontend_instruction.md 

frontend_instruction.md

0.00MB

---

Frontend_instruction.md 문서 작성 가이드

Frontend_instruction.md 파일은 프론트엔드에 관한 요구사항을 작성하는 문서입니다.

 

시작에 앞서 프로젝트 루트 디렉토리에 requirements 폴더를 생성하고
Frontend_instruction.md 파일을 생성해 주세요

#project-overview (프로젝트 개요)

#feature-requirements (기능 요구사항)

#relevant-codes (관련 코드)

#Current-file-instruction (현재 파일 구조)

#rules (규칙)

1. 프로젝트 개요 (#project-overview)

프로젝트 개요 섹션에서는 여러분이 만들고자 하는 프로젝트가 어떤 것인지 간단하게 설명해요.

예를 들어, 프로젝트가 어떤 기능을 제공하며, 어떤 기술을 사용할 것인지 한눈에 파악할 수 있도록 요약해야 해요.

예시:

#project-overview (프로젝트 개요) 
Firebase에서 호스팅되는 웹 앱을 구축하여 사용자가 뉴스레터 정보를 입력하고 분류할 수 있도록 합니다. 
데이터베이스는 Supabase를 사용합니다.

작성 팁:

• 프로젝트의 핵심 목표를 한두 줄로 요약해요.
• 사용 기술도 간단하게 언급해요. (예: Firebase, Supabase)
• 이 섹션은 짧고 명확하게 작성하는 게 좋아요.

2. 기능 요구사항 (#feature-requirements)

이 섹션은 프로젝트에 필요한 구체적인 기능을 나열하는 곳이에요.

각 기능이 어떤 역할을 하는지, 어떤 기술로 구현될지 등을 설명해요.

기능 목록을 세부적으로 작성할수록 개발 작업이 명확해져요.

예시:

#feature-requirements (기능 요구사항) 

1. Next.js, Tailwind, React, Firebase Functions, Firebase Hosting, 
Firebase Auth, Supabase(데이터베이스)를 사용합니다.

2. 사용자가 좋아하는 뉴스레터에 대한 정보(뉴스레터 이름, 카테고리, url, 평가, 리뷰, 유료/무료 등)를 
스프레드시트와 유사한 뷰에서 입력하고 제출할 수 있는 폼을 만들어야 합니다.

3. 2번 항목의 폼은 읽기 쉽고 사용자 친화적이어야 하며, 멋진 UI와 애니메이션을 갖추어야 합니다.

4. 데이터 저장 및 조회는 Supabase를 통해 이루어집니다.

5. 평가(별점), 및 리뷰는 서로가 공유하는 동일한 폼에서 작성할수있어야하고 사용자들이 남긴 댓글과 반응을 
잘볼수있어야합니다.

작성 팁:

• 각 기능을 명확하게 나열해요.
• 필요한 기술 스택을 구체적으로 언급해요.
• 기능마다 사용자가 어떤 동작을 할 수 있는지 설명해요.

3. 관련 코드 (#relevant-codes)

이 섹션에는 프로젝트에 필요한 외부 라이브러리 관련 코드나 예시를 포함시켜 주세요.

작성된 코드는 개발자가 바로 사용할 수 있도록 구체적이고 실제 사용 가능한 코드여야 해요.

 

예를 들어, 여러분이 ChatGPT API를 사용한다면, OpenAI 공식 문서에서 해당 사용법을 찾아 작성할 수 있어요. 또는, 여러분이 사용하는 다른 외부 라이브러리의 사용법을 구체적으로 정리해도 괜찮습니다.

예시:

#relevant-codes (관련 코드)
Dark mode
Install next-themes
Start by installing next-themes:

npm install next-themes
Copy
Create a theme provider
components/theme-provider.tsx
"use client"
 
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

작성 팁:

• 주요 코드나 참고할 수 있는 코드를 간단하게 정리해 둬요.
• 필요에 따라 주석을 달아 코드 설명을 추가해요.

4. 현재 파일 구조 (#current-file-instruction)

이 섹션은 프로젝트의 현재 파일 구조를 설명하는 곳이에요. 프로젝트에 어떤 파일과 폴더가 있는지, 각각의 역할이 무엇인지를 명확하게 보여줘요. 프로젝트 구조를 명확히 함으로써 커서가 올바른 위치에 파일을 생성할 수 있고 장기적인 관점에서 코드의 유지보수를 편하게 하는 효과가 있어요 또한 여러분이 사용하는 디자인 패턴을 미리 정의함으로써 여러분이 기대하는 프로젝트 구조에 맞게 작업을 진행해 나갈 수 있어요

 

• 디자인패턴이란? 디자인 패턴은 소프트웨어를 개발할 때 문제를 효율적으로 해결하기 위해 자주 사용되는 코딩 방식을 의미해요. 개발자가 같은 문제를 반복적으로 겪지 않고, 코드의 유지 보수성과 확장성을 높일 수 있도록 돕는 것이 디자인 패턴의 핵심이에요.

예시:

#Current-file-instruction (현재 파일의 전체 구조)
.next
app
├── fonts
├── globals.css
├── layout.tsx
├── page.tsx
├── login
│   └── page.tsx
└── lettersheet
    └── page.tsx
    └── lettersheet.tsx
components
├── LoginForm.tsx
├── theme-provider.tsx
├── theme-toggle.tsx
└── ui
    ├── avatar.tsx
    ├── button.tsx
lib
├── AuthContext.tsx
├── firebase.ts
├── supabase.ts
└── utils.ts

작성 팁:

• 프로젝트 폴더 구조를 계층적으로 나열해요.
• 각 파일이 이름은 역할에 따라 잘 정해야 해요
• 프로젝트 폴더 구조를 직접 타이핑해서 작업하긴 어려워요 아래에 몇 가지 팁을 알려드릴게요
  
  

커서에서 쉽게 프로젝트 구조 생성하는 방법

1. 커서에서 여러분의 전체 코드들이 다 보이도록 화면을 캡처해 주세요 (너무 길면 확대/축소 기능을 이용해서 캡처해 주세요.

2. 커서 Chat을 열고 사진을 첨부해주세요 모델은 Gpt 4o / Claude 3.5중에 선택해 주세요

• 드래그 앤 드롭: 이미지 파일을 컴퓨터에서 직접 채팅창으로 끌어다 놓습니다.
• 붙여 넣기: 스크린숏을 찍은 후 채팅창에 Ctrl+V (또는 Command+V)로 붙여 넣습니다.

3. Chat 창에 이 프롬프트를 입력하세요 

해당 사진은 내 프로젝트의 파일구조를 찍은 사진이야
사진을보고 프로젝트 구조를 문서화 시켜줘

4. 생성된 프로젝트 구조를 복사하여 현재 파일 구조 (#current-file-instruction)에 붙여 넣기 하세요

5. 규칙 (#rules)

이 섹션에서는 코드 작성 규칙이나 폴더 구조에 대한 규칙을 설명해요.

예를 들어, 새로운 컴포넌트가 생성될 때 어디에 위치해야 하는지, 파일 이름 규칙 등을 정의해요.

예시:

#rules (규칙)

- 모든 새로운 컴포넌트는 특별히 명시되지 않는 한 /components에 생성되어야 하며 
example_component.tsx와 같이 이름 지어져야 합니다.

- 모든 새로운 페이지는 /app에 생성되어야 하며 example_page.tsx와 같이 이름 지어져야 합니다.

작성 팁:

• 명확한 규칙을 정의해서 프로젝트가 일관성을 유지하도록 해요.
• 각 규칙은 구체적이고 간단하게 설명해요.
•  

마무리

제가 예시로 보여드린 작성법을 토대로
Backend_instruction.md 파일이나 database.md 같은 파일을 여러분의 프로젝트에 맞게 추가로 만들어 활용하시면 됩니다.

 

다시 한번 강조드리지만, 중요한 점은 여러분의 프로젝트를 상세하게 문서화하는 것입니다. 이렇게 작성된 문서를 바탕으로 AI에게 요청하면, 원하는 결과물에 최대한 가까운 결과를 얻을 수 있어요.

 

아래 첨부한 파일은 제가 Supabase 데이터베이스를 쓰면서 작성했던 요청서입니다.

Frontend_instruction.md 파일과는 많이 다르지만, 핵심은 동일하다는 점 이해되시죠?

 

supabase_rule.md

0.00MB

 

앞으로 커서 관련 꿀팁과 커서를 활용해 실제 프로젝트를 제작하는 방법을 꾸준히 업로드할 예정이에요.

제 콘텐츠를 통해, 여러분은 커서를 활용해 더 효율적으로 코드를 작성하고, 직접 프로젝트를 완성해 서비스까지 만들어볼 수 있을 거예요

 

만약 여러분이 커서를 제대로 활용해서 자신만의 서비스를 만들어보고 싶다면, 구독 부탁드려요!

이 과정을 통해 실질적인 개발 스킬을 익히고, 빠르게 아이디어를 실현하는 방법을 배울 수 있습니다.

 

 

💡FreAiner 슬랙 커뮤니티에 참여하세요!

FreAiner 슬랙 커뮤니티에서 다른 FreAiner들과 아이디어를 나누고, 앱 및 웹 개발에 대한 다양한 정보를 교환해 보세요. 

👉 [슬랙 커뮤니티 참여하기]

---

💬 Threads에서도 FreAiner와 함께해요!

Threads에서 실시간으로 이야기를 나누며, FreAiner의 개발 팁과 인사이트를 만나보세요. 더 많은 사람들과 소통하며 네트워크를 확장해 보세요!

👉 [Threads에서 FreAiner 팔로우하기]