프로그래밍을 전혀 모르는 사람도 AI의 도움을 받아 실제 동작하는 웹 애플리케이션을 만들 수 있는 시대가 왔습니다. 그 중심에 Cursor AI가 있습니다. Cursor는 VS Code 기반의 AI 코드 에디터로, 자연어로 원하는 기능을 설명하면 AI가 코드를 작성하고 수정해주는 도구입니다. 이 글에서는 Cursor AI를 활용해 실제로 웹 애플리케이션을 만드는 과정을 단계별로 안내합니다. 코딩 경험이 없어도 따라할 수 있도록 최대한 쉽게 설명하겠습니다.

Cursor AI란 무엇인가

Cursor는 Anysphere라는 회사에서 만든 AI 기반 코드 에디터입니다. 겉모습은 우리가 익히 알고 있는 VS Code와 거의 동일하지만, 핵심적인 차이가 있습니다. 바로 에디터 안에 AI 어시스턴트가 내장되어 있다는 점입니다.

일반적인 개발 환경에서는 ChatGPT에 질문하고, 답변을 복사해서 에디터에 붙여넣는 과정을 반복해야 합니다. 하지만 Cursor에서는 에디터 안에서 바로 AI와 대화하면서 코드를 생성하고, 수정하고, 디버깅할 수 있습니다. AI가 현재 프로젝트의 파일 구조와 코드 맥락을 이해하고 있기 때문에, 훨씬 정확하고 맥락에 맞는 코드를 제안합니다.

Cursor의 주요 기능은 다음과 같습니다. 첫째, Composer 기능으로 자연어 명령을 통해 여러 파일을 동시에 생성하고 수정할 수 있습니다. 둘째, Tab 자동완성 기능이 있어 코드를 작성하는 중에 AI가 다음에 올 코드를 예측해서 제안합니다. 셋째, Chat 기능으로 현재 코드에 대해 질문하거나 설명을 요청할 수 있습니다. 무료 버전에서도 기본적인 기능을 충분히 사용할 수 있으므로 부담 없이 시작할 수 있습니다.

Cursor 설치부터 프로젝트 시작까지

Cursor를 시작하는 과정은 매우 간단합니다. 아래 단계를 그대로 따라해 보세요.

1단계: cursor.com에 접속하여 운영체제에 맞는 설치 파일을 다운로드합니다. Windows, Mac, Linux 모두 지원합니다.

2단계: 설치가 완료되면 Cursor를 실행합니다. 처음 실행할 때 VS Code 설정을 가져올 것인지 물어봅니다. 기존에 VS Code를 사용하고 있었다면 설정을 가져오는 것을 추천합니다.

3단계: 새 폴더를 만들어 프로젝트를 시작합니다. 예를 들어 바탕화면에 my-first-app이라는 폴더를 만들고, Cursor에서 File – Open Folder로 해당 폴더를 엽니다.

4단계: Ctrl+I (Mac에서는 Cmd+I)를 눌러 Composer 창을 엽니다. 여기에 자연어로 원하는 것을 입력하면 됩니다.

예를 들어 다음과 같이 입력해 봅시다.

할 일 목록 웹앱을 만들어줘.
HTML, CSS, JavaScript로 구성하고,
할 일 추가, 완료 체크, 삭제 기능이 있어야 해.
디자인은 깔끔하고 모던하게 해줘.

이렇게 입력하면 Cursor가 index.html, style.css, script.js 파일을 자동으로 생성하고, 각 파일에 필요한 코드를 작성해 줍니다. Accept 버튼을 눌러 변경사항을 적용하면, 바로 동작하는 웹앱이 만들어집니다.

효과적인 프롬프트 작성법

바이브 코딩에서 가장 중요한 것은 AI에게 원하는 것을 정확히 전달하는 프롬프트 작성 능력입니다. 같은 도구를 사용하더라도 프롬프트를 어떻게 작성하느냐에 따라 결과물의 품질이 크게 달라집니다.

나쁜 프롬프트의 예시를 먼저 살펴보겠습니다.

쇼핑몰 만들어줘

이런 프롬프트는 너무 모호합니다. AI가 어떤 종류의 쇼핑몰인지, 어떤 기능이 필요한지, 디자인은 어떤 스타일인지 알 수 없습니다. 좋은 프롬프트는 다음과 같이 구체적으로 작성합니다.

수제 비누를 판매하는 온라인 쇼핑몰 랜딩 페이지를 만들어줘.

구성 요소:
- 상단: 네비게이션 바 (홈, 제품, 소개, 문의)
- 히어로 섹션: 큰 배경 이미지 위에 "자연에서 온 수제 비누" 타이틀
- 인기 제품 섹션: 카드 형태로 4개 제품 (이미지, 이름, 가격, 장바구니 버튼)
- 후기 섹션: 고객 후기 3개를 슬라이드로
- 푸터: 연락처, SNS 링크

기술 스택: HTML, Tailwind CSS, JavaScript
디자인: 파스텔톤, 따뜻한 느낌, 여백 충분히
반응형으로 모바일에서도 잘 보이게 해줘.

프롬프트 작성의 핵심 원칙을 정리하면 다음과 같습니다. 첫째, 목적을 명확히 합니다. 무엇을 위한 것인지 먼저 밝힙니다. 둘째, 구성 요소를 나열합니다. 어떤 섹션과 기능이 필요한지 리스트로 작성합니다. 셋째, 기술 스택을 지정합니다. 어떤 언어나 프레임워크를 사용할지 명시합니다. 넷째, 디자인 방향을 제시합니다. 색상, 분위기, 레이아웃 등을 설명합니다. 다섯째, 점진적으로 발전시킵니다. 처음부터 완벽한 결과를 기대하지 말고, 기본 구조를 먼저 만든 후 기능을 하나씩 추가해 나갑니다.

실전 예제: React로 날씨 앱 만들기

이번에는 조금 더 실용적인 예제로, React를 사용한 날씨 앱을 만들어 보겠습니다. React를 전혀 몰라도 괜찮습니다. Cursor가 모든 코드를 작성해 줍니다.

먼저 Composer에 다음과 같이 입력합니다.

React로 날씨 앱을 만들어줘.

기능:
1. 도시 이름을 검색하면 현재 날씨를 보여줌
2. 온도, 습도, 바람 속도, 날씨 상태 표시
3. 날씨 상태에 따라 배경색이 바뀜 (맑음: 하늘색, 흐림: 회색, 비: 진한 파랑)
4. 최근 검색한 도시 5개를 로컬 스토리지에 저장

UI:
- 검색창은 중앙에 크게 배치
- 날씨 정보는 카드 형태로 표시
- Tailwind CSS 사용
- 다크 모드 지원

API는 OpenWeatherMap 무료 API를 사용해줘.
프로젝트 설정부터 시작해줘.

Cursor는 이 프롬프트를 기반으로 프로젝트 구조를 잡고, 필요한 파일들을 생성합니다. package.json, 컴포넌트 파일, API 연동 코드 등을 모두 자동으로 만들어 줍니다.

만약 결과물에서 수정하고 싶은 부분이 있다면, Chat 기능(Ctrl+L)을 사용합니다. 예를 들어 “검색 결과가 나올 때 부드러운 애니메이션을 추가해줘”라고 요청하면, AI가 해당 부분의 코드만 수정해 줍니다. 에러가 발생하면 에러 메시지를 그대로 복사해서 Chat에 붙여넣으면 됩니다. AI가 원인을 분석하고 수정 코드를 제안합니다.

디버깅도 AI에게 맡기기

코드에 문제가 생겼을 때 Cursor의 진가가 발휘됩니다. 터미널에 나타난 에러 메시지를 선택한 후 Ctrl+L을 눌러 Chat에 보내면, AI가 에러의 원인과 해결 방법을 설명해 줍니다. 브라우저 콘솔의 에러도 마찬가지입니다. 스크린샷을 찍어서 Chat에 첨부하면 AI가 화면을 분석하고 문제를 파악합니다.

이 과정에서 자연스럽게 코드를 읽는 눈이 생기고, 프로그래밍의 기본 개념을 익히게 됩니다. 바이브 코딩의 가장 큰 장점 중 하나는 실제 프로젝트를 만들면서 프로그래밍을 배울 수 있다는 점입니다.

바이브 코딩 실력을 키우는 방법

바이브 코딩을 잘하려면 몇 가지 습관을 들이는 것이 좋습니다.

첫째, 작게 시작하세요. 처음부터 대규모 프로젝트를 시도하면 실패할 확률이 높습니다. 할 일 목록, 계산기, 타이머 같은 간단한 앱부터 시작하세요. 작은 성공 경험이 쌓이면 자연스럽게 더 복잡한 프로젝트에 도전할 수 있습니다.

둘째, AI의 코드를 읽어보세요. AI가 생성한 코드를 그냥 적용하지 말고, 한 번이라도 읽어보는 습관을 들이세요. 모르는 부분이 있으면 Chat에서 “이 코드에서 useState가 하는 역할을 설명해줘”처럼 질문하면 됩니다. AI가 친절하게 설명해 줍니다.

셋째, 버전 관리를 하세요. Git을 사용해서 코드의 변경 이력을 관리하면, 잘못된 수정을 되돌릴 수 있습니다. Cursor에서 “이 프로젝트에 Git을 설정해줘”라고 요청하면 .gitignore 파일과 함께 초기 설정을 해줍니다.

넷째, 다양한 도구를 비교해 보세요. Cursor 외에도 Replit(온라인 개발 환경), Bolt.new(풀스택 앱 생성), v0.dev(UI 컴포넌트 생성) 같은 도구들이 있습니다. 프로젝트의 성격에 따라 적합한 도구가 다르므로, 여러 도구를 시도해 보고 자신에게 맞는 것을 찾으세요.

핵심 요약

바이브 코딩의 핵심을 정리하면 다음과 같습니다. Cursor AI를 설치하고 Composer 기능으로 자연어 명령을 입력하면 코드가 생성됩니다. 좋은 결과를 얻으려면 목적, 구성요소, 기술 스택, 디자인을 구체적으로 프롬프트에 작성해야 합니다. 에러가 발생하면 AI에게 디버깅을 맡기고, 코드를 읽으면서 자연스럽게 프로그래밍 개념을 익히세요. 작은 프로젝트부터 시작해서 점진적으로 복잡한 것에 도전하는 것이 성공의 비결입니다.

바이브 코딩은 단순히 AI에게 코드를 대신 작성하게 하는 것이 아닙니다. AI와 협업하면서 자신의 아이디어를 현실로 만드는 새로운 개발 방식입니다. 코딩을 배우고 싶지만 어디서 시작해야 할지 모르겠다면, 지금 바로 Cursor를 설치하고 첫 번째 프로젝트를 시작해 보세요. 두온교육에서도 바이브 코딩과 AI 활용 교육에 대한 다양한 콘텐츠를 제공하고 있으니 참고하시기 바랍니다.

프로그래밍을 전혀 몰라도 AI에게 말로 설명하면 코드가 뚝딱 만들어지는 시대가 왔습니다. 이것이 바로 바이브 코딩(Vibe Coding)입니다. 특히 Cursor AI 에디터는 코드 작성 과정 전체를 AI와 대화하며 진행할 수 있어, 비전공자도 실용적인 웹 애플리케이션을 만들 수 있습니다. 이 글에서는 Cursor AI를 활용해 실제로 웹앱을 만드는 전 과정을 단계별로 안내합니다.

바이브 코딩이란 무엇인가

바이브 코딩은 2025년 초 안드레이 카르파시(Andrej Karpathy)가 처음 사용한 용어로, 코드를 직접 타이핑하는 대신 AI에게 자연어로 원하는 기능을 설명하고, AI가 생성한 코드를 수락하거나 수정하는 방식의 개발 방법론입니다. 핵심은 개발자가 코드의 세부 구현에 집중하지 않고, 전체적인 흐름과 분위기(vibe)에 맞춰 AI와 협업한다는 점입니다.

기존 개발 방식에서는 문법을 외우고, 라이브러리 문서를 읽고, 에러를 하나하나 디버깅해야 했습니다. 바이브 코딩에서는 이 모든 과정을 AI가 대신 처리합니다. 개발자는 무엇을 만들고 싶은지만 명확하게 전달하면 됩니다. 프로그래밍 경험이 없는 기획자, 디자이너, 마케터도 자신만의 도구를 직접 만들 수 있게 된 것입니다.

Cursor AI 설치와 기본 설정

Cursor는 VS Code를 기반으로 만들어진 AI 코드 에디터입니다. cursor.com에서 무료로 다운로드할 수 있으며, 설치 후 기존 VS Code 설정과 확장을 그대로 가져올 수 있습니다.

설치 단계:

1단계: cursor.com에 접속하여 운영체제에 맞는 설치 파일을 다운로드합니다.
2단계: 설치 후 실행하면 VS Code와 거의 동일한 인터페이스가 나타납니다.
3단계: 계정을 생성하고 로그인합니다. 무료 플랜으로도 월 2000회의 코드 완성과 50회의 느린 요청을 사용할 수 있습니다.
4단계: 설정(Settings)에서 AI 모델을 선택합니다. Claude Sonnet이나 GPT-4o를 추천합니다.

설치가 완료되면 Cmd+L(Mac) 또는 Ctrl+L(Windows)을 눌러 AI 채팅 패널을 열 수 있습니다. 이 채팅창이 바이브 코딩의 핵심 도구입니다. 여기서 AI에게 원하는 것을 자연어로 설명하면 됩니다.

실전: 할 일 관리 웹앱 만들기

이론보다 실습이 중요합니다. Cursor AI를 사용해 간단한 할 일 관리(To-Do) 웹앱을 처음부터 만들어 보겠습니다.

프로젝트 시작하기

먼저 빈 폴더를 하나 만들고 Cursor로 엽니다. 그다음 AI 채팅창(Cmd+L)을 열고 다음과 같이 입력합니다:

React와 Tailwind CSS를 사용해서 할 일 관리 웹앱을 만들어줘.
기능은 다음과 같아:
- 할 일 추가, 완료 체크, 삭제
- 완료된 항목은 취소선 표시
- 로컬스토리지에 데이터 저장
- 모바일에서도 잘 보이는 반응형 디자인
- 깔끔하고 현대적인 UI

이 한 번의 프롬프트로 Cursor는 프로젝트 구조를 잡고, 필요한 파일들을 모두 생성합니다. package.json, 컴포넌트 파일, 스타일 설정까지 한꺼번에 만들어줍니다. AI가 제안하는 코드를 Accept 버튼으로 수락하면 파일이 자동으로 생성됩니다.

기능 추가와 수정

기본 앱이 만들어졌다면, 추가 기능을 대화로 요청합니다:

할 일에 우선순위(높음/중간/낮음) 기능을 추가해줘.
높음은 빨간색, 중간은 노란색, 낮음은 초록색 라벨로 표시하고,
우선순위별로 정렬할 수 있는 버튼도 만들어줘.

AI는 기존 코드를 분석하고, 해당 기능을 추가하는 데 필요한 변경사항을 정확히 제안합니다. 변경되는 부분이 초록색과 빨간색으로 표시되므로, 어떤 코드가 추가되고 삭제되는지 한눈에 확인할 수 있습니다.

만약 결과가 마음에 들지 않는다면 이렇게 말하면 됩니다:

우선순위 라벨이 너무 큰데, 작은 원형 뱃지로 바꿔줘.
그리고 정렬 버튼은 상단 오른쪽에 드롭다운으로 만들어줘.

이처럼 자연어로 피드백을 주면 AI가 코드를 수정합니다. 코드를 직접 읽거나 수정할 필요가 없습니다.

효과적인 프롬프트 작성법

바이브 코딩의 품질은 프롬프트에 달려 있습니다. 같은 기능을 요청하더라도 프롬프트를 어떻게 쓰느냐에 따라 결과물의 완성도가 크게 달라집니다.

나쁜 프롬프트: “로그인 기능 만들어줘”

좋은 프롬프트: “이메일과 비밀번호로 로그인하는 기능을 만들어줘. 이메일 형식 검증, 비밀번호 8자 이상 확인, 로그인 실패 시 에러 메시지 표시, 로그인 성공 시 대시보드 페이지로 이동. UI는 중앙 정렬된 카드 형태로.”

프롬프트 작성 핵심 원칙:

첫째, 구체적으로 설명합니다. “예쁘게 만들어줘”보다 “둥근 모서리, 그림자 효과, 파란색 계열 버튼”이 훨씬 좋은 결과를 냅니다.

둘째, 기능을 나열합니다. 한 번에 여러 기능을 요청할 때는 번호를 매기거나 목록으로 정리합니다.

셋째, 예외 상황을 언급합니다. “인터넷이 끊겼을 때는 어떻게 처리할지”처럼 엣지 케이스를 미리 알려주면 더 견고한 코드가 나옵니다.

넷째, 참고할 만한 서비스를 언급합니다. “노션처럼 드래그 앤 드롭으로 순서를 바꿀 수 있게”처럼 잘 알려진 서비스를 레퍼런스로 제시하면 AI가 의도를 더 정확하게 파악합니다.

에러 해결과 디버깅도 AI에게

코드를 실행하다 에러가 발생하면 당황할 필요가 없습니다. 에러 메시지를 그대로 복사해서 AI 채팅에 붙여넣기만 하면 됩니다:

npm start를 실행했는데 다음 에러가 나와:
[에러 메시지 붙여넣기]
이거 왜 그런지 설명해주고 고쳐줘.

Cursor는 프로젝트의 전체 코드를 맥락으로 이해하고 있기 때문에, 단순히 에러만 고치는 것이 아니라 근본 원인까지 설명해줍니다. 터미널에서 발생하는 에러, 브라우저 콘솔의 에러, 화면이 의도와 다르게 보이는 문제 등 모든 종류의 이슈를 자연어로 설명하면 해결책을 제시합니다.

특히 Cursor의 Composer 모드(Cmd+I)를 활용하면, 여러 파일을 동시에 수정하는 복잡한 작업도 한 번에 처리할 수 있습니다. 예를 들어 “전체 앱의 색상 테마를 다크 모드로 바꿔줘”라고 하면, 관련된 모든 파일을 찾아 일괄 수정합니다.

핵심 요약과 다음 단계

바이브 코딩의 핵심을 정리하면 다음과 같습니다:

– Cursor AI는 AI와 대화하며 코드를 작성하는 에디터로, 프로그래밍 경험이 없어도 사용 가능합니다.
– 좋은 프롬프트가 좋은 코드를 만듭니다. 구체적이고 명확하게 요청하는 것이 핵심입니다.
– 에러 해결도 AI에게 맡기면 됩니다. 에러 메시지를 복사해서 붙여넣기만 하면 됩니다.
– 작은 단위로 기능을 추가하며 점진적으로 완성해 나가는 것이 효과적입니다.
– 한 번에 완벽한 결과를 기대하기보다, 대화를 통해 다듬어 가는 과정이 바이브 코딩의 본질입니다.

바이브 코딩은 단순한 유행이 아니라, 소프트웨어 개발의 패러다임을 바꾸는 흐름입니다. 코딩을 전혀 몰라도 아이디어만 있으면 실제 동작하는 서비스를 만들 수 있는 시대가 열렸습니다. 두온교육에서는 이러한 AI 시대의 실무 역량을 갖출 수 있도록 다양한 교육 프로그램을 운영하고 있습니다. 바이브 코딩을 포함한 최신 AI 활용법을 체계적으로 배우고 싶다면 두온교육의 커리큘럼을 확인해 보시기 바랍니다.