프론트엔드에서 Cursor AI 사용하기

키즈노트 프론트엔드 개발자들은 4월부터 Cursor AI를 도입해서 실무에 사용하고 있어요.
Cursor AI를 잘 활용하기 위해 파트원들과 함께 고민하고 의견을 나누었는데요, 그중에서도 소소한 꿀팁들을 공유해 볼게요.🍯

🖇️ 브랜치 관리하기

저는 브랜치를 터미널로 관리하는데요, 브랜치명이 길어지면 타자를 더 많이 쳐야 해서 관리하기 귀찮더라구요.

키즈노트에서 프로젝트 브랜치는 feature/프로젝트명/main, 개인 브랜치는 feature/프로젝트명/이름-티켓번호 이런 이름을 갖게 되는데, 프로젝트명이나 티켓 번호가 길어질 경우 경우 손이 더 가게 되는 거죠.

그래서 아래와 같은 규칙을 추가해 주었어요.

# Github 브랜치 관리 규칙
## 브랜치 관계

master
├── develop
│   ├── release/YYYY.MDD.0/main
│   │   └── release/YYYY.MDD.0/vinnie-ABC-00000
│   └── feature/project-name/main
│        └── feature/project-name/vinnie-ABC-00000
└── hotfix/YYYY.MDD.1/main
    └── hotfix/YYYY.MDD.1/vinnie-ABC-00000

## 프롬프트 설명
1. "00000 브랜치 생성해 줘": 현재 내가 보고 있는 브랜치를 기준으로 `git switch -c` 명령어를 이용해서 하위 브랜치 생성해 줘.
2. "브랜치 최신화해줘": 상위 브랜치로 이동해서 `git pull` 명령어로 최신화해줘. 그리고 내가 사용하던 브랜치로 돌아간 다음, `git merge 상위 브랜치` 명령어로 머지 해줘. 만약 충돌이 발생하면 내가 직접 수정할 거니까 머지를 멈추고 충돌이 발생했다고 알려줘.
3. "브랜치 정리해 줘": 상위 브랜치로 이동한 다음, `git branch -D` 명령어로 내가 사용하던 브랜치를 삭제해 줘. 그리고 상위 브랜치를 `git pull` 명령어로 최신화해줘.

이렇게 규칙을 넣어주고 프롬프트를 입력하면 Cursor가 알아서 브랜치를 생성하고 관리해 줍니다.

🎯 프로젝트 룰 만들기

본격적으로 개발을 시작하기 전에, 기술 검토를 하면서 프로젝트 룰을 추가해 줄 수 있어요.

신입 개발자에게 프로젝트와 컨벤션을 설명하듯이, 자세히 작성할수록 원하는 결과물을 뽑아낼 수 있어요.
(아래 사진은 제가 작성한 룰에서 일부를 가져왔어요.)

이렇게 룰을 작성한 후, 별도의 링크나 파일 구조에 대한 설명 없이 "신청 동의서 목록을 조회하는 api hook을 생성해 줘"라고 명령하면 알아서 파일을 생성해 주게 되는 거죠! 😙

🖼️ UI 만들기

피그마 MCP를 사용하면 UI를 자동으로 생성할 수 있어요.

먼저 피그마 레이어에서 링크를 복사합니다.

그리고 채팅에 링크를 붙여 넣어서 UI를 생성해달라고 요청합니다.

그러면 <프로젝트 룰 만들기>에서 생성한 룰을 기반으로 컴포넌트를 생성해 줍니다.

하지만 몇 차례 시도해 본 결과, 디자인 시안과 완벽하게 일치하는 UI를 구현할 수 없었어요.
아래 사진처럼 폰트 색상이나 토글 사이즈 등 시안과 약간 다른 컴포넌트를 생성하더라구요.

디자인 구조가 복잡할수록 디테일이 부족한 컴포넌트를 생성하기 때문에 결국 개발자가 검수를 해야 하지만,
간단한 UI나 Fade In/Out 효과, 아코디언 등 귀찮은 작업을 맡기기에는 유용해요. 😎

🧪 테스트 코드 작성하기

테스트 코드를 쓰긴 써야 하는데, 신규 기능 만들고 이슈 처리하다 보면 테스트 코드를 작성할 시간이 부족하지 않으신가요?
이때 Cursor에게 테스트 코드를 작성하도록 명령할 수 있어요.

먼저 Playwright MCP를 설치하고, 개발 서버 진입 경로와 간단한 테스트 시나리오를 작성해 주었어요.

그러면 Cursor가 테스트 시나리오를 기반으로 테스트 코드를 작성해 줍니다.

아래처럼 테스트 코드를 실행할 수 있어요. (5배속)

📔 릴리즈 노트 작성하기

키즈노트에서는 정기 배포를 진행한 후, 각 파트에서 릴리즈 노트를 작성해서 공유해야 해요.
신규 기능들을 유저에게 어떻게 쉽게 설명할 수 있을지 고민이 될 때, 릴리즈 노트를 작성해달라고 명령할 수 있어요.

Cursor가 작성한 초안을 수정하거나, 그대로 공유해도 좋아요.

🪮 남의 룰 가져오기

룰을 직접 작성해도 좋지만, 다른 사람이 작성한 룰을 가져와서 사용하면 정말 편해요!

그중에서도 토스 Frontend Fundamentals를 Cursor 룰로 만들어서 배포하신 분이 있더라구요. 이걸 그대로 가져와서 적용해 주었어요.

이 룰을 컨텍스트에 넣고 리팩토링을 요청할 수 있어요.

아니면 다른 개발자들이 작성한 룰을 가져올 수 있는데요,
Cursor Directory에서 범용적인 룰이나 기술 스택별 룰을 확인할 수 있어요.

당신은 시니어 프런트엔드 개발자이자 ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS 및 최신 UI/UX 프레임워크(예: TailwindCSS, Shadcn, Radix) 전문가입니다.
사려 깊고, 섬세한 답변을 제공하며, 추론 능력이 뛰어납니다.
정확하고, 사실에 기반하며, 사려 깊은 답변을 신중하게 제공하며, 추론 능력도 뛰어납니다.

🤖 마무리

Cursor AI가 개발자를 대체하기는 쉽지 않지만, 귀찮은 업무를 맡길 수 있는 서포터로 사용하기 좋다고 생각해요. (특히 아코디언이나 애니메이션 효과를 몇 초 만에 만들어 내는 건 정말 최고 👍)

꾸준히 발전하는 AI를 잘 활용해서 생산성을 높이기 위해 노력해야 할 것 같습니다. 😃