AI Code Editor Cursor 배우기 – 1. 설치와 초기 설정 – AIPromptSmarteasy 차 교수와 함께

Cursor는 AI 기술을 활용한 혁신적인 코드 에디터입니다.

The AI Code Editor; Built to make you extraordinarily productive, Cursor is the best way to code with AI.

전통적인 코드 작성 방식에 인공지능의 힘을 더해 개발자의 생산성을 크게 향상시킵니다. Cursor의 주요 기능으로는 AI를 통한 코드 생성, 실시간 코드 분석 및 제안, 자연어 기반 프로그래밍 등이 있습니다. 이 도구는 초보자부터 전문가까지 모든 레벨의 개발자에게 유용한 기능을 제공합니다.

1. Cursor 설치하기

Cursor를 설치하는 과정은 매우 간단합니다:
1) cursor.com 웹사이트에 접속합니다.
2) 메인 페이지에서 ‘Download for free’ 버튼을 클릭해서 다운로드합니다.
3) 화면의 지시에 따라 설치를 진행합니다. 몇 번의 클릭만으로 설치가 완료됩니다.

2. 커서 실행하기, 프로젝트 시작하기

Cursor를 처음 실행하면 작업 공간이 나타납니다.

주요 기능 버튼:
– 오른쪽 상단: AI 창 버튼. 여기서 AI와 상호작용하며 코드 작성을 도움받을 수 있습니다.
– 하단: 터미널 버튼. 명령어 실행이나 패키지 설치 등에 사용됩니다.

효율적인 프로젝트 관리를 위해 각 프로젝트마다 새로운 폴더를 만드는 것이 좋습니다.

1) 새 폴더 생성: 데스크톱이나 원하는 위치에 ‘login_app’이라는 새 폴더를 만듭니다.
2) Cursor 실행: Cursor를 실행하고 ‘Open Folder’ 버튼을 클릭하여 방금 만든 ‘login_app’ 폴더를 엽니다.

간단한 웹 페이지 만들기:

1) AI 창을 열고 “해리포터라는 단어가 있는 간단한 웹 페이지를 만들어 주세요.”라고 입력합니다.
2) AI가 제공하는 HTML 코드를 새 파일 index.html 만들고 여기에 복사합니다.
3) 파일을 저장하고 Ctrl + F5를 눌러 실행 시킵니다. 브라우저가 열리고 결과를 확인할 수 있습니다.

AI 기능 활용하기

Cursor의 핵심은 AI 기능입니다. AI 창에서 자연어로 요청을 하면, AI가 이해하고 적절한 코드를 생성해 줍니다. 예를 들어, “로그인 기능이 있는 간단한 웹 애플리케이션을 만들어줘”라고 요청하면, AI가 필요한 HTML, CSS, JavaScript 코드를 생성하고 설명까지 제공합니다.

해리포터 페이지에 로그인 기능을 추가 되었습니다. 코드 생성 하단의 설명을 읽고 로그인 로그아웃 해 봅니다.

코드에 대한 설명이 필요하면 “이 코드에 대해 설명해 줘”라고 요청할 수 있습니다. 파일 수준에서 요청할 수도 있고, 코드 일부를 선택하면 팝업 창이 뜨는데 거기서 Add to Chat한 후 요청하면 됩니다.

로컬 서버 실행하기

생성된 웹 페이지를 로컬에서 실행하려면 간단한 Python 서버를 사용할 수 있습니다:

1) 터미널을 엽니다.
2) 프로젝트 폴더로 이동합니다.
3) python -m http.server 명령어를 입력합니다.
4) 브라우저에서 http://localhost:8000으로 접속하여 결과를 확인합니다.

추가 팁과 주의사항

– 파일 저장: 작업 중 자주 Ctrl+S (Mac의 경우 Cmd+S)를 눌러 파일을 저장하세요.
– 패키지 설치: pip를 이용해 필요한 패키지를 설치할 수 있습니다. 예: pip3 install flask
– API 키 설정: 일부 AI 기능을 사용하려면 API 키가 필요할 수 있습니다. API 키는 안전하게 관리해야 합니다.
– 설명대로 안 되는 경우는 문제를 있는 그대로 잘 채팅 창에 물어봅니다. 잘 설명해 줄거고 웬만하면 다 해결 될 겁니다.

코드를 생성하거나 변경하면 AI 패널에 Apply 버튼이 나타납니다. Apply 버튼을 클릭하면 해당 내용이 반영되고, 이어서 Accept 버튼이 나타납니다.

Accept 버튼을 클릭하면 최종적으로 변경 내용이 적용됩니다.

파일 링크를 클릭하면 파일의 내용을 확인할 수 있지만, 파일이 아직 존재하지 않는 경우 Ctrl+S를 눌러 저장해야 합니다. 그러면 파일이 폴더에 추가된 것을 확인할 수 있습니다.

이후 챗 패널에서 요청한 내용을 반영하기 위해 파일이 추가되거나 변경되면, 같은 과정을 반복하면 됩니다.

결론

Cursor는 AI의 힘을 빌려 코딩 경험을 혁신적으로 개선합니다. 코드 자동 생성, 실시간 분석, 자연어 기반 프로그래밍 등의 기능은 개발 속도를 높이고 생산성을 극대화합니다. 초보자는 Cursor를 통해 프로그래밍 학습을 가속화할 수 있고, 전문가는 복잡한 작업을 더욱 효율적으로 수행할 수 있습니다.

Cursor를 지속적으로 사용하면서 AI와의 상호작용 방식을 익히고, 프로젝트에 맞는 최적의 활용법을 찾아가는 것이 중요합니다. Cursor는 단순한 도구를 넘어, 당신의 코딩 여정에서 믿음직한 파트너가 될 것입니다.

About the Author
(주)뉴테크프라임 대표 김현남입니다. 저에 대해 좀 더 알기를 원하시는 분은 아래 링크를 참조하세요. http://www.umlcert.com/kimhn/

Leave a Reply

*