Article

부동산 VR 투어를 순수 JavaScript로 구현한 경험

2019. 2. 15.

부동산 업계에 VR 기술을 적용하기

최근 부동산 업계에서 VR 기술이 빠르게 확산되고 있습니다. 고가의 물건을 구매하기 전에 360도 투어로 확인할 수 있다면 고객 만족도가 크게 높아집니다. 일반적으로 Pano VR 같은 고비용 솔루션을 사용하지만, 우리 프로젝트에서는 오픈소스인 photo-sphere-viewer 라이브러리를 활용하여 순수 JavaScript로 VR 기능을 구현했습니다.

구현한 기능들

VR 뷰어에서 다음과 같은 사용자 경험을 제공했습니다:

줌인/아웃 기능 마우스 휠로 부드럽게 확대/축소할 수 있습니다. 720도 파노라마를 세밀하게 탐색할 수 있는 기본 기능입니다.

스냅샷 촬영 VR 화면에서 보고 있는 현재 장면을 사진으로 캡처합니다. 고객이 관심 있는 부분을 저장했다가 나중에 다시 확인할 수 있습니다.

자동 플레이 360도 파노라마가 자동으로 회전하는 기능입니다. 고객이 모든 각도를 천천히 둘러볼 수 있도록 합니다.

전체화면 모드 Full Screen API를 활용한 몰입형 환경을 제공합니다.

개발 과정에서 마주친 도전들

브라우저 호환성의 벽

부동산 거래의 주요 고객층은 웹 표준에 민감하지 않습니다. IE(Internet Explorer)를 여전히 사용하는 사용자가 많았습니다. IE10까지는 호환성 코드로 어느 정도 해결했지만, IE9는 기술적 제약으로 인해 대응할 수 없었습니다. 결국 ‘현대 브라우저 권장’이라는 메시지로 마무리할 수밖에 없었습니다.

관리자 기능 개발의 복잡성

클라이언트 단에서 VR을 표시하는 것은 library만 로드하면 간단합니다. 하지만 부동산 담당자가 VR 위에 정보 포인트(스냅샷 포인트, 핫스팟)를 지정하는 관리자 인터페이스를 개발하는 것은 매우 복잡했습니다. 360도 좌표계를 이해하고, 마우스 클릭 위치를 정확한 좌표로 변환하는 수학적 계산이 필요했습니다.

사용자 UX의 중요성

부동산 거래를 담당하는 사람들은 대부분 연세가 있는 분들입니다. 직관적이고 쉬운 인터페이스가 필수적입니다. 처음 버전에서는 기술 중심으로 설계했다가 고객 피드백을 받으면서 UI/UX를 완전히 재설계했습니다. 버튼의 크기, 텍스트의 명확성, 기능의 단순화 등 모든 것을 사용자 중심으로 수정했습니다.

사용된 기술 스택

개발 기간과 회고

전체 프로젝트는 약 1주일이 소요되었습니다. 기술 구현 자체보다는 관리자 인터페이스와 사용자 경험 최적화에 시간이 많이 걸렸습니다.

배운 점

오픈소스 라이브러리는 비용 효율적으로 고급 기능을 구현할 수 있게 해줍니다. 하지만 프로덕션 환경에서는 예상치 못한 다양한 문제에 마주칠 수 있습니다. 특히 레거시 브라우저 호환성과 사용자 관리 인터페이스 구현은 추가적인 개발 노력을 필요로 합니다.

기술 선택에 앞서 사용자 특성을 먼저 파악하는 것이 중요합니다. 아무리 멋진 기술이어도 사용자가 쉽게 사용하지 못하면 의미가 없습니다.

마치며

이 프로젝트를 통해 ‘VR은 고비용 솔루션이어야 한다’는 고정관념을 깨뜨릴 수 있었습니다. 오픈소스와 창의적인 기술 조합으로 충분히 상용 수준의 VR 경험을 제공할 수 있습니다. 부동산 업계뿐 아니라 관광, 부동산, 전시 등 다양한 분야에서 이 기술을 활용할 수 있을 것 같습니다.