상황: ‘이메일 구독 폼을 만들어 사용자 이메일을 수집하고, 제출 시 백엔드로 전송되는 기능’을 구현하고 싶다고 가정
📌 Step 1. Cursor 밖에서 브레인덤프
Claude나 ChatGPT에 이렇게 입력:
“나는 사용자 이메일을 수집하는 폼을 만들고 싶어. 이 폼은 최소한 이메일 입력창, 제출 버튼이 있어야 하고, 제출하면 서버로 전송돼야 해. 혹시 이 기능을 설계하는 데 빠진 게 있을까? 코드 말고 설명만 해줘.”
📌 Step 2. 이 정리된 아이디어를 Cursor로 옮기기
Cursor에서는 아래처럼 질문을 더 추가하거나 세부사항을 정리합니다:
“이메일 폼 구현 전에 몇 가지 더 확인하고 싶어. 아래는 내가 정리한 기능이야:
이메일 입력창
제출 버튼
제출 시 백엔드로 전송
이메일 형식 검증 필요
성공/실패 메시지 표시
혹시 놓친 UX 요소나 고려해야 할 기술적 세부사항이 있을까?”
Cursor가 추가 질문하거나, 더 구체적인 조건을 유도함:
제출 중에 버튼 비활성화 필요 여부
중복 이메일 필터링 여부
GDPR 등 데이터 수집 관련 메시지 노출 필요 여부 등
📌 Step 3. 이제야 실제 구현 시작
여기서야 Cursor에 요청:
“위 기능 명세에 따라 React로 이메일 폼을 만들어줘. 이메일 검증, 제출 시 메시지 표시까지 포함해줘.”
이때 코드를 받았다면, 바로 사용하는 게 아니라 다음을 해야 합니다:
이메일 형식 검증이 제대로 되었는지 체크
잘못된 이메일 입력 시 어떤 메시지가 나오는지 확인
성공 메시지는 UX적으로 깔끔한지 검토
백엔드 연결은 mock인지 실제 API인지 확인
📌 Step 4. UI 시각화는 v0로 빠르게 검토
예를 들어 v0에서 이렇게 작성:
“Create a minimal email subscription component. Input box on the left, submit button on the right. Use a soft blue theme and show a checkmark on successful submission.”
결과 시안을 보고 괜찮으면, 해당 레이아웃 그대로 Cursor에서 구현 시작.
🧠 요약
단계
행동
도구
1
아이디어 브레인덤프 & 질문받기
Claude, ChatGPT, Gemini
2
세부 조건 정리하고 Cursor에 설명
Cursor
3
구현 전에 명확한 명세 다시 검토
Cursor
4
필요 시 시각화 도구 활용
v0
5
구현 후 지속적 피드백 및 리팩토링
Cursor
이런 방식으로 진행하면 AI와 협업이 더 정확하고 빠르며, 반복 작업이나 잘못된 방향으로 가는 일을 크게 줄일 수 있습니다.
🔄 규칙 기반 리팩토링이란?
✅ 정의
명확한 규칙을 사전에 정해두고, 그 규칙에 따라 코드 구조를 정비하거나 개선하는 방식. 사람의 감에 의존하지 않고 AI나 도구가 쉽게 이해하고 적용할 수 있도록 체계화된 리팩토링 전략입니다.
🎯 왜 중요할까?
감에 의존한 리팩토링
규칙 기반 리팩토링
사람마다 다름
팀 전체가 공유 가능한 기준
일관성 부족
코드 스타일/구조 통일 가능
반복 작업 많음
자동화 가능성이 높음
AI 도구 적용 어려움
AI에 쉽게 위임 가능
🧩 예시: 실제 적용 가능한 규칙들
📌 1. 네이밍 규칙 통일
✅ Do: 함수 이름은 동사로 시작 (예: fetchUserData)
❌ Don’t: 함수 이름에 명사만 사용 (userData 등)
📌 2. 함수 길이 제한
✅ Do: 함수는 최대 30줄 이내 유지
❌ Don’t: 100줄짜리 함수 작성
📌 3. 파일 분할 규칙
하나의 컴포넌트 파일에 두 개 이상의 컴포넌트가 있으면 분리
동일 책임 함수는 하나의 모듈로 묶기
📌 4. 조건문 리팩토링
✅ Do: 중첩 조건 줄이고 guard clause 사용
❌ Don’t: if (a) { if (b) { if (c) { ... }}}
📌 5. 상태(state) 분리
✅ Do: 로컬 상태는 컴포넌트 안, 전역 상태는 context/store
❌ Don’t: 모든 상태를 useState로만 관리
🛠️ Cursor나 GPT에게 규칙 기반 리팩토링 요청하는 방법
"아래 코드를 함수 길이 30줄 이내, 조건문은 guard clause 스타일, 네이밍은 동사로 시작하는 규칙에 맞게 리팩토링해줘."
혹은,
"이 프로젝트는 다음과 같은 리팩토링 규칙을 따릅니다:
1. 컴포넌트 당 1 기능만 수행
2. 조건문은 guard clause 사용
3. 상태는 최소화하여 상위로 전달
이 기준으로 리팩토링해주세요."
💡 실제 사례 요약
개발자 Rafa는 이 규칙 기반 리팩토링을 사용한 뒤, “레포지토리가 이렇게 잘 정돈된 적은 처음이다”라는 피드백을 남김.
규칙이 있으면, 나중에 AI에게도 “이 프로젝트는 이 룰셋에 맞춰줘”라고만 하면 되니, 생산성과 협업 효율이 폭발적으로 좋아집니다.
