티스토리 뷰
목차
지난 글에서는 Cursor를 설치하고 처음 화면을 살펴봤습니다. 설치까지 하고 나니 궁금증이 생겼습니다.
이걸로 뭘 만들어야 할까? 난 어디까지 할 수 있을까?
바이브 코딩이라는 말을 처음 접했을 때는 그냥 AI에게 “홈페이지 만들어줘”라고 하면 알아서 완성해 주는 모습을 상상했습니다. 요즘 AI는 웬만한 것을 다 해주니까요. 그런데 조금 더 알아보니 중요한 건 코드를 많이 아는 것보다 내가 원하는 결과를 AI에게 얼마나 구체적으로 설명하느냐에 있었습니다. 이게 바로 프롬프트에 대한 중요성일까요.
바이브 코딩 3편｜Cursor 설치부터 시작하기, 코딩 초보자는 무엇부터 해야 할까?
지난 글에서는 Cursor, Claude Code, VS Code가 각각 어떤 도구인지 알아봤습니다.세 가지 이름을 구분하고 나니 이제 본격적으로 한번 시작해 봐야겠다는 생각이 들었습니다.그래서 오늘은 가장 먼저 C
newinfobox.com
그래서 이번에는 거창한 서비스를 만들기보다 Cursor에서 프로젝트를 시작할 때 알아두면 좋은 기본 흐름부터 정리해 봤습니다.
1. Cursor에서는 왜 프로젝트 폴더부터 열까?
처음에는 ‘프로젝트 폴더를 연다’는 말부터 조금 낯설었습니다. 평소 컴퓨터에서 폴더라고 하면 사진이나 문서를 모아두는 공간 정도로 생각하니까요.
사실 코딩에서도 크게 다르지는 않습니다. 하나의 웹페이지를 만들더라도 화면 구조를 담당하는 파일, 디자인을 담당하는 파일, 동작을 담당하는 파일 등이 생길 수 있습니다. 이 파일들을 한 곳에 모아 관리하는 공간이 프로젝트 폴더라고 생각하면 됩니다.
예를 들어 바탕화면에 my-first-project라는 폴더를 하나 만든다고 생각해 보겠습니다. Cursor에서 이 폴더를 열어 작업하면 앞으로 만들어지는 HTML, CSS, JavaScript 같은 파일을 한 프로젝트 안에서 관리할 수 있습니다.
초보자 입장에서는 여기서부터 습관을 들이는 것이 좋아 보입니다. 파일을 아무 곳에나 저장하기보다 프로젝트마다 폴더 하나를 만들어 시작하는 것입니다. 내 목적에 맞는 것들을 모아두기!! 사실 이건 컴퓨터를 사용하는 기본이기도 한 것 같습니다.
2. 첫 프로젝트는 최대한 작게 시작해 보기
무엇을 만들어볼지 생각하다 보면 욕심이 생깁니다. 블로그 자동화 프로그램도 만들고 싶고, 상품 관리 프로그램도 만들어보고 싶고, 자료를 정리해 주는 도구도 너무너무 궁금합니다.
하지만 초보인 저로써는 첫 프로젝트부터 기능을 너무 많이 넣으면 AI가 만들어준 결과가 맞는지 확인하기가 어렵습니다. 그래서 처음에는 눈으로 바로 결과를 확인할 수 있는 작은 웹페이지 정도가 적당해 보였습니다.
예를 들어 이름과 오늘 할 일을 입력하고 저장 버튼을 누르는 간단한 페이지입니다. 처음 목표는 이 정도면 충분합니다.
① 제목이 보인다.
② 이름을 입력할 수 있다.
③ 오늘 할 일을 입력할 수 있다.
④ 저장 버튼이 있다.
이렇게 만들고 싶은 기능을 먼저 몇 줄로 정리하면 AI에게 요청할 때도 훨씬 명확해집니다.
3. “홈페이지 만들어줘”보다 조금 더 자세하게
바이브 코딩을 공부하면서 가장 먼저 익혀야 할 것이 바로 요청하는 방법이라는 생각이 들었습니다. 얼마나 명확하게 내가 원하는 것을 전달하는가!! 이것이 중요하다는 생각입니다.
예를 들어 Cursor에게 단순히 “홈페이지 하나 만들어줘”라고 요청할 수도 있습니다. 하지만 어떤 홈페이지인지, 어떤 기능이 필요한지 알려주지 않으면 AI 입장에서도 선택해야 할 것이 너무 많지요.
그래서 다음처럼 요청을 조금 구체적으로 바꿔볼 수 있습니다.
“코딩을 처음 배우고 있어. 연습용으로 아주 간단한 자기소개 웹페이지를 만들어줘. 화면 위에는 ‘나의 첫 바이브 코딩’이라는 제목을 넣고, 이름을 입력하는 칸과 오늘의 한마디를 입력하는 칸, 저장 버튼을 만들어줘. 초보자가 파일 구조를 이해할 수 있도록 어떤 파일을 만드는 지도 설명해 줘.”
이렇게 요청하면 단순히 결과물만 달라는 것이 아니라 ‘나는 초보자다’, ‘무엇을 만들고 싶다’, ‘어떤 기능이 필요하다’, ‘설명도 필요하다’는 정보를 함께 전달할 수 있습니다.
4. AI가 만들어줬다고 끝난 것은 아니다
처음엔 AI가 코드를 만들어주면 그대로 사용하면 되는 줄 알았습니다. 그저 완벽할 거라고 생각했지요.
그런데 AI가 코드를 생성했다는 것과 그 코드가 내가 원하는 대로 정확하게 동작한다는 것은 다른 문제입니다. 화면이 제대로 열리는지, 버튼을 눌렀을 때 원하는 동작을 하는지 반드시 직접 확인해야 합니다.
하지만 수정이 어렵지는 않습니다. 원하는 모습이 아니라면 처음부터 다시 만들 필요도 없습니다. “버튼을 조금 크게 해 줘”, “입력한 내용을 버튼 아래에 보여줘”, “화면을 더 단순하게 바꿔줘”처럼 수정 요청을 이어가면 됩니다.
결국 바이브 코딩의 흐름은 ‘한 번에 완벽한 명령을 내리는 것’보다 ‘요청 → 결과 확인 → 수정 요청 → 다시 확인’을 반복하는 과정에 더 가까워 보입니다.
코드를 모두 외우지 못하더라도 결국 내가 원하는 결과가 무엇인지 판단할 수 있어야 한다는 점이 중요한 것 같습니다.
5. 오늘 정리한 바이브 코딩 첫 프로젝트 순서
오늘 공부한 내용을 아주 단순하게 정리하면 다음과 같습니다.
프로젝트 폴더 만들기 → Cursor에서 폴더 열기 → 만들고 싶은 기능을 작게 정하기 → 자연어로 구체적으로 요청하기 → AI가 만든 결과 확인하기 → 필요한 부분 다시 요청하기.
처음부터 어려운 프로그램을 만들 필요는 없을 것 같아요. 오히려 작은 결과물을 하나 만들어보고 ‘내가 말한 내용이 실제 화면으로 만들어지는 과정’을 경험하는 것이 바이브 코딩을 이해하는 데 도움이 될 것 같습니다.
다음 편에서는 여기서 한 단계 더 들어가 보려고 합니다. Cursor가 만들어준 파일에서 자주 만나게 되는 HTML, CSS, JavaScript가 각각 무슨 역할을 하는지 코딩 초보자의 눈높이에서 정리해 보겠습니다. 코드를 직접 외우는 것보다 먼저 ‘이 파일은 왜 생긴 걸까?’부터 알아볼 생각입니다.
