💻AI 코드 에디터 Cursor 사용법 & 고품질 웹페이지 10분 완성 가이드

안녕하세요! 오늘은 최근 가장 인기 있는 AI 코드 에디터, Cursor에 대해 알아보겠습니다. Cursor는 소프트웨어 개발 속도를 높이고 코드 작성 및 편집 과정을 도와주는 AI 기반의 코드 자동 완성 및 생성 도구입니다. 이 도구는 특히 여러 줄의 코드 편집을 자동으로 처리할 수 있어, 복잡한 코드 작업도 간단하고 빠르게 처리할 수 있도록 돕습니다. 또한, Cursor는 AI와의 채팅 기능을 통해 개발자와의 상호작용으로, 코드 작성, 디버깅, 코드 리뷰 등 여러 개발 작업에서 유용하게 활용될 수 있습니다. 이 블로그에서는 Cursor의 특징과 주요 기능 및 사용방법을 알아보고 테스트 웹페이지를 만들어 보겠습니다.

💻Cursor로 고품질 웹페이지 10분 완성!: AI 코드 에디터로 생산성 200% UP!

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

Cursor 특징 및 주요 기능

Cursor는 AI 모델과의 채팅을 통해 코딩 작업을 할 수 있으며, 이때 사용가능한 AI 모델은  OpenAI의 gpt-4o, Anthropic의 claude-3.5-sonnet, Google의 gemini-1.5-flash 등 다양한 AI 모델을 사용할 수 있습니다. 

Cursor의 AI 모델 선택화면

Cursor의 주요 특징과 기능은 크게 탭 완성(Tabs Completion), 코드 생성(Code Generation), 스마트 리라이트(Smart Rewrites), 커서 예측(Cursor Prediction), 채팅(Chat) 등으로 나눌 수 있습니다. 각 기능은 개발자가 코드를 작성하는 과정에서 발생하는 다양한 상황을 지원하며, 작업의 효율성을 극대화합니다.

• 탭 완성(Tabs Completion): Cursor의 탭 완성 기능은 코드 작성 중 AI가 사용자의 다음 동작을 예측하여 자동으로 코드나 편집을 제안합니다. 사용자가 최근에 작성한 코드를 기반으로 한 다중 줄 제안도 가능하며, 이러한 예측 기능은 코드 작성 시간을 크게 줄일 수 있습니다.

Cursor 탭 완성 기능

• 코드 생성(Code Generation): Cursor는 사용자가 작성한 코드와 최근 변경 사항을 바탕으로 다음에 작성할 코드를 예측하여 생성합니다. 이는 단순한 코드 자동 완성을 넘어, 사용자가 필요로 하는 코드를 미리 생성하여 시간을 절약할 수 있도록 도와줍니다.

Cursor 코드 생성 기능

• 스마트 리라이트(Smart Rewrites): 코드 작성 시 발생하는 오타나 실수를 Cursor가 자동으로 감지하고 수정해 줍니다. 예를 들어, 함수 이름을 잘못 입력하거나 문법 오류가 발생했을 때, Cursor는 이를 자동으로 수정하여 개발자의 실수를 최소화합니다.
• 커서 예측(Cursor Prediction): Cursor는 사용자의 커서 위치를 예측하여, 코드 작성 흐름을 방해하지 않고 자연스럽게 다음 작업으로 넘어갈 수 있도록 지원합니다. 이는 코드 작성 과정에서의 전환을 매끄럽게 만들어줍니다.
• 채팅(Chat): Cursor의 채팅 기능은 AI와의 상호작용을 통해 코드 작성 및 디버깅 과정을 지원합니다. 사용자는 코드베이스 내 특정 파일이나 코드를 참조하면서 질문을 하거나, 버그를 찾는 등의 작업을 할 수 있습니다. 또한, 이미지를 포함한 시각적 컨텍스트를 추가하거나, 웹 검색 기능을 통해 최신 정보를 활용할 수도 있습니다. 

Cursor 채팅 기능

Cursor 설치방법은 아래 링크에 접속해서 우측 상단 Download 버튼을 클릭하고 실행하시면 쉽게 설치하실 수 있습니다. 

https://www.cursor.com/

Cursor

728x90

Cursor 기본 사용방법

Cursor의 기본적인 화면구성은 아래와 같이 왼쪽부터 탐색기창, 코드창, 채팅창으로 나누어지며, 중앙 아래쪽에 터미널과 플로팅 작성기가 위치하고 있습니다. 비주얼 스튜디오 코드와 거의 동일한 화면 배치입니다. 

Cursor 기본화면

먼저, Cursor의 메뉴를 한국어로 설정하는 방법은 다음과 같습니다.

Help-Show All Command-Configure Display Language-한국어 선택-재시작

Cursor 메뉴 한국어 설정

주요 단축키는 다음과 같습니다. 이 단축키 중 일부는 사용 중인 운영 체제에 따라 다를 수 있습니다.

• Ctrl/⌘ + Shift + J 또는 Ctrl/⌘ + Shift + P: Cursor 전용 설정 열기
• Ctrl/⌘ + Shift + I: 컨트롤 패널(Control Panel) 열기
• Ctrl/⌘ + I: 컴포우저(Composer-미니 컨트롤 패널) 열기
• Ctrl/⌘ + K: 코드창 인라인(Inline) 채팅
• Ctrl/⌘ + L: 오른쪽 사이드바 채팅
• Option/Alt + Enter: 빠른 질문 기능 (텍스트 선택 시)
• Ctrl/⌘ + Enter: 채팅에서 임베딩 검색 실행

또한, AI 입력 상자에서 @ 기호를 사용하면 아래 화면과 같이 화살표 키로 탐색할 수 있는 파일, 폴더, 웹 검색, 문서, 코드베이스 등의 제안 메뉴에 접근할 수 있습니다. 

AI 입력 상자에서 @ 기호 사용

(2024.9.10\업데이트) 참고로 Cursor의 이용요금은 아래와 같습니다. 바로가기

Cursor 이용요금

 

Cursor로 웹페이지 만들기

다음은 Cursor를 이용해서 실제로 웹페이지를 만들어 보겠습니다. 참조 가이드는 유튜브 "Cursor AI Beginners Tutorial: A New Era for Programmers"입니다. 

1. Ctrl/⌘ + Shift + I를 누르고 컨트롤 패널을 연 다음 아래와 같이 입력해서 기본 웹페이지를 만듭니다. 

Create a basic website with Home, services, pricing and contact
This website is about Providing AI Services
Its' HTML , CSS and JS website

기본 웹 페이지 생성완료 화면

2. 화면 우측 하단 입력창에 아래와 같이 입력해서 각 페이지마다 주소를 만들고, 컨텐츠와 서비스를 추가합니다. @를 입력하고 File을 선택해서 수정하고자 하는 파일을 선택합니다. 

Create each page in different URL
@index.html Add more content and different services it provides, with various content blocks
Add more style and make the website more modern

컨텐츠 및 서비스 추가

3. 서비스와 가격 페이지에 컨텐츠를 추가하고, 좀 더 인터랙티브(입력, 스크롤, 클릭 등)하게 만듭니다. 

@services.html Add more services with content for each service and add that in different blocks
Add more content @pricing.html and @contact.html 
make it more interactive

서비스, 가격페이지 컨텐츠 추가

4. 탑 메뉴를 가운데 정렬하고, 전체적으로 정렬을 맞춘 다음, 모던한 디자인으로 수정합니다. 

@Codebase align the form properly, Align the pages properly with modern design
@Codebase Adjust top menu location to center

탑 메뉴 및 전체적인 정렬 수정, 모던 디자인 반영

약 10분 정도 걸려서 다음과 같은 웹 페이지를 완성하였습니다. 

Home 페이지

Service 페이지

Pricing 페이지

Contact 페이지

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

마치며

Cursor는 AI 기반의 강력한 코드 작성 및 편집 도구로, 개발자들이 코드 작성 속도를 높이고 더 나은 코드를 작성할 수 있도록 도와줍니다. 특히 여러 줄의 코드 편집, 코드 예측, AI와의 상호작용을 통한 채팅 기능 등은 개발자가 복잡한 프로젝트에서도 효율적으로 작업을 진행할 수 있도록 지원합니다. 웹페이지 제작뿐만 아니라 다양한 프로그래밍 언어와 프레임워크에서 Cursor를 활용하면, 더 빠르고 정확하게 소프트웨어를 개발할 수 있습니다. 

 

Cursor로 코딩해 본 후기는 다음과 같습니다. 

• 8살짜리가 챗봇 채팅 프로그램을 만든 것은 사실이다.
• 창의성과 표현력만 있으면 AI가 프로그램을 만들어주는 시대가 되었다. 
• 코딩은 전문분야에서 일반분야로 변화 중이다.

오늘은 AI 코드 작성도구 Cursor에 대해 알아보았습니다. Cursor와 같은 AI 활용 도구의 발전이 다양한 분야의 작업 효율성을 향상시키기를 기대하면서, 저는 다음 시간에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다. 

 

https://fornewchallenge.tistory.com/

 

 

2024.05.31 - [AI 언어 모델] - 🌟코딩 혁신: Codestral - 미스트랄이 만든 AI 코드 생성 끝판왕!🚀

🌟코딩 혁신: Codestral - 미스트랄이 만든 AI 코드 생성 끝판왕!🚀