Cursor AI로 시작하는 초보자를 위한 웹/앱 개발 매뉴얼

초보자도 AI의 도움을 받아 자신만의 웹사이트나 앱을 만들 수 있는 시대가 왔습니다. Cursor AI는 코딩 초보자도 쉽게 사용할 수 있는 AI 기반 코드 에디터로, VS Code를 기반으로 개발되어 친숙한 인터페이스와 함께 강력한 AI 기능을 제공합니다. 이 매뉴얼은 프로그래밍 경험이 없는 완전 초보자도 Cursor를 활용해 간단한 웹사이트나 앱을 개발할 수 있도록 상세한 가이드를 제공합니다.

Cursor AI 소개 및 설치하기

Cursor AI란?

Cursor는 소프트웨어 개발 속도를 높이고 코드 작성 및 편집 과정을 도와주는 AI 기반의 코드 자동 완성 및 생성 도구입니다. 이 도구는 특히 여러 줄의 코드 편집을 자동으로 처리할 수 있어, 복잡한 코드 작업도 간단하고 빠르게 처리할 수 있도록 돕습니다1. VSCode를 기반으로 만들어져 사용하기 쉽고, OpenAI의 ChatGPT와 Anthropic의 Claude 같은 최신 AI 모델을 에디터에 직접 통합하여 개발 생산성을 높여줍니다2.

Cursor의 주요 특징:

AI 모델과의 채팅을 통한 코딩 지원
코드 자동 완성과 생성
실시간 오류 감지 및 수정 제안
자연어를 통한 코드 설명 및 문서화
다양한 프로그래밍 언어 지원

설치 방법

Cursor AI 공식 웹사이트(https://www.cursor.com)에 접속합니다10.
화면 우측 상단의 'Download' 버튼을 클릭합니다1.
운영체제에 맞는 버전(Windows, macOS, Linux)을 선택하여 다운로드합니다2.
다운로드한 설치 파일을 실행하고 화면의 지시에 따라 설치를 완료합니다10.
설치가 완료되면 Cursor AI를 실행합니다10.

기본 설정

Cursor를 처음 실행하면 몇 가지 설정이 필요합니다:

언어 설정: 한국어로 변경하려면 "Help-Show All Command-Configure Display Language-한국어 선택-재시작"으로 진행합니다1.
VSCode 설정 가져오기: 이전에 VSCode를 사용했다면, 설정을 가져올 수 있습니다2.
계정 생성: AI 기능의 전체 활용을 위해 안내에 따라 로그인하거나 계정을 만듭니다2.

Cursor의 기본 인터페이스와 주요 기능

화면 구성

Cursor의 기본적인 화면 구성은 다음과 같습니다:

왼쪽: 탐색기 창
중앙: 코드 편집 창
오른쪽: AI 채팅 창
하단: 터미널과 플로팅 작성기1

VSCode 사용자라면 익숙한 레이아웃으로, 바로 적응할 수 있습니다.

핵심 기능 및 단축키

Cursor의 핵심 기능은 크게 세 가지로 나눌 수 있습니다8:

Tab 완성 (코드 자동 완성)
- 기능: 코드 작성 중 AI가 사용자의 다음 동작을 예측하여 자동으로 코드나 편집을 제안합니다1.
- 사용법: 코드 작성 중 AI가 제안하는 코드를 Tab 키로 수락할 수 있습니다5.
Cmd+K / Ctrl+K (자연어로 코드 수정)
- 기능: 특정 코드 부분을 선택하고 자연어로 수정 요청을 할 수 있습니다6.
- 사용법: 코드 블록을 선택한 후 Cmd+K(Mac) 또는 Ctrl+K(Windows)를 누르고 원하는 변경 사항을 자연어로 입력합니다7.
Cmd+L / Ctrl+L (AI 채팅)
- 기능: AI와 대화하며 코드에 대한 질문을 하거나 코드 생성을 요청할 수 있습니다7.
- 사용법: Cmd+L(Mac) 또는 Ctrl+L(Windows)을 눌러 AI 채팅 창을 열고 질문이나 요청을 입력합니다11.

추가 기능:

Cmd+I / Ctrl+I (AI 코드 생성 명령): 코드 작성을 위한 명령을 입력할 수 있습니다6.
Apply 버튼: AI가 제안한 코드 변경을 쉽게 적용할 수 있습니다7.
컨텍스트 기능: @를 사용하여 파일이나 코드 심볼을 AI에게 참조시켜 더 정확한 답변을 얻을 수 있습니다11.

첫 번째 프로젝트: 간단한 웹사이트 만들기

이제 Cursor를 활용하여 간단한 웹사이트를 만들어 보겠습니다. 우리는 HTML, CSS, JavaScript를 사용하여 기본적인 웹페이지를 만들 것입니다.

1단계: 프로젝트 폴더 생성

Cursor를 실행합니다.
"File" > "Open Folder"를 클릭하고 새 폴더를 만들어 선택합니다.
폴더 이름은 "MyFirstWebsite"로 지정합니다.

2단계: 기본 파일 구조 생성

AI 채팅 기능을 사용하여 기본 파일 구조를 생성해 보겠습니다:

Ctrl+L(Windows) 또는 Cmd+L(Mac)을 눌러 AI 채팅 창을 엽니다.
다음과 같이 입력합니다: "간단한 웹사이트를 만들고 싶어요. index.html, style.css, script.js 파일을 기본 구조로 만들어주세요."
AI가 제안하는 파일 구조와 기본 코드를 검토한 후 "Apply" 버튼을 클릭하여 적용합니다.

3단계: HTML 파일 작성

생성된 index.html 파일을 클릭하여 엽니다.
파일 내용을 살펴보고, 필요한 경우 수정합니다.
특정 섹션을 수정하고 싶다면, 해당 부분을 선택하고 Ctrl+K를 누른 후 "이 부분을 웹사이트 헤더로 수정해주세요. 제목은 '나의 첫 웹사이트'로 해주세요."와 같이 입력합니다.

4단계: CSS로 스타일 적용하기

style.css 파일을 열어 기본 스타일을 확인합니다.
Ctrl+L을 눌러 채팅창을 열고 "웹사이트를 더 예쁘게 꾸밀 수 있는 CSS 스타일을 추가해주세요. 모던한 디자인으로 해주세요."라고 요청합니다.
AI가 제안하는 스타일을 검토하고 적용합니다.

5단계: JavaScript로 기능 추가하기

script.js 파일을 엽니다.
Ctrl+I를 눌러 코드 생성 명령창을 열고 "사용자가 버튼을 클릭하면 환영 메시지를 보여주는 기능을 추가해주세요."라고 입력합니다.
생성된 코드를 검토하고 필요한 경우 수정합니다.

6단계: 웹사이트 테스트하기

index.html 파일을 마우스 오른쪽 버튼으로 클릭합니다.
"Open with Live Server"를 선택합니다. (Live Server 확장 프로그램이 필요할 수 있습니다. 설치되어 있지 않다면 AI 채팅에 설치 방법을 물어보세요.)
브라우저에서 웹사이트가 어떻게 보이는지 확인하고, 필요한 경우 수정합니다.

두 번째 프로젝트: Chrome 확장 프로그램 만들기

이번에는 Cursor를 활용하여 간단한 Chrome 확장 프로그램을 만들어 보겠습니다. 예시로는 검색 결과4에서 언급된 Momentum과 같은 새 탭 페이지를 만들어 보겠습니다.

1단계: 프로젝트 설정

Cursor에서 새 폴더를 생성하고 "MyChromeExtension"이라고 이름을 지정합니다.
Ctrl+I(Windows) 또는 Shift+Cmd+I(Mac)를 눌러 AI 컴포저를 엽니다4.
다음과 같은 프롬프트를 입력합니다: "현재 시간을 보여주고, 새 탭을 열 때마다 배경 이미지와 격언이 바뀌는 Chrome 확장 프로그램을 만들고 싶습니다. 필요한 모든 코드를 생성해주세요."

2단계: 생성된 코드 검토 및 수정

AI가 생성한 코드를 검토합니다. 일반적으로 manifest.json, index.html, style.css, script.js 등의 파일이 포함될 것입니다.
각 파일의 역할을 이해하고, 필요한 경우 수정합니다.
특정 부분에 대해 질문하거나 수정이 필요하면 해당 코드를 선택하고 Ctrl+K를 사용하여 수정 요청을 합니다.

3단계: Chrome에 확장 프로그램 설치하기

Chrome 브라우저를 열고 주소창에 "chrome://extensions/"를 입력합니다.
우측 상단의 "개발자 모드"를 활성화합니다.
"압축해제된 확장 프로그램을 로드합니다" 버튼을 클릭하고 프로젝트 폴더를 선택합니다.
새 탭을 열어 확장 프로그램이 제대로 작동하는지 확인합니다.

세 번째 프로젝트: Next.js로 웹 앱 만들기

Next.js는 React 기반의 프레임워크로, 웹 애플리케이션 개발에 많이 사용됩니다. Cursor와 Next.js를 활용하여 카드 뉴스 웹 앱을 만들어 보겠습니다9.

1단계: Next.js 프로젝트 설정

Cursor에서 새 폴더를 생성합니다.
Ctrl+L을 눌러 AI 채팅창을 열고 "Next.js와 TypeScript를 사용하여 새 프로젝트를 설정해주세요."라고 요청합니다.
AI가 제안하는 터미널 명령어를 확인하고, Cursor의 Run 버튼을 활용하여 실행합니다7.

2단계: 기본 UI 구성하기

생성된 프로젝트의 pages/index.tsx 파일을 엽니다.
Ctrl+I를 눌러 AI 컴포저를 열고 "카드 뉴스를 보여주는 심플한 UI를 만들어주세요. 헤더, 메인 컨텐츠 영역, 푸터로 구성되어 있고, 카드는 그리드 형태로 표시되어야 합니다."라고 요청합니다.
생성된 코드를 검토하고 적용합니다.

3단계: 스타일 적용하기

styles/ 디렉토리의 CSS 파일을 열거나, 새로운 스타일 파일을 생성합니다.
Ctrl+L을 눌러 AI 채팅창을 열고 "카드 컴포넌트에 모던한 디자인을 적용하고 싶어요. 그림자 효과, 호버 애니메이션, 반응형 레이아웃을 지원하는 CSS 코드를 제공해주세요."라고 요청합니다.
AI가 제안하는 스타일 코드를 검토하고 적용합니다.

4단계: 데이터 연동하기

Ctrl+L을 눌러 AI 채팅창을 열고 "카드에 표시할 더미 데이터를 JSON 형식으로 만들어주세요. 최소 5개의 뉴스 항목이 필요하며, 각 항목은 제목, 내용 요약, 이미지 URL, 날짜를 포함해야 합니다."라고 요청합니다.
생성된 데이터를 data.js 파일로 저장합니다.
이 데이터를 index.tsx 파일에 불러와서 카드로 표시하도록 코드를 수정합니다.

5단계: 웹 앱 실행 및 테스트

Cursor의 터미널에서 npm run dev 명령을 실행합니다.
브라우저에서 http://localhost:3000에 접속하여 웹 앱을 확인합니다.
필요한 경우 AI의 도움을 받아 코드를 수정합니다.

프로젝트 배포하기

개발한 프로젝트를 인터넷에 공개하기 위한 배포 방법을 알아보겠습니다.

정적 웹사이트 배포 (GitHub Pages)

Ctrl+L을 눌러 AI 채팅창을 열고 "GitHub Pages에 웹사이트를 배포하는 방법을 알려주세요."라고 요청합니다.
AI의 안내에 따라 GitHub 계정 생성, 저장소 생성, 코드 업로드, Pages 설정 등을 진행합니다.

Next.js 앱 배포 (Vercel)

Ctrl+L을 눌러 AI 채팅창을 열고 "Vercel에 Next.js 앱을 배포하는 방법을 알려주세요."라고 요청합니다9.
AI의 안내에 따라 Vercel 계정 생성, 프로젝트 연결, 배포 설정 등을 진행합니다.
배포가 완료되면 제공된 URL을 통해 전 세계에서 웹 앱에 접근할 수 있습니다.

문제 해결 및 디버깅

Cursor를 사용하면서 발생할 수 있는 문제와 그 해결 방법을 알아보겠습니다.

코드 에러 해결하기

에러 메시지가 표시되면, 해당 메시지를 복사합니다.
Ctrl+L을 눌러 AI 채팅창을 열고 에러 메시지를 붙여넣은 후 "이 에러의 원인과 해결 방법을 알려주세요."라고 요청합니다7.
AI가 제안하는 해결책을 따라 코드를 수정합니다.

AI 모델 변경하기

Cursor는 여러 AI 모델을 지원합니다. 더 나은 결과를 얻기 위해 다른 모델로 전환할 수 있습니다:

Ctrl+L을 눌러 AI 채팅창을 열고 상단에서 모델 선택 드롭다운을 클릭합니다7.
GPT-4o, Claude-3.5-Sonnet, Gemini-1.5-flash 등 원하는 모델을 선택합니다1.

특정 파일이나 코드 참조하기

복잡한 프로젝트에서 AI에게 특정 파일이나 코드를 참조하도록 할 수 있습니다:

AI 채팅창에서 "@" 기호를 입력합니다.
나타나는 목록에서 참조하고 싶은 파일이나 코드 심볼을 선택합니다11.
선택한 항목이 포함된 질문이나 요청을 입력합니다.

발전을 위한 다음 단계

Cursor와 프로그래밍에 더 익숙해졌다면, 다음 단계로 발전하기 위한 방법을 알아보겠습니다.

다음 단계 프로젝트 아이디어

개인 포트폴리오 웹사이트 만들기
To-Do 리스트 앱 개발하기12
날씨 정보를 보여주는 웹 앱 만들기
간단한 블로그 시스템 개발하기
API를 활용한 데이터 시각화 프로젝트

결론

이 매뉴얼에서는 프로그래밍 초보자도 Cursor AI를 활용하여 간단한 웹사이트와 앱을 개발하는 방법을 배웠습니다. AI의 도움을 받아 코딩하면 복잡한 개념이나 문법을 완벽히 이해하지 못하더라도 작동하는 프로그램을 만들 수 있습니다.

Cursor는 단순한 코드 에디터를 넘어 개발자의 든든한 파트너 역할을 합니다13. 복잡한 알고리즘을 구현하거나 새로운 기능을 추가할 때, AI의 도움으로 빠르고 정확하게 작업할 수 있습니다. 이는 특히 초보자에게는 코딩 멘토 역할을 해서, 모범 사례를 제안하고 코드에 대한 설명을 제공함으로써 학습을 도와주는 장점도 있습니다2.

계속해서 프로젝트를 만들고 코드를 작성하면서 실력을 향상시키고, 점차 AI의 도움 없이도 코딩할 수 있는 능력을 키워나가길 바랍니다. Cursor AI는 그 여정의 든든한 동반자가 될 것입니다.

Citations:

Perplexity로부터의 답변: pplx.ai/share

2025년 4월 17일 목요일