World Monitor 딥다이브
— 전 세계 뉴스·지정학·인프라를 한 화면에 모은 실시간 상황실 대시보드

500개 이상의 뉴스 피드, 29개 증권거래소, 위성 화재 데이터, 선박·항공기 추적, 사이버 위협까지 65개 넘는 외부 소스를 빨아들여 3D 지구본 + WebGL 평면 지도 위에 실시간으로 그린다. AI는 흩어진 뉴스를 브리프로 요약하고, 군사·경제·재난 신호가 한곳으로 수렴하는 순간(상관관계)을 잡아낸다. 놀라운 점은 거대한 인프라인데도 프레임워크 없는 순수 TypeScript로 짰고, Ollama 로컬 AI면 API 키 한 줄 없이도 돈다는 것. (저장소: koala73/worldmonitor · v2.8.0 · TypeScript · AGPL-3.0 · 라이브 데모 worldmonitor.app · TrendShift #15)

1프로젝트 한줄 요약

"전 세계에서 지금 무슨 일이 벌어지는지, 한 화면에서 보게 해주는 오픈소스 상황실."

핵심 용어 두 개부터 풀자. 상황 인식(situational awareness)은 군사·항공에서 온 말로 "지금 내 주변에서 무슨 일이 일어나는지 전체를 파악하는 능력"을 뜻한다. World Monitor는 흩어진 정보 소스를 하나로 묶어 이 "전체 그림"을 만든다. 대시보드(dashboard)는 자동차 계기판처럼 여러 지표를 한눈에 보여주는 화면이다. 즉 이 프로젝트는 "지구 전체의 계기판"을 짓는 일이다.

만든 사람은 Elie Habib(koala73)이며, 단순 토이 프로젝트가 아니라 웹 앱 + 데스크탑 앱(Tauri) + 6가지 사이트 변종(전체/테크/금융/원자재/긍정뉴스/에너지)을 하나의 코드베이스에서 찍어내는, 운영 중인 실제 서비스(worldmonitor.app)다. 라이선스는 AGPL-3.0이라 소스 공개 의무를 지키면 누구나 쓸 수 있다.

2왜 주목받는가

"파편화된 정보 소스 수십 개를, 프레임워크 없이도 하나의 살아있는 화면으로 합쳤다."

오늘날 정세를 파악하려면 보통 탭을 10개씩 띄운다 — 뉴스 사이트, 트레이딩뷰, 항공 추적, 날씨, 트위터… 정보가 사방에 흩어져 있고, 그 사이의 연결(예: "이 지역 분쟁이 저 유가 급등과 관련 있나?")은 사람이 머릿속으로 이어붙여야 한다. 기존 상용 솔루션(Bloomberg Terminal, Palantir 등)은 비싸고 폐쇄적이다.

트렌딩을 끌어올린 결정적 요소는 "엔지니어링의 밀도"다. 거대 인프라인데 React·Vue 같은 무거운 프레임워크 없이 순수 바닐라 TypeScript로 짜서 초기 로딩이 가볍고, 3D 지구본(globe.gl)과 평면 WebGL 지도(deck.gl)를 둘 다 갖췄으며, 276개 Protocol Buffers 계약으로 API를 엄격하게 관리한다. "혼자서 이 정도 규모를 이렇게 깔끔하게?"라는 감탄이 화제의 핵심이다.

경쟁/대안과 무엇이 다른가

물론 한계도 있다. 일부 라이브 데이터(항공 운임, 정밀 시장 데이터 등)는 외부 API 키가 있어야 진짜 값이 나오고(없으면 "키 필요" 안내), 65개 넘는 소스를 다루다 보니 설정·운영 복잡도가 만만치 않다. 또 데이터의 정확성·해석은 출처에 의존하므로, 이 도구는 "판단을 대신해 주는 것"이 아니라 "판단을 돕는 상황판"으로 봐야 한다.

3기술 스택 전체 지도

프론트는 '프레임워크 없는 TS + 듀얼 WebGL 지도', 백엔드는 'Edge 함수 + Redis 캐시', 그리고 데스크탑은 Tauri.

World Monitor는 ① 프론트엔드(브라우저/데스크탑 화면) ② 백엔드(서버리스 API + 캐시) ③ 인프라/배포(데스크탑·컨테이너·계약) 세 축으로 보면 명확하다. 가장 큰 설계 철학은 "무거운 프레임워크를 쓰지 않는다"와 "모든 데이터는 한 번 캐시해서 모두가 나눠 쓴다"이다.

① 프론트엔드 — 프레임워크 없는 TS + 듀얼 지도 엔진

가장 놀라운 선택은 React/Vue/Svelte를 안 쓴다는 점이다. 화면은 바닐라 TypeScript로 짜고, 모든 패널은 공통 Panel 클래스를 상속한다(상태 라이브러리도 없이 AppContext라는 중앙 객체 하나로 관리). 지도는 두 개를 갖췄다 — 3D는 globe.gl(Three.js 기반 지구본), 평면은 deck.gl(WebGL 대용량 레이어) + MapLibre GL이다.

② 백엔드 — 서버리스 Edge 함수 + Redis 캐시 + 계약

백엔드는 전통적 서버 한 대가 아니라 Vercel Edge Functions(요청이 올 때만 전 세계 엣지에서 깨어나는 작은 함수) 60여 개로 이뤄진다. 이 함수들은 외부 API를 직접 부르지 않고, 먼저 Upstash Redis 캐시를 본다. 그리고 API 모양(계약)은 사람이 손으로 안 짜고 Protocol Buffers로 정의해 자동 생성한다.

③ 인프라·데스크탑 — Tauri 2 + 사이드카 + 컨테이너

같은 코드가 데스크탑 앱으로도 나온다. 껍데기는 Tauri 2(Rust로 만든 가벼운 앱 셸 — Electron보다 훨씬 작다)이고, 그 안에서 Node.js 사이드카가 미니 API 서버 역할을 한다. 비밀 키는 OS 키체인에 안전 보관한다.

4아키텍처 심화 분석 — 수집 → AI 처리 → 대시보드 렌더 파이프라인

데이터가 '외부 소스 → 시드/캐시 → Edge 함수 → 부트스트랩 → 패널·지도 → AI 분석'으로 흐른다.

World Monitor의 핵심은 "비싼 외부 호출은 미리·한 번만, 화면 표시는 빠르게"라는 흐름이다. 전체를 한 장으로 그리면 다음과 같다(실제 ARCHITECTURE.md 기준).

핵심 설계 패턴 1 — 게이트웨이 팩토리 (모든 Edge 함수의 공통 파이프라인)

도메인별 API(뉴스·시장·항공…)는 매번 보안·캐시 코드를 새로 짜지 않는다. server/gateway.ts의 createDomainGateway()가 10단계 공통 파이프라인을 만들어 준다. 개발자는 "라우트와 핸들러"만 채우면, 나머지(출처 검사·CORS·키 검증·레이트리밋·ETag 등)는 자동으로 붙는다.

# 게이트웨이가 매 요청에 자동으로 거는 단계 (요지)
1. 출처(Origin) 검사        # 허용 안 된 곳이면 403
2. CORS 헤더 부여
3. OPTIONS 프리플라이트 처리
4. API 키 검증              # 데스크탑/프리미엄은 키 필수
5. 레이트리밋(IP별 슬라이딩 윈도)
6. 라우트 매칭             # 정적 Map → 동적 {param}
7. POST→GET 호환(옛 클라이언트 대비)
8. 핸들러 실행(에러 경계)
9. ETag(FNV-1a 해시) 생성 → 변화 없으면 304 Not Modified
10. 캐시 헤더 적용(fast/medium/slow/static/daily…)

핵심 설계 패턴 2 — 캐시 코얼레싱 (같은 요청은 한 번만 외부로)

인기 데이터에 1초에 100명이 몰리면, 외부 API를 100번 부르면 안 된다. server/_shared/redis.ts의 cachedFetchJson()은 동시에 들어온 같은 키의 캐시 미스를 하나로 묶어(coalesce), 외부 호출 1번 + Redis 쓰기 1번으로 처리하고 나머지는 그 결과를 공유한다. 이것이 65개 소스를 적은 비용으로 굴리는 비결이다.

핵심 설계 패턴 3 — 국가 불안정 지수(CII)와 상관관계 엔진

World Monitor의 "분석 두뇌"는 두 가지다. 첫째 CII(Country Instability Index) — 31개 주요국에 대해 서버에서 권위 있게 계산하는 스트레스 점수다. 핵심 아이디어는 단순·투명하다: 나라마다 기본 위험치(baselineRisk)와 이벤트 배수(eventMultiplier)를 두고, 뉴스에서 그 나라 관련 사건을 키워드로 잡아 점수를 올린다(계수표는 shared/cii-weights.ts에 단일 출처로 두어 브라우저·서버가 어긋나지 않게 한다).

# shared/cii-weights.ts — 국가별 계수(실제 값 일부)
US: { baselineRisk: 5,  eventMultiplier: 0.3 }   # 안정·둔감
RU: { baselineRisk: 35, eventMultiplier: 2.0 }
KP: { baselineRisk: 45, eventMultiplier: 3.0 }   # 고위험·민감
UA: { baselineRisk: 50, eventMultiplier: 0.8 }
# 점수 ≈ baselineRisk + (관련 이벤트 강도 × eventMultiplier)
# 계수 수정 시 CII_FORMULA_VERSION 올리고 방법론 문서도 같은 커밋에 갱신

둘째 상관관계 엔진(CorrelationEngine) — 각 도메인 어댑터가 신호를 모으고, haversineKm(지구 두 점 사이 거리)로 가까운 신호를 군집화한 뒤 점수를 매겨, 임계치를 넘으면 "수렴 카드(Convergence Card)"를 만든다. 점수가 높으면(≥60) LLM에게 "이게 무슨 의미냐"를 물어 평가까지 붙인다(동시 호출은 3개로 제한, 30분 캐시). 즉 "군사+경제+재난 신호가 한 지역에 몰리는 순간"을 기계가 먼저 알아챈다.

핵심 설계 패턴 4 — 하나의 코드, 6가지 변종(variant)

tech.·finance.·commodity.·happy.·energy. 등 6개 사이트는 전부 같은 코드베이스다. 접속 호스트명(또는 데스크탑의 localStorage)으로 변종을 감지해 기본 패널·지도 레이어·새로고침 주기·테마·UI 문구를 통째로 바꾼다. Vite 빌드 시 변종별로 안 쓰는 패널 묶음을 잘라내(코드 분할), 같은 소스에서 가벼운 전용 앱들을 찍어낸다.

5디렉토리 구조 해부

레포는 '프론트(src/) + 서버리스(api·server/) + 계약(proto/) + 데스크탑(src-tauri/)'의 대형 모노레포다.

최상위는 크게 ① 프론트엔드(src/) ② 서버리스 API(api/·server/) ③ API 계약(proto/) ④ 데스크탑(src-tauri/) ⑤ 운영 스크립트(scripts/)로 나뉜다. src/ 안의 핵심은 3분할이다 — components(화면 부품 155개), services(도메인 데이터 로직 24개), workers(무거운 계산을 background로).

6학습 포인트 (기술별)

한 레포에 '프레임워크 없는 대규모 SPA + WebGL 지도 + 서버리스 + 브라우저 AI + 데스크탑'이 다 들어 있다.

① 프레임워크 없이 대규모 SPA 설계하기

"React 없이 어떻게 155개 컴포넌트를 관리하지?"의 살아 있는 답이다. Panel 기반 클래스(공통 setContent + 이벤트 위임)와 AppContext 중앙 객체로 상태 라이브러리 없이 상태를 다룬다. 프레임워크가 숨겨주던 것(렌더 타이밍·디바운스·이벤트 위임)을 직접 마주하며 배우기 좋다.

② WebGL 지리 시각화 — deck.gl & globe.gl

수만 개의 점(선박·항공기·이벤트)을 지도에 부드럽게 그리는 법을 배우는 최고의 교재다. src/config/map-layer-definitions.ts에는 각 레이어가 평면/지구본 중 어디서 되는지, 프리미엄인지, 어느 변종에 보이는지가 선언돼 있다. supercluster 군집화, pmtiles 셀프호스팅 타일도 실전 예제.

③ 브라우저 안의 AI — Transformers.js + ONNX + 웹 워커

src/workers/ml.worker.ts는 서버 없이 브라우저에서 ONNX 모델(all-MiniLM-L6-v2 임베딩, sst-2 감성, flan-t5 요약, bert NER)을 돌린다. 무거운 추론을 웹 워커(별도 스레드)로 빼서 UI가 안 끊기게 하는 패턴, 그리고 IndexedDB 벡터 저장으로 의미 검색까지 한다.

④ 서버리스 + 다단계 캐시 + 코얼레싱

server/gateway.ts와 _shared/redis.ts는 프로덕션 서버리스의 정석이다. 게이트웨이 팩토리로 공통 미들웨어를 조립하고, cachedFetchJson으로 캐시 스탬피드(동시 미스 폭주)를 막으며, ETag로 304를 돌려 대역폭을 아낀다.

⑤ Protocol Buffers 계약 우선 개발

proto/의 276개 정의에서 TS 클라이언트·서버·OpenAPI가 자동 생성된다. CI(proto-check.yml)가 "생성물이 최신인지" 강제한다. "계약을 먼저 쓰고 코드는 생성"하는 대규모 API 설계를 배운다.

⑥ Tauri 2 데스크탑 + 보안 사이드카

src-tauri/는 웹 코드를 네이티브 데스크탑 앱으로 만드는 법을 보여준다. 특히 OS 키체인에 비밀 저장 → IPC로 사이드카에 주입, 렌더러↔사이드카 신뢰 경계, fetch 패치로 API를 로컬로 우회하는 설계는 보안 관점에서도 훌륭한 사례다.

7하드웨어/시스템 요구사항

그냥 쓰는 건 브라우저면 충분 — 부담은 '셀프호스팅 운영'과 '브라우저 AI 모델 다운로드'다.

그냥 써보는 거라면 worldmonitor.app에 접속하거나 데스크탑 앱을 받으면 끝이다. 직접 돌리는(셀프호스팅) 경우, 무거운 LLM 추론은 외부(Groq/OpenRouter)나 로컬 Ollama가 맡고, 코드 자체는 Node 환경에서 가볍게 돈다. 진짜 변수는 ① 일부 기능의 API 키, ② 브라우저 AI를 켜면 받는 ONNX 모델 용량, ③ 로컬 Ollama를 쓸 때의 GPU/RAM이다.

8직접 해볼 수 있는 실습 과제

"실행 → 패널 추가 → 지도 레이어 → 캐시·계약 → AI 워커"로 난이도 상승.

과제 1. 클론해서 띄우고 변종 둘러보기 난이도 ★☆☆☆☆

git clone → npm install → npm run dev로 기본 앱을 띄운다(환경변수 0개). 이어서 npm run dev:tech·dev:finance로 같은 코드가 어떻게 다른 앱이 되는지 비교하고, 어떤 패널·지도 레이어가 달라지는지 메모한다.

과제 2. 나만의 패널 한 개 추가 난이도 ★★☆☆☆

src/components/Panel.ts를 부모로 하는 작은 패널을 만들어 패널 그리드에 띄운다. setContent(html)로 그리고, 버튼 클릭을 이벤트 위임으로 처리해 본다. 프레임워크 없이 컴포넌트를 다루는 감을 잡는 단계.

과제 3. deck.gl 지도 레이어 실험 난이도 ★★★☆☆

src/config/map-layer-definitions.ts 구조를 읽고, 새 ScatterplotLayer를 정의해 임의 데이터를 평면 지도에 띄운다. 가능하면 supercluster 군집화를 붙이고, 3D 지구본(globe.gl)에서는 어떻게 표현이 달라지는지 확인한다.

과제 4. Edge 함수 + 캐시 코얼레싱 직접 구현 난이도 ★★★★☆

server/gateway.ts의 파이프라인과 cachedFetchJson을 참고해, 외부 API 하나를 감싸는 미니 게이트웨이를 만든다. ETag/304, IP 레이트리밋, 동시 미스 코얼레싱을 넣고 부하 테스트로 외부 호출 횟수를 측정하면 설계의 효과가 숫자로 보인다.

과제 5. 브라우저 AI로 뉴스 군집화 + 상관 카드 난이도 ★★★★★

src/workers/ml.worker.ts와 analysis.worker.ts, correlation-engine/engine.ts를 읽고, 임베딩 → 유사도 군집 → 거리 기반 신호 수렴 → 수렴 카드의 흐름을 미니 버전으로 재현한다. 여유가 되면 점수가 높을 때만 LLM 평가를 붙여(동시 호출 제한·캐시 포함) World Monitor의 분석 두뇌를 따라 만들어 본다.

9관련 기술 심화 학습 로드맵

'바닐라 TS SPA → WebGL 지도 → 서버리스·캐시 → 브라우저 AI → 데스크탑·계약'의 5주 코스.

10핵심 키워드 사전

World Monitor 문서·코드에서 반복되는 용어를 한 곳에.

11참고 링크

공식 저장소·라이브 데모·문서·커뮤니티.