커서(Cursor) 설치 및 간단 사용 안내서

1. Cursor 설치 방법

a. 먼저 VSCode를 다운로드 해주세요

(VSCode가 설치되지 않았다면  -> [2번 VSCode에서 마이그레이션] -> VScode 설치 방법을 참고해주세요)

b. Cursor 공식 웹사이트(https://www.cursor.com/)에서 사용 중인 운영 체제에 맞는 버전을 다운로드합니다.

(14일간 무료로 프리미엄 모델 500회 사용이 가능해요!)

c. 다운로드한 설치 파일을 실행하세요 → 실행 후 초기 설정창에서 아래 사진과 같이 설정해주세요

command Line → installed “cursor”를 체크!

d. 공식문서를 잘 이해하면 도움이 되지만 필요하지 않다면 넘어가도되요!

https://docs.cursor.com/get-started/migrate-from-vscode

---

2. VS Code에서 마이그레이션

❗️VSCode란 무엇인가요?

VSCode는 비주얼 스튜디오 코드라는 프로그램의 줄임말이에요. 쉽게 말하면, 개발자들이 컴퓨터 프로그램을 만들 때 쓰는 특별한 메모장 같은 거예요. 우리가 글 쓸 때 워드 쓰는 것처럼, 개발자들은 VSCode로 프로그램을 만드는 거죠.

VSCode로 뭘 할 수 있나요?

1. 코드 쓰기: 여러 가지 컴퓨터 언어로 프로그램을 만들 수 있어요.
2. 실수 찾기: 코드에 문제가 있으면 바로 알려줘요.
3. 빠른 입력: 자주 쓰는 코드를 쉽게 넣을 수 있어요.
4. 기능 추가: 필요한 도구를 더 설치해서 쓸 수 있어요.

VSCode, 어떻게 생각하면 될까요?

• VSCode는 개발자들의 '특별한 워드프로세서'예요.
  글 대신 프로그램을 만들고, 그게 잘 돌아가는지 확인하는 도구라고 생각하면 돼요.

💾 VScode 설치 방법

1.  VSCode 홈페이지에 접속하기

• 먼저, 웹 브라우저(크롬, 엣지 등)에서 VSCode 공식 사이트로 이동합니다.

2.  운영 체제에 맞는 설치 파일 다운로드

• VSCode는 윈도우(Windows), 맥(Mac), 리눅스(Linux) 등 여러 운영 체제에서 사용할 수 있어요. 여러분의 컴퓨터가 윈도우라면 'Windows' 버튼을, 맥이라면 'macOS' 버튼을 클릭하세요.

3. 설치 파일 실행하기

• 다운로드가 완료되면, 설치 파일을 클릭해서 실행합니다. 보통은 '다음(Next)' 버튼을 계속 누르면 간단하게 설치할 수 있어요.

4. 설치 완료 후 VSCode 실행하기

• 설치가 끝나면, 바탕화면이나 시작 메뉴에서 VSCode 아이콘을 찾아 실행합니다.

5. 기본 설정하기

• 처음 실행할 때는 언어를 설정하거나 필요한 확장 기능을 설치할 수 있어요. 여기서는 프로그래밍 언어를 지원하는 확장 프로그램을 추가로 설치하면 편리해요.

6. 끝!

• 이제 VSCode에서 코드를 작성하고 수정할 준비가 완료됐어요!

a. 설정 가져오기

이미 VS Code를 사용중이라면 VS Code의 구성을 커서로 쉽게 가져올 수 있습니다:

1. Cursor 설정으로 이동 (Cursor 화면 우측 상단 ⚙️): Cursor Settings > General > Account
2. VSCode Import : +import 클릭 → confirm원클릭으로 VS Code의 확장 프로그램, 테마, 설정, 키 바인딩을 가져옵니다
3. Rules For AI : Cursor의 채팅 기능에 적용 할 룰을 설정합니다.

Rules for AI란?

AI가 코드를 생성 할 때 어떤룰에 따라 응답을 생성할지 적용할지 설정하는 거에요
(**Ctrl/⌘ + K**: 채팅 패널에서의 룰 설정이예요)
(**Ctrl/⌘ + I**: 미니 컨트롤 패널(Composer에서는 동작을 안해요)
*두 방식의 차이점에 대해서도 알려드릴 예정이니 일단 개념만 알고계시면 됩니다!*

초보자를 위한 기본적인 설정에 대해서 알려드릴게요

언어 설정에 대한 추천

영어로 대화하는 것이 더 좋은 품질의 응답을 기대 할수는 있지만, 제 경험상 큰 차이는 없어요.

그래서 한국어로 설정하는 걸 추천드립니다! 이렇게 하면 더 편안하게 소통할 수 있겠죠!

전체 코드 수정 방지

가끔 디버깅 요청을 하면 전체 코드를 수정하려고 동작할 때가 있는데, 이를 조금이라도 방지하기 위해 전체 코드 수정 방지 명령을 추가했습니다. 이렇게 설정함으로써 실수로 코드가 잘못 수정되는 것을 예방할 수 있습니다.

오류 해결 및 디버깅 접근법

오류 해결 및 디버깅 시에는 단계별로 접근하고 해결법을 제시하도록 설정했어요.

AI가 한 번에 오류를 수정하는 것도 좋지만, 오류 수정은 매우 신중해야 하기 때문에 이렇게 설정한 것입니다.

<aside> 💡

응답은 항상 한국어로 해주세요

전체코드를 수정할려고 하지말고 필요한 부분만 수정해서 효율적으로 수정해주세요

오류 해결 및 디버깅 시에는 단계별로 침착하게 접근 및 해결법 제시 해주세요

</aside>

이런 식으로 설정하면 AI가 왜 이런 작업을 수행했는지 이해하기 더 쉬워집니다.

결과적으로, 코드를 잘 모르는 저희에게도 큰 도움이 될 거예요!

꼭 제가 설정한 룰을 따를 필요는 없어요! 여러분만의 룰을 찾아서 적용해보세요!

b. 가로 배치 / 세로 배치 변경 방법

활동 바 조정

기본적으로 활동 바는 채팅 공간 확보를 위해 가로로 배치됩니다. 세로 배치를 선호한다면:

1. VS Code 설정으로 이동
2. workbench.activityBar.orientation을 vertical로 설정
3. 커서를 끄고 재시작 해주세요!

마무리

Cursor와 VSCode로 더욱 효율적인 개발 환경을 만드세요!

이 글을 통해 Cursor 설치 방법부터 VSCode와의 마이그레이션까지 알아봤습니다.

설정과 사용법이 간단해서 처음 접하는 사용자도 쉽게 시작할 수 있을 거예요.

이제 여러분은 Cursor를 활용하여 더 빠르고 효율적인 코딩 환경을 구축할 준비가 되셨습니다!

다음 단계로는 직접 설치해보거나, Cursor에서 제공하는 다양한 AI 기능을 활용해보세요.

새로운 기능과 설정을 실험해보고, 여러분만의 규칙을 만들어 적용하는 것도 추천드려요.

궁금한 점이나 도움이 필요하면 언제든지 댓글로 남겨주세요! 여러분의 성공적인 개발을 응원합니다. 😊

 

앞으로 커서 관련 꿀팁과 커서를 활용해 실제 프로젝트를 제작하는 방법을 꾸준히 업로드할 예정이에요.

제 콘텐츠를 통해, 여러분은 커서를 활용해 더 효율적으로 코드를 작성하고, 직접 프로젝트를 완성해 서비스까지 만들어볼 수 있을 거예요

 

만약 여러분이 커서를 제대로 활용해서 자신만의 서비스를 만들어보고 싶다면, 구독 부탁드려요!

이 과정을 통해 실질적인 개발 스킬을 익히고, 빠르게 아이디어를 실현하는 방법을 배울 수 있습니다.

 

 

💡FreAiner 슬랙 커뮤니티에 참여하세요!

FreAiner 슬랙 커뮤니티에서 다른 FreAiner들과 아이디어를 나누고, 앱 및 웹 개발에 대한 다양한 정보를 교환해보세요. 

👉 [슬랙 커뮤니티 참여하기]

---

💬 Threads에서도 FreAiner와 함께해요!

Threads에서 실시간으로 이야기를 나누며, FreAiner의 개발 팁과 인사이트를 만나보세요. 더 많은 사람들과 소통하며 네트워크를 확장해보세요!

👉 [Threads에서 FreAiner 팔로우하기]