바이브 코딩(Vibe Coding)과 MCP

나무나무·2025년 8월 31일

바이브코딩

목록 보기

1/1

바이브코딩(Vibe Coding)

자연어로 의도 설명 → AI가 코드를 생성해주는 개발 방법
직접 코드를 작성한다기보다 → AI에게 요구사항 설명 → AI가 코드 생성 → 개발자는 이를 검토, 수정, 채택
단기, 실험적 프로젝트에서는 효과적
장기, 대규모 프로젝트에는 위험 요소가 큼

프롬프트 엔지니어링(Prompt Engineering) = “AI가 원하는 코드를 잘 뽑아내는 질문법”

프롬프트는 LLM 모델에게 질문할 때 좋은 답변을 얻기 위한 질문의 최적화 방식임
- LLM(Large Language Model) - 생성형 AI 중 하나, 자연어 처리 가능 머신러닝 모델
생성형 인공 지능 솔루션을 안내하여 원하는 결과를 내는 솔루션
쉽게 말해 원하는 결과를 위해 질문/명령을 조금 더 체계적이고 똑똑하게 하는 방법
- “이거 어떻게 수정해?” ❌
- “이 Method를 O(n log n) 복잡도로 최적화하고, 주석 달아줘” ✅

프롬프트 최적화 구조

Input - 질문

질문형(~는 뭐야?) / 명령형(~ 해줘) / 롤(너는 ~이다. ~해줘) / 분류 / …

Context - 부가적인 상황(Optional)

Example - 답변 예제들(Optional)

📖 예시 1 - 질문형

Input: “바이브 코딩이 뭐야?”
Context: "개발자가 AI를 활용해 코드를 작성하는 방식에 대해 이해하고 싶음. 초보자도 쉽게 이해할 수 있도록 설명.”
Example: "바이브 코딩 = [정의], [핵심 개념1], [핵심 개념2], [핵심 개념3]”

도출된 답 ✅
"바이브 코딩은 개발자가 AI와 협업하여 자연어로 코드를 작성하고, 반복 작업을 자동화하는 코딩 방식입니다.
핵심 개념은
1) 프롬프트 엔지니어링: AI에게 정확한 지시를 주는 방법,
2) AI Pair Programming: AI와 페어 프로그래머처럼 함께 작업,
3) Natural Language Coding: 자연어로 코드 요청 및 생성입니다."

📖 예시 2 - 명령형

Input: "간단한 To-do 앱을 HTML+JS로 만들어줘”
Context: "프론트엔드 초보자 실습용. 기능: 할 일 추가, 삭제, 완료 체크”

Example: “HTML input, 버튼, ul 리스트를 이용한 기본 구조 코드”

도출된 답 ✅

    <input id="taskInput" placeholder="할 일 입력">
    <button onclick="addTask()">추가</button>
    <ul id="taskList"></ul>
    <script>
    function addTask() {
        const input = document.getElementById('taskInput');
        const li = document.createElement('li');
        li.textContent = input.value;
        document.getElementById('taskList').appendChild(li);
        input.value = '';
    }
    </script>

AI Pair Programming = “AI를 내 페어 프로그래머처럼 활용”

AI를 동료 프로그래머로 활용하는 방식
반복적 코드 작성, 테스트 코드 생성, 리팩토링, 문서화 등을 AI가 도와주므로 생산성 향상
사람이 전체 코드를 작성하는 대신, AI와 협업하는 구조
- 개발자가 주요 로직 개발 → AI가 반복문 최적화 + 테스트 코드 자동 생성 + 코드 리뷰 & 개선 사항 제안

Natural Language Coding = “코드를 직접 쓰는 대신 말로 설명해서 생성”

자연어로 코드 요청 / 작성하는 방식
기존 코딩은 문법 중심으로 작성 → 자연어로 기능 설명만으로 코드 생성 가능
- “사용자 입력을 받아 이름을 출력하는 HTML 페이지 만들어줘” → AI가 HTML+JS 코드 생성

💡프롬프트 엔지니어링, AI Pair Programming, Natural Language Coding 세 개 전부 바이브 코딩의 핵심 요소 → 쉽게 말해 “AI와 개발자가 함께 일하는 새로운 코딩 방식”

이렇게만 보면 개발 생산성이 엄청 늘어서 원하는 서비스를 공장처럼 찍어낼 수 있을 것 같고, 개발자들은 워라벨 훌륭한 직장을 다니게 되겠지만 실상은 다르다..

바이브 코딩 도입

AI를 활용한 코드 도입 → 사내 데이터와 연결해 업무를 자동화한다면 얼마나 좋을까?
그렇지만 직원 PC나 AI가 직접 사내 DB에 접속한다면 보안 문제가 발생할 수 있다 → 공격 경로가 너무 많아지고, 누가 언제 무엇에 접근했는지 추적이 어려워진다.
- 회사에도 사원증 찍어야 출입이 되고 기록이 남는다. 사원증 없으면 온갖 인간군상이 회사에 들락날락 거리게 되고, 누가 회사 컴퓨터, 의자를 들고 갔는지 알 수 없게된다.
여기서 중요하게 대두되는 것이 “MCP”이다.

MCP(Model Context Protocol)

Anthropic에서 발표한 LLM 모델과 외부 애플리케이션의 연동 스펙
위의 문제 해결을 위해 나온 개념
여러 도구(Agent/Tool)를 안전하고 효율적으로 연결하기 위해 등장한 표준 프로토콜/프레임워크를 MCP

LLM ⇒ Agent, Tool

💡 “Agent”는 어떤 정보를 어떻게 답변할지에 대한 판단을 담당
→ 이후 질문에 맞는 적절한 “Tool”을 호출해서 답변에 도달

LLM은 학습된 지식을 바탕으로 질문에 대답하는 방식. 학습되지 않은 정보는 검색으로 정보를 얻을 수 없다. ⇒ 이를 위해 나온 개념이 Agent / Tools
외부 도구를 통합하고 연결 → LLM의 기능을 확장시키는 구조
Agent
- LLM 추론 능력을 바탕으로 애플리케이션 전체 흐름을 제어, 상황에 맞는 작업을 처리하는 애플리케이
- LLM 도구(Tool) 호출
- 다른 LLM 호출 - 특화된 다른 LLM에 해당 작업을 위임
- 외부 도구 활용 - API 호출
Tool
- 외부 세계와 상호작용하기 위해 사용하는 인터페이스
- 특정 함수/작업을 수행하는 형태로 제공됨

Agent Framework

Agent를 직접 구현하려면 어떤 Tool을 선택할지나, Tool이 반환한 대답을 다듬는 처리에 관련된 로직을 구현하기엔 너무 힘들지..
⇒ 이걸 위해 미리 구현되어 있는 Framework를 사용할거야!
⇒ ex) LangChain, Crew AI, AutoGen, Llama Index, Anthropic의 Agent framework

근데 Agent Framework가 Tool들과 연동하기 위해 SDK가 필요함

Agent/Tool 프레임워크 = 모든 Tool과 Agent를 연결할 수 있는 공통 뼈대
SDK = 특정 Tool이나 언어 환경에 맞춰 뼈대를 실제로 구현할 수 있게 도와줌
어 근데 그러면 Tool 개발자들은 Agent Framework랑 협업해서 연동되게 만들어야 하고, Agent Framework 개발자들은 Tool 별 SDK를 또 따로 만들어야 하는거 아니야??

⇒ 아 귀찮다 그냥 우리 통합하자… 표준화 해놓고 Agent Framework랑 Tool이랑 뭘 써도 연동 되게 만들자! ⇒ “MCP”

MCP 동작 과정

Agent(LLM) → MCP : List Tools 요청
- Agent가 어떤 Tool이 있고 어떤 기능이 있는지 요청
- JSON-RPC/HTTP 형태로 요청 전달
MCP → Tool : 기능 정보 요청
- MCP가 Tool에게 기능 요청 → Tool은 기능 목록 반환
MCP → Agent : Tool 기능 목록 전달
- Tool에게 받은 응답을 JSON 구조로 Agent에게 전달
- MCP가 권한 체크 후 Agent가 호출할 수 있는 Tool만 보이게 제한
Agent 판단 → MCP를 통해 Tool 호출
- Agent가 어떤 tool을 쓸지판단 → MCP 가 권한 확인, 요청 기록 → Tool 에 전달
Tool 실행 → MCP → Agent 응답 반환
- Tool이 결과를 MCP에 반환 → 표준화 된 형태로 Agent에게 반환

나무나무

백엔드 개발자 나무입니다