Gemini 에이전트와 WebAssembly로 구현한 NEON LIFE 3D 프로토타입 구현 경험

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

브라우저 기반 3D Game of Life 프로토타입은 React 프런트엔드와 C로 작성해 WebAssembly로 컴파일한 엔진을 결합해 연산을 오프로드하는 구조를 사용했고 Gemini 에이전트와 협업하며 설계·코드를 수정해 완성했다. 초기에는 에이전트가 상태 중복과 대형 struct 사용, 프레임별 전체 그리드 스캔 같은 비효율을 만들었고 작성자는 비트 배열로 상태를 팩킹하고 그리드를 청크로 분할해 활성 구역만 처리하며 인스턴스 메쉬와 커스텀 셰이더로 렌더링 오버헤드를 줄이는 등 일련의 최적화를 적용했다. 또한 React의 전역 컨텍스트로 인한 리렌더링 문제를 구독 기반 커스텀 스토어로 해결했고 큐브 엣지 래핑은 동기화된 halo 버퍼와 정수 연산으로 안정적으로 구현했다. 이러한 경험은 AI 에이전트가 초기 설계나 코드 생성에서 도움을 주지만 자료구조 설계와 성능 최적화는 개발자가 직접 개입해 검증해야 함을 보여준다.

실용적 조언

계산 집약적 작업은 C 같은 언어로 작성해 WebAssembly로 컴파일한 뒤 포인터 기반 공유 버퍼로 JS와 통신하면 렌더링 루프와 연산을 분리해 프레임 유지에 유리하다. 이 방식은 입력(사용자 명령)을 받은 뒤 엔진이 메모리 버퍼에서 상태를 업데이트하고 결과 버퍼를 전달하면 렌더러가 가볍게 시각화만 수행하는 처리 흐름을 만든다. 브리징 계층에서 상태 소유권을 명확히 정리해 JS와 WASM 간 중복 상태를 피하는 것이 중요하다.
자료구조는 초기에 메모리 친화적으로 설계해야 하며 빈번한 상태를 비트 단위로 팩킹하면 메모리 사용량과 캐시 효율을 크게 개선할 수 있다. 셀 상태와 이웃 수를 비트 배열 또는 비트셋으로 표현하면 대규모 그리드에서 메모리 대역과 캐시 히트율이 향상된다. 에이전트가 제안한 고정 크기 struct를 그대로 사용하지 말고 메모리 오버헤드를 측정해 필요한 최소 표현으로 축소할 것을 권장한다.
시뮬레이션 루프는 전체 스캔 대신 활성 영역 트래킹을 적용해 희소한 활동을 건너뛰도록 설계하면 불필요한 연산을 줄일 수 있다. 그리드를 청크로 분할하고 각 청크에 활동 플래그를 유지하면 빈 청크를 전혀 처리하지 않아도 되므로 초당 처리량이 크게 개선된다. 실무에서 이 접근은 실시간 응답성과 전력·CPU 소모를 모두 절감하는 효과가 있다.
렌더링 최적화는 인스턴스 메쉬와 셰이더 내 베이킹으로 드로우 콜과 CPU–GPU 상호작용을 줄이는 것이 핵심이다. 경계선이나 아웃라인을 기하로 그리지 않고 셰이더에서 계산·합성하면 GPU에서 처리 효율이 상승하고 프레임 안정성이 개선된다. 또한 리액트의 전역 상태로 인해 대규모 리렌더링이 발생하면 점수 등 빈번히 변하는 소량 상태는 구독 기반의 커스텀 스토어로 분리해 리렌더링 범위를 국소화해야 한다.

섹션별 상세

프로젝트는 계산 집약적 시뮬레이션을 웹 환경에서 실행하기 위해 React 프런트엔드와 C로 작성한 코어 엔진을 WebAssembly로 연결하는 아키텍처를 채택했다. 입력으로는 사용자 인터랙션과 UI 업데이트 요청이 들어오고 C 기반 엔진은 포인터 기반의 메모리 접근으로 셀 상태와 이웃 계산을 수행한 뒤 결과 버퍼를 JS로 반환해 렌더러가 시각화를 갱신했다. 작성자는 React가 무거운 계산을 수행하기에 적합하지 않아 연산을 WASM으로 오프로드했다고 구체적으로 적시했고 포인터 접근을 위한 브리징 모듈을 구현해 상태 동기화 문제를 해결했다고 밝혔다. 이 구조로 시뮬레이션과 렌더링의 책임을 분리해 프레임 유지와 연산 효율을 확보한 점이 실무적 의미로 제시됐다.

작성자는 Gemini 기반 에이전트와의 협업 과정에서 에이전트가 비효율적인 설계 선택을 반복했다고 보고했다. 에이전트가 초기 설계에서 JS와 C 사이에 상태를 중복 보유하게 만드는 코드를 생성했고 메모리를 소모하는 대형 struct를 각 셀에 할당하는 방식으로 제안해 메모리 사용량이 급증했다. 이에 작성자는 비트 배열로 상태와 이웃 카운트를 팩킹하라고 지시해 메모리 표현을 축소했고 해당 변경으로 메모리 사용 패턴이 개선되었다고 기술했다. 이 경험은 에이전트가 직접 동작을 자동으로 만들어도 자료구조 설계와 상태 소유권은 인간이 검토해 최적화해야 한다는 실무적 교훈을 남겼다.

초기 시뮬레이션 루프는 단순 브루트포스로 매 프레임(작성자는 초당 60회로 서술) 전체 그리드를 검사하는 방식이었고, 이로 인해 빈 영역에서도 불필요한 연산이 발생해 성능 저하가 나타났다. 해결책으로 그리드를 활성 영역(chunked active zones)으로 분할해 활동이 없는 청크는 건너뛰는 방식으로 입력 상태를 필터링하고, 각 청크 내에서만 업데이트를 수행하는 흐름으로 변경했다. 작성자는 이 변경을 적용해 빈 공간을 건너뛰게 되었음을 명시했고 이는 응답성 향상과 불필요한 CPU 사이클 감소로 이어졌다고 보고했다. 이 사례는 시뮬레이션에서 공간적 희소성을 이용해 계산 복잡도를 크게 낮출 수 있다는 점을 실무적으로 보여준다.

렌더링 측면에서는 처음에 각 셀의 경계선을 개별 기하로 렌더링하다가 드로우 콜 과다로 병목이 발생했고, 작성자는 인스턴스 메쉬와 커스텀 셰이더로 전환해 경계선을 셀 스프라이트에 베이크하는 방식으로 개선했다. 이 방식은 동일 기하의 다중 인스턴스를 단일 드로우 콜로 처리하고 셰이더 내에서 투명도와 아웃라인을 제어해 GPU 측 오버헤드를 줄였다. 작성자는 또한 죽은 셀을 완전 투명으로 만들어 픽셀 셰이더에서 아예 렌더링 비용을 회피하는 최적화를 적용했다고 밝혔고, 그 결과 시각적 품질을 유지하면서 성능을 확보한 것으로 나타났다. 이러한 접근은 대규모 셀 기반 시각화에서 드로우 콜 최소화와 셰이더 바인딩 전략의 중요성을 뒷받침한다.

리액트 기반 상태 관리는 점수 등 소량의 데이터 변경으로 전체 3D 캔버스와 UI가 전체 리렌더링되는 문제가 발생해 병목을 유발했다. 이를 해결하기 위해 글로벌 컨텍스트에 의존하던 구조를 버리고 점수 텍스트에만 구독(subscription) 방식으로 변경된 커스텀 스토어를 도입해 변경 알림을 필요한 컴포넌트로만 전파하도록 설계했다. 작성자는 큐브의 엣지를 감싸는 동기화 halo 버퍼를 추가해 각 면의 인접 상태를 정수 연산으로 미러링함으로써 부동소수점 오차 없이 래핑 동작을 구현했다고 기술했다. 이 구성은 상태 변경의 범위를 국소화하고 수치적 안정성을 확보하는 방향으로 설계적 트레이드오프를 선택한 사례로 해석된다.

용어 해설

에이전트(Agent): — AI 에이전트는 사용자 지시를 받아 코드나 설계를 생성·수정하고 워크플로우를 자동화하는 소프트웨어 구성요소로, 입력된 자연어 또는 명세를 해석해 개발 작업을 수행한 뒤 결과물(코드·설계·설명)을 반환한다. 에이전트는 보통 프롬프트로 동작하며 코드 생성 시 설계·상태 동기화 등 시스템 경계를 관리해야 하기 때문에 잘못된 상태 소유권 설계가 성능·버그의 원인이 된다. 본 글에서는 Gemini 기반 에이전트가 초기 설계에서 상태 중복과 비효율적 데이터 구조를 만들어 직접 개입해 수정을 유도한 사례가 핵심적 맥락이다.
WebAssembly: — WebAssembly는 C/C++ 같은 언어로 작성된 성능 민감 코드를 웹 브라우저에서 네이티브에 가깝게 실행하도록 바이트코드 형태로 컴파일하는 런타임이다. JavaScript와 포인터 교환이나 메모리 버퍼 공유로 상호작용하며 계산 집중 작업을 오프로드하면 렌더링 루프와 분리된 고성능 처리 파이프라인을 구성할 수 있다. 본 프로젝트에서는 게임 시뮬레이션을 C로 작성해 WebAssembly로 실행하고 JS/React는 시각화와 입출력만 담당하는 구조로 사용됐다.
인스턴스 메쉬(Instanced Mesh): — Instanced Mesh는 동일한 기하 구조를 여러 번 그릴 때 단일 드로우 콜로 GPU에 다수의 인스턴스를 전달해 렌더링 오버헤드를 줄이는 그래픽스 기법이다. 위치·색상·텍스처 좌표 같은 인스턴스별 속성만 별도로 전달하면 수천~수만 개의 객체를 효율적으로 렌더링할 수 있어 셀 기반 시각화에 적합하다. 글에서는 각 셀의 경계선을 개별 기하로 그리던 접근을 인스턴스 메쉬와 셰이더에 아웃라인을 베이크하는 방식으로 바꿔 성능을 개선한 사례가 언급됐다.

언급된 도구

WebAssembly추천

브라우저에서 C로 작성된 고성능 시뮬레이션 엔진을 실행하는 런타임

Gemini중립

에이전트로서 설계·코드 초안을 생성하고 개선을 제안한 LLM

Three.js추천

3D 렌더링을 위해 React와 함께 사용된 그래픽스 라이브러리

React중립

UI와 상호작용 처리를 담당한 프런트엔드 프레임워크

언급된 리소스

GitHubNeon-Life-3D GitHub 리포지토리