Meta SAM3D 인테리어 시스템 개발 기록 (3)

📌 이번 글에서 구현한 것

지난 글에서 2D 빈 방 사진으로 3D 방을 구현하는 것 까지 했다. 그리고 SAM3D로 가구를 3D 메시로 변환하고 Three.js 방에 드래그해서 배치하는 기능까지 구현했었다.  좀 늦게 글 쓴 이유가 학회 논문 포스터 발표 준비 때문에 할 게 너무 많고 정신이 없었다........ㅎㅎ.... 

먼저 방 구현 퀄리티를 높여보았다.
🏠 빈방 사진 한 장으로 3D 방이 만들어지는 원리를 다시 구체적으로 설명해보겠다.

사진을 올리면 어떻게 3D 방이 뚝딱 생기는 걸까?  AI가 방 구조를 이해하는 게 아니라, 생각보다 단순한 원리로 동작한다.

① 가구를 지워서 빈방 만들기
먼저 업로드한 방 사진에서 SAM2가 가구를 인식하고 마스크를 만든다. 그 마스크 영역을 LaMa(딥러닝 인페인팅 모델)가 배경으로 자연스럽게 채워서 가구가 없는 빈방 사진을 생성한다. 이 빈방 사진이 이후 모든 과정의 기준이 된다.


② 벽 색상과 바닥 색상 추출
빈방 사진이 생기면 픽셀값을 분석해서 벽과 바닥의 색상을 뽑아낸다. 방식은 간단하다.
- 이미지 상단 영역 → 벽으로 간주
- 이미지 하단 영역 → 바닥으로 간주

해당 영역 픽셀들의 RGB 평균값을 계산하면 그게 벽 색상, 바닥 색상이 된다. 복잡한 세그멘테이션 없이 영역을 단순하게 나눠서 평균을 내는 방식인데, 일반적인 방 사진에서는 꽤 그럴듯하게 색상이 추출된다.


③ 추출한 색상으로 Three.js 방 렌더링
뽑아낸 색상값을 그대로 Three.js에 넘겨서 3D 방을 만든다. 구조는 단순하게 PlaneGeometry 6개를 조합한 박스 형태다. 
참고로 PlaneGeometry는 Three.js에서 평평한 사각형 판을 만드는 기본 도형이다.

- 바닥: 추출된 바닥 색상 + 나무 판자 텍스처 오버레이
- 벽(뒤, 좌, 우): 추출된 벽 색상으로 단색 렌더링
- 천장: 흰색 고정

방 크기는 사용자가 입력한 가로/세로/높이 수치를 그대로 써서 PlaneGeometry의 width, height에 넣는다.

④ 결과
실제 방 사진의 색감이 3D 공간에 그대로 반영되기 때문에 단순히 회색 박스를 만드는 것보다 훨씬 현실감 있는 시뮬레이션 공간이 된다. AI가 방 구조를 이해한 게 아니라, 색상 정보를 추출해서 3D 박스에 입힌 것이지만 인테리어 배치 시뮬레이션 용도로는 충분히 그럴듯한 결과물이 나온다.

---

근데 완성하고 막상 보니 미흡한 점이 한두 가지가 아니었다. 3D 뷰어가 전체 화면을 못 차지하고 작은 박스에 갇혀 있었고, 배치한 가구가 바닥 위로 둥둥 떠다니고, 벽을 그냥 통과해버리고, 가구들끼리 겹치고, 가구를 선택해도 아무것도 할 수 없는 구조였다. 인테리어 시뮬레이션이라고 하기엔 너무 허술했다.

그래서 이번에는 배치 단계 전반을 뜯어고쳤다. UI를 이케아 플래너나 RoomSketcher처럼 3D 뷰어가 화면을 꽉 채우는 구조로 바꾸고, 가구 물리 배치도 제대로 잡았다.
 
내가 생각한 UI는 이런 식이다.  

 
 
 
방 인테리어 화면을 크게하고 왼쪽에 내가 배치해볼 가구들을 놓는것
 
 
 
 
 
 
 
방 사진 업로드
    ↓
SAM2 + LaMa로 가구 제거 → 빈방 생성
    ↓
빈방 사진에서 벽/바닥 색상 자동 추출
    ↓
추출한 색상으로 3D 방 자동 렌더링 (Three.js)
    ↓
3D 변환된 가구를 드래그해서 방에 배치
     ↓
가구 클릭 → 회전 / 복사 / 삭제

이번에 새로 추가하거나 개선한 기능은 크게 다섯 가지다.
 
1.  3D 배치 UI를 전면 개편
기존에는 3D 뷰어가 작은 영역 안에 갇혀 있고 양 옆에 패널들이 나란히 붙어 있는 구조였는데, 뷰어가 화면 전체를 차지하고 가구 목록은 왼쪽에 반투명 오버레이 패널로 띄우는 방식으로 바꿨다. 컨트롤 버튼들은 우측 하단에 플로팅으로 배치했다.
 

2. 가구가 바닥 위에 붕 뜨는 문제
기존에는 가구 y 위치를 그냥 고정값으로 박아놨는데, Three.js에서 메시를 -PI/2 회전시키면 로컬 y축이 z축으로 바뀌는 걸 고려하지 않은 거였다. 메시 바운딩박스에서 실제 높이를 꺼내 스케일 보정까지 해서 정확하게 바닥에 붙도록 수정했다.

침대 가구 아래가 떠있는 상황.... 귀신 침대야 뭐야

바닥에 잘 배치된 상황

3. 벽 통과 방지와 가구끼리 겹침 방지
드래그 중에 방 크기 기반으로 XZ 좌표를 클램프해서 벽 밖으로 못 나가게 하고, 다른 가구와의 거리를 계산해서 일정 거리 이내로 겹치면 밀어내는 방식으로 구현했다.

침대 가구들이 겹쳐져 있는 상황

4. 가구 클릭시 컨텍스트 메뉴 기능 추가
네 번째로 가구 클릭 시 컨텍스트 메뉴를 추가했다. 배치된 가구를 클릭하면 회전 / 복사 / 삭제 버튼이 나타나는 방식이다. 드래그와 클릭을 구분하기 위해 mousedown과 mouseup 사이의 이동 거리를 측정해서 5px 이하면 클릭으로 판단하도록 했다.

 
5. 마우스 휠 줌을 추가
다섯 번째로 마우스 휠 줌을 추가했다. 기존엔 고정된 카메라 거리로만 볼 수 있었는데, 휠 이벤트를 캡처해서 카메라의 구면 좌표 반지름을 조절하는 방식으로 줌 인/아웃이 가능해졌다. 이때 { passive: false }를 꼭 넣어야 preventDefault()가 먹혀서 페이지 스크롤을 막을 수 있다.
 

---

🔧 Troubleshooting

1. height: 100%가 먹히지 않는 문제
3D 뷰어를 전체화면으로 만들려고 height: 100%를 줬는데 전혀 반응이 없었다. 원인은 부모 컴포넌트 체인 어딘가에 height가 명시되지 않아서였다. CSS에서 height: 100%는 부모가 높이를 가지고 있어야 전달되는데, App.jsx의 main 컨테이너부터 Interior3DStep까지 이어지는 전체 체인에 height를 잡아줘야 했다. 결국 최상위 div에 height: 100vh를 주고, Three.js 캔버스가 붙는 div까지 height: 100%로 연결해서 해결했다.

추가로 Three.js renderer 초기화 시 높이를 el.clientHeight로 받아야 하는데, 이게 0으로 찍힐 경우 window.innerHeight로 폴백하도록 처리했다.

2. 가로 스크롤이 생기는 문제
3D 뷰어를 100vw로 확장하면서 스크롤바 너비(약 15px)만큼 화면이 넘쳐서 가로 스크롤이 생겼다. App.css에 overflow-x: hidden을 추가해서 해결했다.

3. SAM3D 포인트클라우드 품질 개선
생성된 3D 메시가 너무 낡고 왜곡된 형태로 나오는 문제가 있었다. 원인은 두 가지였다. 하나는 포인트 샘플링 stride를 2로 설정해서 픽셀을 건너뛰며 찍다 보니 포인트 수가 4분의 1로 줄어든 것이었고, 다른 하나는 카메라 초점거리 fx, fy를 500으로 고정해놔서 이미지 크기와 상관없이 왜곡이 생기는 거였다. stride를 1로 바꾸고 fx = fy = max(h, w) * 1.2로 이미지 크기 기반으로 계산하도록 수정했다.

---

🗺️ 향후 계획

1. 처리 시간 단축
SAM3D로 하나의 가구를 3D 메시로 변환하는 데 현재 20~30분이 걸린다. 논문에서 제시한 구조 그대로 돌리다 보니 최적화가 전혀 안 된 상태다. 모델 경량화나 추론 파이프라인 개선을 통해 대기 시간을 줄일 예정이다.

2. 3D 모델링 정확도 향상
현재 SAM3D로 생성된 3D 메시가 원본 가구 형태와 많이 다르게 복원되는 문제가 있다. 포인트 클라우드 밀도를 높이고 fx/fy 초점거리 계산을 개선해서 가구 형태가 더 정확하게 복원되도록 할 예정이다.

낡은 신데렐라가 쓸 거 같은 침대가...... 만들어지고옷장도 왜 납작 떡이

3. 사용자 가구 사진 직접 등록 기능
현재는 업로드한 방 사진에서 인식된 가구만 3D로 변환할 수 있어서 배치할 수 있는 아이템이 너무 한정적이다. 사용자가 원하는 가구를 직접 사진 찍어서 올리면 바로 3D 아이템으로 만들어주는 기능을 추가할 예정이다. 빡셀듯하다..

4. 서비스 배포
지금은 WSL 로컬 환경에서만 돌아가는 상태다. 클라우드 GPU 서버에 올려서 실제로 사용 가능한 웹 서비스로 배포하는 것을 목표로 하고 있다.