moonithm 님의 블로그

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..

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

안녕하세요! 지난번 Boids 군집 알고리즘에 이어, 오늘은 인디 게임 개발(절차적 맵 생성)에서 가장 핫한 알고리즘 중 하나인 Wave Function Collapse (이하 WFC) 알고리즘을 Qt C++와 QML로 구현해 보겠습니다.WFC는 이름부터 굉장히 멋집니다. 양자역학의 '관측하기 전까지는 여러 상태가 중첩되어 있다가, 관측하는 순간 하나의 상태로 확정(붕괴)된다'는 개념을 차용했습니다. 쉽게 말해 초고급 스도쿠를 푸는 방식과 똑같습니다.오늘은 가장 기본적인 타일 매칭(바다, 모래사장, 육지)을 예제로, 타일이 하나씩 결정되면서 멋진 지도가 자동으로 생성되는 과정을 QML로 시각화해 보겠습니다! (MinGW + Qt6 환경 기준)🌊 WFC의 3가지 핵심 단계빈 그리드(Grid)의 모든 칸은..

안녕하세요! 오늘은 C++과 QML을 활용해서 시각적으로 아주 재미있는 알고리즘을 구현해 보겠습니다. 바로 Boids(보이드) 알고리즘입니다.게임이나 영화에서 수백 마리의 새떼나 물고기 떼가 리더 없이도 서로 부딪히지 않고 무리 지어 이동하는 모습을 본 적 있으신가요? 1986년 크레이그 레이놀즈(Craig Reynolds)가 고안한 이 알고리즘은 단 3가지의 간단한 규칙만으로 이러한 군집(Flocking) 행동을 완벽하게 시뮬레이션합니다.오늘은 로직은 Qt C++로 빠르게 연산하고, 렌더링은 QML을 이용해 부드럽게 시각화하는 방법을 알아보겠습니다. (MinGW + Qt 환경 기준)🦅 Boids의 3가지 핵심 규칙Boids 알고리즘의 각 개체(Boid)는 주변에 있는 다른 개체들을 관찰하고 다음 3가..

안녕하세요, moonithm입니다.지난 포스팅에서 닌텐도 스위치 2가 "낮은 해상도로 렌더링하고, AI로 업스케일링하여 출력한다"는 전략을 쓴다고 분석했었는데요. 👉 [이전 글 보기] 닌텐도 스위치 2의 심장, 'T239'와 DLSS가 증명한 4K의 비밀 [분석] 닌텐도 스위치 2의 심장, 'T239'와 DLSS가 증명한 4K의 비밀안녕하세요, moonithm입니다.작년 6월, 닌텐도 스위치 2가 드디어 세상에 나왔습니다. 출시된 지 반년이 지난 지금, 초기 물량 부족 사태도 어느 정도 진정되었고 기기에 대한 기술적 분석도 끝났습moonithm.tistory.com 오늘은 이 이론을 바탕으로, C++과 Qt를 이용해 실제 개발자 관점에서 이 기술을 직접 구현해 본 과정을 공유합니다.1. 프로젝트 목..