Cursor AI 사용법｜코딩 몰라도 웹사이트 만드는 방법 (2026 최신판)

💡 한 줄 요약
Cursor AI의 Agent에게 원하는 화면과 기능을 구체적으로 설명하면 코딩 경험이 없어도 HTML·CSS·JavaScript로 구성된 간단한 웹사이트를 만들 수 있습니다.

안녕하세요.
IT세상입니다. 😊

웹사이트를 직접 만들어 보고 싶지만 코딩 때문에 시작하지 못하는 분들이 많습니다.

HTML과 CSS, JavaScript를 공부해야 한다는 말을 들으면 어디서부터 시작해야 할지 막막해집니다. 어렵게 코드를 따라 입력해도 화면이 나오지 않거나, 작은 오타 하나 때문에 오류가 발생하기도 합니다.

하지만 Cursor AI를 사용하면 조금 다른 방식으로 시작할 수 있습니다.

“파란색 계열의 개인 소개 웹사이트를 만들어줘”처럼 원하는 결과를 말로 설명하면 AI가 필요한 파일을 만들고 코드를 작성합니다. 이후 색상이나 문구를 바꾸고 싶을 때도 자연어로 요청할 수 있습니다.

이번 글에서는 복잡한 서버나 데이터베이스를 사용하지 않습니다. 빈 폴더 하나에서 시작해 브라우저로 바로 열어볼 수 있는 개인 소개 웹사이트를 만들어 보겠습니다.

📌 이 글에서 알 수 있는 내용

• Cursor AI를 설치하고 처음 설정하는 방법
• 빈 폴더를 웹사이트 프로젝트로 만드는 방법
• Cursor Agent에 작업을 요청하는 방법
• 좋은 프롬프트와 부족한 프롬프트의 차이
• 완성된 웹사이트를 브라우저에서 실행하는 방법
• 디자인과 기능을 수정하는 방법
• 자주 발생하는 오류와 해결 방법

이번에 만들 웹사이트

이번 실습에서는 개인이나 직장인, 취업 준비생이 사용할 수 있는 간단한 소개 페이지를 만듭니다.

완성할 웹사이트 구성

① 이름과 한 줄 소개가 들어간 메인 화면
② 보유 기술이나 관심 분야를 보여주는 카드
③ 경력과 프로젝트를 정리한 영역
④ 이메일 문의 버튼
⑤ 스마트폰에서도 보기 편한 반응형 디자인
⑥ 버튼을 눌렀을 때 자연스럽게 이동하는 기능

웹사이트는 아래 세 개의 파일로 구성합니다.

파일	역할
index.html	제목, 문장, 버튼과 같은 웹사이트의 기본 구조를 담당합니다.
style.css	색상, 글자 크기, 여백과 화면 배치를 담당합니다.
script.js	버튼 클릭이나 메뉴 이동 같은 동작을 담당합니다.

처음 보는 용어가 있어도 걱정할 필요는 없습니다. Cursor가 파일을 직접 만들도록 요청하고, 완성된 뒤 각각 어떤 역할인지 설명받으면 됩니다.

시작하기 전에 필요한 준비물

① 컴퓨터

Windows, macOS 또는 Linux가 설치된 컴퓨터가 필요합니다.

② Cursor 계정

AI Agent 기능을 사용하려면 Cursor에 로그인해야 합니다.

③ 빈 작업 폴더

웹사이트 파일을 저장할 새로운 폴더를 하나 준비합니다.

💡 이번 실습의 장점
별도의 서버 프로그램이나 복잡한 개발 환경을 설치하지 않습니다. 완성된 index.html 파일을 브라우저로 열어 바로 결과를 확인할 수 있습니다.

1단계. Cursor AI 설치하기

먼저 Cursor 공식 사이트에서 사용 중인 운영체제에 맞는 설치 파일을 내려받습니다.

설치 순서

① Cursor 공식 다운로드 페이지를 엽니다.
② Windows, macOS, Linux 중 사용 중인 운영체제를 선택합니다.
③ 내려받은 설치 파일을 실행합니다.
④ 설치가 끝나면 Cursor를 실행합니다.
⑤ 계정을 만들거나 기존 계정으로 로그인합니다.

Cursor를 처음 실행하면 단축키와 화면 테마, 터미널 환경 등을 선택하는 초기 설정 화면이 나타날 수 있습니다.

Visual Studio Code를 사용하고 있었다면 기존 설정과 확장 프로그램을 가져올 수 있습니다. 처음 코딩을 시작하는 분은 기본 설정을 그대로 사용해도 괜찮습니다.

2단계. Privacy Mode 확인하기

웹사이트를 만들기 전에 데이터 관련 설정을 먼저 확인하는 것이 좋습니다.

Cursor 설정에서 Privacy Mode를 활성화하면 입력한 코드와 프로젝트 데이터가 Cursor나 연결된 모델 제공자의 학습에 사용되지 않도록 설정할 수 있습니다.

Privacy Mode 확인 순서

① Cursor의 Settings를 엽니다.
② Privacy 또는 Data 관련 메뉴를 찾습니다.
③ Privacy Mode의 현재 상태를 확인합니다.
④ 회사 코드나 중요한 자료를 사용할 예정이라면 내부 보안 정책도 함께 확인합니다.

이번 실습에서는 개인정보나 회사 자료를 사용하지 않습니다. 이름과 경력도 실제 정보 대신 임시 문구로 먼저 만들고, 완성 후 직접 바꾸는 것이 안전합니다.

⚠️ 입력하면 안 되는 정보
주민등록번호, 계좌번호, 실제 비밀번호, API Key, 회사 기밀자료를 프롬프트나 코드에 그대로 입력하지 마세요.

3단계. 웹사이트 작업 폴더 만들기

바탕화면이나 문서 폴더에 새로운 폴더를 만듭니다.

폴더 이름 예시

my-first-website

폴더 이름은 가능하면 영문 소문자와 하이픈으로 작성하는 것이 좋습니다. 한글 폴더명도 사용할 수 있지만 일부 개발 도구나 명령어에서 경로 문제가 발생할 수 있습니다.

Cursor를 실행한 뒤 Open Folder를 선택하고 방금 만든 my-first-website 폴더를 엽니다.

폴더를 열면 왼쪽 파일 목록이 비어 있는 것이 정상입니다. 이제 Agent에게 필요한 파일을 만들어 달라고 요청하겠습니다.

4단계. Cursor Agent 열기

Cursor에서 AI와 대화하는 Agent 창을 엽니다.

Agent 실행 단축키

Windows·Linux: Ctrl + I
macOS: Command + I

버전에 따라 화면의 Agent 버튼이나 사이드 패널 아이콘을 눌러 열 수도 있습니다.

모델 선택이 어렵다면 처음에는 Auto를 사용해도 괜찮습니다. 간단한 정적 웹사이트는 반드시 가장 비싼 모델을 사용할 필요가 없습니다.

5단계. Plan Mode로 작업 계획 확인하기

Agent에게 바로 코드를 작성시킬 수도 있지만, 초보자라면 먼저 작업 계획을 확인하는 방법이 안전합니다.

Agent 입력창에서 Shift + Tab을 누르면 Plan Mode로 전환할 수 있습니다.

Plan Mode에서는 AI가 바로 파일을 수정하지 않고 프로젝트를 확인한 뒤 어떤 파일을 만들고 어떤 순서로 작업할지 계획을 먼저 보여줍니다.

💡 Plan Mode를 사용하면 좋은 경우
여러 파일을 새로 만들거나 기존 프로젝트의 구조를 크게 변경할 때 유용합니다. 계획이 마음에 들지 않으면 코드를 작성하기 전에 방향을 수정할 수 있습니다.

이번처럼 파일이 전혀 없는 간단한 프로젝트에서는 Agent Mode로 바로 시작해도 됩니다. 다만 연습을 위해 계획을 먼저 요청해 보는 것을 추천합니다.

6단계. 웹사이트 제작 프롬프트 입력하기

이제 Agent 입력창에 아래 프롬프트를 복사해 넣습니다.

Cursor 웹사이트 제작 프롬프트 코딩 초보자가 연습할 수 있는 개인 소개 웹사이트를 만들어줘.

필요한 파일은 아래 세 개야.
- index.html
- style.css
- script.js

디자인 조건은 다음과 같아.
- 파란색과 흰색을 중심으로 깔끔하게 만들어줘.
- 상단에는 이름과 한 줄 소개를 넣어줘.
- 소개, 보유 기술, 경력, 프로젝트, 연락처 영역을 만들어줘.
- 보유 기술과 프로젝트는 카드 형태로 보여줘.
- 스마트폰에서도 화면이 깨지지 않는 반응형 디자인으로 만들어줘.
- 상단 메뉴를 누르면 해당 영역으로 부드럽게 이동하게 만들어줘.
- 외부 라이브러리는 사용하지 마.

내용은 실제 개인정보 대신 수정하기 쉬운 예시 문구를 사용해줘.
모든 파일을 만든 뒤 각 파일의 역할을 초보자도 이해할 수 있게 설명해줘.
마지막에는 웹사이트를 실행하는 방법도 알려줘.

프롬프트를 입력한 뒤 Agent가 제시한 계획을 확인합니다.

index.html, style.css, script.js를 만들겠다는 내용과 각 영역의 구성이 요청과 맞는지 확인하세요. 불필요한 기능이 있다면 작업을 시작하기 전에 빼달라고 요청하면 됩니다.

좋은 프롬프트와 부족한 프롬프트의 차이

부족한 요청	구체적인 요청
예쁜 웹사이트 만들어줘.	파란색 계열의 개인 소개 웹사이트를 만들고 소개·경력·프로젝트 영역을 넣어줘.
모바일도 되게 해줘.	화면 너비가 좁아지면 카드가 한 줄로 배치되는 반응형 디자인으로 만들어줘.
버튼 추가해줘.	메인 화면에 ‘프로젝트 보기’ 버튼을 추가하고 누르면 프로젝트 영역으로 이동하게 해줘.

Cursor는 사용자가 말하지 않은 부분도 알아서 판단합니다. 하지만 판단할 내용이 많을수록 원하는 결과와 달라질 가능성도 커집니다.

화면 구성, 색상, 필요한 기능, 사용하지 않을 기능을 함께 적으면 수정 횟수를 줄일 수 있습니다.

7단계. Agent가 만든 파일 확인하기

Agent가 작업을 시작하면 왼쪽 파일 목록에 index.html, style.css, script.js가 생성됩니다.

파일을 하나씩 눌러보면 작성된 코드를 확인할 수 있습니다. 코드를 모두 이해하지 못해도 괜찮지만, 요청한 파일 외에 이상한 파일이 추가되지는 않았는지 살펴보세요.

확인할 항목

① index.html, style.css, script.js가 모두 만들어졌는지
② HTML에서 CSS와 JavaScript 파일이 연결되어 있는지
③ 요청하지 않은 외부 서비스가 추가되지 않았는지
④ 이름과 이메일이 실제 개인정보가 아닌 예시 문구인지
⑤ Agent가 오류 없이 작업을 완료했는지

Agent가 터미널 명령 실행이나 파일 변경 승인을 요청할 수 있습니다. 실행하려는 작업이 웹사이트 제작과 관련 있는지 확인한 뒤 허용합니다.

⚠️ 무조건 승인하지 마세요
파일 삭제, 프로그램 설치, 프로젝트 전체 변경처럼 영향이 큰 작업은 내용을 확인해야 합니다. 이해하기 어려운 명령어가 나오면 실행하기 전에 Agent에게 어떤 작업인지 설명해 달라고 요청하세요.

8단계. 웹사이트 실행하기

이번 웹사이트는 별도의 서버가 필요 없는 정적 웹사이트입니다.

가장 쉬운 실행 방법

① 컴퓨터의 my-first-website 폴더를 엽니다.
② index.html 파일을 찾습니다.
③ 파일을 더블 클릭합니다.
④ 기본 웹 브라우저에서 화면이 열리는지 확인합니다.

화면이 정상적으로 열리면 상단 메뉴와 버튼을 눌러봅니다. 각 영역으로 부드럽게 이동하는지, 카드 배치가 깨지지 않는지 확인하세요.

브라우저 창의 너비를 줄여 스마트폰처럼 좁은 화면에서도 확인해 봅니다. 글자가 잘리거나 카드가 화면 밖으로 넘어간다면 Cursor에 반응형 디자인을 다시 점검해 달라고 요청하면 됩니다.

9단계. 디자인 수정하기

첫 결과가 완벽하지 않아도 괜찮습니다. Cursor의 장점은 대화를 이어가며 조금씩 수정할 수 있다는 점입니다.

색상 바꾸기

전체 디자인은 유지하면서 메인 색상을 진한 파란색과 하늘색 조합으로 바꿔줘.
글자와 배경의 명암 차이가 충분해서 읽기 편해야 해.

문구 바꾸기

메인 소개 문구를 아래 내용으로 변경해줘.

이름: 홍길동
소개: 새로운 기술을 배우고 업무에 적용하는 직장인입니다.

다른 디자인과 기능은 변경하지 마.

프로젝트 카드 추가하기

프로젝트 영역에 ‘AI 업무 자동화’ 카드를 하나 추가해줘.
설명에는 이메일과 문서 정리 업무를 자동화한 프로젝트라고 적어줘.
기존 카드와 같은 디자인을 사용해줘.

수정할 범위를 명확하게 지정하는 것이 중요합니다. “더 예쁘게 해줘”라고만 입력하면 AI가 마음대로 여러 부분을 바꿀 수 있습니다.

“다른 기능은 변경하지 마”, “기존 카드와 같은 디자인을 사용해”처럼 유지해야 할 조건도 함께 알려주세요.

10단계. Cursor에게 코드 설명받기

완성된 결과만 사용하는 것보다 코드의 역할을 조금씩 이해하면 다음 프로젝트를 만들 때 훨씬 편해집니다.

코드 학습 프롬프트 이 프로젝트의 index.html, style.css, script.js가 각각 어떤 역할을 하는지 설명해줘.

코딩을 처음 배우는 사람도 이해할 수 있게 설명하고,
각 파일에서 가장 중요한 코드 세 부분을 골라 알려줘.
현재 파일은 수정하지 마.

설명만 요청할 때는 “파일은 수정하지 마”라는 조건을 넣는 것이 좋습니다. 그렇지 않으면 Agent가 설명과 함께 불필요한 코드 정리까지 진행할 수 있습니다.

💡 Cursor를 공부 도구로 사용하는 방법
코드 생성을 요청한 뒤 “왜 이렇게 작성했어?”, “다른 방법은 없어?”, “이 부분을 더 쉽게 설명해줘”라고 이어서 질문해 보세요. 결과물만 복사하는 것보다 훨씬 빠르게 기본 개념을 익힐 수 있습니다.

웹사이트가 작동하지 않을 때 확인할 부분

문제	해결 방법
화면이 하얗게 나옴	index.html이 비어 있지 않은지 확인하고 브라우저를 새로고침합니다.
디자인이 적용되지 않음	index.html에서 style.css의 파일 이름과 경로가 정확한지 확인합니다.
버튼이 작동하지 않음	script.js 연결 상태와 브라우저 개발자 도구의 오류를 확인하도록 Agent에게 요청합니다.
한글이 깨짐	HTML에 UTF-8 문자 인코딩 설정이 포함되어 있는지 확인합니다.
모바일에서 화면이 잘림	viewport 설정과 CSS 미디어 쿼리를 확인하도록 요청합니다.
Agent가 같은 실수를 반복함	새 대화를 열고 현재 문제와 원하는 결과를 짧고 명확하게 다시 전달합니다.

문제가 발생하면 “고쳐줘”라고만 요청하지 말고 현재 나타나는 증상을 구체적으로 알려주세요.

index.html을 브라우저에서 열면 내용은 나오지만 색상과 카드 디자인이 적용되지 않아.
index.html과 style.css의 연결 상태를 확인하고 원인을 설명한 뒤 수정해줘.
다른 문구와 기능은 변경하지 마.

오류 상황, 확인할 파일, 유지할 부분을 함께 적으면 Agent가 문제 범위를 좁히기 쉽습니다.

작업 전후로 백업하는 습관

간단한 연습용 웹사이트는 다시 만들 수 있지만 프로젝트가 커지면 Agent의 수정 내용을 되돌리는 일이 중요해집니다.

초보자가 사용할 수 있는 백업 방법

① 수정 전 프로젝트 폴더를 복사합니다.
② 복사한 폴더 이름에 backup과 날짜를 적습니다.
③ 큰 기능은 한 번에 여러 개 추가하지 않습니다.
④ 기능 하나를 추가할 때마다 브라우저에서 테스트합니다.
⑤ 익숙해지면 Git을 이용해 변경 이력을 관리합니다.

Agent가 빠르게 여러 파일을 바꾸는 만큼 사용자는 변경 내용을 확인하는 습관을 가져야 합니다.

이전 Cursor AI 소개 글에서도 설명했듯이 AI가 작업을 완료했다고 말하는 것과 실제 프로그램이 정상적으로 작동하는 것은 다를 수 있습니다.

Cursor AI 실제 활용 사례

취업 준비생

자기소개와 경력, 프로젝트를 정리한 포트폴리오 페이지를 만들 수 있습니다. 완성된 페이지에 이력서 파일이나 이메일 문의 버튼을 추가하는 것도 가능합니다.

직장인

자주 사용하는 계산식이나 데이터 입력 기능을 웹페이지로 만들어 개인 업무 도구로 활용할 수 있습니다. 회사 자료를 처리할 때는 보안 규정을 먼저 확인해야 합니다.

학생

수업 과제용 소개 페이지와 학습 기록 웹사이트를 만들 수 있습니다. 생성된 코드를 설명받으며 HTML과 CSS의 구조를 공부하는 데도 도움이 됩니다.

블로그 운영자

키워드 정리 도구, 제목 조합기, 글자 수 계산기처럼 블로그 운영에 필요한 간단한 웹 도구를 직접 만들 수 있습니다.

개발자

페이지의 기본 구조를 빠르게 만들고, 반복적인 디자인 수정과 오류 점검 시간을 줄이는 데 활용할 수 있습니다.

Cursor AI로 웹사이트를 만들 때의 장점

✅ 장점

• 코딩 경험이 적어도 실제 결과물을 빠르게 만들 수 있습니다.
• 파일을 직접 생성하고 수정하므로 복사와 붙여넣기가 줄어듭니다.
• 자연어로 디자인과 기능을 계속 수정할 수 있습니다.
• 오류가 발생한 파일을 Agent가 함께 확인할 수 있습니다.
• 완성된 코드를 설명받으며 프로그래밍을 공부할 수 있습니다.
• 간단한 웹사이트는 별도의 서버 없이 바로 실행할 수 있습니다.

주의해야 할 점

⚠️ 단점 및 주의사항

• AI가 만든 코드가 항상 정확하거나 안전한 것은 아닙니다.
• 요청이 모호하면 원하지 않는 디자인이나 기능이 추가될 수 있습니다.
• 여러 기능을 한 번에 요청하면 오류 원인을 찾기 어려워집니다.
• 회원가입과 결제 기능에는 서버와 보안 지식이 필요합니다.
• 실제 개인정보와 API Key를 코드에 직접 입력하면 안 됩니다.
• Agent 사용량에 따라 요금제 한도를 소진할 수 있습니다.

자주 묻는 질문

Q1. Cursor AI로 웹사이트를 만들려면 코딩을 알아야 하나요?

간단한 소개 페이지는 코딩을 잘 몰라도 만들 수 있습니다. 다만 오류를 해결하고 원하는 기능을 추가하려면 HTML과 CSS의 기본 개념을 함께 공부하는 것이 좋습니다.

Q2. Cursor 무료 버전으로도 따라 할 수 있나요?

무료 요금제에서도 제한된 범위 안에서 Agent를 사용할 수 있습니다. 사용량이 부족하다면 한 번에 여러 수정을 요청하기보다 필요한 기능부터 순서대로 진행하세요.

Q3. Node.js를 설치해야 하나요?

이번 글처럼 HTML·CSS·JavaScript로 만든 정적 웹사이트는 Node.js 없이 실행할 수 있습니다. React나 Next.js 같은 개발 도구를 사용하면 Node.js가 필요할 수 있습니다.

Q4. 만든 웹사이트를 인터넷에 공개할 수 있나요?

가능합니다. GitHub Pages나 정적 웹사이트 호스팅 서비스를 이용할 수 있습니다. 공개하기 전에는 개인정보와 저작권이 있는 이미지가 포함되지 않았는지 확인하세요.

Q5. Cursor가 만든 코드를 바로 사용해도 되나요?

브라우저에서 직접 실행하고 메뉴와 버튼이 정상적으로 작동하는지 확인해야 합니다. 회원정보, 결제, 기업 데이터가 들어가는 서비스는 전문가의 보안 검토가 필요합니다.

마무리

Cursor AI로 웹사이트를 만드는 과정은 생각보다 어렵지 않습니다.

빈 폴더를 열고 Agent에게 원하는 화면과 기능을 설명하면 필요한 HTML, CSS, JavaScript 파일을 만들 수 있습니다. 완성된 index.html 파일을 브라우저로 열면 결과도 바로 확인할 수 있습니다.

처음부터 복잡한 쇼핑몰이나 회원 서비스를 만들려고 하면 금방 어려워집니다. 개인 소개 페이지나 계산기처럼 작고 단순한 프로젝트부터 시작하는 것이 좋습니다.

가장 중요한 것은 AI가 만든 결과를 그대로 믿지 않는 것입니다. 파일의 변경 내용을 확인하고, 브라우저에서 직접 실행하고, 기능을 하나씩 테스트해야 합니다.

이 과정을 반복하면 Cursor를 단순한 코드 생성기가 아니라 코딩을 배우고 실제 아이디어를 구현하는 도구로 활용할 수 있습니다.

📌 핵심 한 줄 정리 빈 폴더를 Cursor에서 열고 원하는 화면과 기능을 구체적으로 설명하면 코딩 초보자도 간단한 웹사이트를 만들 수 있습니다.