바이브코딩 주니어, MCP, API

 

오늘의 학습 범위

1. part 1 > ch0 >
   1. 바이브코딩 수익화의 3가지 본질
2. part 1 > ch3 >
   1. ai가 외부 세계(도구 데이터)와 연결돼야 하는 이유
   2. 비개발자를 위한 MCP 핵심 개념과 사례로 이해하기
   3. 내 일상 속에서 MCP로 해결 가능한 문제 발견하기
   4. 실습) 구글 MCP로 나만의 회의 도우미 만들기 1, 2

 

---

 

바이브코딩과 MCP, API는 각각 다른 역할을 하지만, 서로 연결되면 AI 기반 프로덕트 제작 자동화나 1인 개발 환경 최적화라는 공통 지점에서 강력한 시너지를 낼 수 있다. 아래는 그냥 강의 내용 요약을 못해서 GPT 통해서 개념을 파악한 내용이다.

 

 

바이브코딩 (VibeCoding)

바이브코딩은 Cursor, GPT, Claude, MCP 등 AI 도구를 결합해 한 사람이 기획부터 개발, 배표까지 완성할 수 있는 1인 개발 시스템'을 구축하는 방식이다.

 

핵심 개념

• AI 협업 개발 환경을 만드는 방법론에 가깝다
• 기존의 코딩 능력보다 프롬프트 설계 능력과 도구 연결 능력이 중심이다.
• AI가 코드를 짜게 만들고, 나는 제품의 비전/기능/UX를 정의하는 철학을 가지면 된다.

특징

• Cursor IDE(AI 코딩 에디터)와 GitHub, API 연결 도구(MCP 등)을 결합
• 코드, 문서, 배포까지 AI가 대부분 처리 - 사용자는 논리 설계와 프로덕트 컨셉에 집중
• 노코드/로우코드보다 유연하며, 프론트엔드와 백엔드 모두 생성 가능
• AI가 생성한 코드를 즉시 테스트하고 배포할 수 있는 환경이 핵심

 

강사님은 러버블로 마크업을 지우는 서비스를 10분만에 배포했다.

https://markdown-remover-sns-friendly.lovable.app/

markdown-remover-sns-friendly

 

예시 

• 사용자 입력을 받아 이미지를 변환해주는 웹앱 만들어줘 -> Cursor가 프론트/백엔드 코드 자동 생성 -> Vercel 배포까지 완료
• 이 과정 전체를 바이브코딩 플로우라고 한다.

 

 

MCP (Model Context Protocol)

OpenAid에서 만든 AI 도구 간 상호작용 표준 프로토콜이다. GPT와 외부 앱, 데이터, API를 연결하는 공식 인터페이스.

 

역할

• GPT와 로컬 도구(예: 터미널, 파일 시스템, VSCode, Figma, Notion 등)를 직접 연결
• 예전에는 GPT가 외부 앱에 접근하려면 플러그인이나 API key가 필요했지만, MCP는 이를 통합된 방식으로 처리한다.

예시

• GPT가 MCP를 통해 로컬 코드 베이스에 접근해 파일을 읽고 수정
• GPT가 데이터베이스나 API를 직접 호출해 실시간 데이터를 불러옴
• GPT가 Figma 파일 구조를 분석하거나 Github 이슈를 생성

핵심 이점

• 보안성 : MCP는 모든 호출을 사용자의 기기에서 관리하므로, 외부 유출 위험 없음 -> 있다고 하는데?
• 일관성 : GPT, Claude, Cursor 등 어떤 모델이든 MCP 규격만 따르면 동일하게 작동

 

 

API (Application Programming Interface)

서로 다른 소프트웨어 간의 대화 통로. 예를 들어 날씨 앱이 기상청 API를 통해 실시간 기온을 받아오는 식

 

역할

• 특정 기능(데이터 제공, 연산, 인증 등)을 외부 앱이 호출해 사용할 수 있게 함
• RESTful / GraphQL / WebSocket 등 여러 방식 존재
• AI나 MCP도 결국 API를 통해 외부 서비스와 통신한다.

예시

• OpenAI API -> GPT 호출
• Notion API -> 노션 문서 CRUD
• Goggle Calendar API -> 일정 불러오기

 

 

세 가지의 연계 구조

구성 요소	역할	예시
API	외부 서비스의 기능/데이터를 제공	“상품 정보 조회”, “이미지 변환 요청”
MCP	GPT ↔ API/로컬도구 간 안전하고 표준화된 연결	“GPT가 로컬 폴더 파일을 수정”
바이브코딩	이 모든 것을 하나의 프로덕트 제작 플로우로 통합	“GPT+MCP+API로 1인 AI 서비스 제작”

 

 

실제 작동 시나리오

1. 내가 Cursor에서 프롬프트로 명령 -> "상품 등록 API 호출해주는 간단한 프론트 페이지 만들어줘"
2. GPT(MCP 통합 환경)가 API 스펙을 분석 -> OpenAI 문서 기반으로 자동 코드 생성
3. API 호출을 통해 실제 데이터 통신 -> 해당 서비스에서 상품 데이터 가져옴
4. Cursot에서 바로 실행하고 배포 -> 하나의 명령으로 완성된 프로덕트 출시

 

 

https://chikaihejimba.substack.com/p/vibe-coding?utm_campaign=post&utm_medium=web