기술최신

CesiumMCP 바이브 코딩 – 한마디 말로 디지털 어스를 만들다.

Tech Insight 2025

바이브 코딩 × CesiumMCP
AI가 지구를 그리다

자연어 한 줄로 3D 지구본을 띄우는 새로운 개발 패러다임

2025년 2월, OpenAI 공동창업자이자 전 Tesla AI 책임자인 안드레이 카르파시(Andrej Karpathy)가 소셜미디어에 짧은 글 하나를 올렸습니다. “바이브 코딩(Vibe Coding)이라고 부르고 싶은 새로운 코딩 방식이 있다. AI에게 전적으로 맡기고, 코드가 존재한다는 사실조차 잊어버린다. 나는 항상 ‘전체 수락’을 누르고 diff를 읽지 않는다.” 이 한 문장이 개발 문화 전체를 흔들었습니다.

“There’s a new kind of coding I call ‘vibe coding’, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.”

— Andrej Karpathy, 2025.02

바이브 코딩은 코드를 직접 작성하는 대신, 원하는 것을 자연어로 설명하고 AI가 생성한 코드를 실행하며 결과를 보는 방식입니다. Collins Dictionary는 이 단어를 2025년 올해의 단어로 선정했고, 2026년 현재 전 세계 개발자의 92%가 AI 코딩 도구를 매일 사용하고 있습니다.

💬

자연어 입력

코드 문법 대신 일상 언어로 원하는 기능을 설명

즉각 생성

AI가 실행 가능한 코드를 순식간에 작성

🔄

반복 개선

결과를 보고 추가 요청으로 계속 다듬기

🚀

즉시 배포

전통 개발보다 수십 배 빠른 결과물 도출

바이브 코딩의 진정한 힘은 비개발자도 소프트웨어를 만들 수 있게 된다는 점입니다. GIS 엔지니어, 지리학자, 도시계획가가 직접 3D 지도 앱을 만드는 시대가 열린 것입니다.


CesiumJS는 웹 브라우저에서 플러그인 없이 WGS84 정밀 3D 지구본과 2D 지도를 렌더링하는 오픈소스 자바스크립트 라이브러리입니다. 그리고 CesiumMCP는 이 강력한 3D GIS 엔진을 AI 에이전트와 연결하는 Model Context Protocol(MCP) 서버입니다.

Claude, Cursor, VS Code Copilot 같은 MCP 호환 AI 클라이언트에서 “에펠탑으로 날아가서 빨간 마커를 추가해줘” 라고 입력하면, AI가 CesiumMCP의 도구를 호출해 실제 지구본이 해당 좌표로 이동하고 마커가 생성됩니다. 코드 한 줄 작성할 필요가 없습니다.

시스템 아키텍처
🤖 AI 에이전트 Claude / Cursor
VS Code Copilot
stdio · MCP
⚙️ cesium-mcp-runtime Node.js
58개 도구 · 12 툴셋
WebSocket
JSON-RPC
🌐 cesium-mcp-bridge Browser SDK
CesiumJS 뷰
🌍 CesiumJS 지구본 3D 렌더링
WebGL

CesiumMCP는 총 12개 툴셋, 58개 도구를 제공하며 카메라 제어부터 공간 분석까지 거의 모든 GIS 작업을 자연어로 처리합니다.

카메라 · 내비게이션 엔티티 관리 GeoJSON 레이어 3D Tiles 지형 · 이미지리 트라젝토리 애니메이션 히트맵 지오코딩 씬 · 조명 스크린샷 캡처 공간 분석 클락 · 시뮬레이션

아래는 실제 바이브 코딩 방식으로 Cesium 3D 지구본 웹페이지를 만드는 과정입니다. AI에게 요청한 프롬프트와 결과를 순서대로 보여줍니다.

1

Claude에게 초기 화면 요청

“CesiumJS를 이용해서 지구본이 회전하는 웹페이지를 만들어줘. Bing 위성 이미지를 배경으로 하고 대기권 효과도 넣어줘.”

2

AI가 HTML 코드 생성

Claude가 CesiumJS CDN 로드, Viewer 초기화, 카메라 설정, 자동 회전 코드를 포함한 완전한 HTML 파일을 즉시 생성합니다. npx cesium-mcp-runtime 연동 코드도 자동 포함.

3

추가 기능 자연어 요청

“서울, 뉴욕, 런던에 마커를 추가하고 각 도시 클릭 시 인포박스가 뜨게 해줘.” AI가 기존 코드에 엔티티 레이어와 이벤트 핸들러를 추가합니다.

4

결과 확인 & 반복 개선

브라우저에서 결과를 확인하고 마음에 들지 않는 부분만 다시 설명합니다. 전통적 개발 대비 수십 배 빠른 이터레이션이 가능합니다.


아래는 바이브 코딩으로 완성된 CesiumJS 3D 지구본입니다. 마우스로 드래그해서 회전시키고, 스크롤로 줌 인/아웃할 수 있습니다. 버튼으로 주요 도시로 이동하거나 자동 회전을 켜 보세요.

cesium-viewer.html
LIVE
바이브 코딩 프롬프트: “CesiumJS로 3D 지구본을 만들고 주요 도시 마커를 추가해줘”

Cesium Ion 토큰은 HTML 소스에 노출되지만, Allowed Origins(허용 도메인) 제한을 설정하면 내 사이트 외의 곳에서는 토큰을 복사해 써도 지구본이 로드되지 않습니다. 가장 현실적이고 효과적인 보호 방법입니다.

STEP 1

Cesium Ion 대시보드 접속

ion.cesium.com 에 로그인 → 좌측 메뉴 Access Tokens 클릭

STEP 2

새 토큰 생성 (또는 기존 토큰 선택)

Create token 버튼 클릭 → 토큰 이름 입력 (예: my-wordpress-blog)

STEP 3

Allowed Origins에 내 도메인 등록

토큰 설정 화면에서 Allowed Origins 항목에 워드프레스 사이트 주소를 정확히 입력합니다.

✔ 허용 https://your-domain.com
✔ 허용 https://www.your-domain.com
✔ 개발용 http://localhost:3000
✘ 차단됨 그 외 모든 도메인 → 지구본 로드 불가
STEP 4

토큰 복사 후 HTML에 교체

생성된 토큰 값을 복사해 기사 HTML 코드의 YOUR_CESIUM_ION_TOKEN_HERE 부분을 교체합니다. 이후 다른 사이트에서 토큰을 무단 사용해도 403 오류로 자동 차단됩니다.

💡
무료 플랜으로 충분합니다. Cesium Ion 무료 계정은 월 200,000 타일 요청을 제공하며, 블로그 기사 수준의 트래픽에는 넉넉합니다. 사용량은 대시보드 Usage 탭에서 실시간 확인 가능합니다.

🌐 자연어가 새로운 프로그래밍 언어가 되다

바이브 코딩과 CesiumMCP는 GIS·공간정보 분야의 진입 장벽을 획기적으로 낮춥니다.
코드 없이 3D 지구를 자유자재로 다루는 시대, 이미 시작되었습니다.

#바이브코딩 #CesiumMCP #CesiumJS #GIS #AI개발 #3D지구본 #MCP

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다