코딩 없이 AI로 웹서비스 만들기: 툴 선택 & 첫 런칭 편 (1부)

요즘 ‘바이브 코딩’이라는 말 들어보셨나요? AI에게 말만 하면 웹사이트나 앱을 뚝딱 만들어준다는 건데요.

“나도 한번 해볼까” 싶다가도, 막상 시작하려면 배울 게 너무 많아서 엄두가 안 날 때가 많습니다. 처음에는 잘 되는 것 같다가도, 무작정 AI에게 맡기다 보면 어느 순간 벽에 부딪히게 되죠.

오늘은 코딩을 전혀 모르지만 AI를 활용해서 나만의 서비스를 만들고 싶은 분들을 위해, 전체적인 흐름과 꼭 알아야 할 툴들을 함께 정리해봤습니다.

1. AI 코딩 툴이란?

AI 코딩 툴은 코드를 직접 입력하는 대신, AI에게 원하는 것을 말로 설명하면 AI가 대신 코드를 작성해주는 도구입니다.

크게 두 종류로 나눌 수 있어요. 단, 이 구분은 공식 분류가 아니며, 각 서비스가 빠르게 발전하면서 그 경계도 점점 흐려지고 있다는 점을 참고해주세요.

바이브 코딩 툴은 배우기 쉽지만, 만들고 싶은 기능이 복잡해지면 한계에 부딪히기 쉽습니다. 개인적으로 사용하거나 취미로 만드는 경우라면 충분하지만, 본격적인 서비스를 만들 계획이라면 AI 코딩 IDE인 Cursor, Claude Code, Google Antigravity 같은 툴을 활용해보세요.

① Cursor

AI 코딩 툴의 ‘원조’라고 볼 수 있는 서비스입니다.
Gemini, Claude, GPT, Grok 등 다양한 AI 모델을 연결해서 사용할 수 있다는 점이 큰 장점이에요. 가장 널리 쓰이는 만큼 한국어 학습 자료도 많습니다.
무료로 체험해볼 수 있지만 기능이 매우 제한적이라, 제대로 활용하려면 최소한 Pro 플랜(월 $20)이 필요합니다.

🌐 공식 사이트: https://cursor.com

② Claude Code

Claude로 유명한 Anthropic에서 만든 AI 코딩 툴입니다.

현재 개발자들 사이에서 가장 주목받는 도구이기도 해요. 세 가지 툴 중 가격이 가장 높고 사용법도 다소 어렵지만, 그만큼 성능이 뛰어납니다.
Pro 플랜(월 $20)부터 사용할 수 있지만, 본격적으로 활용하려면 Max 5x 플랜(월 $100)이 좋습니다.

🌐 공식 사이트: https://claude.com/product/claude-code

③ Google Antigravity

가장 최근에 출시된 Google의 AI 코딩 툴입니다.

Cursor와 Claude Code의 장점을 잘 조합한 툴로, Google 서비스와의 연동이 원활하다는 점이 특징이에요. 현재 가성비 면에서 가장 뛰어나다는 평가를 받고 있으며, Gemini 구독 플랜으로 바로 사용할 수 있어 이미 Google AI를 쓰고 있는 분들에게 특히 추천합니다.

🌐 공식 사이트: https://antigravity.google/

---

2. 내가 원하는 앱을 만들기 위해 꼭 필요한 것

AI 코딩 툴에서 평소에 AI와 대화하듯 입력해보세요.

​“할 일 목록을 관리하는 간단한 앱을 만들어줘. 항목 추가, 완료 체크, 삭제 기능이 있어야 해.”​

몇 분 만에 실제로 작동하는 앱이 만들어집니다. 신기하죠?
하지만 여기서 꼭 짚고 넘어가야 할 중요한 포인트가 있습니다.

2-1. AI 개발의 핵심은 코딩이 아니라 ‘기획’

아무리 실력 좋은 시공업체라도, 설계도 없이 “좋은 집 하나 지어줘”라고만 하면 내가 원하는 집이 나오지 않습니다. 몇 층짜리인지, 방은 몇 개인지, 누가 살 건지, 예산은 얼마인지 — 이런 기획과 설계가 먼저 있어야 시공업체가 제대로 된 건물을 지을 수 있죠.

AI 코딩도 마찬가지입니다.

AI는 우리가 무엇을 원하는지 스스로 알지 못합니다. 게다가 지시하지 않은 부분은 임의로 추측해서 채워버리는 경향이 있어요. 그래서 명확한 지시, 즉 탄탄한 기획이 결과물의 품질을 결정합니다.

2-2. 좋은 기획에 꼭 들어가야 할 내용

AI에게 좋은 지시를 내리려면, 먼저 내가 만들고 싶은 것을 명확하게 정리해야 합니다.
기획은 상세할수록 좋지만, 최소한 아래 다섯 가지는 꼭 포함되어야 합니다.

1. 누가 쓰는 앱인가? — 타겟 사용자

2. 어떤 기능이 있어야 하는가? — 기능 목록

3. 어떤 느낌이어야 하는가? — 디자인 방향

4. 어떤 화면들이 필요한가? — 페이지 구성

5. 어떤 기술이 적합한가? — 위 내용에 맞는 기술 선택

이 내용을 문서로 정리해서 AI에게 함께 전달하면, AI는 훨씬 정확하고 일관된 결과물을 만들어냅니다.

반대로, 이런 준비 없이 “그냥 만들어줘”로 시작하면 AI가 멋대로 추측해서 만들기 때문에, 처음에는 잘 되는 것처럼 보여도 나중에 수정하는 데 훨씬 더 많은 시간이 걸리죠.

코딩 전 기획 문서에 들이는 시간과 노력이 클수록, 실제 개발 시간은 짧아집니다.

물론 이 문서를 처음부터 끝까지 혼자 작성할 필요는 없습니다.
내가 원하는 것을 AI에게 설명해서 초안을 만들고, 읽으면서 수정·보완해 나가면 코딩 지식이 없어도 충분히 좋은 기획 문서를 완성할 수 있어요. 특히 ​“5. 어떤 기술이 적합한가?” 항목은, 앞의 1~4를 먼저 작성한 뒤 AI에게 추천을 받아서 결정하는 것이 좋은 방법입니다.

---

3. AI 코딩 툴을 더 똑똑하게 만드는 두 가지 비법

AI 코딩 툴 자체도 강력하지만, 두 가지 기능을 활용하면 훨씬 더 똑똑하게 작동합니다.

① MCP — AI에게 ‘손’을 달아주는 것

AI 코딩 툴은 코드를 잘 작성해주지만, 기본적으로는 자신이 학습한 지식 범위 내에서만 작동합니다.
문제는 AI의 지식이 항상 최신이 아니라는 점이에요. 개발에 사용하는 각종 툴과 기술은 계속해서 업데이트되는데, AI는 예전 버전을 기준으로 코드를 작성해서 오류가 발생하는 경우가 종종 있습니다.

MCP(Model Context Protocol)를 연결하면, AI가 외부 서비스나 최신 문서에 직접 접근하여 더 정확한 코드를 작성할 수 있습니다. 쉽게 말해, AI와 외부 서비스를 이어주는 연결 통로 같은 역할을 합니다.

용도에 따라 다양한 MCP가 있는데, 대표적인 세 가지를 소개할게요.

• Context7 MCP — AI가 내 프로젝트에서 사용하는 기술의 최신 공식 문서를 직접 읽고 코드를 작성해줍니다.

• shadcn/ui MCP — 버튼, 입력창, 팝업 같은 화면 요소의 디자인 가이드를 AI가 직접 참조해서, 페이지마다 디자인이 들쭉날쭉하지 않고 일관되게 만들어줍니다.

• Notion MCP — AI가 Notion에서 직접 페이지를 읽거나 새로운 내용을 작성할 수 있습니다. 예를 들어 기획 문서를 Notion에 정리해두면, AI가 코딩 중에도 그 내용을 직접 참조하거나 업데이트할 수 있어요.

② Skill — AI에게 ‘매뉴얼’을 주는 것

AI에게 같은 종류의 작업을 맡겨도 할 때마다 결과물이 들쭉날쭉했던 경험, 있으신가요?

예를 들어 “로그인 페이지 만들어줘”라고 했더니 어제는 깔끔하게 나왔는데, 오늘은 전혀 다른 스타일로 만들어주는 거예요. AI는 대화가 새로 시작될 때마다 이전에 어떤 규칙으로 작업했는지 기억하지 못하기 때문입니다.

Skill은 바로 이 문제를 해결해줍니다. “우리 프로젝트에서는 항상 이 규칙을 따라”라는 기준을 문서로 만들어두면, AI가 매번 그 기준에 맞춰 일관된 퀄리티로 작업합니다.

예를 들면:

• “새 페이지는 항상 Noto Sans 폰트를 쓰고, 배경은 크림색으로 디자인할 것”

• “오류가 발생하면 사용자에게 이런 형태의 안내 메시지를 보여줄 것”

• “코드 파일은 항상 이 폴더 구조에 맞춰 정리할 것”

쉽게 말해, AI에게 ‘업무 매뉴얼’을 주는 것입니다.
사람도 매뉴얼이 있어야 일관된 결과를 낼 수 있듯, AI도 마찬가지예요.

Skill에 대한 자세한 내용은 아래 글을 참고:
단순한 “프롬프트”는 NO! 이제 나만의 “스킬”을 만들자

---

4. 내가 만든 앱을 테스트하기

AI가 코드를 만들어주면, 인터넷에 공개하기 전에 내 컴퓨터에서 먼저 확인해봐야 합니다.
이것을 로컬 환경 테스트라고 해요.

① 로컬 테스트가 필요한 이유

• 인터넷에 공개한 뒤 오류를 발견하면, 이미 사용자들이 불편을 겪고 다시는 돌아오지 않을 수도 있습니다.

• 로컬에서 먼저 확인하면 수정 → 확인 → 수정을 빠르게 반복할 수 있어요.

• 인터넷 배포는 시간이 걸리지만, 로컬 테스트는 즉시 결과를 확인할 수 있습니다.

② 어떻게 하나요?

AI 코딩 IDE로 만든 프로젝트는 보통 터미널(명령어를 입력하는 검은 화면)에서 명령어 한 줄로 실행할 수 있습니다. AI에게 “로컬 서버 실행해줘”라고 부탁할 수도 있지만, 보안상의 이유로 AI가 직접 실행하지 못하는 경우도 있으니 AI에게 물어보면서 도전해보세요.

npm run dev

이 명령어를 입력하면 내 컴퓨터에서 앱이 실행되고, 브라우저에서 localhost:3000 같은 주소로 접속하면 바로 확인할 수 있어요.

③ 테스트할 때 확인해야 할 것들

처음에는 “어디서부터 확인해야 하지?” 막막할 수 있어요.
아래 체크리스트를 순서대로 따라가 보세요.

• 모든 페이지가 정상적으로 뜨는가?

• 버튼, 양식, 링크가 제대로 작동하는가?

• 입력한 데이터가 저장되고 불러와지는가?

• 잘못된 값을 입력해도 앱이 멈추지 않는가?

• 모바일 화면에서도 레이아웃이 깨지지 않는가?

• 이미지와 아이콘이 정상적으로 보이는가?

• 뒤로 가기 버튼이 예상대로 작동하는가?

• 페이지 로딩 속도가 너무 느리지 않는가?

• 폰트 종류와 크기가 모든 페이지에서 일관된가?

• 오류 메시지가 없는가?

---

5. 내가 만든 앱을 인터넷에 공개하기

AI 코딩 툴로 만든 앱은 처음에는 내 컴퓨터 안에서만 실행됩니다.

배포(Deploy)란 앱을 인터넷에 올려서 누구나 접속할 수 있도록 공개하는 과정입니다.
배포를 쉽게 도와주는 서비스들이 많은데, 대표적인 것들을 알아봅시다.

① GitHub — 코드 보관함

내가 만든 코드를 저장하고 관리하는 공간입니다.
Google Drive가 문서를 보관하듯, GitHub는 코드를 보관하는 곳이에요. 아래에서 소개하는 배포 서비스들은 대부분 GitHub에 올린 코드를 가져와서 인터넷에 공개하기 때문에, GitHub 계정을 만들고 코드를 올려두는 것이 첫 번째 단계입니다.

• 🌐 공식 사이트: https://github.com

• 💰 요금: 무료

• 💡 특징: AI 코딩 IDE에서 GitHub 연동을 지원하므로, AI에게 “GitHub에 올려줘”라고 하면 됩니다.

② Vercel — 가장 쉬운 배포

코드를 올리면 서버 설정 없이 바로 인터넷에서 접속 가능한 웹사이트로 만들어주는 서비스입니다.
사용 방법도 간단해서 처음 한 번만 GitHub과 연동시키면 자동으로 배포할 수 있습니다.

• 🌐 공식 사이트: https://vercel.com

• 💰 요금: 무료 플랜으로 개인 프로젝트에 충분

• 💡 특징: GitHub과 연동하면 코드를 수정할 때마다 자동으로 다시 배포. 도메인 연결도 간편해요.

③ Cloudflare — 빠르고 안전한 배포

내 사이트를 전 세계 어디서나 빠르게 불러올 수 있도록 해주고, 보안을 포함한 다양한 기능을 제공합니다. 실제로 많은 대기업에서도 사용하는 서비스예요.

• 🌐 공식 사이트: https://cloudflare.com

• 💰 요금: 무료 플랜으로 기본 기능 이용 가능

• 💡 특징: 전 세계에 서버를 두고 있어서, 여러 나라의 사용자에게 빠르게 서비스할 때 적합합니다.

④ Railway — 더 복잡한 처리가 필요할 때

앱이 단순한 화면 표시를 넘어, 데이터를 저장하거나 복잡한 처리가 필요할 때 별도의 서버를 운영할 수 있는 서비스입니다.

• 🌐 공식 사이트: https://railway.app

• 💰 요금: 월 $5 크레딧 무료 제공

• 💡 특징: 서버 배포가 간편하고, 다양한 프로그래밍 언어를 지원합니다.

---

6. 오늘의 요약

AI 시대에 필요한 건 무엇을 만들지 아는 것과 그것을 AI에게 제대로 전달하는 것입니다.
모른다고 무작정 AI에게 맡기지 말고, 하나씩 물어보며 익혀나가세요. 최종적인 판단은 언제나 스스로 내리는 것이 중요합니다.

오늘 소개한 흐름을 정리하면 이렇습니다.