2분반-인테리

프로젝트 개요

기술개발 과제

국문 : WebGPU 기반 고품질 인테리어 조명 시뮬레이터 개발

영문 : Development of a High-Quality WebGPU-based Interior Lighting Simulator

과제 팀명

인테리(Intery)

지도교수

김민호 교수님

개발기간

2025년 09월 ～ 2025년 12월(총 4개월)

구성원 소개

서울시립대학교 컴퓨터과학부 20229200** 오*민(팀장)

서울시립대학교 컴퓨터과학부 20229200** 류*화

서울시립대학교 컴퓨터과학부 20229200** 배*연

서울시립대학교 물리학과 20195500** 한*민

서론

개발 과제의 개요

개발 과제 요약

본 과제는 웹 환경에서 방 안에 다양한 전등을 배치하고, 조명의 밝기·색온도·조명각·위치를 실시간으로 조절하며 그 결과를 직관적으로 확인할 수 있는 인테리어 조명 시뮬레이터를 개발하는 것을 목표로 한다. 사용자는 복잡한 전문 지식 없이도 조명 설정을 변경하면서 공간 분위기의 변화를 즉시 확인할 수 있으며, 이를 통해 실제 설치 환경과 유사한 시뮬레이션 경험을 제공받는다. 특히 화면 품질과 계산 속도를 동시에 확보하기 위해 빛 샘플링을 효율적으로 처리하는 최신 기술인 ReSTIR을 적용하여, 다수의 전등이 존재하는 장면에서도 고품질의 렌더링을 실시간으로 구현한다. 이러한 기능을 통해 조명 제품 구매 전 시뮬레이션을 제공함으로써 구매 전환율을 높이고, 반품을 줄이며, 인테리어 디자인 제안의 신뢰성을 강화하는 비즈니스적 효과를 기대할 수 있다.

개발 과제의 배경

기존의 웹 기반 인테리어 시뮬레이터는 대부분 단순한 PBR(물리 기반 렌더링) 수준에 머물러 있어, 전등의 개수가 증가할수록 화면이 거칠어지고 성능이 급격히 저하되는 한계를 가지고 있다. 그러나 실제 소비자는 조명 배치, 색온도, 밝기 변화에 따라 공간 분위기가 어떻게 달라지는지를 구매 이전 단계에서 정확히 확인하고자 한다. 현재의 상용 서비스들은 이러한 요구를 사실적으로 충족시키지 못하고 있으며, 이는 사용자 경험의 한계로 이어진다. 본 과제는 이러한 문제를 해결하기 위해 최신 조명 샘플링 기법인 ReSTIR을 웹 환경에 적용하여, 제한된 연산 자원에서도 고품질의 실시간 조명 시뮬레이션을 가능하게 함으로써 기존 웹 인테리어 서비스의 기술적 한계를 극복하고자 한다.

개발 과제의 목표 및 내용

본 과제의 기술적 목표는 RTX 3060급 GPU 환경에서 (1024*768) 해상도 기준 60FPS의 실시간 성능을 안정적으로 달성하는 것이다. 이를 위해 전등이 최대 32개 수준으로 배치된 장면에서도 조명 노이즈와 깜빡임 현상을 눈에 띄게 줄이고, 사용자 상호작용 시에도 시각적 품질이 유지되도록 한다. 사용자는 웹 인터페이스를 통해 전등을 자유롭게 배치하고, 밝기, 색온도, 빔 각도뿐만 아니라 시간대(아침·저녁 등)에 따른 자연광 변화까지 설정할 수 있다. 또한 시뮬레이션 결과를 저장하고 다른 사용자와 공유할 수 있는 기능을 제공함으로써, 개인 사용뿐만 아니라 협업 및 디자인 제안 도구로도 활용 가능하도록 구성한다.

관련 기술의 현황

관련 기술의 현황 및 분석(State of art)

• NVIDIA ReSTIR

NVIDIA ReSTIR는 실시간 레이 트레이싱에서 다수(수천~수백만)의 동적 광원을 다루는 직접조명(Direct Illumination) 문제를 해결하기 위해 제안된 대표적인 최신 샘플링 기술이다. 핵심 아이디어는 픽셀마다 여러 후보 광원 샘플을 생성한 뒤, 이 중 좋은 샘플을 저장소(Reservoir) 구조에 압축해 유지하고, 이를 시간(Temporal)과 공간(Spatial) 방향으로 재사용(resampling)함으로써 적은 샘플 수로도 높은 품질의 조명과 그림자를 얻는 것이다. 이 접근은 복잡한 가속 구조나 광원 선택 자료구조를 유지하지 않고도 조명 복잡도 증가에 따른 성능 저하를 완화하며, 결과적으로 조명이 많아질수록 느려지는 전통적 방식의 병목을 줄여 실시간 품질/성능의 균형을 크게 개선했다. ReSTIR는 원래 동적 직접조명에 초점을 맞춰 제안되었고(일명 ReSTIR DI), 이후 동일한 “재표본화 기반의 샘플 재사용” 철학을 확장하여 간접조명(GI) 및 경로 추적(Path Tracing)으로까지 발전하는 흐름을 만들었다.

• WebGPU

WebGPU는 웹 환경에서 고성능 그래픽스 및 범용 GPU 연산(GPGPU)을 가능하게 하기 위해 제안된 최신 웹 표준 API로, 기존 WebGL이 가지던 구조적·성능적 한계를 근본적으로 개선하는 것을 목표로 한다. WebGPU는 Vulkan, DirectX 12, Metal과 같은 현대적인 저수준 그래픽 API의 설계 철학을 계승하여, 명시적인 리소스 관리, 파이프라인 상태 객체 기반 렌더링, 그리고 컴퓨트 셰이더 중심의 연산 모델을 웹으로 확장하였다. 이를 통해 개발자는 GPU 메모리, 동기화, 바인딩 구조를 보다 세밀하게 제어할 수 있으며, 복잡한 렌더링 파이프라인과 대규모 병렬 연산을 효율적으로 구현할 수 있다. 특히 WebGPU는 Compute Shader를 1급 시민(first-class feature)으로 지원함으로써, 단순한 래스터라이징 기반 그래픽스를 넘어 물리 시뮬레이션, 이미지 처리, 머신러닝 추론, 그리고 실시간 레이 트레이싱 전처리·후처리와 같은 고급 GPU 연산을 웹에서 직접 수행할 수 있게 한다. 이는 WebGL의 프래그먼트 셰이더 기반 GPGPU 기법보다 훨씬 명확하고 안정적인 연산 모델을 제공하며, 복잡한 알고리즘을 구현하는 데 있어 코드 구조와 성능 예측성을 크게 향상시킨다. 최근에는 주요 브라우저(Chrome, Edge 등)에서 WebGPU가 안정적으로 지원되기 시작하면서, 연구 및 산업 전반에서 WebGPU를 활용한 고급 렌더링 및 시뮬레이션 사례가 빠르게 증가하고 있다. 특히 실시간 경로 추적(Path Tracing), 물리 기반 시뮬레이션, 대규모 파티클 시스템 등 기존에는 네이티브 애플리케이션에서만 가능했던 작업들이 웹 환경에서도 실험·구현되고 있다. 이러한 흐름은 WebGPU가 단순한 차세대 WebGL을 넘어, 웹을 하나의 범용 고성능 시뮬레이션 플랫폼으로 확장시키는 핵심 기술로 자리 잡고 있음을 보여준다.

• Three.js

Three.js는 웹 환경에서 3차원 그래픽스를 손쉽게 구현할 수 있도록 설계된 대표적인 JavaScript 기반 3D 렌더링 라이브러리로, WebGL을 추상화하여 복잡한 그래픽 파이프라인을 비교적 간단한 API로 제공한다. 카메라, 조명, 메시, 머티리얼, 씬(Scene) 관리 등 3D 그래픽스의 핵심 요소를 고수준 인터페이스로 캡슐화함으로써, 그래픽스 전문 지식이 없는 개발자도 웹에서 인터랙티브한 3D 콘텐츠를 제작할 수 있도록 지원해 왔다. 이러한 접근성 덕분에 Three.js는 웹 기반 제품 시각화, 교육 콘텐츠, 게임, 메타버스, 인테리어 시뮬레이터 등 다양한 분야에서 사실상의 표준 라이브러리로 자리 잡았다. 기술적으로 Three.js는 물리 기반 렌더링(PBR)을 지원하는 표준 머티리얼(MeshStandardMaterial, MeshPhysicalMaterial)을 제공하며, 환경 맵, 그림자 매핑, HDR 조명 등 현대적인 실시간 그래픽스 기능을 폭넓게 포함하고 있다. 이를 통해 비교적 적은 구현 비용으로 그럴듯한 시각적 결과를 얻을 수 있으나, 내부적으로는 여전히 래스터라이징 중심의 렌더링 구조에 의존하고 있어, 광원이 많아질수록 조명 계산 비용이 증가하고 노이즈 없는 고품질 글로벌 일루미네이션을 구현하는 데에는 구조적 한계가 존재한다. 특히 다수의 전등이 배치된 실내 환경에서는 그림자 품질 저하, 조명 정확도 부족, 성능 저하 문제가 쉽게 발생한다. 최근 Three.js는 WebGPU 백엔드(Renderer) 도입을 통해 기술적 확장을 시도하고 있다. 실험적 WebGPURenderer는 기존 WebGLRenderer 대비 더 명시적인 리소스 관리와 컴퓨트 셰이더 활용 가능성을 제공하며, 장기적으로는 경로 추적(Path Tracing) 및 고급 조명 기법과의 결합 가능성을 열어두고 있다. 그러나 현재 시점에서 Three.js의 WebGPU 지원은 아직 완전한 대체 단계에 이르지 않았으며, 고급 실시간 조명 기법(ReSTIR, 실시간 Path Tracing 등)을 직접적으로 제공하기보다는, 여전히 고수준 장면 관리 및 인터랙션 레이어로서의 역할이 중심이다. 이러한 특성으로 인해 Three.js는 최신 웹 그래픽 파이프라인에서 렌더링 코어보다는 UI·씬 관리·상호작용 계층으로 활용되는 방향으로 진화하고 있다.

• React

React는 사용자 인터페이스(UI) 구축을 위해 설계된 대표적인 JavaScript 라이브러리로, 선언적 컴포넌트 기반 구조와 상태 중심의 렌더링 모델을 통해 복잡한 웹 애플리케이션을 체계적으로 관리할 수 있도록 한다. UI를 독립적인 컴포넌트 단위로 분리하고, 각 컴포넌트가 상태(State) 변화에 따라 자동으로 화면을 갱신하는 방식은 대규모 인터랙티브 웹 서비스에서 높은 유지보수성과 확장성을 제공한다. 이러한 특성으로 인해 React는 현재 웹 프론트엔드 분야에서 사실상의 표준 프레임워크로 자리 잡았으며, 다양한 산업 영역에서 복잡한 사용자 상호작용을 처리하는 핵심 기술로 활용되고 있다. 기술적으로 React는 Virtual DOM 기반의 변경 감지(diffing) 메커니즘을 통해 UI 업데이트 비용을 최소화하고, 데이터 흐름을 단방향으로 제한함으로써 애플리케이션 상태 변화를 예측 가능하게 만든다. 이는 실시간으로 다수의 입력과 시각적 변화를 처리해야 하는 인터랙티브 시뮬레이션 환경에서 특히 중요한 장점으로 작용한다. 예를 들어 사용자가 조명 밝기나 색온도를 조절할 때, React는 해당 상태 변경을 즉시 UI에 반영하면서도 불필요한 DOM 조작을 줄여 안정적인 사용자 경험을 제공한다. 이러한 구조는 복잡한 설정 패널, 실시간 파라미터 조정 UI, 상태 기반 제어 로직을 구현하는 데 적합하다. 최근 React 생태계는 단순한 UI 라이브러리를 넘어, 대규모 애플리케이션 아키텍처를 지원하는 방향으로 발전하고 있다. Hooks, Context API, Suspense 등은 상태 관리와 비동기 로직을 보다 명확하게 구조화할 수 있도록 하며, WebGPU·Three.js와 같은 저수준 그래픽 시스템과 결합할 때에도 UI 계층과 렌더링 코어를 분리하는 역할을 수행한다. 이러한 특성으로 인해 React는 고성능 그래픽 연산 자체를 담당하기보다는, 복잡한 시뮬레이션 시스템을 제어·조작·시각적으로 표현하는 상위 인터페이스 계층으로서의 역할에 최적화된 최신 웹 UI 기술로 평가된다.

시장상황에 대한 분석

• 경쟁제품 조사 비교

내용

• 마케팅 전략 제시

내용

개발과제의 기대효과

기술적 기대효과

내용

경제적, 사회적 기대 및 파급효과

내용

기술개발 일정 및 추진체계

개발 일정

내용

구성원 및 추진체계

내용

설계

설계사양

제품의 요구사항

내용

설계 사양

내용

개념설계안

내용

이론적 계산 및 시뮬레이션

내용

상세설계 내용

내용

결과 및 평가

완료 작품의 소개

프로토타입 사진 혹은 작동 장면

내용

포스터

내용

관련사업비 내역서

내용

완료작품의 평가

내용

향후계획

내용

특허 출원 내용

내용