[클래스 01] 커서 설치하고 개발 환경 준비하기 : 코드 편집기, IDE
커서는 AI를 통해 코드를 편집할 수 있는 프로그램입니다. 보통 이러한 도구를 코드 편집기라고 부르며, 커서도 코드 편집기의 한 형태라고 볼 수 있습니다.
다만 커서는 단순히 코드를 편집하는 기능만 제공하는 도구가 아닙니다. 공식 사이트에서 소개하듯 커서는 인공지능 모델을 탑재하고 있으며, 운영체제에 명령을 내릴 수 있는 터미널을 비롯해 다양한 개발 편의 기능을 갖추고 있습니다. 또한 이 책에서 다룰 MCP도 사용할 수 있습니다.
이처럼 이러한 기능들을 모두 포함한 개발 프로그램을 IDE라고 부릅니다. IDE는 Integrated Development Environment의 앞글자만 딴 표현으로, 한글로는 통합 개발 환경을 뜻합니다. 말 그대로 개발에 필요한 여러 도구와 기능이 하나로 통합된 환경을 말하는데요, 이제 인공지능을 장착한 IDE, 커서를 설치하고 어떤 도구인지 살펴볼까요?
커서 회원가입 후 구독 관리하기
커서는 회원가입 후 무료로 사용할 수 있지만 이 책에 나온 실습을 제대로 해보려면 유료로 구독해야 합니다. 커서에 처음 가입하면 구독 화면을 찾기도 어렵고, [구독 취소] 버튼도 숨겨져 있어 찾기 어렵습니다. 제가 추천하는 방법은 구독 결제 후 바로 구독을 취소해서 1개월만 쓰는 방식입니다. 커서는 구독 후 바로 구독을 취소해도 결제일 기준 1달을 쓸 수 있습니다. 여기서 매뉴얼과 함께 그 방법을 소개하겠습니다.
01 커서를 사용하려면 먼저 회원가입을 해야 합니다. 커서 홈페이지에 접속하여 [Sign in ➝ Sign up] 버튼을 순서대로 누른 다음 [Continue with Google]을 눌러 구글로 회원가입을 진행하세요.
커서 홈페이지 : cursor.com
02 회원가입 후 로그인을 하면 커서의 대시보드 화면을 볼 수 있습니다. 대시보드 화면에서는 계정 사용 현황을 확인하고 유료 구독도 할 수 있습니다.
03 이때 위쪽에 있는 [Set Spending Limit]은 누르지 마세요. 이 옵션은 사용량이 일정 기준을 초과했을 때 자동으로 과금하는 옵션을 켜거나 끄도록 설정하는 기능입니다. 커서에 처음 가입하면 이 옵션은 꺼져 있는 상태이므로 그대로 두면 됩니다.
04 왼쪽 계정 아래에 보이는 메뉴에서 [Billing & Invoices]를 누릅니다. 그러면 정기 구독 내역으로 결제 내역과 청구서를 볼 수 있습니다.
05 이제 결제 수단을 등록하기 위해 [Manage Subscription]을 눌러 결제 상세 페이지로 이동합니다.
06 아마 여러분은 구독을 시작하지 않은 상태일 것이므로 처음에 보이는 화면은 다음과 같을 것입니다. 여기서 [+ 결제 방식 추가]를 눌러 카드를 등록하세요.
07 카드 등록 후 [Cursor(으)로 돌아가기]를 눌러 커서의 대시보드 화면으로 이동하세요. 여기서 [Upgrade to Pro]를 누르면 등록한 카드로 Pro 유료 구독을 할 수 있습니다.
커서 대시보드 화면 : www.cursor.com/dashboard
08 구독을 마쳤으면 다시 과정 05를 참고하여 [Manage Subscription]을 눌러 결제 상세 페이지로 이동하세요. 여기서 [구독 취소 ➝ 구독 취소]를 눌러 구독을 취소하세요. 이렇게 하면 한 달 간 Pro 구독을 이용할 수 있으며, 이후에는 자동으로 결제가 되지 않습니다.
커서 회원가입부터 Pro 구독까지 진행해보았습니다. 이 상태에서 이후 실습을 진행하면 문제없이 원활하게 실습을 진행할 수 있을 것입니다.
커서 설치 후 기본 화면 살펴보기
01 회원가입을 완료했다면 이제 커서를 설치하겠습니다. 커서 홈페이지에 접속하면 설치 파일을 받을 수 있는 [Downaload] 버튼이 있습니다. 사용 중인 운영체제에 맞게 버튼을 눌러 파일을 다운로드한 뒤 커서를 설치하세요. 설치 과정은 간단하므로 생략하겠습니다.
커서 홈페이지 : cursor.com
02 커서를 설치했다면 다음과 같이 기본 화면이 나타납니다. 처음 실행할 때 로그인을 하라는 안내가 표시되니, [Log In]을 눌러 로그인을 진행하세요.
03 로그인을 마치면 테마를 설정하고, Quick Start에서 커서의 동작 모드를 설정할 수 있습니다. 기본값은 [Agent] 모드이며, 이 모드가 대부분의 상황에서 적합하므로 그대로 사용하겠습니다. 설정을 완료했다면 [Continue]를 누르고, 이후 표시되는 설정값도 기본으로 한 다음 [Continue]를 눌러 Review Settings 설정 화면까지 진행하세요.
04 Review Settings에서는 ‘Language for AI’를 [Korean]으로 설정하고 ‘Open from Terminal’은 기본값으로 둔 다음 [Continue]를 눌러 진행하세요. 모든 설정을 완료하면 커서의 기본 화면이 나타납니다.
[바이브 코딩 01] 기업 소개 웹사이트 만들기
이제 커서를 설치했으니 간단한 기업 소개 웹사이트를 만들면서 커서 사용 방법을 알아보겠습니다.
01 오른쪽 위를 보면 사이드바 버튼 3개가 보입니다. 각 사이드바 버튼을 모두 눌러 활성화하세요.
각 사이드바의 역할은 다음과 같습니다. 지금은 아무 작업도 하지 않았기 때문에 감이 잘 오지 않겠지만 우선 어떤 기능이 있는지 눈으로 읽어 익혀두면 도움이 될 겁니다.
➊ 왼쪽 사이드바 : 파일 탐색기 / 코드 관리 / 확장 도구 관리 창
➋ 오른쪽 사이드바 : 커서 LLM 채팅창
➌ 아래쪽 사이드바 : 터미널
➍ 가운데 화면 : 코드를 입력하는 코드 편집 화면
사이드바로 둘러싸인 가운데 화면은 여러분이 코드를 입력하는 코드 편집 화면입니다. 물론 여러분이 직접 코드를 입력할 일은 거의 없습니다. 대부분의 코드 작업은 오른쪽 사이드바의 LLM 채팅창을 통해 이뤄집니다. 이것이 커서의 기본적인 구조입니다. 구체적인 기능은 앞으로 실습을 진행하며 차근차근 알아보겠습니다.
02 간단한 커서의 기능을 알아보기 위해 채팅창을 사용해보겠습니다. 오른쪽 채팅창에는 여러 버튼이 있는데 이 중 자주 쓰게 될 버튼은 [+], [@Add context]입니다. 나머지 버튼은 거의 사용하지 않으며, 필요할 때 그때그때 설명하겠습니다.
[+] 버튼 : 챗GPT와 같은 서비스에서 볼 수 있는 ‘새 채팅창 열기’ 기능입니다. 만약 대화를 진행하다 원하는 답변이 잘 나오지 않으면 이 버튼을 눌러서 다시 채팅을 진행하면 됩니다.
[@Add context] : 파일이나 폴더, 웹 문서를 여기에 포함시키는 기능입니다. 추가한 파일이나 폴더 등 컨텍스트를 바탕으로 커서가 답변합니다.
03 앞서 살펴본 커서의 기능을 바탕으로 기업 소개 웹사이트를 만들어보겠습니다. 왼쪽 사이드바에서 [Open Folder]를 눌러 앞으로 실습할 폴더 cursorstudy를 원하는 위치에 만든 다음 [열기]를 눌러 해당 폴더를 여세요.
04 그런 다음 왼쪽 사이드바의 cursorstudy 폴더에서 마우스 오른쪽 클릭을 한 다음 [New File]을 눌러 test.html이라는 파일을 하나 만드세요.
파일이 생성되며, 중앙에 test.html 파일을 수정할 준비가 됩니다. 오른쪽 채팅창을 보면 [@Add context]에 test.html 파일이 포함된 것을 확인할 수 있습니다.
이 상태가 되면 채팅창에서 test.html의 파일 상태를 파악하고 다양한 작업을 할 수 있게 됩니다. 앞으로 [@Add context]는 간단히 ‘컨텍스트’라고 부르겠습니다. 컨텍스트는 한글로 맥락이라는 뜻이죠? 커서가 우리의 대화를 이해하기 위해 참고하는 모든 것을 통틀어 컨텍스트라고 하겠습니다.
05 이제 컨텍스트에 test.html이 있으니 이것에 대해 물어보겠습니다.
놀랍게도 커서는 현재 파일이 비어 있다는 것을 알고, 파일의 확장자를 보고 어떤 용도인지 설명해줍니다. 앞서 언급한 컨텍스트를 통해 커서가 이 파일의 구성을 파악하고 있는 것입니다.
06 커서의 컨텍스트를 이용해서 채팅창을 통해 간단한 작업을 시켜보겠습니다.
요청한 작업을 토대로 커서가 파일을 추가하고 코드를 작성하기 시작합니다. 작성한 코드에 대해서도 자세히 설명해줍니다.
가운데 화면을 보면 임시로 코드가 입력되어 있고, 작은 창이 표시됩니다. 여기서 [Reject]를 누르면 현재 작성한 코드를 거절하는 것으로 파일에 반영되지 않으며, [Accept]를 누르면 현재 작성한 코드가 파일에 그대로 반영됩니다. [Accept]를 눌러서 허락해줍니다. 이때 오른쪽 사이드바의 채팅창도 보면 [X], [V] 표시가 있습니다. 이 버튼들도 [Reject]와 [Accept]와 같은 역할을 하므로 원하는 버튼을 누르면 됩니다.
07 이제 파일을 웹 브라우저에서 열어보세요. 어떤 화면이 나올까요?
놀랍게도 흔히 보는 기업 소개 페이지가 완성되어 보입니다. 하지만 조금 아쉬운 점이 있습니다. 배경에 기업 소개와 어울리는 적절한 이미지를 넣으면 좋을 것 같은데 단조로운 디자인으로 마무리되었네요. 이런 경우 어떻게 수정할 수 있을까요? 직접 코드를 수정해야 할까요? 아닙니다.
08 커서는 현재 화면의 코드를 모두 알고 있기 때문에 여러분이 원하는 수정을 요청하기만 하면 됩니다. 그러면 해당 파일의 현재 상태에 맞춰 수정을 해줍니다. 이것이 바로 커서가 우리에게 의미 있는 이유입니다. 예전에는 이런 수정 작업을 전문 교육을 받은 개발자가 직접 해야 했습니다. 하지만 이제는 커서가 개발자의 역할을 대신해줍니다. 그것도 마치 여러분의 상태를 가장 잘 아는 개발자가 옆에서 고쳐주는 것처럼 말이죠. 예를 들어 구글에서 아무 이미지나 찾아 투명도를 50% 정도로 해서 기업 소개 이미지 배경으로 깔아달라고 해봅시다. [이미지 주소 복사]를 눌러 링크를 복사한 뒤 다음과 같이 부탁해보겠습니다.
그러면 커서가 배경으로 해당 이미지로 변경하고 투명도를 50%로 설정했다고 하네요.
09 [V]를 눌러 적용하고 다시 test.html을 웹 브라우저에서 열어봅시다.
원하는 위치가 정확하게 수정되었네요. 이렇게 커서를 활용하면 이런 웹사이트도 손쉽게 만들 수 있습니다.