TMS MCP 서버로 간단하게 데모 앱 만들기
대화만 하면 알아서 API 호출부터 디버깅까지.
시작하며
앞서 우리는 TMS MCP 서버의 개념과 활용을 위한 설치 방법을 차례로 살펴보았습니다. MCP 서버가 무엇인지, 그리고 TMS 환경에서 어떻게 활용될 수 있는지에 대한 큰 그림을 이해하고 이를 실행하기 위한 개발 환경도 모두 준비를 마쳤죠. 이제 남은 질문은 하나입니다. “정말 대화만으로 TMS 앱과 솔루션을 만들 수 있을까?”
이번 포스트에서는 저희 아이나비시스템즈와 오믈렛이 함께 개발한 TMS MCP 서버를 기반으로 Claude Code를 활용해 실제 TMS 데모 앱을 구현해보고자 합니다. Claude Code는 MCP 서버와 연동되어 개발자가 자연어로 요구사항을 입력하면 코드 작성, 데이터 구성, 지도 및 경로 시각화까지의 과정을 단계적으로 수행합니다. 데모 앱을 만들기 전, 이전에 게시된 TMS MCP 서버 설치 가이드를 반드시 확인하여 개발 환경을 먼저 구성해주시기 바랍니다. 그럼 지금부터 Claude Code와 TMS MCP 서버를 활용해 데모 앱을 만들어가는 과정을 하나씩 안내해드리겠습니다.
1️⃣ 프로젝트 설정하기
먼저 TMS MCP 앱을 위한 프로젝트 디렉토리를 생성합니다.
mkdir tms-demo
생성한 프로젝트 디렉토리로 이동합니다.
cd tms-demo
이제 설치된 Claude Code를 실행합니다.
claude --dangerously-skip-permissions
이번 가이드에서는 Claude Code를 실행하는 여러 방식 중, CLI 도구를 사용하면서 모든 권한 확인을 건너뛰는 옵션으로 실행합니다. 해당 옵션을 사용하면 Claude Code가 파일 생성, 수정 등의 작업을 보다 자유롭게 수행할 수 있어 데모 환경에서는 편리하지만 시스템의 중요한 파일이 의도치 않게 변경되거나 삭제될 위험이 있습니다. 따라서 본 옵션은 반드시 격리된 개발 환경, 테스트용 로컬 디렉토리 혹은 안전성이 확보된 환경에서만 사용할 것을 권장합니다.
2️⃣ TMS MCP 서버 탐색하기
Claude Code에 진입했다면 가장 먼저 MCP 서버의 설치 상태를 확인해보겠습니다. 아래 명령어를 입력합니다.
/mcp
명령어를 실행하면 현재 Claude Code에 연결된 MCP 서버 목록을 확인할 수 있으며 이 가이드에서는 TMS MCP 서버가 TMS Dev Wizard라는 이름으로 정상적으로 등록된 것을 확인할 수 있습니다. MCP 서버를 설치할 때에는 서버 이름을 직접 지정할 수 있는데 본 가이드에서는 TMS MCP 서버를 TMS Dev Wizard라는 이름으로 사용하겠습니다.
여기서 주목해야 할 점은 Claude Code가 추가된 MCP 서버의 툴과 역할을 사전에 인식하고 있다는 점입니다. 이 때문에 실제 프롬프트 입력 시 TMS Dev Wizard라는 이름을 직접 언급하지 않더라도 상황에 맞는 MCP 툴을 자동으로 찾아 호출합니다. 그렇지만 여러 MCP 서버를 동시에 사용해야 하거나 특정 서버의 기능을 명확히 지정해야 할 경우에는 MCP 서버 이름을 직접 언급하여 원하는 툴이 정확히 호출되도록 하는 것이 중요합니다.
이제 TMS Dev Wizard가 어떤 역할을 수행할 수 있는지 살펴보겠습니다. Claude Code에 아래와 같이 질문해봅니다.
TMS Dev Wizard로는 무엇을 할 수 있나요?
질문을 입력하면 Claude Code는 필요한 정보를 수집하기 위해 TMS MCP 서버에 포함된 여러 툴들을 자동으로 호출합니다.
그 결과 TMS 환경에서 활용 가능한 주요 엔드포인트 정보와 시스템 통합 패턴에 대한 가이드를 확인할 수 있습니다. 이를 통해 Claude Code가 단순한 코드 생성 도구를 넘어 TMS 도메인을 이해하고 개발 흐름을 안내하는 역할까지 수행하고 있음을 확인할 수 있습니다.
3️⃣ 데모 앱 생성하기
TMS 데모 앱 제작에 앞서, Claude Code의 대화 내역을 초기화합니다. 코딩 에이전트를 활용할 때는 불필요한 이전 맥락을 제거하고 현재 작업에 필요한 정보만 전달하는 것이 중요합니다. /reset, /clear, /new 명령어를 사용하여 대화 내역을 초기화합니다. 대화 내역 초기화 후에는 화면 하단 오른쪽에 표시된 토큰 수가 0 token이 된 걸 확인할 수 있을 것입니다.
다음으로, TMS 데모 앱 생성을 위한 프롬프트를 구성합니다. 편의를 위해 메모장과 같은 프로그램에서 먼저 프롬프트를 작성한 뒤 Claude Code에 입력하는 방식을 사용하겠습니다. TMS MCP 서버를 사용하는 경우 API 정보는 Claude Code가 자동으로 탐색하기 때문에어떤 API를 쓸 것인지보다는 “무엇을 만들고 싶은지”와 “어떤 기능이 필요한지”를 중심으로 요구사항을 작성하는 것이 핵심입니다. 이번 데모에서는 먼저 주제를 정의하고, 그 다음 요구사항을 요건 형태로 정리합니다.
�주제: TMS 데모앱을 만들어주세요.
�요건
* 차고지 주소 하나와 배달 목적지 정보(배송지 주소, 배송물 무게)를 여러 개 추가할 수 있게 해주세요 (기본 예시 주소를 몇 개 넣어주세요)
* 각 차량의 적재 제한을 입력할 수 있게 해주세요
* 제약 조건을 직접 조절할 수 있게 해주세요
* 최종 경로를 지도 상에 시각화해주세요
작성한 프롬프트를 복사해 Claude Code에 그대로 입력합니다. 프롬프트가 입력되면 Claude Code는 TMS MCP 서버를 기반으로 활용 가능한 API 및 엔드포인트 탐색, 요구사항을 충족하기 위한 구현 방식 설계 그리고 프로젝트 초기화 및 기본 구조 생성을 수행합니다.
이후 초기 설정을 마친 뒤, 각 API를 활용하기 위한 서비스 모듈을 구현하고, 사용자가 데이터를 손쉽게 입력하고 결과를 확인할 수 있도록 Streamlit 기반 UI를 함께 구성합니다. 이 과정에서 개발자는 별도의 코드 작성 없이 Claude Code가 단계적으로 생성하는 결과를 확인하며 진행할 수 있습니다.
구성이 완료되면 생성된 Streamlit 기반 TMS 데모 앱을 실행합니다. 최적화 옵션을 통해 최적화 시간을 조절한 뒤 경로 최적화를 실행하면 초기 실행 단계에서 지오코딩 실패 오류가 발생한 것을 확인 할 수 있습니다.
오류 메시지를 확인한 Claude Code는 별도의 지시 없이도 자율적으로 디버깅을 시작합니다. 에러 원인을 분석하고 문제를 해결하기 위한 수정 작업을 단계적으로 수행하며, 필요한 경우 관련 로직을 보완합니다. 이를 통해 Claude Code가 단순히 코드를 생성하는 수준을 넘어 실제 개발 과정에서 발생하는 오류를 인지하고 해결까지 수행하는 코딩 에이전트로 동작하고 있음을 확인할 수 있습니다. 만약 자동으로 디버깅이 진행되지 않는 경우에는 어떤 상황에서 어떤 오류 메시지가 발생했는지를 구체적으로 설명해주면 코딩 에이전트가 문제 원인을 파악해 디버깅을 진행할 수 있습니다.
테스트와 디버깅이 완료된 뒤, 데모 앱을 다시 실행 후 경로 최적화를 다시 실행하면, 이전과 달리 정상적으로 결과가 도출되는 것을 확인할 수 있습니다. 이 과정에서 좌표 변환에는 아이나비시스템즈의 지오코딩 API가, 경로 최적화에는 오믈렛의 VRP(Vehicle Routing Problem) API가 사용됩니다. 즉, 사용자는 단순히 “경로 최적화를 실행한다”는 행동만 수행했지만 Claude Code와 TMS MCP 서버는 상황에 맞게 필요한 API를 선택하고 호출하여 좌표 변환 → 경로 계산 → 결과 반환의 과정을 자동으로 처리합니다.
시각화된 결과를 보면 경로가 직선 형태로 표현되는 것을 확인할 수 있습니다. 이는 최적화 결과를 단순 연결선으로 표시한 상태로 데모 단계에서는 유효하지만 실제 서비스 관점에서는 보다 정확한 시각화가 필요합니다. 이를 위해 Claude Code에 아래와 같이 추가 요청을 합니다.
최종 결과가 지도 상에 직선 경로로 나오는데, 실제 도로상의 경로로 바꾸어주세요.
이처럼 현재 상황과 추가하고 싶은 기능을 함께 설명하면 코딩 에이전트는 요구사항을 바탕으로 어떤 기능이 부족한지 판단하고, 필요한 API와 구현 방식을 스스로 탐색해 개발을 진행합니다.
기능 추가가 완료된 뒤, 다시 한 번 경로 최적화를 실행하면 지도 위에 실제 도로를 따라 이동하는 경로가 시각화되는 것을 확인할 수 있습니다. 이 과정에서 별도의 코드 수정이나 API 선택을 개발자가 직접 지시하지 않았음에도 Claude Code는 기존 구조를 유지한 채 필요한 로직만 확장하여 기능을 반영합니다. 또한 이 기능 추가 과정에서 서비스 로직 파일, 시각화 관련 모듈, API 호출을 위한 보조 파일 등 여러 파일이 자동으로 생성·수정된 것도 함께 확인할 수 있을 것입니다. 이는 Claude Code가 단순히 결과물만 만들어주는 것이 아니라 실제 프로젝트 구조를 고려해 파일 단위로 작업을 수행하고 있음을 보여주는 부분입니다.
마치며
이번 포스트에서는 Claude Code와 TMS MCP 서버를 활용해 자연어 기반으로 TMS 데모 앱을 생성하고 실행·디버깅까지 수행하는 과정을 살펴봤습니다. 본 시연은 AI 에이전트 기반 개발 방식이 물류·운송 시스템 개발에 어떻게 적용될 수 있는지를 보여주는 하나의 예시입니다.
앞으로 TMS MCP 서버를 기반으로 기능을 확장한다면 더 복잡한 제약 조건 반영, 실제 운영 데이터를 활용한 시뮬레이션, 다양한 물류 시나리오 테스트와 같은 방향으로도 발전시킬 수 있을 것입니다. 본 포스트는 영상을 통해 더욱 자세히 확인할 수 있습니다. Claude Code가 프롬프트를 해석하고, MCP 서버의 툴을 호출하며 오류를 디버깅하고 기능을 확장해 나가는 흐름을 실제 화면 기준으로 단계별로 살펴보고 싶다면 영상도 함께 참고해 보시길 바랍니다.
✉️ 대표 문의 | biz@inavi.kr
이준의(Omelet) | juni.lee@omelet.ai
백종훈(iNavi Systems) | devbaek@inavi.kr
