JJ Creative 교육연구소 · HRD×AI 라운지 바이브 00 · 2026-10-08

바이브 코딩, 어디서 시작할까
AI 스튜디오 · Lovable · Claude Code · Codex · Cursor — 다섯 작업실 비교

«AI한테 말로 앱을 만들어 달라»는 건 같은데, 들어가는 문이 다섯 개쯤 됩니다. 브라우저에서 바로 되는 곳, 내 컴퓨터에 설치하는 곳, 개발자 화면처럼 생긴 곳… 이 글은 왕초보 교육 담당자가 첫 문을 고르도록 다섯 도구를 «어디서 일하나 · 무엇이 쉬운가 · 어디까지 가나»로 비교합니다. 그중 두 개(Codex, Claude Code)는 이 시리즈 «실전» 편에서 처음부터 끝까지 직접 만들어 본 경험을 바탕으로 썼습니다.

읽는 법
🧭 결론부터«이럴 땐 이것» 표만 봐도 됩니다.
📷 실제 화면첫 화면 그대로2026년 10월 8일에 열어 본 화면입니다.
💬 공통점모두 «말로»도구가 달라도 요청문 쓰는 법은 같습니다.
다섯 작업실

가르는 기준은 딱 하나 — «어디서 일하나»

한 거리에 늘어선 다섯 작업실 — 말하면 나오는 자판기형 가게, 완성 시안을 걸어 둔 디자인 스튜디오, 로봇 조수와 함께하는 집 책상, 창고와 연결된 구름 작업실, 공구가 가득한 장인 작업대. 가운데 빨간 배낭의 초보자
말만 하면 나오는 가게(AI 스튜디오), 디자인 스튜디오(Lovable), 집 책상의 로봇 조수(Codex·Claude Code 데스크톱), 창고와 이어진 구름 작업실(Claude Code 웹), 장인의 작업대(Cursor). 빨간 배낭의 초보자가 당신입니다.

☁️ 브라우저에서 (설치 없음)

Google AI 스튜디오, Lovable, Claude Code 웹. 로그인만 하면 바로 시작. 결과물은 그 서비스나 GitHub에 저장됩니다. 강의장·회사 PC처럼 설치가 막힌 곳에서 유리.

💻 내 컴퓨터에서 (설치)

Codex 데스크톱, Claude Code 데스크톱, Cursor. 내 폴더의 파일을 직접 다루고, 컴퓨터에 깔린 도구(GitHub·Firebase·Cloudflare 명령)까지 움직입니다. 사내 파일·여러 서비스 연결에 유리.
결론부터

이럴 땐 이것

상황추천이유
오늘 처음, 10분 안에 뭔가 보고 싶다Google AI 스튜디오무료로 시작, 말 한 줄에 미리보기까지 바로
보기 좋은 서비스 화면이 중요하다
랜딩 페이지·신청 페이지
Lovable디자인 완성도가 높고, 장부(Supabase) 연결을 화면에서 안내
설치는 막혔는데 제대로 된 앱을 만들고 싶다Claude Code 웹브라우저에서 GitHub 저장소 기반으로, 커넥터(Supabase·Vercel)까지
내 PC에서 여러 서비스를 엮어 끝까지
GitHub·Firebase·Cloudflare
Codex 데스크톱 또는 Claude Code 데스크톱컴퓨터의 명령 도구를 대신 실행해 배포까지
코드를 직접 보며 배우고 싶다
개발 입문
Cursor코드 편집기에 AI가 붙은 형태 — 코드가 늘 보임
하나만 고르라면

강의장 실습은 Google AI 스튜디오로 «앱이 나온다»는 감을 잡고, 업무용으로 오래 쓸 앱은 Claude Code나 Codex로 넘어가는 순서를 권합니다. 이 라운지의 «응용 01~03»(AI 스튜디오)과 «실전 01·02»가 그 순서입니다.

① 말하면 나오는 가게

Google AI 스튜디오 (Build)

Google AI Studio Build 화면 — Build your ideas with Gemini, 앱 설명 입력창과 Google Drive·Sheets·Gmail 연결 버튼
aistudio.google.com → Build. 입력창에 «무엇을 만들지»만 적으면 Gemini가 앱을 만들고 바로 옆에서 실행해 보여 줍니다.
좋은 점무료로 시작, 구글 계정만 있으면 됨. 미리보기가 즉시 뜸. Gemini 기능을 앱에 넣기 쉬움
아쉬운 점여러 외부 서비스를 엮거나 사내 파일을 다루기엔 한계. 오래 운영할 앱은 코드를 내려받아 옮겨야 함
라운지 자료응용 01 · 응용 02 · 응용 03
② 디자인 스튜디오

Lovable

Lovable 첫 화면 — Lovable로 무언가 만들어 보세요, 요청 입력창
lovable.dev. 한국어 화면을 지원하고, 입력창에 만들고 싶은 것을 적으면 디자인이 정돈된 웹앱이 나옵니다.
좋은 점보기 좋은 화면이 빨리 나옴. 배포와 장부(Supabase) 연결을 서비스 안에서 단계별로 안내
아쉬운 점무료 사용량이 적어 본격적으로 쓰면 유료. 세밀한 수정이 반복되면 사용량이 빨리 닳음
③ 구름 작업실 · 집 책상

Claude Code — 웹·데스크톱·터미널 세 가지 문

Claude Code 웹 세션 — 교육 현장 피드백 보드 기획, 기획 질문 5가지와 지금 세션에 연결된 Supabase MCP·Vercel MCP 도구 추천 표
«실전 01»에서 실제로 쓴 Claude Code 웹(claude.ai/code). 저장소를 고르고 말을 걸면, Claude가 «지금 세션에 Supabase·Vercel이 이미 연결돼 있다»고 먼저 알려 줍니다.
Claude Code 소개 페이지 — 터미널, IDE, Slack, 웹에서 쓸 수 있다는 안내와 Windows용 다운로드
같은 Claude Code를 데스크톱 앱·터미널·VS Code·웹·Slack에서 쓸 수 있습니다. 처음엔 데스크톱 앱(내 폴더) 또는 웹(GitHub 저장소) 중 하나로.
좋은 점긴 작업을 스스로 계획·검사하며 끝까지 감. 커넥터(Supabase·Vercel·구글 드라이브 등)로 외부 서비스를 직접 다룸. 웹 버전은 GitHub에 «제안(PR)»으로 올려 검토하기 좋음
아쉬운 점Claude 유료 요금제 필요. 웹 버전은 내 컴퓨터 파일에 접근하지 않음(GitHub 저장소 기준)
라운지 자료설치 02 · 실전 01 · 웹 Claude Code로 처음부터 끝까지
④ 집 책상의 로봇 조수

Codex — OpenAI의 코딩 에이전트

Codex 데스크톱 앱 — 첫 버전을 완성했습니다, 검사 54개와 빌드 통과 메시지
«실전 02»에서 쓴 Codex 데스크톱 앱. 내 폴더에서 기획·PRD·개발·테스트를 하고, GitHub·Firebase·Cloudflare 배포까지 직접 했습니다.
좋은 점ChatGPT 계정으로 바로. 앱 안에 미리보기 브라우저·PRD 열람 창이 있어 결과 확인이 편함. 사람이 눌러야 할 때 멈추고 안내
아쉬운 점ChatGPT 유료 요금제 필요. 실행 환경이 내 터미널과 달라 로그인 정보를 못 찾는 경우가 있음(실전 02에서 실제로 겪음)
라운지 자료실전 02 · Codex로 처음부터 끝까지
⑤ 장인의 작업대

Cursor — AI가 붙은 코드 편집기

Cursor 소개 페이지 — 코딩 에이전트 소개와 Windows용 다운로드, 코드 편집 화면 예시
cursor.com. 화면 대부분이 코드 편집기이고, 옆의 AI에게 말로 시킵니다. 코드가 늘 보이는 것이 장점이자 초보에겐 부담.
좋은 점무엇이 바뀌었는지 줄 단위로 보며 배울 수 있음. 개발자와 협업할 때 같은 화면을 봄
아쉬운 점왕초보에겐 화면이 복잡함. 배포·외부 서비스 연결은 스스로 알아야 할 것이 더 많음
한 장 비교표

다섯 도구, 여섯 가지 질문

AI 스튜디오LovableClaude CodeCodexCursor
어디서브라우저브라우저웹·데스크톱·터미널데스크톱·웹설치형 편집기
설치없음없음웹은 없음앱 설치설치
비용 감각무료로 시작무료 체험, 본격은 유료Claude 유료 요금제ChatGPT 유료 요금제무료 체험, 본격은 유료
첫 결과 속도가장 빠름빠름보통(계획부터)보통(계획부터)보통
외부 서비스 연결구글 서비스 중심서비스 안 안내커넥터·명령 도구명령 도구직접 설정
왕초보 난이도★☆☆★☆☆★★☆★★☆★★★
요금·기능은 자주 바뀝니다

위 표는 2026년 10월 8일 기준 «감»입니다. 무료 한도와 요금제 이름은 수시로 바뀌니, 시작할 때 각 서비스 요금 페이지를 한 번 확인하세요. 회사 계정으로 쓸 때는 사내 보안 정책(외부 AI에 사내 자료를 넣어도 되는지)도 먼저 확인합니다.

다음 편

도구를 골랐다면

다음 읽을 글내용
바이브 01 · 지도어떤 도구든 거치는 작업실 → 창고 → 가게 → 장부
바이브 05 · 망가졌을 때어떤 도구든 만나는 빨간 Error와 되돌리기
실전 02 · Codex내 컴퓨터에서 처음부터 끝까지
이 글을 만든 방법

2026년 10월 8일 각 서비스의 첫 화면을 열어 찍었고(쿠키는 «모두 거부»로 닫음), Claude Code와 Codex는 이 시리즈 실전 편에서 실제로 앱을 만든 경험을 바탕으로 비교했습니다. 특정 서비스의 후원이나 제휴는 없습니다.

JJ Creative 교육연구소 · HRD×AI 라운지 바이브 00 · 확인일 2026-10-08
전재현 소장 · jjh@jjcreative.co.kr · 010-8448-2354 · jjcreative.co.kr
참고: Google AI Studio · Lovable · Claude Code · Codex · Cursor
이 자료의 활용을 원하시면 문의해 주세요.