[ 본 이미지는 생성형 AI로 제작되었습니다 ]

바이브 코딩 초보 가이드｜코딩 몰라도 AI로 나만의 웹서비스 만드는 방법

"내가 생각한 아이디어를 직접 웹사이트로 만들어보고 싶은데 코딩을 하나도 모르는데 가능할까?"

몇 년 전이었다면 먼저 HTML, CSS, JavaScript 같은 프로그래밍 기술부터 공부하라는 이야기를 들었을 가능성이 높습니다.

하지만 생성형 AI와 AI 코딩 도구가 빠르게 발전하면서 상황이 많이 달라졌습니다.

요즘은 사람이 원하는 서비스의 모습을 일상적인 말로 설명하면 AI가 화면을 만들고 코드를 작성하고, 오류를 분석하고, 여러 파일을 수정하는 작업까지 도와줄 수 있습니다.

이런 개발 방식을 이야기할 때 자주 등장하는 말이 바로 '바이브 코딩(Vibe Coding)'입니다.

다만 여기서 한 가지 오해하면 안 됩니다.

바이브 코딩은 "아무것도 몰라도 AI가 알아서 완벽한 서비스를 만들어주는 마법"이 아닙니다.

오히려 사람의 역할이

"코드를 한 줄씩 직접 작성하는 사람"

에서

"무엇을 만들 것인지 설명하고, AI가 만든 결과를 확인하고, 문제를 찾아 수정 방향을 지시하는 사람"

으로 조금씩 바뀌고 있다고 이해하는 편이 정확합니다.

이번 글에서는 코딩을 한 번도 해보지 않은 사람도 이해할 수 있도록 바이브 코딩의 개념부터 실제 웹서비스를 만들어 인터넷에 공개하는 과정까지 하나씩 살펴보겠습니다.

바이브 코딩이란 무엇일까?

바이브 코딩이라는 표현은 2025년 2월 AI 연구자 Andrej Karpathy가 AI와 대화하면서 프로그램을 만드는 자신의 방식을 설명하면서 널리 알려졌습니다. 당시에는 코드를 세세하게 읽기보다 AI에게 원하는 변경사항과 오류를 계속 전달하며 결과를 만들어가는 다소 자유로운 개발 방식을 가리키는 표현에 가까웠습니다.

현재는 이 표현이 조금 더 넓게 사용되고 있습니다.

쉽게 말하면 다음과 같습니다.

기존 코딩:

사람이 프로그래밍 언어를 사용해 컴퓨터가 이해할 수 있는 명령을 직접 작성한다.

바이브 코딩:

사람이 자연어로 원하는 결과를 설명하고 AI가 코드를 생성하거나 수정하도록 한 뒤, 결과를 보면서 계속 대화하듯 발전시킨다.

예를 들어 예전에는 웹사이트의 버튼을 오른쪽으로 옮기려면 CSS라는 스타일 코드를 찾아 직접 수정해야 했습니다.

바이브 코딩에서는 AI에게 이렇게 이야기할 수 있습니다.

메인 화면의 검색 버튼을 오른쪽으로 옮겨줘.
모바일에서는 버튼이 화면 전체 너비에 가깝게 보이도록 해줘.

AI가 프로젝트를 이해할 수 있는 환경이라면 관련 코드를 찾아 수정할 수 있습니다.

최근의 AI 코딩 에이전트는 단순히 코드 한두 줄을 제안하는 수준을 넘어 프로젝트의 파일을 읽고, 여러 파일을 수정하고, 터미널 명령을 실행하거나 테스트 결과를 확인하면서 작업하는 형태로 발전하고 있습니다.

OpenAI Codex, GitHub Copilot의 Agent 기능, Cursor Agent 등이 이런 흐름을 보여주는 대표적인 사례입니다.

왜 갑자기 바이브 코딩이 주목받게 되었을까?

가장 큰 이유는 생성형 AI의 코딩 능력이 크게 발전했기 때문입니다.

처음의 AI 코딩 도구는 개발자가 코드를 작성할 때 다음 한두 줄을 추천해주는 자동완성 도구에 가까웠습니다.

지금은 많이 달라졌습니다.

AI에게

상품 목록 화면을 만들고 검색 기능을 추가해줘.

라고 요청하면 AI가 단순히 코드 한 줄을 알려주는 것이 아니라 프로젝트 구조를 파악하고 여러 파일을 만들거나 수정하는 방식으로 발전하고 있습니다.

최근 AI 코딩 도구들이 지원하는 작업은 상당히 다양합니다.

• 웹페이지 화면 구성

• 버튼과 메뉴 만들기

• 검색 기능 구현

• 여러 파일의 코드 수정

• 오류 메시지 분석

• 디자인 변경

• 데이터베이스 연결

• 외부 API 연결

• 테스트 실행

• 오류 수정

• 배포 준비

• 기존 프로젝트 구조 이해

이 때문에 과거에는 개발 공부를 어느 정도 해야 시도할 수 있었던 아이디어를 이제는 비개발자도 빠르게 시제품으로 만들어볼 수 있게 되었습니다.

여기서 '시제품'이라는 말이 중요합니다.

처음부터 완성된 대형 서비스를 만드는 것보다

"내 아이디어가 실제 화면에서 작동할 수 있는지 확인해보는 것"

이 바이브 코딩의 좋은 시작점입니다.

기존 코딩과 바이브 코딩은 무엇이 다를까?

가장 큰 차이는 컴퓨터에게 원하는 것을 전달하는 방식입니다.

기존에는

"이 기능을 만들기 위해 어떤 코드를 작성해야 하지?"

를 고민했다면 바이브 코딩에서는 먼저

"사용자가 어떤 행동을 하면 화면에서 어떤 일이 일어나야 하지?"

를 생각하게 됩니다.

하지만 AI가 코드를 만들어준다고 해서 개발 지식이 완전히 필요 없어지는 것은 아닙니다.

서비스가 복잡해질수록 기본적인 웹 구조와 데이터베이스, 보안, API 등에 대한 이해가 중요해집니다.

노코드와 바이브 코딩은 같은 것일까?

비슷해 보이지만 조금 다릅니다.

노코드

미리 준비된 기능이나 블록을 선택하고 조립하여 서비스를 만드는 방식입니다.

예를 들어

버튼 추가 → 목록 추가 → 입력창 추가 → 자동화 연결

같은 식입니다.

프로그램이 미리 제공한 범위 안에서는 코드를 거의 작성하지 않고 서비스를 만들 수 있습니다.

로우코드

대부분은 화면이나 블록을 조합해서 만들지만 필요한 부분에서는 직접 코드를 작성할 수도 있는 방식입니다.

바이브 코딩

사람이 원하는 기능을 자연어로 설명하면 AI가 실제 프로그램 코드를 만들고 수정하는 방식입니다.

따라서 바이브 코딩은 단순히 노코드의 다른 이름이라고 보기는 어렵습니다.

바이브 코딩으로 무엇을 만들 수 있을까?

왕초보라면 먼저 규모가 작은 서비스부터 시작하는 것이 좋습니다.

개인 홈페이지

필요한 기능:

• 자기소개

• 사진

• 경력 또는 포트폴리오

• 연락처

• SNS 링크

가게 또는 회사 소개 홈페이지

필요한 기능:

• 매장 소개

• 상품 또는 서비스 안내

• 영업시간

• 위치

• 전화 또는 문의 연결

여행 정보 사이트

필요한 기능:

• 지역별 여행지 목록

• 카테고리 분류

• 장소 상세 페이지

• 검색 기능

맛집 정보 사이트

필요한 기능:

• 음식점 목록

• 지역별 필터

• 음식 종류별 필터

• 상세 정보

• 즐겨찾기

견적 계산기

필요한 기능:

• 상품 선택

• 수량 입력

• 옵션 선택

• 자동 금액 계산

가계부

필요한 기능:

• 수입 입력

• 지출 입력

• 카테고리 분류

• 월별 합계

예약 신청 페이지

필요한 기능:

• 날짜 선택

• 시간 선택

• 이름 입력

• 연락처 입력

• 예약 내용 확인

다만 예약 정보를 실제로 저장하기 시작하면 데이터베이스와 개인정보 보호가 필요해지기 때문에 난이도가 높아집니다.

할 일 관리 서비스

필요한 기능:

• 할 일 추가

• 완료 체크

• 삭제

• 날짜별 정리

간단한 AI 챗봇

필요한 기능:

• 질문 입력

• AI API 연결

• 답변 출력

이 경우 외부 AI 서비스를 연결해야 하므로 API 사용법과 비용 관리까지 알아야 합니다.

2026년 현재 사용할 수 있는 대표적인 AI 코딩 도구

AI 코딩 서비스는 변화 속도가 매우 빠릅니다.

따라서 서비스 이름만 외우기보다는 각각의 특징을 이해하고 현재 자신의 수준에 맞는 도구를 선택하는 편이 좋습니다.

ChatGPT와 Codex

ChatGPT는 아이디어를 정리하거나 요구사항을 작성하고, 코드와 오류를 설명받는 데 활용할 수 있습니다.

OpenAI의 Codex는 실제 소프트웨어 프로젝트를 대상으로 기능 제작, 수정, 리팩터링, 테스트 등 보다 직접적인 개발 작업을 수행하는 코딩 에이전트입니다. 2026년 현재 Codex는 ChatGPT를 포함해 앱, IDE, CLI 등 여러 환경에서 사용할 수 있는 형태로 발전했습니다.

초보자는 먼저 ChatGPT에서

"내가 만들고 싶은 서비스를 기획해줘."

"필요한 화면과 기능을 정리해줘."

처럼 아이디어를 정리하는 데 활용하고 이후 실제 제작 단계에서 코딩 에이전트를 사용하는 방식으로 접근할 수 있습니다.

Claude와 Claude Code

Claude는 서비스 구조를 정리하고 코드를 설명받거나 프로그램의 문제점을 분석하는 데 활용할 수 있습니다.

Claude Code는 Anthropic의 에이전틱 코딩 도구로, 프로젝트 파일을 살펴보고 기능을 만들거나 오류를 수정하는 작업을 수행할 수 있습니다. 공식 안내에서는 터미널을 중심으로 사용하는 개발 도구로 설명하고 있습니다.

따라서 완전한 왕초보에게는 브라우저만 사용하는 앱 빌더보다 초기 설정이 조금 어렵게 느껴질 수 있습니다.

Google AI Studio와 Antigravity

Google은 2026년 Google AI Studio의 앱 제작 기능을 강화하면서 Antigravity 코딩 에이전트를 활용해 자연어 프롬프트에서 실제 웹앱을 만드는 기능을 제공하고 있습니다.

Google은 Antigravity를 아이디어에서 실제 애플리케이션 제작까지 연결하는 에이전트 중심 개발 플랫폼으로 설명하고 있습니다.

여기서 예전 강좌를 볼 때 주의할 점이 있습니다.

Google 공식 문서에 따르면 개인용 Gemini Code Assist IDE 확장 프로그램과 Gemini CLI는 2026년 6월 18일부터 기존 개인 사용자 대상 제공 방식이 변경되었고 Antigravity와 Antigravity CLI로 이전하도록 안내하고 있습니다.

따라서 오래된 강좌의 화면이나 메뉴가 현재와 다를 수 있습니다.

GitHub Copilot

GitHub Copilot은 개발자가 사용하는 코드 편집기와 GitHub 환경에서 코드 작성과 수정, 설명, Agent 작업 등을 지원합니다.

현재는 단순한 코드 자동완성뿐 아니라 Agent 모드에서 프로젝트를 분석하고 여러 파일을 수정하거나 테스트를 수행하는 기능까지 제공하고 있습니다.

다만 VS Code와 같은 개발환경을 함께 사용하는 경우가 많기 때문에 웹브라우저만으로 간단히 앱을 만들어보려는 왕초보라면 약간의 학습이 필요할 수 있습니다.

Cursor

Cursor는 AI 기능을 중심으로 만들어진 코드 편집기입니다.

Agent는 프로젝트 파일을 검색하고 수정하거나 터미널 명령을 실행하고 오류를 수정하는 작업까지 수행할 수 있습니다.

실제 코드가 어떻게 구성되는지 조금씩 배우면서 바이브 코딩을 해보고 싶은 사람에게 유용한 형태입니다.

다만 프로그램을 설치하고 프로젝트 폴더라는 개념을 이해해야 하기 때문에 처음에는 낯설 수 있습니다.

Replit

Replit은 브라우저 환경에서 앱과 웹사이트를 만들고 실행할 수 있는 개발 플랫폼입니다.

현재 Replit Agent는 자연어로 만들고 싶은 것을 설명하면 웹사이트나 앱을 생성하고, 대화를 통해 수정한 뒤 같은 환경에서 공개까지 진행할 수 있는 형태로 제공됩니다.

별도의 복잡한 개발환경 설치가 부담스러운 초보자라면 비교적 접근하기 쉬운 유형입니다.

Lovable

Lovable은 브라우저에서 원하는 웹사이트나 웹앱을 자연어로 설명하고 결과를 확인하면서 수정할 수 있는 AI 제작 도구입니다.

공식 안내에서는 채팅이나 시각적 편집을 이용해 웹사이트를 수정하고 Lovable 주소 또는 사용자 도메인으로 공개할 수 있다고 설명합니다.

화면을 보면서 바로 수정하고 싶은 초보자가 이해하기 쉬운 방식입니다.

v0

v0는 Vercel에서 제공하는 AI 기반 웹 개발 도구입니다.

자연어로 원하는 화면이나 기능을 설명하면 실제 웹 애플리케이션을 만들 수 있으며, 데이터베이스와 백엔드 기능을 연결하고 Vercel로 배포하는 기능도 제공합니다.

특히 웹사이트 화면을 빠르게 만들어보고 수정하는 용도로 이해하기 쉽습니다.

간단히 비교하면

각 서비스의 무료 사용 범위, 사용량 제한, 유료 플랜, 지원 모델은 자주 바뀝니다.

따라서 특정 서비스를 시작하기 전에 공식 요금 페이지에서 현재 조건을 확인하는 것이 좋습니다.

실제로 바이브 코딩으로 서비스를 만들어보자

이제 실제 예를 하나 들어보겠습니다.

우리가 만들 서비스는

"우리 동네 맛집을 검색하고 저장할 수 있는 간단한 웹서비스"

입니다.

처음부터 회원가입, 지도, 리뷰, 광고, 추천 AI까지 모두 넣지 않습니다.

왕초보가 처음 만들기에는 너무 복잡하기 때문입니다.

STEP 1. 가장 중요한 기능만 정한다

처음에는 핵심 기능을 3개 정도로 제한합니다.

1. 맛집 목록 보기

2. 지역이나 음식 종류로 검색하기

3. 마음에 드는 맛집 저장하기

이렇게 최소한의 기능으로 시작하는 것을 개발에서는 MVP라고 표현하기도 합니다.

MVP는 Minimum Viable Product의 약자로

"사용자가 핵심 기능을 경험할 수 있는 최소한의 제품"

정도로 이해하면 됩니다.

처음부터 완벽한 서비스를 만들지 않는 것이 중요합니다.

STEP 2. AI에게 서비스 전체를 설명한다

처음부터

맛집 사이트 만들어줘.

라고 요청할 수도 있습니다.

하지만 원하는 결과가 나올 가능성을 높이려면 조금 더 자세하게 이야기하는 것이 좋습니다.

예를 들어 다음과 같이 요청할 수 있습니다.

나는 코딩을 전혀 모르는 초보자야.

서울의 맛집을 찾아볼 수 있는 간단한 웹서비스를 만들고 싶어.

주요 사용자는 스마트폰으로 맛집을 검색하는 사람이야.

필요한 기능은 다음과 같아.

1. 맛집 목록 보기
2. 지역별 검색
3. 음식 종류별 검색
4. 마음에 드는 맛집 저장

메인 화면에는
- 지역 선택
- 음식 종류 선택
- 검색 버튼
- 맛집 목록

이 보이게 만들어줘.

맛집을 선택하면
사진, 주소, 대표 메뉴, 가격대, 간단한 설명을 볼 수 있게 해줘.

모바일에서 사용하기 편한 화면으로 만들어줘.

나는 개발 용어를 잘 모르기 때문에 어려운 내용이 나오면 쉬운 말로 설명해줘.

처음부터 모든 기능을 만들지 말고 단계별로 진행해줘.

이 정도만 설명해도 AI가 이해할 수 있는 정보가 크게 늘어납니다.

STEP 3. 먼저 화면부터 만든다

처음에는 데이터베이스나 지도 API까지 연결하지 말고 화면부터 확인해보는 것이 좋습니다.

예를 들어 AI에게 이렇게 요청합니다.

실제 데이터베이스는 아직 연결하지 말고
서울 맛집 10곳의 예시 데이터를 만들어서
메인 화면부터 보여줘.

상단에는 서비스 이름과 검색 영역을 배치하고
아래에는 맛집을 카드 형태로 보여줘.

스마트폰에서 한 손으로 보기 편한 디자인으로 만들어줘.

이렇게 하면 먼저 서비스가 어떤 모습이 될지 확인할 수 있습니다.

여기서 중요한 것은

"기능을 만들기 전에 내가 원하는 서비스의 모습을 확인하는 것"

입니다.

STEP 4. 마음에 들지 않는 부분을 하나씩 수정한다

첫 결과가 마음에 들지 않아도 실패한 것이 아닙니다.

바이브 코딩은 한 번의 요청으로 완성품을 얻는 방식보다 대화를 반복하면서 결과를 다듬는 방식에 가깝습니다.

예를 들어 다음과 같이 요청할 수 있습니다.

1차 수정

검색 영역이 너무 작아.
화면 위쪽에서 잘 보이도록 크게 만들어줘.

2차 수정

맛집 카드의 사진이 너무 커.
사진 크기를 줄이고 가게 이름이 더 잘 보이도록 해줘.

3차 수정

스마트폰에서 검색 버튼이 너무 작아.
손가락으로 누르기 편하도록 크게 만들어줘.

4차 수정

맛집을 선택하면 상세 화면이 열리게 만들어줘.

이렇게 하나씩 바꾸는 편이

전체적으로 더 멋지게 만들어줘.

라고 요청하는 것보다 원하는 결과를 얻기 쉽습니다.

STEP 5. 검색 기능을 추가한다

화면이 어느 정도 완성되었다면 기능을 추가합니다.

이제 검색 기능을 만들어줘.

사용자가 강남구를 선택하면 강남구 맛집만 보이고,
한식을 선택하면 한식 맛집만 보이게 해줘.

지역과 음식 종류를 동시에 선택하면
두 조건을 모두 만족하는 맛집만 표시해줘.

검색 결과가 없으면
"조건에 맞는 맛집이 없습니다."라는 메시지를 보여줘.

여기서도 한 번에 너무 많은 기능을 요구하지 않는 것이 좋습니다.

STEP 6. 저장 기능을 만든다

회원가입 없이 간단히 연습하는 프로젝트라면 우선 사용자의 브라우저 안에 즐겨찾기 정보를 저장하는 방식으로 시작할 수도 있습니다.

AI에게 이렇게 이야기할 수 있습니다.

각 맛집 카드에 하트 버튼을 추가해줘.

하트를 누르면 즐겨찾기에 저장하고
다시 눌렀을 때는 즐겨찾기에서 제거되도록 해줘.

아직 회원가입과 데이터베이스는 사용하지 말고
초보자가 이해하기 쉬운 가장 단순한 방식으로 구현해줘.

AI가 localStorage라는 용어를 사용할 수 있습니다.

localStorage는 아주 쉽게 말하면

"현재 사용 중인 웹브라우저에 작은 정보를 보관하는 공간"

정도로 생각하면 됩니다.

다만 다른 스마트폰이나 컴퓨터에서 같은 즐겨찾기를 불러오려면 데이터베이스와 회원 계정이 필요할 수 있습니다.

바이브 코딩에서는 처음부터 완벽하게 만들지 않는 것이 중요하다

많은 초보자가 처음 AI를 사용할 때 이런 요청을 합니다.

맛집 추천 서비스 만들어줘. 회원가입, 지도, 리뷰, 결제, AI 추천 기능까지 모두 넣어줘.

AI가 무언가를 만들어줄 수는 있습니다.

하지만 문제가 생겼을 때 어디가 잘못됐는지 찾기 어렵습니다.

다음 순서가 훨씬 안전합니다.

1. 화면 만들기

2. 목록 보여주기

3. 검색 만들기

4. 상세 화면 만들기

5. 저장 기능 만들기

6. 모바일 확인하기

7. 오류 수정하기

8. 필요하면 데이터베이스 연결하기

9. 외부 서비스 연결하기

10. 배포하기

기능 하나를 만든 뒤 정상 작동하는지 확인하고 다음 기능으로 넘어가면 문제가 생겼을 때 원인을 찾기 쉬워집니다.

AI에게 요청을 잘하는 방법

바이브 코딩에서는 프로그래밍 언어만큼이나 중요한 것이

"내가 원하는 것을 정확하게 설명하는 능력"

입니다.

초보자라면 다음 공식을 기억하면 도움이 됩니다.

무엇을 만들지
+
누가 사용할지
+
어떤 화면이 필요한지
+
어떤 기능이 필요한지
+
어떤 디자인을 원하는지
+
현재 어떤 문제가 있는지

예를 들어

쇼핑몰 만들어줘.

보다는 다음과 같이 요청하는 편이 좋습니다.

20~40대 여성을 대상으로 하는
핸드메이드 소품 소개 웹사이트를 만들고 싶어.

메인 화면에는
대표 이미지,
상품 카테고리,
인기 상품,
브랜드 소개가 보이게 해줘.

상품을 누르면
사진, 가격, 설명, 옵션을 볼 수 있게 해줘.

처음에는 실제 결제 기능은 넣지 않고
상품을 구경하는 사이트까지만 만들어줘.

전체 디자인은 밝고 따뜻한 느낌으로 하고
스마트폰에서도 사용하기 편하게 만들어줘.

AI는 사용자가 제공한 정보가 구체적일수록 원하는 방향을 이해하기 쉽습니다.

수정 요청은 한 번에 하나씩 하는 것이 좋다

이렇게 요청하는 것보다

디자인 예쁘게 바꾸고
로그인 만들고
검색 추가하고
지도 넣고
모바일 수정하고
오류도 전부 고쳐줘.

다음처럼 나누는 편이 좋습니다.

먼저 모바일 화면에서 메뉴가 정상적으로 보이도록 수정해줘.
다른 기능은 변경하지 말아줘.

수정이 끝난 다음

이제 검색 기능만 추가해줘.
기존 디자인과 다른 기능은 유지해줘.

이 방식의 장점은 문제가 생겼을 때 어떤 변경 때문에 문제가 발생했는지 추적하기 쉽다는 것입니다.

오류가 발생하면 어떻게 해야 할까?

바이브 코딩을 처음 하면 가장 당황스러운 순간이 있습니다.

방금 전까지 잘 보이던 화면이 갑자기 사라지거나 버튼을 눌러도 아무 반응이 없는 경우입니다.

하지만 모든 것을 처음부터 다시 만들 필요는 없습니다.

버튼이 작동하지 않는다면

로그인 버튼을 눌러도 아무 반응이 없어.

어떤 부분에서 문제가 발생했는지 확인하고
초보자도 이해할 수 있도록 원인을 먼저 설명해줘.

그다음 필요한 부분만 수정해줘.

모바일 화면이 깨진다면

컴퓨터에서는 정상적으로 보이는데
휴대폰에서 메뉴가 화면 밖으로 나가.

모바일 화면에서도 정상적으로 보이도록 수정해줘.

PC 디자인은 가능하면 변경하지 말아줘.

오류 메시지가 나타났다면

오류 내용을 그대로 복사하여 AI에게 전달할 수 있습니다.

이 오류가 발생했어.

[여기에 오류 메시지 붙여넣기]

오류가 발생한 원인을 먼저 쉬운 말로 설명해줘.
그다음 수정 방법을 알려주고 필요한 코드만 변경해줘.

가능하다면

• 오류 메시지

• 화면 캡처

• 문제가 발생한 상황

• 바로 전에 변경한 내용

을 함께 제공하는 것이 좋습니다.

"안 돼"보다 상황을 설명하는 것이 좋다

AI에게

안 돼. 다시 해줘.

라고만 하면 원인을 정확히 파악하기 어렵습니다.

다음과 같이 이야기해보세요.

지역을 강남구로 선택하고 검색 버튼을 누르면
강남구 맛집만 나와야 하는데
모든 지역의 맛집이 그대로 보여.

화면 디자인은 정상이고 검색 기능만 문제인 것 같아.

원인을 확인하고 검색 기능만 수정해줘.

이런 식으로

"어떤 행동을 했는지"

"원래 어떤 결과가 나와야 하는지"

"실제로 어떤 결과가 나왔는지"

를 설명하면 문제를 찾는 데 도움이 됩니다.

실제 데이터를 연결하면 난이도가 올라간다

여기까지는 예시 데이터를 사용해도 충분히 만들 수 있습니다.

하지만 실제 서비스를 운영하려면 이야기가 조금 달라집니다.

예를 들어 회원이 즐겨찾기한 맛집을 다음 날 다시 접속했을 때도 보여주고 싶다고 해보겠습니다.

그러려면 정보를 어딘가에 저장해야 합니다.

이때 등장하는 것이 데이터베이스입니다.

데이터베이스란?

데이터베이스를 어렵게 생각할 필요는 없습니다.

서비스에서 사용하는 정보를 정리해서 보관하는 거대한 전자 장부 또는 서랍장이라고 생각하면 됩니다.

맛집 서비스라면 데이터베이스에 다음과 같은 정보가 들어갈 수 있습니다.

회원이 생기면 회원 정보와 즐겨찾기 정보도 저장해야 할 수 있습니다.

API는 무엇일까?

또 자주 등장하는 용어가 API입니다.

예를 들어 우리 맛집 서비스에 지도를 보여주고 싶다고 가정해보겠습니다.

지도를 직접 개발하기보다는 기존 지도 서비스가 제공하는 기능을 사용하는 것이 일반적입니다.

이때 서로 다른 서비스가 정보를 주고받을 수 있도록 만든 연결 방식이 API입니다.

쉽게 비유하면 API는

"다른 서비스에 필요한 기능을 요청하는 주문 창구"

와 비슷합니다.

우리 웹사이트가

이 주소의 지도 정보를 보여주세요.

라고 요청하면 지도 서비스가 필요한 정보를 전달해주는 방식입니다.

날씨, 결제, 번역, 지도, AI 등 다양한 서비스가 API를 제공합니다.

API 키는 절대 아무 곳에 공개하면 안 된다

API를 사용하다 보면 API Key라는 것을 받는 경우가 많습니다.

API 키는

"이 서비스를 사용할 권한이 있는 사용자인지 확인하는 비밀번호와 비슷한 값"

이라고 생각하면 됩니다.

따라서 다음과 같은 요청을 AI에게 하는 것은 조심해야 합니다.

이 API 키를 코드 안에 넣어줘.

API 키가 브라우저에서 누구나 볼 수 있는 코드나 공개 GitHub 저장소에 들어가면 다른 사람이 사용할 가능성이 있습니다.

AI에게는 다음과 같이 요청하는 편이 좋습니다.

API 키가 사용자에게 노출되지 않도록
환경변수와 서버 측 코드를 이용하는 안전한 방식으로 연결해줘.

초보자도 이해할 수 있도록 설정 방법을 단계별로 설명해줘.

비밀번호, 결제키, 데이터베이스 비밀번호 등도 같은 원칙을 적용해야 합니다.

만든 서비스를 인터넷에 공개하려면?

AI 도구 안에서 서비스가 잘 작동한다고 해서 다른 사람들이 바로 접속할 수 있는 것은 아닙니다.

다른 사람이 인터넷 주소를 통해 접속할 수 있도록 공개하는 과정을 보통 '배포(Deployment)'라고 부릅니다.

초보자에게는 다음과 같은 비유가 이해하기 쉽습니다.

웹사이트 = 가게
호스팅 또는 서버 = 가게가 들어가 있는 건물
도메인 = 사람들이 찾아올 때 사용하는 주소
배포 = 만든 가게를 실제 건물에 입점시켜 손님이 들어올 수 있게 만드는 과정

물론 정확한 기술적 정의와 완전히 일치하는 것은 아니지만 전체 구조를 이해하는 데 도움이 되는 비유입니다.

Replit, Lovable, v0처럼 제작과 배포 기능을 함께 제공하는 서비스도 있고, 코드를 GitHub에 저장한 후 Vercel 같은 별도의 배포 플랫폼과 연결하는 방법도 있습니다. v0는 공식적으로 Vercel을 통한 공개 기능을 제공하고 있습니다.

배포하기 전에 반드시 확인해야 할 것

AI가

"완성되었습니다."

라고 알려줘도 바로 공개하지 않는 것이 좋습니다.

직접 확인해야 합니다.

기본 기능

• 모든 버튼이 작동하는가?

• 검색 결과가 정확한가?

• 저장 기능이 정상적으로 작동하는가?

• 링크를 눌렀을 때 올바른 화면으로 이동하는가?

스마트폰

• 글자가 너무 작지 않은가?

• 버튼을 손가락으로 누르기 편한가?

• 메뉴가 화면 밖으로 나가지 않는가?

• 가로 스크롤이 생기지 않는가?

데이터

• 잘못된 정보가 들어가 있지 않은가?

• 테스트용 이름이나 문구가 남아 있지 않은가?

• 실제 데이터와 예시 데이터가 섞여 있지 않은가?

보안

• API 키가 화면이나 코드에 노출되지 않는가?

• 비밀번호가 코드에 직접 들어가 있지 않은가?

• 관리자 기능을 일반 사용자가 실행할 수 있지 않은가?

AI가 만든 코드를 그대로 믿어도 될까?

권장하지 않습니다.

생성형 AI는 그럴듯하지만 잘못된 코드를 만들 수 있습니다.

심지어 화면에서는 정상적으로 작동하는 것처럼 보여도 내부적으로 보안 문제가 있을 수 있습니다.

Google 역시 Gemini Code Assist 관련 공식 문서에서 생성된 결과가 그럴듯해 보여도 사실과 다를 수 있으므로 사용 전에 검증할 것을 안내하고 있습니다.

따라서 바이브 코딩에서 사람의 역할은 사라지는 것이 아닙니다.

오히려

"AI가 만든 결과가 정말 내가 원한 것인지 확인하는 능력"

이 중요해집니다.

특히 이런 서비스는 더욱 조심해야 한다

초보자가 연습용 홈페이지나 계산기를 만드는 것과

실제 고객의 돈과 개인정보를 다루는 서비스를 운영하는 것은 전혀 다른 문제입니다.

특히 다음 기능은 충분한 검토가 필요합니다.

• 회원가입

• 개인정보 저장

• 주소와 전화번호 저장

• 결제

• 카드정보 처리

• 금융정보

• 의료정보

• 중요한 회사 데이터

• 관리자 권한

• 파일 업로드

• 외부 시스템 연결

"AI가 만들어줬으니까 안전하겠지."

라고 생각해서는 안 됩니다.

중요한 서비스를 실제 고객에게 제공하려면 개발과 보안에 대한 전문적인 검토가 필요할 수 있습니다.

저작권도 확인해야 한다

AI에게

유명 쇼핑몰과 똑같이 만들어줘.

이 사이트 사진을 그대로 가져와 사용해줘.

라고 요청하는 것도 주의해야 합니다.

웹사이트의 이미지, 글, 로고, 디자인 요소에는 저작권이나 상표권 등의 문제가 있을 수 있습니다.

따라서 실제 서비스에는

• 직접 제작한 이미지

• 사용 허가를 받은 이미지

• 라이선스를 확인한 이미지

• 직접 작성한 글

• 사용할 권리가 있는 데이터

를 사용하는 것이 안전합니다.

바이브 코딩의 장점과 한계

바이브 코딩의 가장 큰 장점은

"개발을 몰라도 완벽한 서비스를 만들 수 있다."

가 아닙니다.

"아이디어를 실제로 시험해보는 데 필요한 첫 번째 장벽이 낮아졌다."

라고 이해하는 편이 좋습니다.

바이브 코딩 시대에는 코딩 공부가 필요 없을까?

그렇지는 않습니다.

다만 배우는 순서가 달라질 수 있습니다.

예전에는

HTML 공부
→ CSS 공부
→ JavaScript 공부
→ 데이터베이스 공부
→ 프로젝트 제작

처럼 공부가 먼저였다면,

바이브 코딩을 활용하면

작은 프로젝트 시작
→ 문제가 생김
→ 필요한 개념을 공부
→ 다시 프로젝트 수정

이라는 방식으로 배울 수도 있습니다.

예를 들어 AI가

"CSS를 수정했습니다."

라고 이야기한다면

CSS가 무엇이고 이 서비스에서 어떤 역할을 하는지 초보자가 이해할 수 있게 설명해줘.

라고 물어볼 수 있습니다.

"API를 연결해야 합니다."

라는 말이 나오면

API가 왜 필요한지 비유를 들어 설명해줘.

라고 다시 물어보면 됩니다.

이렇게 서비스를 만들면서 필요한 것을 하나씩 배우는 방식도 가능합니다.

그래도 알아두면 좋은 기본 개념

처음부터 완벽하게 공부할 필요는 없지만 다음 개념 정도는 조금씩 익혀두면 좋습니다.

HTML

웹페이지에 어떤 내용이 들어가는지를 정하는 기본 구조입니다.

집으로 비유하면 기둥과 방을 만드는 설계 구조에 가깝습니다.

CSS

글자 크기, 색상, 위치, 여백처럼 웹페이지의 디자인을 담당합니다.

JavaScript

버튼을 눌렀을 때 어떤 일이 발생하는지와 같은 동작을 담당합니다.

프론트엔드

사용자가 직접 보는 화면 부분입니다.

백엔드

화면 뒤에서 데이터 저장이나 로그인 같은 작업을 처리하는 부분입니다.

데이터베이스

서비스의 정보를 저장하는 공간입니다.

API

서로 다른 서비스가 기능과 데이터를 주고받는 연결 방법입니다.

Git

코드의 변경 내역을 관리하는 도구입니다.

실수했을 때 이전 상태로 돌아가거나 여러 사람이 함께 개발할 때 특히 중요합니다.

왕초보에게 추천하는 첫 프로젝트 조건

처음부터 대형 쇼핑몰이나 SNS를 만들려고 하지 않는 것이 좋습니다.

첫 프로젝트는 다음 조건을 만족하면 좋습니다.

• 주요 기능이 1~3개 정도

• 회원가입 없이 사용 가능

• 결제가 없음

• 개인정보를 많이 다루지 않음

• 외부 API가 없어도 기본 형태를 만들 수 있음

• 결과가 눈으로 바로 보임

• 잘못돼도 큰 문제가 발생하지 않음

왕초보가 도전하기 좋은 프로젝트 5가지

1. 여행 준비 체크리스트

기능:

• 준비물 추가

• 완료 체크

• 삭제

배울 수 있는 것:

• 버튼

• 입력창

• 목록

• 상태 변경

2. 간단한 가격 계산기

예를 들어 상품 가격과 수량을 입력하면 총액을 계산하는 서비스입니다.

기능:

• 가격 입력

• 수량 입력

• 자동 계산

배울 수 있는 것:

• 숫자 입력

• 계산

• 결과 출력

3. 우리 가게 상품 소개 페이지

기능:

• 상품 사진

• 상품명

• 가격

• 설명

• 카테고리

배울 수 있는 것:

• 웹페이지 구조

• 모바일 디자인

• 상품 목록

4. 나만의 맛집 목록

기능:

• 맛집 목록

• 지역 검색

• 음식 종류 검색

배울 수 있는 것:

• 검색

• 필터

• 카드 디자인

5. 나만의 링크 모음 사이트

자주 방문하는 사이트를 카테고리별로 정리하는 페이지입니다.

기능:

• 사이트 이름

• 설명

• 바로가기

• 카테고리 분류

배울 수 있는 것:

• 링크

• 목록

• 화면 구성

이 정도 프로젝트를 직접 만들어보면 바이브 코딩이 어떤 방식인지 빠르게 이해할 수 있습니다.

처음 프로젝트를 만들 때 사용할 수 있는 통합 프롬프트

아래 형식을 자신의 아이디어에 맞게 바꿔 사용할 수 있습니다.

나는 코딩을 한 번도 해본 적 없는 초보자야.

내가 만들고 싶은 것은 [서비스 이름 또는 목적]이야.

주요 사용자는 [사용자]야.

가장 중요한 기능은 다음 3가지야.

1. [기능 1]
2. [기능 2]
3. [기능 3]

필요한 화면은 다음과 같아.

1. 메인 화면
2. [필요한 화면]
3. [필요한 화면]

디자인은 [원하는 느낌]으로 만들어줘.

PC와 스마트폰에서 모두 사용할 수 있게 만들어줘.

나는 개발 용어를 잘 모르기 때문에
전문적인 용어가 나오면 바로 쉬운 말로 설명해줘.

처음부터 모든 기능을 한꺼번에 만들지 말고
가장 기본적인 화면부터 단계별로 만들어줘.

각 단계가 끝나면
무엇을 만들었는지와
내가 무엇을 확인해야 하는지 알려줘.

실제 개인정보, 결제, API 키 등
보안과 관련된 부분은 임의로 처리하지 말고
안전한 방법을 먼저 설명해줘.

이 한 문장도 추가하면 좋습니다.

기존에 정상적으로 작동하는 기능은 가능한 한 변경하지 말고
내가 요청한 부분만 수정해줘.

AI가 수정 과정에서 예상하지 않은 부분까지 바꾸는 것을 줄이는 데 도움이 될 수 있습니다.

서비스를 만들 때 테스트하는 방법

AI가 만든 서비스가 잘 작동하는지 실제 사용자처럼 눌러보는 것이 중요합니다.

예를 들어 맛집 서비스를 테스트한다면 다음과 같이 확인할 수 있습니다.

검색

서울 전체가 정상적으로 보이는가?

강남구를 선택하면 강남구만 나오는가?

존재하지 않는 검색 결과에는 안내 문구가 나오는가?

즐겨찾기

하트를 누르면 저장되는가?

다시 누르면 취소되는가?

새로고침 후에도 필요한 경우 저장 상태가 유지되는가?

상세 화면

모든 맛집을 눌렀을 때 상세 페이지가 열리는가?

뒤로 가기가 정상적으로 작동하는가?

모바일

글자가 읽기 어려울 정도로 작지 않은가?

버튼이 겹치지 않는가?

화면이 좌우로 잘리지 않는가?

이런 작업을 개발에서는 테스트라고 부릅니다.

AI에게도 테스트를 요청할 수 있지만 실제 사람이 직접 사용해보는 과정도 중요합니다.

서비스가 커진다면 버전 관리도 중요하다

처음에는

"AI에게 계속 수정해달라고 하면 되겠지."

라고 생각하기 쉽습니다.

하지만 어느 순간 이런 일이 생길 수 있습니다.

"어제까지 잘 됐는데 오늘 수정하고 나서 전체가 이상해졌다."

이럴 때 이전 정상 상태로 돌아갈 수 있어야 합니다.

개발에서는 Git 같은 버전 관리 도구를 많이 사용합니다.

쉽게 말하면

"프로젝트의 저장 지점을 계속 남겨두는 것"

이라고 생각하면 됩니다.

게임을 하면서 중요한 순간마다 저장하는 것과 비슷합니다.

AI 코딩을 본격적으로 시작한다면 Git과 GitHub의 기본 개념 정도는 익혀두는 것이 도움이 됩니다.

바이브 코딩에서도 결국 사람이 결정한다

AI에게 많은 일을 맡길 수 있게 되었지만 다음 질문에 대한 답은 사람이 정해야 합니다.

• 누구를 위한 서비스인가?

• 어떤 문제를 해결할 것인가?

• 어떤 기능이 정말 필요한가?

• 어떤 정보는 수집하지 않아도 되는가?

• 사용자가 불편한 부분은 무엇인가?

• 어떤 디자인이 서비스에 어울리는가?

• 공개해도 안전한 상태인가?

AI가 코드를 잘 작성하더라도 서비스의 목적까지 대신 결정해주는 것은 아닙니다.

그래서 바이브 코딩에서는 개발자뿐만 아니라 기획자, 디자이너, 자영업자, 직장인, 학생처럼 아이디어가 있는 사람도 직접 서비스를 만들어보는 경험을 하기 쉬워졌습니다.

바이브 코딩이라고 해도 반드시 사람이 확인해야 하는 것

서비스를 실제로 공개하기 전에 최소한 다음 내용은 확인해야 합니다.

1. 주요 기능이 실제로 정상 작동하는가?

2. PC와 스마트폰에서 정상적으로 보이는가?

3. 잘못된 데이터가 표시되지 않는가?

4. 개인정보가 불필요하게 노출되지 않는가?

5. API 키와 비밀번호가 코드에 공개되지 않는가?

6. 다른 사람의 글과 이미지를 허가 없이 사용하지 않았는가?

7. AI가 만든 코드에 치명적인 오류가 없는가?

8. 회원정보를 저장한다면 적절하게 보호되는가?

9. 관리자 기능이 일반 사용자에게 노출되지 않는가?

10. 결제가 포함된다면 충분한 보안 검토가 이루어졌는가?

중요한 것은

"화면이 보인다 = 서비스가 완성됐다"

가 아니라는 점입니다.

왕초보라면 첫 목표를 작게 잡아보자

바이브 코딩을 처음 시작한다면

"다음 카카오톡 같은 서비스를 만들어야지."

보다

"내가 생각한 기능 하나가 실제 웹브라우저에서 작동하는 것을 만들어보자."

라는 목표가 훨씬 좋습니다.

예를 들어 오늘의 목표를 이렇게 정할 수 있습니다.

"가격과 수량을 입력하면 총금액이 계산되는 웹페이지를 만들어 인터넷 주소로 접속해본다."

이 프로젝트 하나만 완성해도

아이디어 정하기
→ AI에게 설명하기
→ 화면 만들기
→ 기능 추가하기
→ 오류 수정하기
→ 테스트하기
→ 인터넷에 공개하기

라는 전체 개발 흐름을 경험하게 됩니다.

그다음 프로젝트에서 기능을 하나 더 추가하면 됩니다.

바이브 코딩을 시작하기 전에 기억할 것

바이브 코딩을

"AI가 알아서 모든 프로그램을 완벽하게 만들어주는 기술"

이라고 이해하면 실제로 사용하면서 실망할 가능성이 높습니다.

반대로

"개발자가 아니면 사용할 수 없는 도구"

라고 생각할 필요도 없습니다.

생성형 AI와 코딩 에이전트의 발전으로 사람이 일상적인 언어로 원하는 기능을 설명하고 프로그램을 만들고 수정하는 과정에 참여하기 쉬워진 것은 분명합니다.

하지만 좋은 결과를 만들기 위해서는 여전히 사람이 해야 할 일이 있습니다.

원하는 것을 구체적으로 설명하고,

AI가 만든 화면을 확인하고,

기능을 직접 눌러보고,

문제가 있으면 상황을 정확히 전달하고,

개인정보와 보안을 확인하고,

필요한 개발 지식을 조금씩 배워가는 과정입니다.

결국 바이브 코딩의 핵심은

"AI가 내 대신 모든 것을 만들어주는 것"

이라기보다

"내 아이디어를 AI에게 정확하게 설명하고, 만들어진 결과를 직접 확인하면서 조금씩 실제 서비스로 발전시키는 새로운 개발 방식"

에 더 가깝습니다.

코딩을 전혀 모른다면 처음부터 거대한 서비스를 만들 필요는 없습니다.

계산기 하나, 체크리스트 하나, 상품 소개 페이지 하나라도 직접 만들어보세요.

처음에는 AI가 사용하는 단어도 낯설고 오류 메시지도 어렵게 느껴질 수 있습니다.

하지만 모르는 용어가 나올 때마다

이 말을 코딩을 한 번도 해보지 않은 사람도 이해할 수 있도록 설명해줘.

라고 다시 물어보면 됩니다.

그리고 화면에서 내가 요청한 기능이 실제로 움직이는 순간부터 코딩은 더 이상 책 속에 있는 어려운 기술만은 아니게 됩니다.

아이디어가 있다면 이제 첫 질문은

"나는 코딩을 할 줄 아는가?"

보다

"가장 먼저 어떤 작은 기능부터 만들어볼 것인가?"

가 될 수 있습니다.