바이브코딩 확장도구: API와 MCP

JUN 바이브코딩 확장도구 API와 MCP
JUN 바이브코딩 확장도구 API와 MCP

25.09.09 / JUN

  • P1. API와 MCP 비교
  • P2. 인터넷의 무궁무진한 정보 연결 도구: API
  • P3. Cursor 환경에서 MCP 활용하기

P1. API vs. MCP 비교

구분API (Application Programming Interface)MCP (Model Context Protocol)
개념프로그램과 프로그램을 연결해주는 데이터/기능 제공 통로AI 모델(GPT, Claude 등)이 외부 데이터·도구에 접근할 수 있도록 돕는 표준 프로토콜
비유레스토랑 메뉴판 – 사람이 직접 주문해야 함AI에게 붙는 비서/통역사 – 메뉴판을 대신 읽고 주문 처리
주 사용 주체개발자 ↔ 서비스(API 제공자)AI 모델 ↔ 여러 외부 리소스(API, DB, 파일 등)
작동 방식개발자가 직접 fetch()나 라이브러리 코드로 호출AI 모델이 MCP 클라이언트를 통해 자동 호출 (프롬프트 기반)
데이터 형식보통 JSON, XMLJSON-RPC 기반 표준 구조 (AI 친화적)
목적특정 서비스 기능(날씨, 지도, 유튜브 영상 등)을 가져다 쓰기다양한 API/리소스를 표준화해 AI가 쉽게 활용하게 함
장점– 원하는 데이터 직접 가져올 수 있음
– 서비스 기능 재활용 가능		– 여러 API를 하나의 방식으로 연결
– AI가 알아서 호출하므로 개발자 부담 ↓
입문자 난이도중간 – API 문서를 읽고 직접 코드 작성 필요낮음 – AI가 MCP 덕분에 직접 호출 처리 (프롬프트 중심 개발)
예시YouTube Data API, OpenWeather API, Cat Facts APICursor + MCP 연결 → “내 DB에서 최근 고객 불러와줘” 프롬프트

1. 개념 차이

  • API (Application Programming Interface)
    → 소프트웨어와 소프트웨어를 연결해주는 데이터·기능 공유 통로
    → 예: 날씨 API, 유튜브 API
  • MCP (Model Context Protocol)
    → **AI 모델(예: GPT, Claude 등)**이 외부 데이터나 도구에 접근할 수 있게 해주는 새로운 통신 표준
    → Anthropic이 2024년 말에 발표

2. 역할 차이

  • API:
    • “레스토랑 메뉴판” 같은 것.
    • 개발자가 원하는 데이터(음식)를 요청하면, 서비스가 응답(음식)을 줌.
    • 주로 프로그래머 ↔ 서비스 사이에서 작동.
  • MCP:
    • “통역사” 같은 것.
    • AI 모델이 API, 데이터베이스, 파일시스템, 회사 내부 툴 등과 대화할 수 있게 중간에서 표준화된 방식으로 연결해줌.
    • 주로 AI ↔ 여러 서비스 사이에서 작동.

3. 이용 방식의 차이

  • API: 서비스들이 외부에 기능을 열어줘야 개발자들이 가져다 쓸 수 있음.
  • MCP: API들이 너무 다양하고 복잡해서 AI가 직접 쓰기 어려움 → **하나의 통일된 언어(프로토콜)**로 표준화해줌.

4. 활용 방식 비교

  • API:
    • 직접 호출해야 함 (프로그래밍 코드 작성 필요).
    • 예: fetch("https://api.openweathermap.org/data?...")
  • MCP:
    • AI 모델이 MCP 클라이언트를 통해 자동으로 호출.
    • 예: ChatGPT가 내 구글 캘린더, 이메일, 데이터베이스에 MCP 연결로 접근 → “내일 일정 요약해줘” 요청 시 자동 처리.

5. AX 시대가 열리며 API와 함께 MCP가 각광 받게 됨

  • API = 메뉴판 (사람이 직접 주문해야 함).
  • MCP = 점원이 대신 메뉴판을 읽고 주문까지 처리해주는 비서.
    • → API는 내가 직접 호출,
    • → MCP는 AI가 대신 호출.

✅ 정리:

  • API는 데이터를 공유하는 기본 도구.
  • MCP는 AI가 여러 API를 쉽게 활용하도록 도와주는 표준 연결 규칙.
  • 즉, API = 데이터 제공자 / MCP = AI 비서 역할을 하는 연결자.

P2. 인터넷의 무궁무진한 정보와 연결을 도와주는 도구: API

  • API(Application Programming Interface)
    → 프로그램과 프로그램을 연결해주는 중간 다리 역할.
  • 쉽게 말해 레스토랑의 메뉴판과 비슷합니다.
    • 손님(개발자)은 주방(서비스 내부)을 직접 보거나 조리하지 않아도, **메뉴판(API)**을 보고 원하는 요리를 주문(데이터 요청)할 수 있음.
    • 주방은 주문받은 대로 음식(데이터)을 만들어서 내어줌.

🔑 1. API가 필요한 이유

  1. 재사용성 – 이미 만들어진 기능(예: 날씨 정보, 지도, 동영상 검색)을 다시 만들 필요 없음.
  2. 시간 절약 – 빠르게 원하는 데이터를 가져와 서비스에 바로 활용 가능.
  3. 연결성 – 다른 서비스(유튜브, 네이버, 카카오, 구글 등)의 데이터나 기능을 내 프로젝트에 쉽게 붙일 수 있음.
  4. 확장성 – 단순 웹앱 → 외부 데이터 활용 → “쓸만한 서비스”로 발전 가능.

⚡️ 2. API 활용 방법 (입문자용 단계별)

  1. API 문서 확인
    • 어떤 데이터를 주는지, 어떻게 요청해야 하는지 확인.
    • 예: https://api.thecatapi.com/v1/images/search
  2. 요청(Request) 보내기
    • 보통 URL 주소에 접속하거나 **코드(JavaScript, Python 등)**로 호출.
    • 간단한 예: fetch("https://api.thecatapi.com/v1/images/search") .then(res => res.json()) .then(data => console.log(data)); → 고양이 사진 URL을 JSON 데이터로 받음
  3. 응답(Response) 받기
    • API 서버가 JSON 형식으로 결과를 보내줌.
    • 예: [ { "id": "abc123", "url": "https://cdn2.thecatapi.com/images/abc123.jpg" } ]
  4. 데이터 활용하기
    • 받은 URL을 <img> 태그에 넣으면 랜덤 고양이 사진 표시!
    • 이 과정을 반복하면서 “날씨 앱”, “뉴스 뷰어”, “영화 추천기” 등을 만들 수 있음.

🎯 3. 바이브코딩 입문자에게 맞는 활용 포인트

  • 작은 성공부터 시작: 버튼 누르면 API에서 받아온 결과 보여주기.
  • 시각적 결과: 사진, 영상, 날씨처럼 눈에 보이는 데이터를 활용하면 성취감 ↑.
  • 점진적 확장: 처음엔 단순 출력 → 이후 검색 기능, 필터링, 정렬 등 추가.

👉 정리:

  • API = 다른 서비스가 제공하는 데이터·기능을 가져다 쓰는 방법
  • 필요성 = 시간을 절약하고 멋진 기능을 쉽게 추가할 수 있음
  • 활용 방법 = 문서 확인 → 요청 보내기 → 응답 받기 → 내 웹앱에 연결하기

P3. Cursor 환경에서 MCP 활용하기

1. MCP란 무엇인가?

  • MCP(Model Context Protocol) = AI 모델(GPT, Claude 등)이 외부 데이터·도구(API, DB, 파일 시스템 등)에 표준화된 방식으로 접근할 수 있게 해주는 규칙.
  • Cursor에서는 AI 코딩 도우미가 직접 MCP를 통해 데이터/서비스를 불러와 코드 작성을 도와줌.

2. 왜 Cursor에서 MCP가 중요한가?

  • 바이브코딩에서는 아이디어 → 프롬프트 → 코드 → 실행 흐름이 빠른데,
  • MCP를 활용하면:
    • 외부 API 키를 직접 관리하지 않고도 안전하게 연결 가능
    • 데이터베이스, 클라우드 서비스, 내부 툴과 바로 연동 가능
    • 코드 작성 시 AI가 필요한 데이터를 자동으로 불러와 제안

3. 기본 활용 흐름

  1. MCP 서버 설치
    • 예: GitHub에서 제공하는 오픈소스 MCP 서버, 또는 Cursor 확장으로 제공되는 MCP 플러그인 사용
  2. Cursor 프로젝트와 연결
    • Cursor 설정(.cursor/config.json 같은 곳)에 MCP 서버 주소 등록
    • 어떤 리소스(API, DB, 파일 경로 등)를 노출할지 정의
  3. AI에게 MCP 도구 사용 지시
    • 예시 프롬프트: 내 SQLite DB에 저장된 유저 테이블에서 최근 가입자 5명을 불러와줘 (MCP 사용)
    • → AI는 MCP를 통해 DB API를 호출 → 결과를 코드로 보여줌
  4. 바이브코딩에서 실습
    • 버튼 클릭 → MCP 호출 → 결과(JSON 등)를 가져와 웹앱에 바로 반영
    • 예: 랜덤 고양이 API + MCP 연동 → “버튼 누르면 MCP가 API 호출해서 사진 출력”

4. 입문자 실습 예시

👉 “랜덤 고양이 사진 뷰어” 만들기

  1. MCP 서버에 Cat API 등록 { "resources": [ { "name": "catpics", "type": "http", "url": "https://api.thecatapi.com/v1/images/search" } ] }
  2. Cursor에서 AI에게 요청 MCP catpics 리소스를 사용해서 버튼을 누르면 고양이 사진이 바뀌는 HTML/JS 코드 작성해줘
  3. 결과 → 바로 브라우저에서 확인 가능 🎉

5. 핵심 포인트

  • API 직접 호출: 내가 fetch() 코드 작성
  • MCP 활용: Cursor의 AI가 대신 API 연결·호출 처리 → 코드 자동 생성
  • → 입문자는 프롬프트 중심 개발에 집중할 수 있음

👉 요약

  • MCP = AI가 외부 API/데이터를 표준 방식으로 불러오게 하는 다리
  • Cursor에서는 MCP 연결만 해두면, 프롬프트만으로 데이터 활용 코드 자동 생성 가능
  • 입문자는 “코드 작성 → 실행”보다 “프롬프트로 기능 요청”에 더 집중 가능

첫 포스팅: 25.09.09 / 포스트 문의: JUN (naebon@naver.com)

Views: 36

Leave a Reply

Related Posts