DAY 25 | AI를 활용과 API

AI 에이전트 활용하기

MCP에 대하여

MCP(Model Context Protocol)은 AI와 서비스 사이의 통신규약이다. 과거에는 N개의 AI가 M개의 서비스를 다룰 때 N*M개의 연결을 구현해야 했는데, MCP가 사실상 표준으로 자리잡으면서 AI와 MCP를 연결하는 N개와 MCP와 서비스를 연결하는 M개로 총 N+M개의 연결만 구현하면 되게 되었다. 이에 따라 AI는 MCP 클라이언트 규격을 갖추고 서비스는 MCP 서버 규격만 갖추면 되므로 파편화된 연동 비용을 획기적으로 줄이고 플러그앤플레이 형태의 연결이 가능해졌다.

LLM을 사용하는 AI 에이전트에게 요청을 하면 AI 에이전트가 클라이언트로서 MCP 서버와 통신한다. MCP 서버는 적절한 Tool의 종류와 사용법을 AI 에이전트에게 알려준다. AI 에이전트는 사용자의 요청에 따라 적절한 MCP Tool을 사용하여 MCP 서버에 작업을 요청해 가며 역할을 수행한다.

우리는 Flutter MCP 서버를 사용해 볼 것이다.

Flutter MCP 준비하기

서버라고 하면 외부 어딘가에 있는 서버에 원격 접속해야 할 것 같지만 우리가 사용할 MCP 서버는 외부 서버가 아니라 로컬 서버다. 많은 MCP 서버가 로컬에서 돌아간다.

MCP를 사용하지 않는 AI 에이전트도 Flutter 관련 기능을 수행할 수 있지만 Flutter MCP를 사용하는 편이 훨씬 정확도가 높아진다. 이때, Dart 3.9 이상의 버전이어야 MCP 서버를 사용할 수 있다는 것을 유의하자. (우리의 실습 환경은 Dart 3.12다.)

안드로이드 스튜디오 우측 메뉴에서 [Agent] 를 누르고 로그인한다. 예전에는 채팅모드를 기본값으로 하고 에이전트 모드를 켜야 에이전트 모드로 작동했다는 모양인데 이제는 그냥 에이전트 모드로 되는 듯하다.

설정에서 JSON으로 MCP를 추가한다.

{
  "mcpServers": {
    "dart": {
      "command": "dart",
      "args": ["mcp-server"]
    }
  }
}

잘 연결되었다면 안드로이드 스튜디오를 재실행한 후 채팅창에 /mcp 를 입력했을 때 사용 가능한 Tool 목록을 알려준다.

터미널에서 적절한 skills를 설치하여 생산성을 높이도록 하겠다.

# Flutter skills 설치
npx skills add flutter/agent-plugins --skill '*' --agent universal --yes

# Dart skills 설치
npx skills add dart-lang/skills --skill '*' --agent universal --yes

이렇게 설치한 skills는 프로젝트 루트의 .agents/skills 에 마크다운 형태로 저장된다.

API 활용하기

Flutter SDK가 제공되지 않은 API를 사용하는 실습을 진행한다. 직접 작성하지 않고 앞서 구축한 MCP를 통한 AI를 활용한 개발을 하도록 하겠다.

API 제공자는 API 문서를 함께 제공하며, 이 문서에는 해당 API를 어떻게 사용할 수 있고 각각의 endpoint에서 받을 수 있는 데이터가 어떻게 생겼는지 등의 정보가 작성되어 있다.

AI 에이전트와 상호작용하여 wordpress API로부터 article 탭을 작성한다. 이 때, 그냥 시키면 유지보수하기 어려워지므로 레이어 단위로 구현하는 흐름 자체는 코드를 직접 작성할 때와 같이 진행한다. 그렇게 하면 아키텍처를 유지할 수 있고, AI를 활용하면서도 코드를 원활히 이해할 수 있다.

프로젝트 준비하기

그동안 작성했던 기획 wireframe을 기반으로 디자인을 개선한다. Figma로 만든 wireframe에 생성형 AI를 통해 디자인을 입힐 것이다. 우리는 기획과 디자인까지만 생성형 AI의 도움을 받고 개발 과정에서는 AI 에이전트를 붙이지 않고 진행하기로 했다.

쉽진 않다. Claude Design을 어떻게 사용하는 건지 대충 감을 잡고 나니 남은 토큰이 없다. Claude는 토큰 소모가 빠르다는 소문은 듣긴 했지만 정말 쉽지 않다.

무엇보다 배가 고프니 머리가 잘 안 돌아간다. 점심 식대 만 원으로 용산구에서 식사를 해결한다는 건 그렇다. 맛대가리 없는 과자 줄 간식비 있으면 차라리 식비에 보태 줬으면 좋겠다.