프로젝트 개요
어따놀래는 React Three Fiber 기반의 3D 인테리어 시뮬레이터이며, 아래와 같은 기능을 제공합니다.
- 도면 업로드로 3D공간 자동 생성 (OpenCV.js)
- AI를 활용한 가구 이미지의 3D GLB 모델 변환 (Microsoft Trellis)
- 가구의 위치, 각도, 높이 등 배치 시뮬레이터 (React Three Fiber)
- 실시간 동시편집 협업 (Socket.io, Redis)
팀 리더로서 프로젝트 기획 및 개발 전 과정을 주도했습니다. 팀원으로서는 가구 모델 관리 및 실시간 협업 (동시편집) 기능 구현을 담당했습니다.
문제 해결
1. GLB 파일 로딩 성능 최적화
문제: AI 생성 3D 모델(.glb)의 평균 크기가 1.3MB로, Amazon S3에서 모델을 불러오는 과정이 지연되어 시뮬레이터 초기 로딩에 약 6초가 소요되었습니다.
해결: Sharp 라이브러리를 사용하여 텍스처 포맷을 PNG에서 WebP로 변환했습니다. 육안으로 보이는 차이 없이 평균 파일 크기를 1.3MB에서 0.1MB로 92% 감소시켰습니다. 용량이 크게 줄면서 백엔드를 담당하는 동료가 Redis에 GLB 파일을 blob 형태로 캐싱하는 방안을 제안하여 추가 최적화를 진행했습니다.
결과: 평균 로딩 시간을 6초에서 2.5초로 58% 개선하여 끊김 없는 사용자 경험을 제공했습니다.
추가 설명 - GLB 파일 압축
추가 설명 - (동료가 진행한) Redis 캐싱
2. OpenCV.js 기반 도면 자동 인식
문제: 사용자가 수동으로 본인의 집의 벽을 확인해서 도면을 그리게끔 하는 것은 매우 비효율적입니다.
해결: OpenCV.js를 활용한 도면 자동 인식 파이프라인을 구현했습니다. Hough Line Transform으로 이미지에서 직선을 추출한 후, 평행선 병합 알고리즘을 통해 한 벽에서 추출된 여러 직선을 하나로 통합했습니다. 평행하고(각도 차이 5도 이내) 가까운(15px 이내) 선분들을 그룹화하여 중심선을 계산하하여 최종 벽 구조를 도출했습니다.
결과: 도면을 업로드만 하면 3초 내로 3D 공간이 생성되어, 초기 설정 시간이 대폭 단축되었습니다.
추가 설명 - 도면 벽 검출
3. 코너 벽 자석 기능의 성능 최적화
문제: React Three Fiber는 별도의 충돌 감지 기능을 지원하지 않아 가구를 벽에 맞춰 정렬하는 작업이 매우 번거로웠습니다.
해결: 가구의 OBB(Oriented Bounding Box)를 계산하여, 회전 변환이 적용된 가구의 각 면에서 벽까지의 최단 거리를 정확히 계산했습니다. 거리가 30cm 내 이내일 때 자동으로 벽에 정렬되도록 로직을 구현했습니다. 또한 직교하는 두 벽이 모두 거리 조건을 만족하면 두 벽의 교차점에 달라붙도록 했습니다. O(N²)의 이중 for문으로 모든 벽의 조합을 검사하는 대신, 벽들을 수평/수직 방향 그룹으로 사전 분류한 뒤, 각 그룹에서 가구와 가장 가까운 벽만 확인하여 알고리즘 복잡도를 O(N)으로 유지했습니다.
결과: 사용자가 정밀한 마우스 조작 없이도 자연스럽게 가구를 벽에 배치할 수 있게 되어 사용 편의성이 크게 향상되었습니다.
추가 설명 - 벽 자석 기능
4. 실시간 협업 시 충돌 방지
문제: 협업 모드에서 여러 사용자가 같은 가구를 동시에 조작할 수 있어, 충돌이 발생할 우려가 있었습니다.
해결: Redis Hash와 Socket.io를 활용한 커스텀 락 시스템을 구현했습니다. 사용자가 가구를 선택하면 Redis Hash에 선택한 가구 ID를 기록하고 다른 클라이언트에 브로드캐스트합니다. 이후 가구를 클릭 시 다른 사용자가 사용 중인지 검사하여 접근을 차단합니다. Cron 작업이 1분간 비활성 사용자의 락을 자동 해제하여, 네트워크 장애로 인한 좀비 락을 방지합니다.
결과: 동시 편집 충돌을 완전히 방지하여, 안정적인 협업 환경을 제공했습니다.