AI assistant를 지원하는 IDE 돌려쓰기

 ・ 4 min

photo by Jorge Salvador(https://unsplash.com/@jsshotz?utm_source=templater_proxy&utm_medium=referral) on Unsplash

Chat GPT, Claude 등 수많은 개발 모델이 등장하고 있고 IDE에도 AI가 탑재되어 코딩에 도움을 주는 시대에 살고 있어요. 누가 이길지 모르겠으나 마치 춘추전국시대 같아요.

기존에 VS Code를 계속 쓰고 있다가 AI 비서가 붙어있는 Cursor를 한번 써봤는데 굉장히 개발 경험이 좋아서 여러분도 한번 써보셨으면 좋겠어요. 그런데 지금 당장은 돈을 내지 않고도 개발하는 방법을 찾아서 이를 공유하려고 해요. 자린고비 같은 방법이라고 생각해주시면 돼요.

IDE를 여러개 쓰는 이유
각 IDE마다 무료 계정이 AI 기능을 무료로 쓸 수 있는 한도가 있어요.
이 한도를 다 사용하면 다른 IDE를 사용해서 한도까지 쓰고 다른 IDE로 바꾸는 과정을 한달마다 하는 거예요.
이 정책이 바뀔 수도 있지만 사용법도 비슷하고 아직 유효하다고 생각해 공유하려고 해요.

사용을 좀 해봤는데 서비스에따라 월마다 사용량이 초기화가 되는 경우가 거의 없어서 이 방법은 어떤 걸 구독하기 전 다양한 제품을 테스트하는 용도로 사용해주세요

여러분은 Cursor 같은 IDE가 몇개나 된다고 생각하시나요? 저는 약 3~4개 정도를 찾았어요.

이거 말고도 몇개가 더 있을 수 있지만 저는 2~3개의 IDE만 써도 한 달 정도를 쓸 수 있어서 4개면 충분하다고 생각해요. 각 사이트나 IDE에서 계정 가입은 GitHub 계정으로 가입했어요.

Cursor 사용량
image

Windsurf 사용량
image

Aide 사용량
image

GitHub Copilot 사용량 (얘네는 어디서 보여주는지 모르겠어요 😓)
image

VS Code를 제외하고는 다들 VS Code를 포크해서 만들어낸 IDE이기 때문에 Profile을 활용하면 환경 구성을 더 간편하게 할 수 있어서 이것만 알려드릴게요.

Profiles 기능을 사용해서 개발 환경 구성하기#

먼저 위에서 원하는 제품들을 다운받아서 개발하는 컴퓨터에 설치해 주세요.
제 기준으로 말씀드리면 VS Code를 제외하고 나머지는 최근에 설치했기 때문에 Profile의 기본이 될 contents를 가진 VS Code로 정했어요. 아마 대부분이 이에 해당하실 거라 생각해요.
Contents가 무엇이냐 하면 VS Code에 설정하고 설치했던 settings, keyboard shortcuts, tasks, snippets, extensions을 말하는 거예요. 여기서 다른 곳으로 옮길 필요가 있는 것들을 골라 프로필로 만들 거예요.
이렇게 하는 이유는 다른 IDE를 처음 키면 동일한 세팅을 구성하는 게 번거로우실 거예요.
어떤 IDE는 VS Code에서 설정을 가져올 수 있게 지원하지만 하지 않는 IDE도 있어서 동일한 환경을 모두 적용하기 위해 프로필을 만들려고 해요.

더 정확한 설명은 Profiles in Visual Studio Code을 참고해 주세요.

Profile 저장하기#

  1. VS Code에서 하단에 환경설정(톱니바퀴 모양) 버튼을 선택해 주세요

  2. Profiles 버튼을 선택해 주세요
    image

  3. 저장하고자 하는 프로필 옆 더보기 버튼을 선택해 주세요

  4. Export를 눌러주세요

  5. 원하는 이름을 입력해 주세요

  6. 원하는 위치에 저장해 주세요 (저는 Local file로 저장)
    image

이렇게 되면 저장은 완료되었어요.

Profile 불러오기#

이제 각 IDE를 킨 다음 Profile 메뉴를 찾아 Import Profile을 눌러 파일을 선택해 주세요.
어떤 IDE는 메뉴에서 안보이는 경우가 있어서 cmd + shift + p로 커맨드 팔렛트를 열고 Profile: New Profile을 선택한 다음 해당 프로필을 Cancel한 다음 Import Profile을 해주세요.
image

그리고 여러 설정과 extensions을 다운로드하면 프로필이 생성돼요.
그런 다음 편의를 위해서 Use for New WindowsUse this profile as the default for new windows를 체크해 주세요.

image

이제 거의 동일한 환경으로 각 IDE에서 AI와 함께 개발할 수 있으실 거예요!

AI와 개발하는 방법#

Chat GPT 같은 걸 사용해 봤다면 방법은 쉬워요. Chat GPT를 쓰듯이 IDE에서 채팅하면 돼요. 대신 IDE와 결합되어 있어서 도움이 되는 몇 가지 기능이 더 있어요. 크게 AI가 직접 작성해 주는 Write 모드와 대화만 해서 제가 직접 작성하는 Chat 모드가 있어요. 그리고 코딩하면서 제가 쓰고자 하는 걸 제안하는 자동 완성(completion) 모드가 있어요.

저는 이런 IDE를 쓰는 가장 큰 이유로 대화를 통해 코드 개선점과 문제 찾기, 단순 반복 업무 대신하는 역할이 크다고 생각해요.

Rules 세팅하기
내 프로젝트에 맞는 개발을 하기 위해서 AI에게 사전 지시 사항을 설정하는 방법이에요.
저는 다 똑같은 내용을 각 파일에 지정해 줬어요. 하나의 파일을 바라보게 하는 방법도 있겠지만 일단은 이렇게 하고 있어요.
어떤 내용을 넣어야 하냐는 고민을 하실 수 있는데 저는 Cursor Rules라는 사이트에서 프로젝트에서 맞는 rule을 찾아 넣어주세요.
저는 프로젝트에서 사용하는 Flutter 프레임워크를 찾아서 복사 + 제가 추가한 내용(Clean architecture와 한국어 사용)을 넣었어요.

Rules 세팅을 위한 경로
GitHub Copilot: 프로젝트루트/.github/copilot-instructions.md 만들고 내용 작성
Cursor: 프로젝트루트/.cursorrules 만들고 내용 작성
Windsurf: 프로젝트루트/.windsurfrules 만들고 내용 작성
Aide: docs를 찾아봤지만, 없는 것 같아요 😓

대화창 여는 단축키
VS Code에서 대화창 열기: ctrl + cmd + I
Cursor에서 대화창 열기: cmd + shift + l
Windsurf에서 대화창 열기: cmd + shift + l, 모드 전환: cmd + .
Aide에서 대화창 열기: 항상 열려있어요

이 밖에도 파일 참고해서 질문하기, 코드 라인 참고해서 질문하기 등 다양한 방법으로 AI와 대화하는 법이 있지만 이건 docs와 다른 글이나 영상을 참고해 주세요!

각 IDE의 문서는 아래에 링크해 둘게요.

유용한 링크


Transformation doesn't take place with a vacuum; instead, it occurs when we are indirectly and directly connected to all those around us.

— Byron Pulsifer


Other posts
cover_image
 ・ 3 min

피그마를 위한 디자인 학습 정리

cover_image
 ・ 2 min

C 언어는 뭘까? 오픈소스일까?

cover_image
 ・ 4 min

Route 53에서 레코드 입력 필드 살펴보기