요즘 인기있는 MCP, 살짝 맛보기 👅

하영·2025년 3월 31일

AI MCP

etc.

목록 보기

25/26

요즘 핫한 MCP, 프론트엔드 개발자도 주목해야 할까?

멍청한 질문일 수 있지만 MCP에 대해 알아보게 된 시작이 저 질문이었다. 여기저기서 AI, LLM 같은 용어들이 쏟아지고 있고 자세히는 모르지만 프론트보다는 백엔드와 밀접해보였다.

"MCP가 요즘 왜 이렇게 인기가 많을까?"
"프론트 개발자에게 어떤 의미가 있을까?"

다른 기술 블로그처럼 깊이있게 정리하지 못하더라도 MCP 개념과 React로 구현한 MCP 구조 기반 예시도 정리해보았다.

📝 MCP란 무엇인가?

MCP는 최근 Claude(Anthropic)를 통해 알려진 Model Context Protocol을 의미한다. MCP는 대규모 언어 모델(LLM)이 외부 도구(API, 파일, 데이터베이스 등)와 연결되어 작동할 수 있게 도와주는 표준화된 통신 프로토콜이다.

"모델과 외부 시스템을 연결하는 다리" 라고 할 수 있다.

하지만 MCP는 단순히 기술 명세를 넘어서, Model-Chain Programming이라는 개념으로 이어져 사용된다.

MCP 주요 특징

여러 기능(요약, 번역, 검색 등)을 모듈화하고 체인처럼 연결
LLM을 중심으로 단계적인 데이터 처리 흐름(workflow)을 구성
프론트엔드와 백엔드 모두에서 유연한 오케스트레이션 구조로 작동

📷 MCP는 일종의 'AI 파이프라인 설계도'와 같다.

🌟 MCP가 요즘 인기 있는 이유는?

비용 최적화 : 필요한 기능만 모듈로 분리해서 실행 → LLM 호출 비용 감소
성능 향상 : 전체 모델 호출이 아닌, 작은 모듈 호출로 빠른 응답 가능
다양한 도구와 연결 : 파일, API, 검색, 코드 실행 등 다양한 리소스를 체인에 포함 가능
확장성과 유연성 : 체인 기반 구조로 각 기능을 교체하거나 재활용하기 쉬움
쉬운 코드 관리 : 프론트엔드에서도 비즈니스 로직을 단계별로 설계 가능

🔗 참고한 블로그

지피티 같은 생성형 AI만 봐도 알 수 있듯이 "사용자 요청 → 키워드 추출 → 검색 → 요약 → 결과 전달" 같은 복합 로직이 필요한 시대이다.
MCP는 이러한 복잡한 AI 워크플로우를 모듈화 + 체인화하는 데 최적화된 방식이기에 인기를 얻게 되었다.

🧑‍💻 프론트엔드 개발자가 MCP를 알면 좋은 이유

프론트엔드 개발자는 특히 LLM API와 연결된 UX를 구현할 일이 많아지고 있다. 따라서 MCP 개념은 다음과 같은 장점을 가져올 수 있다.

프롬프트 체인을 React 컴포넌트로 구현 가능
입력 → 처리 → 응답 과정을 모듈로 나누면 비즈니스 로직 유지보수에 유리
백엔드 호출을 분리해두면 비용 효율 + 응답 속도 최적화

✏️ React + OpenAI + MCP 구조로 요약 도우미 만들기

코드로 보면 이해가 쉬울 것 같아서 지피티 도움을 받아 코드를 작성해보았다.

MCP 개념 기반 기능 흐름

사용자 입력 : React에서 상태 관리 어떻게 하나요?
  ↓
Step 1 키워드 추출 결과
React, 상태 관리
  ↓
Step 2 요약
React에서는 useState, useReducer, Context API 등을 통해 상태 관리를 할 수 있으며...

매우 단순하지만, 체이닝의 기본을 이해하기 쉬운 구조라고 생각했다.

Step 1에서 사용자의 질문에서 핵심 키워드를 추출한 뒤,
키워드를 Step 2의 입력으로 넘겨서 요약 작업을 수행한다.

즉, 이전 단계의 결과가 다음 단계의 입력이 되는 흐름이 체인처럼 연결되어 있으며, 이것이 바로 MCP의 기본 형태이다.

💡 이러한 흐름을 UI와 연결하여 사용자의 입력 흐름에 따라 AI 응답을 단계적으로 조정할 수 있다.

💻 예시

"use client";

import { useState } from "react";

export default function MCPExample() {
  const [input, setInput] = useState("");
  const [result, setResult] = useState("");
  const [loading, setLoading] = useState(false);

  const callOpenAI = async (prompt: string) => {
    const res = await fetch("/api/gpt", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });
    const data = await res.json();
    return data.result;
  };

  const handleMCP = async () => {
    setLoading(true);
    setResult("Step 1: 키워드 분석 중...");

    const keywords = await callOpenAI(
      `다음 문장에서 핵심 키워드를 뽑아줘: ${input}`
    );

    setResult(`Step 2: 요약 생성 중...\n(키워드: ${keywords})`);

    const summary = await callOpenAI(
      `다음 키워드를 기반으로 간단히 설명해줘: ${keywords}`
    );

    setResult(summary);
    setLoading(false);
  };

  return (
    <div>
      <h1>MCP 기반 요약 도우미</h1>
      <textarea
        rows={3}
        placeholder="궁금한 내용을 입력하세요"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button
        disabled={loading}
        onClick={handleMCP}
      >
        {loading ? "처리 중..." : "요약하기"}
      </button>
      <pre>
        {result}
      </pre>
    </div>
  );
}

💻 API 라우트 예시

// app/api/gpt/route.ts
import { OpenAI } from "openai";
import { NextResponse } from "next/server";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const completion = await openai.chat.completions.create({
    messages: [{ role: "user", content: prompt }],
    model: "gpt-3.5-turbo",
  });

  return NextResponse.json({
    result: completion.choices[0].message.content,
  });
}

✅ 마무리

MCP는 LLM 시대의 새로운 아키텍처 흐름이다!
프론트엔드에서도 체인 기반 로직을 설계하면 더 유연하고 확장성 높은 UX를 만들 수 있다.
LangChain, LangGraph, LangServe와 같은 툴들과 결합해 더욱 정교한 체인을 만들 수 있다.

MCP는 이제 AI 개발의 표준이 될 수 있는 구조이므로 틈날 때마다 관련 글을 찾아보고 단일 호출보다는 체이닝 구조 흐름 설계를 고려하는게 필요해보였다.
('음식 추천 → 성분 분석 → 영양 요약' 흐름도 MCP 구조로 만들기?)
리펙토링 경험을 물어볼 때도 이제 MCP 기반으로 리펙토링을 해본 경험이 있는지 질문할 것 같다.