3년 묵은 리액트 프로젝트 리팩토링하다가 코파일럿을 버린 사연
최근에 회사에서 3년째 손도 대지 않은 낡은 리액트 프로젝트를 최신 Next.js로 옮기는 일을 맡았습니다. 이전까지는 GitHub Copilot을 유료 구독하며 사용했는데, 문제는 이 AI가 열려 있는 파일 하나만 참고할 뿐, 프로젝트 전체 구조나 여러 컴포넌트 관계를 제대로 파악하지 못한다는 점이었습니다. 컴포넌트 하나 옮기는 데 3시간 넘게 붙잡혔던 경험은 아직도 잊히지 않습니다.
“전체 프로젝트를 이해하는 AI는 없나?”라는 생각에 해외 개발자 포럼을 뒤지다 VS Code를 기반으로 새로 만든 ‘Cursor AI’라는 에디터를 알게 됐습니다. 처음 설치 후, 3시간 걸리던 작업을 10분 만에 끝내는 걸 보고 솔직히 충격을 받았습니다. 이 경험을 바탕으로 기존 VS Code와의 차이점, 그리고 실무에 바로 적용할 수 있는 최적화 세팅까지 차근차근 정리해 보려 합니다. 다만, Cursor도 완벽하지는 않았고, 특히 대용량 프로젝트에서 가끔 느려지는 점은 직접 겪어야만 알 수 있는 문제였습니다.
목차
- 1. 내 손가락을 쉬게 해줄 새로운 에디터 구동 환경 지표
- 2. 실전 가이드: Cursor 설치부터 VS Code와의 결정적 차이 활용법까지
- 3. 에디터 이주 중 직접 맞닥뜨린 치명적 오류 2가지와 탈출구
- 4. Cursor 도입 후 뼈저리게 체감한 코딩 속도와 수치 변화
- 5. 핵심 3줄 요약 및 여러분의 퇴근을 앞당겨 줄 최종 추천
1. 내 손가락을 쉬게 해줄 새로운 에디터 구동 환경 지표
Cursor는 기존 VS Code에 확장 프로그램을 덧붙이는 방식이 아니라, 에디터 자체를 완전히 교체하는 형태입니다. 다만, VS Code의 핵심 엔진을 그대로 사용하기 때문에 단축키나 익숙한 확장 기능들을 거의 그대로 쓸 수 있다는 점이 인상적입니다. 이런 점 덕분에 적응 기간이 짧았습니다.
제가 주로 사용하는 환경은 macOS Sonoma가 설치된 M2 칩 기반 맥과 Windows 11 Pro를 오가며 작업하는데, Cursor가 두 운영체제 모두에서 무리 없이 작동하는 점은 칭찬할 만합니다. 공식 홈페이지에서 최신 버전을 다운받아 설치했고, 구독 플랜은 월 20달러짜리 프로 플랜을 썼습니다. 가입 시 14일간 무료 체험 기간이 제공되어 부담 없이 테스트해볼 수 있었죠.
비교 대상으로는 기존에 쓰던 VS Code+GitHub Copilot 조합을 두었고, 주로 TypeScript, React, Python 코드를 다룹니다. Cursor가 기본은 VS Code와 같지만, 프로젝트 전반을 훑는 AI의 이해도가 훨씬 높아 실무에선 체감 속도가 전혀 다릅니다.
2. 실전 가이드: Cursor 설치부터 VS Code와의 결정적 차이 활용법까지
설치 과정은 생각보다 단순해서 놀랐습니다. Cursor 공식 홈페이지(https://www.google.com/search?q=cursor.com)에서 설치 파일을 받아 실행하면 바로 설치가 끝납니다. 하지만 사용하면서 느낀 가장 큰 차이는 AI가 단일 파일 대신 전체 프로젝트 컨텍스트를 이해하고 추천한다는 점입니다. 단, 가끔 AI가 복잡한 폴더 구조나 매우 큰 프로젝트에서는 반응 속도가 느려지는 현상을 겪었는데, 이런 부분은 아직 개선이 필요하다고 봅니다.
1단계: 클릭 한 번으로 기존 VS Code 설정 그대로 가져오기
Cursor를 처음 켜면 화면에 “Import Extensions and Settings from VS Code”라는 버튼이 딱 하나 나타납니다. 이 버튼을 누르면 내가 이전에 VS Code에서 쓰던 테마, 단축키, 그리고 Prettier, ESLint 같은 확장 프로그램들이 한 글자도 틀리지 않고 그대로 복사됩니다. 덕분에 새 에디터를 써야 한다는 심리적 부담감이 거의 사라졌습니다. 다만, 이 과정에서 일부 확장 프로그램 버전 호환 문제가 종종 있었는데, 특히 Prettier 설정이 미묘하게 꼬여서 한참 설정을 들여다봐야 했던 기억이 납니다.
2단계: VS Code 코파일럿과 Cursor AI의 차이점 짚어보기
VS Code에서 사용하던 Copilot은 주로 내가 타자를 칠 때 다음 줄을 회색 글씨로 제안하는 ‘자동 완성’ 기능에 집중했습니다. 그런데 Cursor는 단순 자동 완성을 넘어서 코드 자체를 직접 수정(Inline Edit)하거나, 프로젝트 전체 구조를 한눈에 훑는(Codebase) 능력을 내세웁니다. 이 부분이 제게는 확실히 신선했지만, 대규모 프로젝트에서 전체 코드베이스를 읽어들이는 데 시간이 꽤 걸려 답답할 때가 있었습니다.
| 기능 비교 | VS Code + Copilot | Cursor AI |
|---|---|---|
| 단축키 및 주 기능 | 주로 Tab 키 (수동적인 자동완성) | Cmd+K (직접 코드 생성/수정), Cmd+L (채팅) |
| 멀티 파일 인식 | 현재 열린 탭에 크게 의존함 | @Codebase 로 전체 프로젝트 구조 파악 가능 |
| 에러 해결 방식 | 에러 복사 후 챗봇에 붙여넣기 | 터미널 에러 옆 ‘Add to Chat’ 클릭 한 번에 디버깅 |
3단계: Cmd+K 와 @Files를 활용한 리팩토링 실전
Cursor의 독특한 점은 명령어 하나로 코드 편집의 패러다임을 바꾼다는 점입니다. 예를 들어 auth.ts에 있는 레거시 로그인 로직을 Zustand 상태 관리 코드로 바꿀 때, 단순히 코드를 드래그하고 Cmd+K를 누르면 바로 위에 프롬프트가 뜹니다. 여기서 “이거 Zustand로 바꿔줘”처럼 모호한 지시 대신, 아래 예시처럼 구체적인 설명을 넣어야 제대로 된 결과물을 얻을 수 있습니다.
// 기존 레거시 auth.ts 코드 (드래그하여 선택)
let currentUser = null;
function login(user) {
currentUser = user;
}
/* 💡 프롬프트 입력창(Cmd+K)에 아래와 같이 입력합니다:
"이 코드를 Zustand 스토어로 마이그레이션 할 거야.
@store/userStore.ts 파일의 컨벤션을 참고해서 작성해주고,
타입스크립트 인터페이스를 명확히 선언해줘."
*/
// Cursor가 @store/userStore.ts 를 훑어보고 실시간으로 타이핑(Diff)해 준 결과:
import { create } from 'zustand';
interface User {
id: string;
name: string;
email: string;
}
interface AuthState {
currentUser: User | null;
login: (user: User) => void;
logout: () => void;
}
export const useAuthStore = create<AuthState>((set) => ({
currentUser: null,
login: (user) => set({ currentUser: user }),
logout: () => set({ currentUser: null }),
}));
완성된 코드는 기존 코드와 새 코드가 색깔로 구분된 Diff 형태로 표시됩니다. 마음에 들면 Cmd+Enter를 눌러 곧바로 적용하는데, 복사 붙여넣기 과정이 사라지니 확실히 작업 속도가 눈에 띄게 빨라집니다. 다만, 복잡한 리팩토링에서는 가끔 Cursor가 의도와 다르게 코드를 제안해서 수정을 반복해야 하는 점이 아쉽습니다.
💡 여기서 꼭 기억해야 할 점: .cursorignore 파일 세팅
Cursor의 @Codebase 기능은 프로젝트 폴더 전체를 샅샅이 훑어 AI에게 코드 맥락을 알려줍니다. 그런데 이 과정에서 node_modules, build, .env 같은 방대한 라이브러리나 민감한 환경 변수까지 AI가 읽으면 오히려 독이 됩니다. 토큰 제한에 걸려서 작업이 중단되거나, 엉뚱한 라이브러리 내부 코드를 수정하라는 제안을 받는 황당한 상황이 벌어지거든요. 그래서 프로젝트 루트에 .cursorignore 파일을 만들어서 꼭 불필요한 폴더와 파일을 제외시켜야 합니다. 저는 처음에 이걸 안 해놓고 한참 고생했는데, 무시무시하게 작업 흐름이 꼬였습니다. 그래서 핵심 소스코드만 AI가 집중하도록 관리하는 게 진짜 중요하다는 걸 뼈저리게 느꼈습니다.
3. 에디터 이주하면서 마주친 골치 아픈 문제 두 가지와 해결법
Cursor가 VS Code랑 비슷해 보여서 세팅을 대충 마쳤는데, 막상 작업해 보니 예상과 다르게 두 가지 큰 문제 때문에 시간을 많이 잡아먹었습니다. 아마 저처럼 빠르게 넘어가려다가 큰 코 다칠 수도 있겠다는 생각이 들더군요.
가장 난감했던 첫 번째 문제: Python 가상환경(venv) 인식 사라짐
VS Code 세팅을 그대로 가져왔다고 믿었는데, 파이썬 프로젝트를 열자마자 모든 import 구문에 빨간 밑줄이 뜨며 ModuleNotFoundError가 터졌습니다. 알고 보니 Cursor가 프로젝트 폴더만 가져왔을 뿐, 숨겨져 있던 파이썬 로컬 가상환경(.venv) 경로 설정은 아예 반영하지 않은 겁니다. 이 부분은 문서 어디에도 명확히 안내가 안 되어 있어서 한참 헤맸습니다. 결국 Cmd + Shift + P로 커맨드 팔레트를 열고, Python: Select Interpreter를 찾아서 .venv/Scripts/python.exe 경로를 수동으로 지정해 주니 빨간 줄이 싹 사라졌습니다. 이 과정이 너무 번거로워서, 가상환경이 일반적인 파이썬 세팅에서 이렇게 취급되는 게 불편했습니다.
두 번째 문제: 터미널에서 code . 명령어가 먹히지 않음
저는 평소 터미널에서 폴더를 바로 VS Code로 열기 위해 code . 명령어를 애용했는데, Cursor를 설치하고 나니 이 명령어가 여전히 이전 VS Code를 실행시키는 상황이 벌어졌습니다. 두 에디터가 시스템 명령어에서 충돌한 거죠. 완전 삭제할 수도 있지만 그건 너무 극단적이라, 저는 Cursor 에디터 안에서 Cmd + Shift + P를 눌러 Install 'cursor' command in PATH를 실행했습니다. 그 뒤부터는 터미널에서 cursor .를 입력해야만 Cursor가 깔끔하게 열리더군요. 이렇게 명령어를 분리하지 않으면 개발환경이 뒤죽박죽 될 수 있으니 꼭 신경 써야 할 부분입니다.
4. Cursor 도입 후 업무 시간과 생산성 변화, 솔직한 숫자들
월 20달러 구독료가 부담스러웠지만, 한 달 써보니 비용은 전혀 아깝지 않았습니다. 다만 무조건 빠르다고 할 수만은 없는 몇 가지 경험도 있었습니다.
- 개발 및 리팩토링 시간 70% 단축: 예전에는 10개 파일에 흩어진 변수명과 인터페이스를 수동으로 바꾸느라 1시간 넘게 허비했는데, Cursor 채팅창에
@Codebase 전체 파일에서 기존 User 모델을 NewUser 모델 기준으로 업데이트해줘라고 입력하니 단 3분 만에 수정해야 할 모든 Diff를 보여줍니다. 속도는 정말 압도적이지만, 가끔 대용량 프로젝트에서는 반응이 느려져 기다림이 길어질 때가 있어 아쉬웠습니다. - 에러 트러블슈팅 속도: 터미널에서 빌드 에러가 날 때마다 구글링에 하루 평균 40분 이상 쓰던 시간을 0분으로 줄였습니다. 에러 로그 옆 ‘Add to Chat’ 버튼을 누르면 Cursor가 내 코드를 이미 파악한 상태에서 “34번째 줄 타입 캐스팅 오류, 이렇게 고치세요” 하고 즉각 정답 코드를 제시하니까요. 다만, 복잡한 에러나 환경 문제는 아직도 AI가 헷갈리는 경우가 있어 무조건 믿기엔 위험합니다.
- 초기 보일러플레이트 세팅: 새로운 토이 프로젝트를 시작할 때
Cmd+K로 “Next.js 14 버전에 TailwindCSS 적용해서 기본 랜딩 페이지 뼈대 잡아줘”라고 한 줄만 입력하면 10초 만에 초기 세팅 코드를 뚝딱 내줍니다. 그러나 이렇게 자동 생성된 코드는 항상 완벽하지 않아 직접 손볼 부분이 꽤 있었습니다.
5. 핵심 3줄 요약 및 여러분의 퇴근을 앞당겨 줄 최종 추천
에디터 마이그레이션 과정에서 제가 겪은 경험을 딱 세 줄로 정리해 보겠습니다.
- Cursor는 VS Code 확장 프로그램이 아니라 독립적인 에디터입니다. 놀랍게도 기존 VS Code 세팅과 확장 프로그램을 클릭 한 번으로 거의 완벽하게 복사해 올 수 있었습니다.
- 기본 자동완성 기능을 훨씬 넘어서
Cmd+K와@Codebase명령어로 프로젝트 전체 컨텍스트를 파악해 인라인 코드 수정, 즉 Diff 작업을 지원하는 점이 이 에디터의 강력한 무기입니다. .cursorignore파일을 꼭 만들어 무거운 폴더나 환경 변수 등을 AI가 읽지 않게 차단하지 않으면, 헛소리(일명 환각) 에러가 빈번하게 발생하니 반드시 신경 써야 합니다.
저는 이 에디터를 레거시 코드를 대대적으로 리팩토링해야 하는 프론트엔드/백엔드 개발자, 남의 코드를 인수받아 폴더 구조를 파악하는 데 애먹는 실무자, 그리고 복사-붙여넣기 반복 작업에 몸이 고생하는 코더들에게 자신 있게 권합니다. 14일 무료 체험 기간 동안 사용해 보면 VS Code로 돌아갈 수 없다는 점을 체감할 겁니다. 다만, 코딩 입문 단계에서 기초 문법과 원리를 하나씩 익혀야 하는 초보자라면, AI가 너무 빠르게 코드를 작성해 오히려 실력을 키우는 데 방해가 될 수 있으니 기본 에디터 사용을 추천합니다.