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 기술로 평가된다.

시장상황에 대한 분석

• 경쟁제품 조사 비교

1) 인테리어 웹·앱 서비스(예: 오늘의집 등) 대중적인 인테리어 서비스는 사용자가 웹이나 앱에서 손쉽게 방 구조를 설정하고 가구를 배치하도록 지원한다. 카탈로그 기반의 가구 배치, 간단한 치수 감각 제공, 이미지 중심의 레퍼런스 탐색에 강점을 가진다. 그러나 렌더링은 대체로 실시간 반응성을 우선하는 간단한 표현에 머무르며, 간접광(반사·확산)이나 다중 광원 상호작용과 같은 글로벌 일루미네이션 효과는 제한적으로 처리된다. 그 결과 조명 변경에 따른 공간 분위기 변화가 ‘밝아짐/어두워짐’ 수준으로 단순화되기 쉽고, 그림자·빛샘(창문 유입광)·면광원 확산 등 현실감을 좌우하는 요소의 재현이 어렵다. 즉 배치 설계에는 유용하지만 조명 시뮬레이션을 근거로 의사결정을 내리기에는 표현력이 부족한 경우가 많다. 2) 건축 조명 설계 전문 툴(DIALux, Relux, Radiance 등) 조명 설계 분야의 전문 툴은 조도(lux), 휘도, 눈부심 지수, 주광(daylighting)등 공학적 지표를 중심으로 물리 기반 계산을 수행한다. 예컨대 Radiance 계열은 주광과 인공조명을 함께 고려하는 고정밀 계산이 가능해 설계 검증 및 규정 대응에 강점을 가진다. 다만 이러한 도구는 입력 데이터(재질 물성, 광원 배광, 측정 포인트, 센서 그리드, 계산 파라미터 등)의 정의가 복잡하고, 작업 흐름이 전문가의 설계 프로세스(도면 기반 모델링 → 계산 설정 → 결과 해석)에 맞춰져 있어 비전문가에게 진입장벽이 높다. 또한 결과 산출이 배치 처리(batch)에 가까워 즉각적인 상호작용(가구 위치를 움직이며 조명 변화 확인, 시간대를 드래그하며 주광 변화 확인 등)이 어렵고, 웹 서비스 형태의 접근성·공유성도 제한적이다. 3) AR 기반 가구 배치 앱(IKEA Place 등) AR 앱은 실제 공간 위에 가구를 합성하여 크기감과 배치를 빠르게 체험하게 한다. 사용자는 측정·배치 과정이 직관적이며, 현실 공간 맥락을 그대로 활용할 수 있다는 장점을 얻는다. 그러나 핵심 목표가 ‘배치 체험’에 맞춰져 있어 조명과 재질 표현은 대체로 단순화된다. AR로 배치한 가구가 실제 방의 조명 조건(광원의 위치·색온도·차광 상태, 창문 유입광, 반사 환경)을 정확히 반영하지 못하는 경우가 많고, 추가 광원 설치나 설정 변경에 따른 분위기 변화 역시 물리적으로 일관된 방식으로 예측하기 어렵다. 따라서 “현실 위에 놓아보기”에는 적합하지만 조명 설계의 결과를 비교·검토하기에는 한계가 존재한다. 4)요약 현재 시장에는 인테리어 구상을 돕는 웹·앱 도구와, 고정밀 조명 검증을 위한 전문가용 툴, 그리고 AR 기반의 배치 체험 도구가 각각 존재한다. 그러나 가구를 자유롭게 편집할 수 있는 사용자 친화적 워크스페이스와 물리 기반의 사실적인 조명(자연광·다중 광원·간접광) 시뮬레이션, 그리고 웹 기반 접근성과 공유성을 동시에 만족시키는 솔루션은 드물다. 본 과제는 이 간극을 목표로 설정하고, Three.js 기반 편집 워크스페이스와 WebGPU 기반 Path Tracing 렌더링 워크스페이스를 결합하여 일반 사용자와 전문가 모두가 활용 가능한 조명·인테리어 시뮬레이션 도구를 지향한다.

• 마케팅 전략 제시

1) SWOT 분석 Strength(강점) 본 서비스는 WebGPU 기반 Path Tracing과 ReSTIR-like 샘플링 기법을 적용하여, 별도의 프로그램 설치 없이도 웹 브라우저 환경에서 고품질 조명 시뮬레이션을 제공한다. 자연광과 다중 광원에 따른 간접광 효과를 실시간으로 확인할 수 있어 기존 웹 기반 인테리어 서비스 대비 시각적 사실성이 높다. Weakness(약점) 고품질 렌더링 특성상 사용자의 GPU 성능에 따라 체감 성능이 달라질 수 있으며, 저사양 환경에서는 기능 제약이 발생할 가능성이 있다. 또한 최신 그래픽스 기술(WebGPU, Path Tracing, 고급 샘플링 기법)을 활용함에 따라 초기 개발 난이도와 유지보수 비용이 상대적으로 높다. Opportunity(기회) 온라인 인테리어 및 조명 커머스 시장은 지속적으로 성장하고 있으며, 특히 구매 이전 단계에서 공간과 제품을 미리 체험하려는 수요가 증가하고 있다. AR·VR 기반 가상 체험에 대한 관심이 확대되는 상황에서, 별도 장비 없이 웹에서 고품질 시뮬레이션을 제공하는 서비스는 접근성과 실용성 측면에서 경쟁력을 가진다. 또한 비대면 설계·상담이 보편화됨에 따라 웹 기반 시뮬레이션 도구의 활용 가능성이 더욱 확대될 것으로 예상된다. Threat(위협) 이케아, 아마존 등 대형 가구·커머스 기업이 자체 인테리어 시뮬레이션 기술을 빠르게 도입하거나 플랫폼에 통합할 가능성이 존재한다. 이 경우 자본력과 콘텐츠 규모에서 경쟁이 어려울 수 있으며, 기술 격차가 빠르게 축소될 위험이 있다. 2) 주요 타겟 고객층 1. 일반 소비자(홈오너 및 셀프 인테리어 사용자) 조명과 가구 배치에 관심은 있으나 전문 설계 도구 사용에는 부담을 느끼는 사용자를 주요 타겟으로 한다. 본 서비스는 직관적인 편집 인터페이스를 통해 전등과 가구를 자유롭게 배치하고, 자연광과 인공조명 변화에 따른 공간 분위기를 즉시 확인할 수 있어 구매 전 체험 도구로 활용될 수 있다. 2. 인테리어 디자이너 및 건축 업계 전문가 전문가는 설계 초기 단계에서 조명·가구 배치에 따른 분위기 변화를 빠르게 검토하고, 클라이언트와의 커뮤니케이션 수단으로 시각적 자료를 필요로 한다. 본 서비스는 설치형 전문 툴 대비 접근성이 높고, 실시간 상호작용이 가능해 설계 아이디어 검증 및 설명 도구로 활용 가능하다. 3. 가구 및 조명 제조·판매업체 가구 및 조명 업체는 제품을 실제 공간에 적용했을 때의 효과를 고객에게 효과적으로 전달할 필요가 있다. 본 서비스는 제품 배치 및 조명 설정을 시뮬레이션하여 온라인 쇼룸, 제품 소개 페이지, 상담 도구 등으로 확장 활용할 수 있으며, 구매 전 신뢰도를 높이는 마케팅 수단으로 활용 가능하다.

개발과제의 기대효과

기술적 기대효과

내용

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

내용

기술개발 일정 및 추진체계

개발 일정

내용

구성원 및 추진체계

내용

설계

설계사양

제품의 요구사항

내용

설계 사양

내용

개념설계안

내용

이론적 계산 및 시뮬레이션

내용

상세설계 내용

내용

결과 및 평가

완료 작품의 소개

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

내용

포스터

내용

관련사업비 내역서

내용

완료작품의 평가

내용

향후계획

내용

특허 출원 내용

내용