AI 웹앱 제작기 ⑨ 최종편

AI로 웹앱 만들기, 비개발자도 어디까지 할 수 있을까? 실제 제작 과정 총정리

AI를 활용하면 비개발자도 웹앱을 만들 수 있을까?

최근에는 ChatGPT, Claude와 같은 생성형 AI를 이용해 웹사이트나 웹앱을 직접 만들어 보는 사람이 많아졌습니다.

특히 바이브 코딩(Vibe Coding)이라는 개발 방식이 알려지면서 코드를 처음부터 직접 작성하지 않아도 AI와 대화하면서 프로그램을 만들 수 있다는 점에 관심이 높아졌습니다.

그렇다면 실제로는 어디까지 가능할까요?

간단한 화면 하나를 만드는 것과 사용자가 실제로 이용할 수 있는 웹앱을 만드는 것은 차이가 있습니다.

화면을 만들고 버튼을 배치하는 것만으로 끝나는 것이 아니라 데이터 저장, API 연결, 오류 처리, 버전 관리, 배포 등 여러 과정이 필요하기 때문입니다.

이번 AI 웹앱 제작기에서는 이 과정을 하나씩 살펴봤습니다.

처음에는 바이브 코딩이라는 개념부터 시작해 웹앱의 기본 구조를 알아보고, 개발 환경을 구성한 뒤 데이터베이스와 API를 연결했습니다. 이후 GitHub를 이용해 프로젝트를 관리하고 Vercel을 통해 인터넷에서 접속할 수 있는 형태로 배포하는 과정까지 살펴봤습니다.

이번 글에서는 지금까지의 내용을 하나의 흐름으로 정리해 보겠습니다.

핵심은 비개발자가 모든 개발 기술을 배워야 웹앱을 만들 수 있는 것은 아니라는 점입니다.

그렇다고 AI가 모든 개발 과정을 대신해 준다는 의미도 아닙니다.

AI를 활용해 웹앱을 만들기 위해서는 어떤 부분을 AI에게 맡길 수 있고, 어떤 부분은 사람이 직접 이해하고 판단해야 하는지를 구분하는 것이 중요합니다.

바이브코딩으로 웹앱 제작기

---

AI 웹앱 제작은 어디에서 시작할까?

웹앱 제작의 출발점은 코드를 작성하는 것이 아닙니다.

가장 먼저 필요한 것은 무엇을 만들 것인지 구체적으로 정의하는 것입니다.

예를 들어 "업무 관리 웹앱을 만들어 줘"라는 요청만으로는 AI가 정확한 결과를 만들기 어렵습니다.

사용자는 누구인지, 어떤 정보를 입력하는지, 어떤 화면이 필요한지, 데이터는 어디에 저장하는지, 어떤 결과를 보여줘야 하는지를 정해야 합니다.

따라서 AI를 활용한 개발에서는 요구사항을 구체적으로 만드는 과정이 중요합니다.

이를 간단하게 정리하면 다음과 같습니다.

아이디어
↓
사용자와 기능 정의
↓
화면 구성
↓
데이터 구조 설계
↓
코드 생성
↓
기능 연결
↓
테스트
↓
배포

AI는 이 과정의 여러 단계에서 도움을 줄 수 있지만, 무엇을 만들어야 하는지 결정하는 과정까지 자동으로 해결해 주는 것은 아닙니다.

오히려 요구사항이 구체적일수록 AI가 생성하는 결과도 확인하기 쉬워집니다.

---

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

이번 연재의 출발점이었던 개념이 바로 바이브 코딩입니다.

바이브 코딩은 자연어로 원하는 기능을 설명하고 생성형 AI의 도움을 받아 코드를 생성하거나 수정하는 개발 방식을 가리키는 표현입니다.

기존 개발에서는 개발자가 프로그래밍 언어의 문법과 구조를 직접 작성하는 비중이 컸다면, AI를 활용한 개발에서는 사람이 원하는 결과와 조건을 설명하고 AI가 코드 작성과 수정 작업을 지원하는 형태로 작업 방식이 달라질 수 있습니다.

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

"사용자가 정보를 입력할 수 있는 화면을 만들고 입력이 완료되면 결과 페이지로 이동하도록 만들어 줘."

AI는 이 요구사항을 바탕으로 필요한 코드 구조를 제안하거나 생성할 수 있습니다.

하지만 여기서 중요한 것이 있습니다.

AI가 코드를 만들어 준다는 것과 개발 과정이 필요 없어진다는 것은 같은 의미가 아닙니다.

AI가 만든 코드가 실제 요구사항에 맞는지 확인해야 하고, 실행되지 않는 부분이 있다면 오류를 찾아 수정해야 합니다.

따라서 바이브 코딩을 가장 현실적으로 이해하는 방법은 AI를 코드 작성과 문제 해결을 지원하는 개발 도구로 활용하는 방식이라고 보는 것입니다.

---

웹앱은 어떤 구조로 동작할까?

웹앱을 처음 접하면 화면만 보이기 때문에 하나의 프로그램처럼 느껴집니다.

하지만 실제로는 여러 구성 요소가 서로 연결되어 동작합니다.

가장 기본적인 구조는 다음과 같이 이해할 수 있습니다.

사용자
 ↓
웹 브라우저
 ↓
프론트엔드
 ↓
서버 / API
 ↓
데이터베이스

프론트엔드란?

프론트엔드는 사용자가 직접 보는 화면과 상호작용을 담당하는 영역입니다.

버튼, 입력창, 메뉴, 결과 화면 등이 대표적인 예입니다.

백엔드란?

백엔드는 사용자가 직접 보지 않는 곳에서 데이터를 처리하거나 필요한 작업을 수행하는 영역입니다.

로그인 정보를 확인하거나 데이터를 저장하고 조회하는 작업 등이 여기에 해당합니다.

데이터베이스란?

데이터베이스는 웹앱에서 사용하는 데이터를 저장하고 관리하는 시스템입니다.

회원 정보, 게시글, 주문 정보, 설정값 등 웹앱에서 계속 보관해야 하는 데이터를 저장할 수 있습니다.

이 구조를 이해하면 웹앱을 만드는 과정에서 왜 데이터베이스가 필요하고, 왜 API가 필요한지도 자연스럽게 연결됩니다.

---

Supabase는 왜 사용했을까?

이번 연재에서는 데이터베이스를 설명하면서 Supabase를 다뤘습니다.

처음 웹앱을 만드는 사람에게 데이터베이스 서버를 직접 구축하고 관리하는 과정은 진입장벽이 될 수 있습니다.

Supabase와 같은 서비스를 사용하면 데이터베이스를 비롯해 인증 등 웹앱에 필요한 백엔드 기능을 비교적 간단하게 구성할 수 있습니다.

여기서 중요한 것은 특정 서비스를 반드시 사용해야 한다는 것이 아닙니다.

핵심은 웹앱의 데이터를 저장할 공간이 필요하고, 애플리케이션이 그 데이터에 접근할 수 있는 구조가 필요하다는 것입니다.

즉,

웹앱
 ↓
데이터 요청
 ↓
백엔드 / API
 ↓
데이터베이스

라는 구조를 이해하는 것이 먼저입니다.

Supabase는 이러한 구조를 실제 프로젝트에서 경험해 볼 수 있는 하나의 선택지라고 볼 수 있습니다.

---

API를 이해하면 웹앱의 연결 구조가 보인다

웹앱을 만들면서 또 하나 반드시 만나게 되는 개념이 API입니다.

API는 서로 다른 프로그램이 기능이나 데이터를 주고받을 수 있도록 정의된 인터페이스입니다.

예를 들어 웹앱에서 데이터를 조회한다고 하면 다음과 같은 과정이 이루어질 수 있습니다.

웹앱
 ↓
API 요청(Request)
 ↓
서버
 ↓
데이터 처리
 ↓
API 응답(Response)
 ↓
웹앱

AI 서비스와 연결할 때도 마찬가지입니다.

웹앱에서 사용자의 입력을 전달하고 외부 AI 서비스가 결과를 반환하면, 웹앱은 그 결과를 받아 사용자에게 보여줍니다.

따라서 API를 이해한다는 것은 단순히 특정 코드를 외우는 것이 아니라 프로그램과 프로그램이 어떻게 연결되는지를 이해하는 것입니다.

---

JSON은 왜 등장할까?

API를 설명하다 보면 자연스럽게 JSON이라는 형식을 만나게 됩니다.

JSON은 데이터를 구조화하여 표현하기 위한 텍스트 기반 형식입니다.

예를 들어 사용자 정보를 다음과 같이 표현할 수 있습니다.

{
  "name": "사용자",
  "age": 30
}

이 구조에서는 name과 age가 데이터의 이름이고 각각의 값이 연결되어 있습니다.

API를 통해 데이터를 주고받을 때 JSON이 사용되는 경우가 많기 때문에 웹앱을 개발하다 보면 JSON을 자주 만나게 됩니다.

또한 AI가 생성한 코드에서도 JSON이 반복적으로 등장합니다.

따라서 JSON을 이해하면 AI가 작성한 코드에서 데이터가 어떤 형태로 이동하는지 파악하기가 쉬워집니다.

---

Git과 GitHub는 왜 필요한가?

웹앱의 코드가 계속 수정되면 새로운 문제가 발생할 수 있습니다.

기능을 추가하다가 기존 기능이 작동하지 않을 수도 있고, 여러 파일을 수정하면서 어느 부분에서 문제가 발생했는지 확인하기 어려워질 수도 있습니다.

이때 사용하는 것이 Git입니다.

Git은 프로젝트의 변경 이력을 관리하는 버전 관리 시스템입니다.

그리고 GitHub는 Git으로 관리하는 프로젝트를 온라인에서 저장하고 공유할 수 있도록 제공하는 서비스입니다.

둘은 같은 것이 아닙니다.

Git
→ 변경 이력 관리

GitHub
→ Git 프로젝트의 온라인 저장 및 협업

이 차이를 이해하면 GitHub를 단순한 코드 저장 사이트로만 생각하지 않게 됩니다.

특히 AI를 활용한 웹앱 개발에서는 AI가 생성한 코드가 여러 번 수정되기 때문에 변경 사항을 관리하는 것이 더욱 중요합니다.

---

localhost와 Vercel은 어떤 차이가 있을까?

웹앱을 처음 만들 때는 대부분 localhost에서 실행하게 됩니다.

localhost는 자신의 컴퓨터를 가리키는 주소입니다.

예를 들어 다음과 같은 주소가 있다면,

http://localhost:3000

현재 실행되고 있는 웹앱이 자신의 컴퓨터에서 동작하고 있다는 의미입니다.

하지만 localhost에서 실행되는 웹앱은 기본적으로 개발자의 로컬 환경에서 테스트하기 위한 것입니다.

다른 사람이 인터넷을 통해 접속할 수 있는 서비스로 만들려면 배포 과정이 필요합니다.

여기에서 Vercel과 같은 배포 플랫폼을 사용할 수 있습니다.

---

Vercel을 이용하면 무엇이 달라질까?

Vercel은 웹 애플리케이션을 배포하고 운영할 수 있도록 지원하는 클라우드 플랫폼입니다.

GitHub와 연결하면 코드가 변경될 때 새로운 버전을 빌드하고 배포하는 과정을 자동화할 수 있습니다.

전체적인 흐름은 다음과 같습니다.

VS Code에서 코드 수정
↓
Git으로 변경사항 기록
↓
GitHub에 업로드
↓
Vercel이 변경사항 감지
↓
프로젝트 Build
↓
웹앱 배포
↓
인터넷에서 접속

이 구조를 이해하면 "코드를 수정했는데 웹사이트도 자동으로 바뀌는 이유"를 이해할 수 있습니다.

개발자가 직접 서버에 파일을 복사하는 대신 GitHub와 배포 플랫폼을 연결하여 배포 과정을 자동화할 수 있는 것입니다.

---

결국 비개발자는 어디까지 알아야 할까?

여기서 가장 중요한 질문이 남습니다.

비개발자가 AI로 웹앱을 만들려면 프로그래밍을 어디까지 공부해야 할까요?

모든 프로그래밍 문법을 처음부터 공부해야 하는 것은 아닙니다.

하지만 AI에게 작업을 맡기기 위해서도 기본적인 구조는 이해하는 것이 좋습니다.

이번 연재에서 다룬 내용을 기준으로 하면 다음 정도가 핵심입니다.

1. 웹앱

웹 브라우저에서 실행되는 애플리케이션의 기본 구조를 이해합니다.

2. 프론트엔드

사용자가 보는 화면을 담당한다는 것을 이해합니다.

3. 백엔드

서버에서 데이터를 처리하는 영역이라는 것을 이해합니다.

4. 데이터베이스

웹앱에서 필요한 데이터를 저장하고 관리하는 시스템이라는 것을 이해합니다.

5. API

프로그램끼리 데이터를 주고받는 인터페이스라는 것을 이해합니다.

6. JSON

API를 통해 전달되는 데이터를 표현하는 대표적인 형식이라는 것을 이해합니다.

7. Git

코드의 변경 이력을 관리하는 도구라는 것을 이해합니다.

8. GitHub

Git 프로젝트를 온라인에서 저장하고 관리하는 플랫폼이라는 것을 이해합니다.

9. localhost

개발 중인 웹앱을 자신의 컴퓨터에서 실행하는 환경이라는 것을 이해합니다.

10. Vercel

웹앱을 인터넷에서 실행할 수 있도록 배포하는 플랫폼이라는 것을 이해합니다.

이 정도의 개념만 갖추어도 AI에게 코드 생성을 요청할 때 이전과는 다른 방식으로 질문할 수 있습니다.

---

AI가 잘하는 것과 사람이 해야 하는 것

AI를 활용한 개발에서 가장 중요한 것은 역할을 구분하는 것입니다.

AI는 코드를 생성하고, 기존 코드를 수정하고, 오류 메시지를 분석하고, 새로운 기능을 구현하는 데 도움을 줄 수 있습니다.

반면 사람은 무엇을 만들 것인지 결정하고 결과물이 요구사항에 맞는지 확인해야 합니다.

예를 들어 다음과 같은 요청은 AI가 지원하기 좋은 작업입니다.

"현재 로그인 화면에 이메일과 비밀번호 입력창을 추가하고 로그인 성공 시 메인 화면으로 이동하도록 수정해 주세요."

하지만 다음과 같은 결정은 프로젝트를 만드는 사람이 해야 합니다.

"우리 서비스에서 로그인 기능이 정말 필요한가?"

AI는 구현 방법을 제안할 수 있지만 서비스에 어떤 기능이 필요한지에 대한 최종 판단까지 대신할 수는 없습니다.

또한 AI가 만든 코드가 항상 올바르게 동작한다고 가정해서도 안 됩니다.

실행 결과를 확인하고 오류가 발생하면 원인을 찾아 수정해야 합니다.

따라서 AI를 활용한 개발에서 중요한 능력은 코드를 한 줄도 틀리지 않고 직접 작성하는 능력만이 아닙니다.

문제를 정의하고, AI에게 정확히 요청하고, 결과를 검증하고, 필요한 부분을 다시 수정하는 능력도 중요합니다.

---

AI 웹앱 제작의 가장 큰 변화는 무엇일까?

AI를 활용한 개발에서 가장 큰 변화는 개발 과정에서 사람이 담당하는 역할의 일부가 달라진다는 점입니다.

과거에는 개발자가 직접 작성해야 했던 코드의 상당 부분을 AI가 생성할 수 있게 되었습니다.

하지만 그렇다고 개발에 필요한 모든 지식이 사라지는 것은 아닙니다.

오히려 기술의 이름과 역할을 이해하는 능력이 중요해질 수 있습니다.

예를 들어 API 오류가 발생했을 때 API가 무엇인지 알고 있다면 AI에게 다음과 같이 구체적으로 질문할 수 있습니다.

"API 요청은 정상적으로 보내지는 것 같은데 응답 상태 코드가 401입니다. 인증 과정과 API Key 전달 부분을 확인해 주세요."

반대로 API가 무엇인지조차 모른다면 오류 메시지를 AI에게 그대로 전달하는 것 이상의 문제 해결이 어려울 수 있습니다.

즉, AI가 코드를 작성해 주더라도 문제를 설명할 수 있는 사람이 되는 것이 중요합니다.

---

비개발자도 웹앱을 만들 수 있다는 말의 의미

"비개발자도 웹앱을 만들 수 있다"는 표현을 정확하게 이해할 필요가 있습니다.

이 말은 개발 지식이 전혀 없어도 복잡한 서비스를 완성할 수 있다는 뜻이 아닙니다.

보다 현실적인 의미는 AI를 활용하면서 필요한 개발 지식을 단계적으로 배우고, 기존보다 낮은 진입장벽으로 웹앱 제작에 접근할 수 있다는 것입니다.

간단한 웹앱이나 개인 프로젝트를 시작하는 데 필요한 코드 작성 부담은 AI를 통해 줄어들 수 있습니다.

또한 오류가 발생했을 때 오류 메시지를 AI에게 전달하고 원인을 설명받거나 수정 방법을 제안받을 수도 있습니다.

이러한 방식으로 개발을 진행하면 처음부터 모든 기술을 완벽하게 공부한 뒤 프로젝트를 시작하는 것이 아니라, 프로젝트를 만들면서 필요한 개념을 하나씩 이해하는 학습 방식도 가능합니다.

다만 서비스가 실제 사용자에게 제공되는 수준으로 발전하면 보안, 개인정보 보호, 성능, 장애 대응, 테스트, 유지보수 등 더 많은 전문 지식이 필요해질 수 있습니다.

따라서 AI 웹앱 제작의 진입장벽이 낮아지는 것과 전문적인 소프트웨어 개발이 필요 없어지는 것은 구분해야 합니다.

---

이번 AI 웹앱 제작기에서 확인한 전체 흐름

지금까지의 내용을 하나의 그림으로 정리하면 다음과 같습니다.

아이디어
   ↓
바이브 코딩
   ↓
AI에게 요구사항 전달
   ↓
개발 환경 구성
   ↓
웹앱 코드 생성
   ↓
데이터베이스 연결
   ↓
API 연결
   ↓
JSON 데이터 처리
   ↓
Git으로 버전 관리
   ↓
GitHub에 저장
   ↓
Vercel 배포
   ↓
인터넷에서 웹앱 실행

처음에는 각각의 용어가 서로 다른 기술처럼 보입니다.

하지만 하나씩 연결해 보면 실제 웹앱을 구성하는 과정에서 서로 역할이 나뉘어 있을 뿐입니다.

바이브 코딩은 개발을 시작하는 방법이고, 데이터베이스와 API는 데이터를 처리하는 방법이며, Git과 GitHub는 코드를 관리하는 방법이고, Vercel은 완성된 웹앱을 인터넷에 공개하는 방법입니다.

이 전체 구조를 이해하면 AI가 생성한 코드가 길어졌을 때도 각각의 부분이 어떤 역할을 하는지 파악하기 쉬워집니다.

---

마무리

AI를 활용한 웹앱 제작은 이제 코드를 처음부터 직접 작성하는 방법만을 의미하지 않습니다.

아이디어를 구체화하고, AI에게 구현 방법을 요청하고, 생성된 코드를 실행해 보고, 오류를 확인하고, 필요한 기능을 다시 요청하는 방식으로도 하나의 웹앱을 만들어 갈 수 있습니다.

이번 연재에서는 이 과정에서 자주 등장하는 핵심 개념을 하나씩 살펴봤습니다.

바이브 코딩에서 시작해 웹앱의 구조를 이해하고, 데이터베이스인 Supabase를 살펴봤습니다. Markdown과 README.md를 통해 프로젝트 문서를 이해했고, Node.js와 VS Code를 이용한 개발 환경, localhost와 Vercel을 통한 실행과 배포, Git과 GitHub를 통한 버전 관리까지 연결했습니다.

마지막으로 API와 JSON을 통해 웹앱이 데이터를 주고받는 원리도 살펴봤습니다.

결국 AI 웹앱 제작에서 가장 중요한 것은 모든 코드를 직접 작성하는 것보다 웹앱이 어떤 구조로 구성되어 있고 각 기술이 어떤 역할을 하는지를 이해하는 것입니다.

AI는 코드를 생성하는 도구가 될 수 있습니다.

하지만 무엇을 만들 것인지 결정하고, 결과가 제대로 동작하는지 확인하고, 문제가 발생했을 때 원인을 찾아 다시 수정하는 과정은 여전히 중요합니다.

따라서 앞으로 AI를 활용한 개발을 시작한다면 처음부터 모든 개발 기술을 공부하려고 하기보다 만들고 싶은 것을 정한 뒤 필요한 개념을 하나씩 이해하는 방식으로 접근하는 것도 하나의 현실적인 방법입니다.

이번 글을 마지막으로 AI 웹앱 제작기 연재는 여기서 마무리합니다.

이후에는 웹앱 제작 과정 자체보다는 AI를 실제 업무와 콘텐츠 제작에 어떻게 활용할 수 있는지, 그리고 AI를 사용할 때 알아두면 좋은 실전 주제를 별도의 글로 다룰 수 있습니다.

---

FAQ

Q. 비개발자도 AI를 이용해 웹앱을 만들 수 있나요?

가능합니다. AI를 이용하면 코드 작성과 수정 과정의 진입장벽을 낮출 수 있습니다. 다만 웹앱의 구조와 데이터 처리, API, 배포 등의 기본 개념을 이해하면 AI를 훨씬 효과적으로 활용할 수 있습니다.

Q. 프로그래밍을 전혀 몰라도 바이브 코딩을 할 수 있나요?

간단한 프로젝트라면 시작할 수 있습니다. 그러나 프로젝트가 복잡해질수록 오류의 원인을 이해하고 AI에게 정확한 수정 요청을 하기 위해 기본적인 개발 개념이 필요합니다.

Q. AI가 만든 코드는 그대로 사용해도 되나요?

그렇게 가정해서는 안 됩니다. 생성된 코드는 실제 환경에서 실행하고 요구사항에 맞게 동작하는지 확인해야 합니다. 특히 보안, 인증, 개인정보와 관련된 코드는 별도의 검토가 필요합니다.

Q. 웹앱을 만들려면 GitHub가 꼭 필요한가요?

모든 웹앱에 GitHub가 반드시 필요한 것은 아닙니다. 하지만 Git을 이용한 버전 관리와 GitHub를 이용한 프로젝트 저장 및 협업은 AI 기반 개발에서도 매우 유용합니다.

Q. Vercel을 사용하면 웹앱이 바로 서비스가 되나요?

Vercel을 이용하면 웹앱을 인터넷에서 접근할 수 있는 형태로 배포할 수 있습니다. 다만 데이터베이스, 인증, 외부 API 등 필요한 기능이 있다면 각각의 구성 요소도 별도로 연결하고 설정해야 합니다.

Q. AI 웹앱 제작을 시작하려면 무엇부터 공부해야 하나요?

처음부터 프로그래밍 언어 전체를 공부할 필요는 없습니다. 웹앱의 기본 구조, 프론트엔드와 백엔드, 데이터베이스, API, JSON, Git, GitHub, 배포 정도의 개념부터 이해하면 AI와 함께 프로젝트를 진행하는 데 도움이 됩니다.

---

이번 글 핵심 요약

• AI를 활용하면 비개발자도 웹앱 제작을 시작할 수 있습니다.
• 바이브 코딩은 자연어를 이용해 AI의 코드 생성과 수정을 활용하는 개발 방식입니다.
• 웹앱은 프론트엔드, 백엔드, 데이터베이스, API 등 여러 구성 요소가 연결되어 동작합니다.
• API는 프로그램 사이의 데이터와 기능을 연결하는 인터페이스입니다.
• JSON은 데이터를 구조화해 주고받기 위한 대표적인 형식입니다.
• Git과 GitHub는 프로젝트의 변경 사항을 관리하고 저장하는 데 활용됩니다.
• Vercel과 같은 배포 플랫폼을 이용하면 웹앱을 인터넷에서 실행할 수 있습니다.
• AI가 코드를 작성할 수 있어도 요구사항 정의와 결과 검증은 여전히 중요합니다.

2026.07.21 - [AI 활용] - 웹앱은 어떻게 동작할까? 프론트엔드와 백엔드를 이해하면 개발이 쉬워진다

웹앱은 어떻게 동작할까? 프론트엔드와 백엔드를 이해하면 개발이 쉬워진다

2026.07.09 - [AI 활용] - AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다

AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다