[AI 활용] Cursor AI로 코딩 없이 웹사이트 만들기 part.4,5 - Cursor 설치 및 초기 설정 방법(설치부터 규칙 설정까지)
🔗 Part.1 - 커서Cursor로 시작하는 개발과 웹 배포의 흐름
🔗 Part.2 - AI 없이 진행했던 개발 단계와 어려움
🔗 Part.3 - Cursor로 개선된 개발 과정과 기존 개발 방식 비교
드디어 실전 시작! 오늘은 Cursor를 직접 설치하고, 우리가 개발할 프로젝트에 맞게 설정하는 방법까지 안내합니다. 이제 진짜 'AI와 함께하는 개발'을 시작해볼까요?
안녕하세요! AI 기술 알려주는 아조씨, AIJOSSI입니다. 오늘은 Cursor를 처음 사용하는 분들도 문제없이 따라올 수 있도록, 설치부터 초기 설정까지 순차적으로 정리해드릴게요. Mac을 기준으로 설명드리지만 Windows 사용자분들도 거의 비슷한 흐름으로 진행할 수 있어요. 그리고 설치가 끝나면, Cursor의 AI가 더 똑똑하게 작동하도록 돕는 '규칙 설정' 방법도 함께 알려드릴게요. 이 설정이 끝나야 진짜 제대로 AI의 힘을 느낄 수 있습니다!
목차
1. Cursor 설치 방법 (Mac 기준)
먼저 Cursor의 공식 웹사이트 docs.cursor.com에 접속해 주세요. 홈페이지 상단의 "Download" 버튼을 클릭하면 사용자의 운영체제에 맞는 설치 파일이 자동으로 다운로드됩니다. Mac의 경우는 .dmg 파일, Windows는 .exe 파일입니다.
Mac에서는 다운로드한 .dmg 파일을 열어 Cursor 아이콘을 "Applications" 폴더로 드래그하면 설치가 완료됩니다. Windows에서는 설치 마법사를 따라가면 되고, 설치 중 보안 경고가 나오면 “추가 정보 > 실행”을 선택해 주세요.
2. 첫 실행과 초기 설정
설치가 끝났다면 Cursor 앱을 실행해볼까요? 처음 실행 시에는 다음과 같은 설정 과정을 거치게 됩니다:
- IDE 키맵 선택 (VSCode 키맵 권장)
- AI 대화 언어 설정 (기본값: 영어, 변경 가능)
- GitHub 또는 Google 계정으로 로그인(범용성을 위해 구글계정으로 가입하는 것을 추천합니다.)
Cursor의 기본 인터페이스는 VSCode와 매우 유사합니다. 좌측에는 파일 탐색기와 소스 제어 탭, 우측에는 에디터와 AI 채팅 패널이 배치되어 있어요.
로그인이 완료되면 “프로젝트 파일 인덱싱 기능” 안내가 뜨는데, 이는 AI가 코드 구조를 더 정확히 이해하도록 돕는 기능이니 기본값으로 두고 “Next”를 눌러 진행해 주세요. 마지막으로 VSCode 설정을 가져오는 옵션도 제공됩니다. 기존에 사용하던 테마, 단축키, 확장을 불러오고 싶다면 수락을 추천드립니다.
3. 프로젝트에 규칙 설정하는 이유
Cursor의 핵심 기능 중 하나는 개발 스타일과 규칙을 미리 설정하여 AI가 생성하는 코드에 일관성을 부여할 수 있다는 점입니다. 이 규칙은 'Project Rules'라는 이름으로 불리며, 우리가 원하는 코딩 컨벤션이나 기술 스택을 Cursor에게 사전에 알려주는 역할을 합니다.
예를 들어 "모든 변수는 camelCase로 작성하고, 세미콜론을 붙이며, React는 함수형 컴포넌트로 작성해줘" 같은 내용을 미리 정해두면, Cursor는 프롬프트 없이도 해당 스타일을 반영한 코드를 자동으로 생성해줍니다.
댓글 남겨주시면 제가 수립하는 룰들을 보내드리거나, 만들고 싶으신 개발 주제에 맞게 형성해드릴 수도 있으니 편히 댓글 주세요 :)
4. Cursor 규칙 파일 작성 방법
프로젝트 폴더 내에 .cursor/rules/ 디렉토리를 생성하고, 여기에 텍스트 또는 마크다운 형식으로 원하는 규칙 파일을 작성하면 됩니다. 과거에는 .cursorrules라는 단일 파일을 사용했지만, 지금은 규칙별로 파일을 나눠서 관리하는 방식을 권장하고 있어요.
예시) .cursor/rules/style-guide.md 파일 내용:
# 프로젝트 스타일 가이드
**코딩 스타일**
- 모든 코드에 세미콜론을 사용하고, 작은따옴표(')를 사용
- 변수는 camelCase, 타입은 PascalCase
**React (프론트엔드)**
- 함수형 컴포넌트 사용
- Props는 인터페이스로 타입 지정
- Tailwind CSS 권장
**Express (백엔드)**
- API는 라우터로 분리
- async/await 기반 비동기 처리
- JSON 응답 통일, 에러 메시지 포맷 일관
5. 프론트엔드/백엔드 규칙 예시
우리 프로젝트는 TypeScript 기반의 풀스택 개발을 진행할 예정이기 때문에, 프론트엔드와 백엔드 각각에 적합한 규칙을 설정할 필요가 있습니다. 다음은 실제로 적용 가능한 예시입니다.
✅ 프론트엔드 규칙 (frontend.md)
- React 함수형 컴포넌트만 사용 (클래스 컴포넌트 X)
- Tailwind CSS 또는 기본 CSS만 사용 (복잡한 CSS-in-JS 지양)
- 컴포넌트 분리는 하나의 기능/역할 단위로
- props는 TypeScript interface로 타입 선언
- 불필요한 상태관리는 피하고 Context 또는 React Query 사용
✅ 백엔드 규칙 (backend.md)
- Express 프레임워크 사용, 라우터는 별도 파일로 분리
- API 응답은 JSON, 에러는 { error: 메시지 } 형식으로 통일
- 환경변수는 dotenv로 관리하고 유효성 검증 필요
- 비동기 처리 시 async/await 사용
- 라우트 로직은 최대한 단순화, 서비스/컨트롤러로 역할 분리
6. 효과적인 규칙 작성 팁
규칙은 많이 적는 것보다 "명확하게" "간결하게" 적는 것이 중요합니다. AI는 프롬프트를 해석하는 만큼, 불필요하게 긴 규칙은 오히려 도움이 안 될 수 있어요.
- 꼭 지켜야 할 코딩 스타일만 정리
- 사용하는 라이브러리나 기술 명시
- 입력 예시와 출력 예시는 짧고 간결하게
이렇게 규칙을 설정해두면 Cursor는 항상 우리의 개발 취향을 기억한 상태로 코드를 만들어 줍니다. 매번 똑같은 설명을 반복하지 않아도 되고, 협업자와의 코드 스타일 불일치도 줄일 수 있어요.
오늘은 Cursor를 설치하고, 우리 프로젝트에 최적화된 규칙을 설정하는 방법까지 알아봤습니다. 이제 여러분도 Cursor를 통해 단순히 "코드 추천" 수준을 넘어서, 나만의 개발 파트너처럼 AI를 활용할 수 있게 된 거예요. 다음 편에서는 본격적으로 기술 스택을 선정하고, 전체 프로젝트 구조를 어떻게 잡아갈지 설계해볼 예정입니다. 프론트엔드와 백엔드를 어떻게 나누고, 어떤 폴더 구조가 협업에 유리한지도 알려드릴게요! 기대되시죠? 그럼 다음 글에서 또 만나요. AIJOSSI와 함께라면, 개발은 언제나 더 쉬워질 수 있습니다 :)
다음 글에서는 실제 개발을 함께 해볼거에요! 오래 기다리셨죠?
