Cursor AI로 채팅만으로 홈페이지 만들기: 설치부터 제작까지 누구나 가능!

 

요즘 뜨는 개발툴 Cursor AI는 챗GPT 기반으로, 개발자가 아니어도 마치 채팅하듯 명령어를 입력하면 웹사이트가 뚝딱 만들어집니다. 이 글에서는 홈페이지 제작 경험이 전혀 없는 분들도 Cursor AI로 직접 실습해볼 수 있도록 설치부터 예제 제작까지 모든 과정을 담았습니다.

---

< Cursor AI란? >

Cursor는 ChatGPT와 통합된 AI 기반 코드 에디터입니다.
기존의 VSCode 기반이며, 코딩을 몰라도 ‘대화형 명령’만으로 HTML, CSS, JS 등 웹 언어를 자동 생성해줍니다.

 

예를 들면 아래와 같이~

💬 "나만의 이력서 홈페이지를 만들어줘. 이름, 소개, 기술스택, 연락처 섹션 포함해서 HTML로 구성해줘."
➡️ 그러면 Cursor는 전체 구조를 자동으로 만들어줍니다.

---

< 설치 방법 >

1. 공식 Cursor AI 사이트 접속
2. 무료 다운로드 → PC에 설치
3. GPT-4o 모델과 연동되므로, ChatGPT Plus 사용자라면 더 정확한 결과를 받을 수 있음

< 실전 예제: Cursor로 1페이지 포트폴리오 만들기 >

아래는 실제로 Cursor에 입력해볼 수 있는 프롬프트입니다:

명령창에 아래와 같이 입력하면 : 

 

"너는 웹 퍼블리셔야. HTML로 포트폴리오 웹페이지를 만들어줘. 구성은 다음과 같아:  - 상단: 내 이름과 한 줄 소개 - 중단: 나의 프로젝트 목록 (3개) - 하단: 이메일과 연락처 깔끔한 구조로 만들어줘."

Cursor는 위 프롬프트를 바탕으로 자동으로 코드 블록을 생성하고, 미리보기도 지원합니다.

변경 사항이 있을 경우 "배경색을 흰색으로 바꿔줘", "폰트를 산세리프 계열로 바꿔줘" 등 자연어로 수정 요청이 가능합니다.

 

아래와 같이 1분만에 완성되었습니다!

 

---

[ Cursor AI로 만든 홈페이지 화면 ]

< 실전 예제: Cursor로 4페이지 포트폴리오 만들기 >

아래는 포트폴이오는 제 이력서를 직접 채팅창에 업로드해서 이력서에 있는 내용대로 java로 코딩해 달라고 요청하여 만든 4페이지 포트폴리오 입니다. 수없는 에러 수정과 여러번 폴더 전체를 삭제하고 다시 생성하는 실수를 반복하여 중간에 포기하려고 했지만 결국 아래와 같은 훌륭한 포트폴리오가 코딩없이 만들어 졌습니다.

복잡한 작업을 시키려면 커서 AI와 친숙해질 시간이 필요하고 맨처음 프롬프트를 완벽하게 작성하여 일을 시켜야 한다는 것을 깨달았습니다.

 

[ Cursor AI로 만든 홈페이지 주요기술 화면 ]

[ Cursor AI로 만든 홈페이지 기술 스택 & 교육 화면 ]

< 커서 AI 로 수익화 가능성 >

• 광고/랜딩페이지도 손쉽게 제작 가능
• 기업 블로그, 포트폴리오, 마케팅 페이지로 활용 가능
• 노코드 홈페이지 판매 또는 외주 수익 창출 가능
• 초보자도 빠르게 ChatGPT + Cursor 조합으로 실전 투입 가능

---

 

✅ 마무리 꿀팁

• Cursor와 ChatGPT 조합은 정말 환상적입니다. 하지만 인터페이스와 친숙해질 시간은 많이 필요합니다.
• 복잡한 구조의 홈페이지는 다소 시간도 걸리고 에러가 났을 때 처리도 100% 만족하지는 못했습니다.
• 한번에 처리될 수 있는 완벽한 프롬프트를 작성하는 것이 돈과 시간을 절약하는 팁입니다.
• 앞으로 홈페이지 외주, 콘텐츠 자동화, AI 기반 블로그 운영까지 가능성이 무궁무진합니다

—

이 글은 숨쉬듯 돈버는 블로거 Breathmoney가 작성했습니다.

 

 

커서 AI로 코딩 모르는 일반인도 돈 버는 가장 쉬운 3가지 방법!

ChatGPT만 쓰시나요? 이제는 Gemini도 비교해보세요! ChatGPT vs. Gemini 핵심 비교 총정리 (2025년 버전)

ChatGPT 프롬프트 엔지니어링, 핵심 원리부터 실전 활용까지