초보자용 바이브코딩 툴 4개, 빈 화면부터 연결 확인까지 고르는 법 (2026)

3줄 요약

  • 빈 화면인지 기존 폴더인지만 확인하면 4개 툴 중 시작 도구를 바로 정한다.
  • 빈 화면은 Lovable, 기존 폴더는 에디터면 Cursor, 터미널이면 Claude Code나 Codex다.
  • Lovable과 Cursor는 공식 문서로만 확인했고 Codex 무료 여부는 확인하지 못했다.

터미널을 오늘 처음 열었다면 Lovable, Cursor, Claude Code, Codex 중 뭘 눌러야 할지부터 막힌다. 넷 다 사람이 말로 시키면 코드를 만들거나 고쳐주는 AI 도구 이름이다.

바이브코딩 툴은 이름이 아니라 지금 작업이 빈 화면에서 시작하는지, 이미 있는 폴더에서 시작하는지로 고른다. 지금 하려는 작업의 파일을 담아둔 폴더(바탕화면이나 다운로드 폴더)를 열어본다. .js .py .html 같은 확장자 파일이 보이면 기존 폴더다. 아무 파일도 없으면 빈 화면이다.

기준일은 2026-09-11이다. Lovable과 Cursor는 공식 문서로 확인했고, Claude Code와 Codex는 직접 써서 확인했다.

초보자용 바이브코딩 툴 4개, 빈 화면부터 연결 확인까지 고르는 법 (2026)

준비물부터 확인한다

판정을 시작하기 전에 준비물 3개를 손에 쥔다.

첫째, 내 작업의 시작점이다. 바탕화면이나 다운로드 폴더(프로젝트)를 맥은 Finder, 윈도우는 파일 탐색기로 열어 확인한다. .js .py .html 같은 확장자 파일이 보이면 기존 폴더, 안 보이면 빈 화면이다.

둘째, 가입용 계정 1개다. Lovable은 이메일·Google·GitHub·Apple 중 하나로 가입한다. Cursor는 앱을 연 뒤 로그인한다.

셋째, 터미널(글자로 컴퓨터에 명령을 치는 검은 창)이다. 이건 세 번째 갈래인 Claude Code와 Codex에서만 필요하다. Lovable과 Cursor를 고른다면 터미널은 몰라도 된다. 터미널 여는 법은 바이브코딩 강의 선택 체크리스트에서 확인한다.

바이브코딩 툴 판정표

작업 종류를 넣으면 툴 하나가 나온다.

빈 화면인지 기존 폴더인지로 툴을 가르는 갈림길

볼 곳: 빈 화면이면 바로 Lovable, 기존 폴더면 다음 질문(에디터냐 터미널이냐)으로 넘어간다. 에디터·터미널 사이 사용성 차이는 Cursor와 Claude Code 비교로 넘긴다.

툴 시작점 실행 환경 설치 첫 행동 무료 여부
Lovable 빈 화면 브라우저 없음 프롬프트 박스에 문장 입력 가입 즉시 무료
Cursor 기존 폴더 데스크톱 앱 GUI 설치(macOS·Windows는 터미널 불필요) 폴더 선택 후 Cmd I Hobby 무료, 카드 불요
Claude Code 기존 폴더 터미널 curl 설치 cd 후 claude 입력 무료 플랜 미포함
Codex CLI 기존 폴더 터미널 curl 설치 cd 후 명령 실행 공식 가격 페이지 확인 못함

표의 Lovable·Cursor 칸은 공식 문서로 확인했다. Claude Code·Codex 칸은 직접 썼다.

빈 화면이면 Lovable부터 연다

공식 문서 기준으로 절차는 다음과 같다.

  1. lovable.dev에서 가입한다. 이메일·Google·GitHub·Apple 중 하나를 쓴다.

  2. [Ask Lovable to create…] 프롬프트 박스에 만들고 싶은 것을 한 문장으로 적는다. 모든 프로젝트가 이 박스에서 시작한다.

설치와 설정은 따로 없다. 가입하면 바로 무료로 시작하고, 무료 플랜에는 매일 채워지는 빌드 크레딧(작업을 실행하는 데 쓰는 사용량 단위)이 딸려 있다. 데스크톱·모바일 앱으로 확장하는 경로도 있다고 하지만, 그 부분은 열어보지 않았다.

공식 문서: Lovable Welcome, Lovable Getting Started, Lovable Pricing

공식 문서의 가입·시작 화면과 실제 화면 비교용 캡처

볼 곳: Getting Started

기존 폴더를 에디터에서 고치려면 Cursor

공식 문서 기준으로 절차는 다음과 같다.

  1. cursor.com에서 앱을 내려받아 설치한다. macOS·Windows는 화면을 눌러 진행하는 GUI 설치라 터미널이 필요 없다.

  2. 앱을 열고 로그인한 뒤 [폴더 선택]으로 기존 폴더를 연다.

  3. Cmd I로 에이전트(코드를 대신 읽고 고쳐주는 대화창) 창을 열고 작은 작업 하나를 적는다.

Cursor 공식 문서의 첫 행동이 폴더 선택이라 기존 폴더 갈래로 나눴다. 무료는 Hobby 플랜이다. 카드 등록 없이 시작하고 에이전트 요청 수에 제한이 있다.

Cursor와 VS Code에 설정한 Claude Code 중 뭐가 편한지는 Cursor와 Claude Code 비교에서 다뤘다. 세부 사용성은 그 글로 넘긴다.

공식 문서: Cursor Docs, Cursor Quickstart, Cursor Pricing

기존 폴더를 터미널에서 고치고 자동화하려면

둘 다 써서 확인했다. 시작점은 이미 있는 폴더였고, 파일을 고치고 명령을 실행해야 했다.

Claude Code는 파일 작업·검색·실행·웹 접근 도구를 내장한다. Codex CLI도 로컬 폴더의 파일을 읽고 고치고 명령을 실행한다.

  1. 터미널을 연다. 여는 법은 바이브코딩 강의 선택 체크리스트에 정리했다.

  2. 설치 명령 한 줄을 붙여넣는다. Claude Code Quickstart 문서의 설치 항목에 있는 회색 코드 상자 한 줄을 통째로 복사해 터미널에 붙여넣고 Enter를 누른다. curl 설치 명령(인터넷에서 프로그램을 받아 바로 설치하는 한 줄)이다. Codex는 Codex CLI 문서의 설치 상자를 같은 방식으로 쓴다.
    볼 곳: 마지막 줄에 설치 경로나 버전이 찍힌다.

  3. cd(폴더로 들어가는 명령)로 기존 폴더에 들어간 뒤 claude를 입력한다. 예: cd /path/to/project 다음 claude.
    볼 곳: 프롬프트 입력창이 뜬다.

Codex도 구조는 같고 설치 명령만 다르다. npm으로 설치하는 경로도 있다고 하지만, 공식 문서로는 curl 설치만 확인했다.

‘설치는 됐는데 로그인하니 안 된다’ 싶을 수 있다. Claude Code는 무료 플랜에 포함되지 않고 Pro 플랜부터 쓸 수 있다. Codex의 무료 여부는 공식 가격 페이지를 열지 못해 확인하지 못했다.

둘 중 어느 쪽이 낫다는 서열은 두지 않는다. 이미 쓰는 계정이 있는 쪽으로 시작하면 된다.

공식 문서: Claude Code 기능 개요, Claude Code Quickstart, Claude Pricing, Codex CLI

처음 고른 툴을 나중에 바꿀 수 있다

Lovable로 시작했다가 나중에 폴더로 내려받아 다른 툴로 이어갈 수 있다.

Lovable에서 바꾼 내용은 GitHub(코드를 인터넷에 보관하는 창고)에 동기화되고, GitHub에서 바꾼 내용도 Lovable로 되돌아온다. 저장소를 clone(창고를 내 컴퓨터 폴더로 복사하는 것)하면 원하는 에디터에서 이어 작업할 수 있다.

Lovable에서 시작해 GitHub 동기화를 거쳐 에디터로 넘어가는 4단계 흐름

빈 화면에서 시작한 프로젝트가 폴더로 내려오는 순간, 앞서 본 기존 폴더 갈래로 그대로 넘어간다. 에디터로 고칠지는 Cursor와 Claude Code 비교, 터미널로 고칠지는 바이브코딩 강의 선택 체크리스트를 참고한다.

공식 문서: Lovable GitHub 연동

이 글에 나온 말 정리

용어 뜻
터미널 글자로 컴퓨터에 명령을 치는 검은 창
에디터 코드를 화면에 띄워 보고 고치는 프로그램
폴더(프로젝트) 코드 파일을 모아둔 폴더
에이전트 코드를 대신 읽고 고쳐주는 대화창
배포 만든 앱을 실제로 접속 가능하게 올리는 것
GitHub 코드를 인터넷에 보관하는 창고
크레딧 작업을 실행하는 데 쓰는 사용량 단위

해야 할 일 4가지

  1. 내 작업이 빈 화면인지 기존 폴더인지 정한다.
  2. 판정표에서 갈래를 고른다.
  3. 그 갈래의 첫 행동(가입, 폴더 선택, 설치+cd+claude)을 마친다.
  4. 첫 작업은 작은 일 하나를 한 문장으로 적는다.

형식: 내 작업은 [빈 화면/기존 폴더]이고 [브라우저/에디터/터미널]에서 하니 [툴]로 시작한다.
실제: 내 작업은 기존 폴더이고 터미널에서 하니 Claude Code로 시작한다.

에디터 갈래를 더 보려면 Cursor와 Claude Code 비교, 터미널 갈래에서 막히면 바이브코딩 강의 선택 체크리스트를 연다.

검증 기준

  • 마지막 업데이트일: 2026-09-11
  • 확인 환경: Claude Code로 워드프레스 자동화·카드뉴스 렌더러 제작, Codex로 파일·명령·브라우저·예약 파이프라인 점검. Lovable·Cursor는 공식 문서만 확인, 직접 실행은 하지 않음.
  • 주요 근거: Lovable Welcome, Cursor Docs, Claude Code 기능 개요, Codex CLI

직접 만든 실습 자료와 새 도구 소식

AI 도구로 만든 실습 자료, 달라진 기능과 강의 소식을 준비하고 있습니다. 발송을 시작하면 안내해 드려요. 먼저 확인 메일에서 본인 이메일을 확인해 주세요.

신청하기 전에 첫 소식 미리보기에서 내용과 자료를 확인해 보세요.

질문이나 의견을 남겨주세요

이름을 입력하지 않아도 돼요. ‘깜짝 놀란 올빼미’ 같은 별명이 자동으로 붙어요.