moonithm 님의 블로그

들어가며: 폴리곤을 넘어 실사 기반의 공간 정보로지난 글에서는 React와 FastAPI 기반의 WebGPU 렌더링 파이프라인의 기초를 다뤘습니다. 많은 동료 개발자분들께서 "그래서 이 기술을 실제 지도나 GIS 서비스에 어떻게 녹여낼 수 있을까?"라는 질문을 주셨는데요.마침 2026년 초, MapLibre가 WebGPU 백엔드를 실험적으로 도입하고 ArcGIS가 가우시안 스플래팅 레이어를 정식 지원하기 시작했습니다. 이제 우리는 단순히 예쁜 3D 모델을 보여주는 것을 넘어, 좌표계 기반의 정밀한 지도 위에 실사급 환경을 얹을 수 있게 되었습니다. 오늘은 그 아키텍처 설계 과정을 공유합니다.왜 3DGS와 지도의 결합인가?전통적인 매쉬(Mesh) 기반의 디지털 트윈은 건물 외벽은 잘 표현하지만, 나뭇잎, ..

들어가며: 웹에서 만나는 실사급 3D의 시대지난 포스팅에서 우리는 FastAPI를 활용해 대용량 공간 데이터를 효율적으로 서빙하는 하이브리드 아키텍처의 기초를 다뤘습니다. 오늘은 그 연장선상에서, 서빙된 데이터를 사용자 브라우저에서 어떻게 가장 화려하고 빠르게 렌더링할 것인지에 대해 이야기해보려 합니다. 2026년 현재, WebGPU는 더 이상 실험적인 기술이 아닙니다. 대부분의 메이저 브라우저에서 정식 지원되며, 특히 3D 가우시안 스플래팅(3DGS) 기술과 만나면서 기존 WebGL이 가졌던 성능의 한계를 가볍게 뛰어넘고 있습니다. 오늘은 React와 FastAPI 생태계 안에서 이 혁신적인 렌더링 파이프라인을 어떻게 설계해야 하는지 공유하겠습니다.왜 가우시안 스플래팅(3DGS)인가?기존의 폴리곤 메시..

AI 코딩 어시스턴트 도입과 프론트엔드 생태계의 변화최근 소프트웨어 공학 분야에서 대규모 언어 모델(LLM) 기반 코딩 어시스턴트의 실무 도입이 가속화되고 있다. 특히 React와 TypeScript를 결합한 현대적 프론트엔드 개발 환경에서, AI 도구는 보일러플레이트(Boilerplate) 코드 작성 시간을 단축하고 초기 구현 속도를 비약적으로 향상시킨다. 그러나 실무 경험 1~3년 차의 주니어 엔지니어 관점에서, AI가 생성한 코드의 무비판적 수용은 시스템의 결합도(Coupling)를 높이고 정적 타입 시스템의 이점을 훼손하는 등 심각한 기술 부채(Technical Debt)를 초래할 위험성을 내포하고 있다. 본 글에서는 React 및 TypeScript 환경에서 AI를 활용할 때 견지해야 할 엔지니..

10년 넘게 3D 그래픽스 엔지니어로 현업에서 다양한 렌더링 파이프라인을 설계하고 최적화해 오면서, 그래픽스 기술의 발전은 늘 '어떻게 하면 현실의 빛과 공간을 모니터 너머로 완벽하게 옮겨올 것인가'에 대한 처절한 고민의 연속이었습니다. 그리고 지금, 우리는 수십 년간 그래픽스 산업을 지배해 온 폴리곤(Polygon) 메쉬 기반의 전통적인 렌더링 아키텍처가 새로운 차원의 패러다임으로 전환되는 거대한 변곡점 한가운데 서 있습니다.오늘 이 칼럼에서는 단순한 픽셀의 나열을 넘어 공간 자체를 학습하고 재구성하는 혁신적인 뷰 합성(Novel View Synthesis) 기술, NeRF(Neural Radiance Fields)와 3D Gaussian Splatting의 수학적, 물리적 원리를 엔지니어의 시각에서 ..

1. 도입: 브라우저, 네이티브의 마지막 영토를 넘보다지난 [Hybrid Core] 시리즈를 통해 우리는 데스크톱 애플리케이션에서 Qt(C++)의 강력한 연산 능력과 React(JS)의 유연한 UI 생태계를 결합하는 하이브리드 아키텍처를 살펴보았습니다. 이 구조는 성능과 UI라는 두 마리 토끼를 잡는 데 매우 효과적이었지만, 여전히 C++ 코어는 데스크톱이라는 네이티브 환경에 묶여 있었습니다.그럼, 우리가 정성껏 작성한 고성능 C++ 알고리즘 엔진을 설치형 앱이 아닌, 순수 웹 브라우저에서 그대로 실행할 수는 없을까요?과거에는 자바스크립트의 성능 한계로 인해 불가능에 가까웠던 이 꿈이, 이제는 WebAssembly(WASM)라는 기술을 통해 현실이 되었습니다. 이번 포스팅에서는 C++ 엔진을 WASM으로..

Step 3. 렌더링 최적화: 대용량 공간 데이터 처리와 병목 현상 해결1. 도입: 통신 고속도로의 트래픽 잼(Traffic Jam)지난 2편에서는 QWebChannel을 활용하여 C++ 코어 엔진과 React 프론트엔드 사이에 실시간 통신 고속도로를 개통했습니다. 단일 이벤트나 간단한 상태 값을 주고받는 데에는 이 구조가 완벽하게 작동합니다.하지만 지도 시각화 도메인에서는 상황이 다릅니다. 수만 개의 좌표(Coordinate)로 이루어진 복잡한 경로 데이터나 전국 단위의 폴리곤 데이터를 QWebChannel을 통해 한 번에 전송하려고 하면, UI 스레드가 일시적으로 멈추는 프리징(Freezing) 현상을 마주하게 됩니다.이번 3편(최종편)에서는 대용량 GeoJSON 데이터를 주고받을 때 발생하는 직렬화..

Step 2. IPC 브릿지 구현: QWebChannel을 활용한 C++와 React의 실시간 통신1. 도입: 두 세계를 잇는 다리, QWebChannel지난 1편에서는 무거운 연산을 처리하는 C++(Qt) 코어 엔진과 유연한 시각화를 담당하는 Web(React) 프레젠테이션 레이어를 분리하는 아키텍처 설계 배경을 살펴보았습니다. 그럼, 이렇게 물리적으로 분리된 두 환경은 어떻게 실시간으로 데이터를 주고받을 수 있을까요?이 하이브리드 아키텍처의 핵심 통신망 역할을 하는 것이 바로 QWebChannel입니다. 내부적으로 WebSockets를 사용하여 동작하는 이 모듈은, C++의 QObject 파생 클래스를 JavaScript 환경에 매끄럽게 노출(Publish)시켜 줍니다. 덕분에 웹 프론트엔드 개발자는..

Step 1. 아키텍처 설계: 네이티브 성능과 웹 생태계의 결합 1. 도입: 데스크톱 UI 렌더링의 기술적 한계와 요구사항최근 진행 중인 프로젝트는 대용량 공간 데이터의 실시간 처리와 고도의 상호작용이 요구되는 지도 시각화 기능을 포함하고 있습니다. 이러한 시스템을 설계할 때, 엔지니어는 렌더링 파이프라인과 비즈니스 로직의 결합 방식을 두고 중대한 선택에 직면하게 됩니다.전통적인 데스크톱 애플리케이션 프레임워크인 Qt는 C++ 기반의 강력한 시스템 제어와 메모리 관리 능력을 제공하지만, 맵 시각화와 같은 복잡한 동적 UI를 네이티브 위젯이나 QML만으로 구현하는 데에는 렌더링 유연성과 서드파티 라이브러리 지원 측면에서 한계가 존재합니다. 반면, 웹 생태계(React, WebGL 기반 맵 엔진 등)는 UI..

안녕하세요! 그동안 알고리즘 시각화나 QML Canvas를 활용한 UI 구현(펜타곤 스탯 등)에 대해 다루어 보았는데요. 오늘은 코딩을 잠시 멈추고, 현재 개발 생태계에서 가장 뜨거운 감자로 떠오르고 있는 최신 개발 기술 트렌드에 대해 이야기해 볼까 합니다.웹이나 백엔드 쪽 트렌드(React, Next.js 등)는 워낙 정보가 많지만, C++과 Qt/QML을 주력으로 하는 데스크톱 애플리케이션 개발자 관점에서는 어떤 기술을 주목해야 할까요? 우리의 무기인 C++의 강력한 성능을 극대화할 수 있는 트렌드 3가지를 꼽아보았습니다.🤖 1. On-Device AI (온디바이스 AI)와 llama.cpp 이제 AI는 클라우드 서버에서만 도는 것이 아니라, 사용자의 PC와 스마트폰 내부에서 직접 돌아가는 온디바이..

안녕하세요! 오늘은 동적 펜타곤(오각형) 스탯 UI에 대해서 구현해 보겠습니다.농구 선수나 축구 선수의 능력치를 비교할 때, 혹은 게임 캐릭터의 스탯을 보여줄 때 가장 직관적이고 멋진 UI가 바로 이 '레이더 차트(Radar Chart)' 형태의 오각형 그래프입니다.오늘은 C++로 선수의 스탯 데이터를 관리하고, QML의 Canvas 객체를 이용해 오각형 그래프를 직접 그리는 방법을 알아보겠습니다. 값이 바뀔 때마다 스무스하게 애니메이션되는 효과까지 넣어볼 예정입니다! (MinGW + Qt6 환경 기준)🏀 1. C++ 백엔드: 선수 스탯 데이터 모델링먼저 선수의 스탯을 담을 C++ 클래스를 만듭니다. QML에서 스탯 값을 읽고 쓸 수 있으며, 값이 바뀔 때 애니메이션을 적용하기 위해 Q_PROPERTY..