콘텐츠로 건너뛰기

Cursor Rule로 프론트엔드 코드 표준화

  • 테크

1. Cursor란?

Cursor는 AI 기반 코딩 도우미로, 개발자의 명령과 스타일 가이드를 따라 코드를 자동 생성하거나 수정해주는 도구로 GPT-4, Claude, Gemini 등 최신 AI 모델을 코드 작성에 최적화된 환경에서 사용할 수 있게 도와주는 코드 에디터입니다.

단순히 ‘코드 짜줘’라고 말하는 것에서 끝나는 게 아니라, 파일 시스템, Git, 설정 파일, 디자인 시안까지 한꺼번에 맥락으로 삼아 코드를 작성합니다.


2. Cursor Rules란?

Cursor Rules는 프로젝트 내 코드 스타일, 컴포넌트 사용, 네이밍, 구조 등 개발 지침을 AI에게 명확히 전달하는 규칙 세트입니다.

일반 AI 도우미처럼 매번 지시하지 않아도 되며, 지속적이고 일관된 코드 생성을 유도할 수 있습니다.

Rule 유형 (Rule Type)

Cursor에서는 Rule의 적용 방식에 따라 다음과 같은 네 가지 타입을 지원합니다.

공식 문서 기준으로 Cursor는 각 Rule을 적절한 상황에 자동 포함하거나, 수동 지시어로 포함할 수 있습니다.

Cursor에서 제공하고 있는 4가지 Rule Type에 대한 설명이 포함된 테이블

Rule 작성 핵심 요소

  1. 지켜야 할 규칙을 명확히 작성합니다. → “어떻게 해야 하는가?”를 예시와 함께 구체적으로 서술하세요.
  2. 지켜야 하지 말아야 할 사항도 포함하세요. → 하드코딩 금지, 직접 구현 금지 등의 제한도 명시합니다.
  3. 중요 규칙은 상단에 배치하고, 반복 사용되는 규칙은 분리해서 별도 Rule로 작성하는 것이 좋습니다.
  4. 규칙을 500줄 이하로 유지하세요.
  5. 구체적인 예시나 참조 파일을 제공하세요.
  6. 모호한 지침을 피하세요. 명확한 내부 문서처럼 규칙을 작성하세요.
  7. 채팅에서 프롬프트를 반복할 때 규칙을 재사용하세요.

3. Rules 설정 방법 (Step-by-Step)

방법 1

Cursor > Setting > Cursor Settings로 접근하면 Project Rules를 설정할 수 있습니다.

Cursor 메뉴에서 Rule 설정을 위한 Setting 메뉴 찾는 방법을 상세하게 보여주는 화면입니다.
출처: https://www.gpters.org/dev/post/12-tips-use-cursor-BS0K2IlvQaB1BNo

방법 2

Cursor 채팅에 슬래시(/)를 입력하면, /Generate Cursor Rules가 있습니다. 이를 이용하면 Cursor가 이제까지 진행한 대화를 기반으로 Rules를 생성해줍니다.

Cursor 채팅창에서 간편하게 Rule을 설정할 수 있는 방법을 보여주는 화면입니다.
출처: https://www.gpters.org/dev/post/12-tips-use-cursor-BS0K2IlvQaB1BNo

4. Cursor를 잘 쓰는 12가지 핵심 팁

Cursor 디자이너 Ryo Lu가 제안한 실전 활용 전략입니다.

  1. 5~10개의 프로젝트 규칙부터 설정해 구조와 제약을 명확히 하세요. (/generate rules 추천)
  2. 프롬프트에 기술 스택, 동작 방식, 제약 조건을 구체적으로 작성하세요.
    • 예) “React, TypeScript, Tailwind CSS를 사용하고, 컴포넌트 파일은 PascalCase로 명명” 등
  3. 파일 단위로 작업하며 작고 집중된 변경을 반복하세요.
  4. 테스트 코드를 먼저 작성하고, 통과할 때까지 생성 결과를 반복 개선하세요.
    • Cursor는 .cursorignore 기능을 제공해, Cursor가 테스트 케이스 파일을 편집할 수 없도록 할 수 있습니다.
  5. AI가 만든 코드는 반드시 리뷰 후 직접 수정하고, 그 예시를 Cursor에게 학습시키세요.
  6. @file, @folder, @git 지시어를 사용해 적용 범위(scope)를 한정하세요.
  7. 에이전트가 다음 단계에 대한 전체적인 맥락을 파악할 수 있도록 디자인 문서와 체크리스트를 .cursor/ 폴더에 보관하세요.
    • .cursor/docs/ 또는 .cursor/checklists/ 디렉토리에 디자인 문서와 체크리스트를 저장해 다음 작업의 맥락을 제공합니다.
    • .cursor/rules/ 디렉토리에는 룰 정의용 YAML 파일만 배치하세요.
  8. AI가 틀린 코드를 생성했다면 직접 수정하는 것이 학습에 더 빠릅니다.
    • Cursor는 유저가 편집한 내용을 컨텍스트로 이용합니다.
  9. 과거 프롬프트를 이력(Chat History)에서 불러와 반복 작성 없이 계속 개선하세요.
    • Cursor에서는 이전 채팅 기록을 맥락으로 추가하는 것이 가능합니다.
  10. 모델을 전략적으로 선택하세요: Gemini는 정밀함, Claude는 넓은 맥락 해석에 유리
  11. 낯선 기술 스택에서는 문서 링크를 붙여 에러/해결 과정을 설명 받으세요.
  12. 대규모 프로젝트는 야간에 인덱싱 완료 후, 지시 범위를 좁혀 속도를 유지하세요.

5. Rule 작성 참고 자료

Cursor 공식 홈페이지에서 제공하는 페이지에서 다양하고 많은 rules를 확인할 수 있습니다.

해당 Rule들을 참고해서 작성하면 쉽게 작성할 수 있습니다.

Cursor 공식 홈페이지에서 제공하는 Rule 모음의 일부를 보여주는 화면입니다.
출처: Cursor 공식 홈페이지

최신 마케팅/고객 데이터 활용 사례를 받아보실 수 있습니다.

"~에 맞는 제품 추천해줘" 잠재고객은 이제 검색창이 아닌 AI에게 묻습니다. 당신의 브랜드는 AI 대화창에서 추천되고 있습니까?

X