여러분, AI의 핵심은 컨텍스트입니다. AI를 활용해서 코딩을 할 때에도 마찬가지인데요.

AI에게 명령을 내릴 때 구체적인 컨텍스트가 없다면은 AI가 여러분들의 요구사항을 명확하게 수행하지 못할 그런 가능성이 높아집니다.

계속해서 동작하지 않는 코드를 만들고 의도하지 않는 기능을 만드는 이유가 바로 이 컨텍스트가 부족하기 때문인데요.

AI의 답변의 퀄리티를 더 높이기 위해 성능이 더 좋은 모델을 사용할 수도 있고 더 나은 프롬프트를 작성하는 그런 방법도 있지만 그것보다 훨씬 더 중요한 게 바로 이 컨텍스트입니다.

그래서 이번 영상에서는 커서나 윈드서프와 같은 AI 코드 에디터를 활용할 때 간단한 AI 규칙 파일을 하나 추가하는 것만으로 AI가 훨씬 더 나은 코드를 생성하게 만들 수 있는 그런 방법을 말씀드리도록 하겠습니다.

여러분, 커서나 윈드서프와 같은 AI 기반 코드 에디터에는 AI 규칙 파일을 생성할 수 있는 그런 기능이 내장이 되어 있는데요.

일단 커서에서는 cursorrules 파일을 생성하면 되고 .

cursorrules라는 이 파일명으로 파일을 생성하고 이 내부에다가 저희가 이제 AI가 참고할 그런 규칙들을 정해 줄 수가 있습니다.

그리고 윈드서프에서는 이제 cursorrules 파일이 아니고 .

windsurfrules라는 요 파일을 생성하면은 이제 윈드서프의 규칙을 생성할 수가 있게 되어 있는데요.

이제 파일명만 다르고 동작하는 원리나 구조 같은 거는 동일하게 되어 있습니다.

윈드서프의 경우에는 이 아래쪽에 윈드서프 세팅을 누르게 되면 여기서 이제 Global AI Rules를 세팅할 수 있고 워크스페이스 AI Rules을 생성할 수 있는데 Workspace AI Rules는 이제 Edit Rules를 누르게 되면은 저희가 이제 생성했던 윈드서프 Rule을 수정할 수 있게 그렇게 되게 되고 Global AI Rules를 누르게 되면은 윈드서프 자체 코드 에디터 자체의 규칙이라서 해당 프로젝트뿐만이 아니고 윈드서프에서 활용하는 어떠한 프로젝트에서도 공통적으로 들어가야 되는 그런 규칙들에 대해서는 global_rules에다가 포함을 시켜주고, 나는 이 프로젝트 내부에서만 규칙을 활용하고 싶다라고 하면은 이 .

windsurfrules라는 파일에다가 이제 규칙을 추가해 주시면 됩니다.

저는 이제 커서를 기반으로 설명을 드릴 건데요.

커서에도 마찬가지로 이제 커서 세팅에 들어가서 확인을 해 보게 되면은 이제 General 탭에 보면은 이렇게 Rules for AI라는 탭이 있습니다.

이 부분은 아까 그 윈드서프에서 general_rules와 동일하게 이 커서 프로그램 자체에 대한 규칙이라서 어떤 프로젝트든지 이 규칙들은 이제 다 유지해서 그렇게 명령을 수행하게 되고요.

이 프로젝트 규칙은 cursorrules라는 파일을 생성해서 저희가 정의를 할 수가 있는데, 아래쪽에 보시면은 Include .

cursorrules file이라는 옵션이 이제 활성화가 되어 있는지를 체크해 주시면 됩니다.

이게 활성화가 되어 있어야지 프로젝트 루트 경우에 이렇게 .

cursorrules라는 파일이 생성이 되어 있을 때 이제 AI가 저희 명령을 수행하기 전에 가장 먼저 이 파일을 참고해서 이 파일에 대한 내용들을 자기의 컨텍스트를 가지고 그리고 그 다음 명령을 이제 수행을 할 수가 있게 됩니다.

그래서 제가 이제 보통 프로젝트 AI 규칙으로 설정하는 그 AI 규칙들을 하나씩 설명을 드리도록 할 건데요.

먼저 저는 이 .cursorrules라는 파일의 어, Next.

js 관련된 요러한 규칙들을 이제 설정을 해놓는 편입니다.

풀스택 개발을 하기 위해서 이 Next.js라는 프레임워크를 많이 활용하고 있는데요.

Next.js에서 이제 API를 생성을 할 때 생성하는 방식이 크게 Route Handler를 사용하는 방식과 서버 액션을 사용하는 방식 그렇게 두 가지가 있는데 저는 이제 개인적으로 Route Handler를 사용해서 API 엔드포인트를 그렇게 만드는 것을 이제 선호하기 때문에 그러한 규칙들을 이제 여기다 적어 주게 되었습니다.

그러면 이제 커서가 이제 API를 생성할 때 Route Handler라는 것을 사용해서 API를 먼저 우선적으로 생성하는 것을 그렇게 개발을 진행해 줄 수가 있게 되어 있고요.

그리고 서버 액션 같은 경우는 단순하게 폼 제출이나 간단한 데이터 처리와 같은 이런 부분에 대해서만 사용하라고 이렇게 명시적으로 이제 추가해주게 되었습니다.

그리고 라우팅에 관한 옵션도 이제 추가해 주었는데요.

저는 이제 App Router라는 것을 사용해서 개발을 진행하고 있고 그래서 프로젝트 내 라우팅은 Pages Router 대신에 App Router를 사용해라 라고 이렇게 명시적으로 추가해 줬습니다.

이제 라우팅 구조도 예전에는 이제 Pages Router가 기본으로 들어가 있었는데 이게 이제 App Router로 이제 업데이트가 되면서 커서가 이제 어떤 Next.

js의 파일 구조를 세팅을 할 때 가끔 이제 Pages Router로 생성하는 경우가 많기 때문에 저는 App Router를 무조건 사용하라고 이렇게 명시적으로 추가해 주었고요.

그리고 이제 프로젝트 구조 이 주요 폴더 구조를 이제 cursor rules 파일에다가 추가해 주는 게 굉장히 많은 도움이 되거든요.

저는 이제 위쪽에서 말씀드린 것처럼 App Router를 사용하기 때문에 소스 폴더는 사용하지 않는다고 추가적으로 이제 규칙을 또 추가해 주었고요.

그리고 실제로 제가 이제 개발을 할 때 주로 사용하게 되는 구조에 대해서도 이 아래쪽에다가 이렇게 프로젝트 구조를 추가해 주게 되었습니다.

API 관련된 엔드포인트가 있는 폴더, 개별 페이지 폴더는 그 아래쪽에다 만들어라 라고 이제 추가해 주었고요.

그리고 저는 이제 Shadcn/ui를 주로 이제 사용해서 컴포넌트를 생성하기 때문에 Shadcn/ui 공통 UI 컴포넌트는 이 경로에다가 이제 생성하라고 추가해 주었고 레이아웃 관련된 공통 컴포넌트도 이렇게 명시적으로 추가를 해 주었습니다.

그리고 이제 상태 관리 관련해서는 스토어라는 디렉토리 내부에다가 상태 관리 관련된 그러한 파일들을 이제 추가하라고 추가를 해주었고요.

그 다음에 커스텀 훅, 리액트 훅 관련돼서는 이렇게 hooks라는 폴더에다가 추가해 주도록 했습니다.

그리고 저는 이제 데이터베이스를 만들 때 보통 가벼운 ORM을 사용하기 위해서 DrizzleORM을 좀 자주 활용을 하는 편인데 DrizzleORM의 스키마를 정의할 수 있는 파일에 대한 위치 그리고 데이터베이스 연결 초기화 파일에 대한 위치 이런 것들을 이제 추가를 해주었고요.

이제 drizzle이라는 디렉토리에다가 설정을 할 수 있다라고 그렇게 적어 주게 되었습니다.

그리고 뭐 정적 파일들에 대한 부분 글로벌 스타일에 대한 부분도 추가해 주었고요.

그리고 이제 아래쪽에는 공통 인터페이스나 타입에 대한 정의를 저는 이제 types라는 디렉토리 내부에다가 다 몰아서 그렇게 처리를 해주고 있거든요.

왜냐하면 이제 타입이 인터페이스나 타입 같은 경우를 컴포넌트마다 이제 설정할 수도 있지만 AI가 이제 그 각각의 컴포넌트에 대한 타입을 참고하기가 까다로운 부분이 있거든요.

타입들이나 인터페이스 같은 경우는 이렇게 하나의 디렉터리나 파일 내부에다가 이제 모아 가지고 그렇게 처리하는 편이고 그렇게 했을 때의 장점이라고 하면은 새로운 어떤 컴포넌트를 추가할 때도 기존에 있는 이러한 타입들이 여기다 모여 있기 때문에 컨텍스트를 참고하기 더 편해서 타입 오류 없이 컴포넌트를 생성해 줄 그럴 가능성이 또 높아지게 됩니다.

그리고 유틸리티 관련된 함수들을 모아주는 그러한 디렉토리가 추가가 되었고요.

이렇게 제가 명시적으로 프로젝트 구조를 정의를 해주었기 때문에 AI는 어떠한 명령을 수행하기 전에 cursorrules 파일을 먼저 컨텍스트로 가져가서 다음 명령을 이제 진행을 해주기 때문에 이 프로젝트 구조에 따라서 내 파일들을 적절한 위치에 잘 생성을 해 줄 수가 있습니다.

그리고 저는 이제 TypeScript를 기본적으로 다 사용하기 때문에 타입스크립트를 사용하라고 이렇게 명시를 해 주었고요.

그리고 아래쪽엔 이제 인터페이스를 만들 때 인터페이스명에다가 이 I라는 접두사를 붙여서 이렇게 만드는 것을 좀 선호하기 때문에 내가 사용하는 코딩 스타일이나 우리 팀에서 활용하는 그런 코딩 스타일을 cursorrules라는 파일에다가 정의를 미리 해두게 되면은 커서가 이제 코드를 생성할 때도 이 cursorrules를 먼저 참고하기 때문에 이렇게 내가 생성한 규칙들이나 우리 팀이 생성한 그러한 코딩 스타일들을 지켜서 코드를 생성하게 만들 수도 있습니다.

만약에 이 커서를 우리 팀에서 모두가 같이 활용을 하고 있다고 하면은 cursorrules 파일을 공유해 가지고 깃허브에 올려서 모든 팀원이 cursorrules 파일을 공유해서 사용하게 되면 이런 코딩 스타일에 대한 부분도 다 맞춰서 그렇게 활용할 수가 있게 되어 있고요.

실제로 저도 이제 팀원들과 작업을 할 때 이 cursorrules 파일로 코딩 스타일이나 이런 부분들에 대해서 추가해서 해보도록 그렇게 시도를 해보고 있습니다.

그리고 저는 이제 컴포넌트는 주로 이제 ShadCN을 사용하기 때문에 컴포넌트 생성할 때는 ShadCN을 우선으로 생성하라고 이제 추가해 주었고, 그리고 이 아래쪽에는 이렇게 npx shadcn 컴포넌트 생성 명령어를 추가해 주었는데요.

이 CLI 명령어가 얼마 전에 이제 업데이트가 되면서 기존의 CLI 명령어는 이렇게 shadcn-ui라고 이렇게 명령어가 되어 있었는데 이게 할루시네이션이 굉장히 많이 발생을 하더라고요.

항상 이제 잘못된 명령어로 컴포넌트를 생성하니까 그 부분에 대해서 이제 이렇게 할루시네이션이 발생하는 부분은 저희가 작업을 하면서 그때그때 이 cursorrules 파일에다가 이런 식으로 추가해 주는 것을 추천을 드리고요.

그렇게 되면 이제 이렇게 cursorrules 파일에 추가된 요런 명령어는 이제 할루시네이션이 굉장히 많이 줄어드는 그런 효과가 있거든요.

AI가 아직 최신 데이터를 학습하지 않아서 모르는 부분도 있거든요.

그런 부분들에 대해서는 AI 규칙에다가 이런 식으로 또 추가를 해 주는 편이고요.

그리고 저는 이제 깃허브 커밋 메시지를 작성할 때도 AI 기능을 좀 활용을 하는 편인데 얼마 전에 커서에서도 커밋 메시지를 작성하는 요런 기능들이 이제 나왔습니다.

여기 있는 이 버튼을 누르게 되면은 현재 변경 사항을 기반으로 해서 커밋 메시지를 작성을 해 주게 되는데, 그런데 아직 이 커서의 커밋 메시지 작성 기능은 cursorrules 파일을 참고하지 않기 때문에 저는 보통 커밋 메시지를 작성할 때 이 기능을 활용하기보다는 직접 채팅 기능을 활용해서 커밋 메시지를 작성하는 편입니다.

예를 들어서 특정 파일을 이렇게 수정을 하고 나서 채팅 기능을 통해서 이제 컨텍스트를 넣어 주는데 여기 이제 깃허브라는 컨텍스트가 있거든요.

이거를 이제 눌러 주게 되면은 커밋이라는 부분이 있습니다.

커밋을 누르게 되면은 현재 로컬에 있는 변경사항과 깃허브에 있는 변경사항의 차이점을 이렇게 가져오게 돼서 커밋의 diff를 확인할 수가 있게 되어 있고요.

거기다가 이제 커밋 메시지 작성해 줘 라고 이렇게 채팅 기능을 활용해서 커밋 메시지를 작성하게 되면은 채팅 기능은 이제 Cursor Rules를 참고하기 때문에 Cursor Rules에 있는 커밋 메시지 작성 규칙을 통해서 커밋을 작성을 해 주게 됩니다.

Cursor Rules 파일은 채팅 기능뿐 아니고 컴포저나 이제 탭 기능에서도 다 참고하게 되어 있기 때문에 cursorrules를 꼭 잘 활용 해보시는 것을 추천해 드리고요.

그리고 아래쪽에는 인증 기능을 연동하기 위해서 이제 Clerk이라는 서비스를 활용하는데 Clerk이라는 서비스에서도 이게 clerkMiddleware가 얼마 전에 또 이제 업데이트가 됐는데 계속해서 clerkMiddleware가 아니고 authMiddleware라는 거로 이제 할루시네이션이 많이 발생하는 부분들이 있어서 그런 부분들에 대해서도 반복적으로 발생하는 이슈들에 대해서는 이런 식으로 명시적으로 authMiddleware를 사용하지 말고 clerkMiddleware를 사용해라 그리고 코드 예시에 대한 부분도 이런 식으로 추가해 주게 되면은 커서가 이것을 추가해 준 다음부터는 이제 정확한 코드를 다시 생성을 해 주게 될 수가 있게 되고요.

저희가 이렇게 AI 규칙을 추가해주는 이유는 프로토타입 정도를 만드는 작업을 주로 하게 된다면 AI가 저희 컨텍스트를 전부 다 파악하고 있기 때문에 큰 문제가 되지 않지만 프로토타입 그 이상의 서비스를 만들어야 된다 했을 때 조금 더 복잡하고 크기가 큰 서비스를 만든다 했을 때는 AI가 저희의 모든 컨텍스트를 다 파악할 수가 없거든요.

그래서 그런 부분들에 대해서 저희가 AI에게 조금 더 그러한 방향성을 잡아주기 위해서 이런 cursorrules 파일 같은 것들을 적용시켜서 작업을 해주게 된다고 하면은 조금 더 AI 성능을 많이 끌어올릴 수 있는 그런 방법이라고 생각하고요.

프로젝트 후반부로 갈수록 이렇게 이러한 AI 규칙 같은 경우를 잘 정의하는 게 굉장히 중요합니다.

저는 이렇게 cursorrules 파일과 같은 프로젝트의 기본 규칙 이외에도 보통 이렇게 docs라는 디렉토리 안에다가 여기에는 이제 뭐 PRD에 대한 부분도 있고 인증 서비스 연동하는 문서, 디자인 가이드 그리고 각각의 컴포넌트에 대한 그런 기능 명세서 같은 것들도 docs라는 디렉토리 내부에다가 추가해 주고 필요할 때 이것들을 적절하게 이렇게 컴포저나 채팅 기능에서 컨텍스트로 직접 넣어서 또 활용하는 방식으로도 많이 활용을 하고 있습니다.

단순하게 어떤 기능을 개발해 줘 라고 하는 것보다 AI에게 더 명확한 컨텍스트를 이렇게 유지해서 그렇게 명령을 내리게 된다면 AI가 생성하는 코드가 굉장히 퀄리티 높게 그렇게 만들 수가 있고요.

AI에게 아무런 컨텍스트를 주어 주지 않고 내 요구 사항을 다 파악하기를 바라는 거는 아직까지는 굉장히 많이 무리가 있기 때문에 저희가 AI에게 더 명확한 컨텍스트를 제공하고 그 컨텍스트를 통해서 개발할 수 있도록 만드는 것이 굉장히 중요합니다.

이번 영상처럼 적절한 AI 규칙을 정의하는 방법이나 AI를 활용한 개발 방법론이 궁금하신 분들은 개발동생 콜로소 강의를 들어보시는 것을 추천을 드리겠습니다.

지난번에 얼리버드 혜택을 놓치신 분들께서 추가 혜택이 있는지에 대해서 많은 문의를 주셨었는데요.

그래서 이번에 4만 원 할인쿠폰을 마지막으로 받아왔고요.

이건 이제 내일까지 일요일까지만 유효한 쿠폰이니까 지난번 혜택을 놓치신 분들은 이번에는 꼭 챙겨 가시면 좋을 것 같습니다.

오랜 기간 열심히 준비하고 많은 분들께서 기다려주신 만큼 더 좋은 강의로 찾아뵐 수 있도록 하겠습니다.

Cursor와 Windsurf 성능 10배 향상시키는 AI 규칙 설정 방법 | cursorrules

안녕하세요 개발동생입니다 :)

이메일: devbrother2024@gmail.com
