웹 개발자라면 하루 종일 만지는 것이 JS와 TS 파일이다. Cursor는 기본적으로 VS Code의 모든 기능을 포함하고 있지만, 몇 가지 설정만 더해주면 AI가 훨씬 더 똑똑한 조력자로 변신한다.
1. 언어별 기본 설정 최적화
Cursor는 프로젝트의 tsconfig.json이나 package.json을 읽어 현재 어떤 언어 버전을 쓰는지 파악한다. 하지만 에디터 레벨에서 AI가 더 정교하게 움직이도록 설정을 확인해 줄 필요가 있다.
- Type Safety 강화: TypeScript를 쓸 때 AI가 타입을 무시하지 않도록 설정하자. AI는 가끔 귀찮아서
any타입을 남발할 때가 있는데, 이를 방지하는 가이드라인을 주는 것이 중요하다. - Auto Import: 코드를 작성할 때 필요한 라이브러리를 AI가 자동으로 상단에 추가하게 하려면 VS Code의 기본 자동 완성 기능을 켜두어야 한다.
2. 웹 개발 필수 확장 프로그램(Extensions)
Cursor는 VS Code를 기반으로 하므로, 기존의 강력한 익스텐션들을 그대로 쓸 수 있다. 웹 개발 효율을 극대화하기 위해 다음은 반드시 설치하거나 동기화하자.
- ESLint & Prettier: 코드를 예쁘게 정리하고 문법 오류를 잡아준다. AI가 코드를 짤 때도 이 규칙을 따르도록
.cursorrules와 연동하면 좋다. - Tailwind CSS IntelliSense: 요즘 대세인 Tailwind를 쓴다면 필수다. AI가 클래스명을 추천할 때 훨씬 정확해진다.
관련 문서: Cursor Docs - 확장 프로그램 관리
3. 웹 개발 전용 .cursorrules 작성하기
프로젝트 루트에 .cursorrules 파일을 만들고 웹 개발에 특화된 명령을 적어두면 AI의 답변 품질이 달라진다. 고등학생 수준에서도 바로 쓸 수 있는 예시다.
# Web Development Rules
- 프레임워크: Next.js (App Router 사용)
- 스타일링: Tailwind CSS
- 컴포넌트 구조: 모든 컴포넌트는 'components/' 폴더 내에 위치시킬 것
- 타입 정의: Interface보다는 Type 키워드를 선호함
- 주석: 복잡한 로직에는 반드시 한글 주석을 달아줄 것이렇게 설정해두면 AI가 예전 방식인 Pages Router 대신 최신 App Router 방식으로 코드를 짜준다.
관련 문서: Cursor Docs - 규칙 설정(Rules)
4. 실전 웹 개발 쿡북(Cookbook) 활용
Cursor 공식 문서에는 웹 개발자들이 자주 겪는 상황에 대한 '레시피'가 담겨 있다.
- 데이터 패칭: AI에게
@API_Docs를 참조하게 하여 복잡한 API 연동 코드를 한 번에 짜는 법. - 반응형 디자인: 모바일과 데스크탑 화면을 동시에 고려한 CSS를 작성하는 팁.
- 상태 관리: Redux나 Zustand 같은 라이브러리를 효율적으로 도입하는 가이드.
관련 문서: Cursor Docs - 웹 개발 쿡북
5. 요약: AI에게 '맥락'과 '규칙'을 주자
웹 개발 최적화의 핵심은 "내가 어떤 도구를 쓰는지 AI에게 정확히 알려주는 것"이다.
- JS/TS 설정을 확인해 타입 엄격도를 높인다.
- 필수 확장 프로그램으로 에디터의 기본기를 다진다.
- .cursorrules로 내 프로젝트만의 스타일 가이드를 강제한다.