[논문정리] Web XR User Interface Research: Design 3D Layout Framework in Static Websites
XING Y., Shell J., Fahy C., Xie T., Kwan H. Y., Xie W. Web XR User Interface Research: Design 3D Layout Framework in Static Websites // Applied Sciences (Switzerland). 2022. Vol. 12. No. 11. p. 5600.
webXR환경에서 UI디자인의 가능성을 탐구하고 정적 웹사이트에 적용할 수 있는 3D레이아웃 프레임워크를 제안한다. XR기술의 몰입형 경험, 공간 인지 특성을 활용하여 기존 웹사이트의 사용자 경험을 향상시키는 것이다. 페이지 빌더, 코딩 없이 웹 페이지를 시각적으로 디자인하고 구성할 수 있도록 도와주는 도구 개념을 차용하여 웹 콘텐츠를 모듈화하고 3D공간에 배치하여 시각적 효과를 극대화했다.
제스쳐 기반 내비게이션 시스템을 설계하여 사용자가 보다 직관적으로 웹사이트를 탐색할 수 있도록 했다.
1. 연구 개요 및 배경
XR(Extended Reality) 기술은 교육, 상업, 의료 등 다양한 분야에서 잠재력이 매우 크며, 몰입형 3D UI와 직관적 제스처/음성 기반 인터랙션 등 새로운 사용자 경험을 제공한다
WebXR 기술은 HTML5 기반으로 브라우저에서 3D 가상 환경 렌더링이 가능하고, 모션·방향 추적 등 XR 기기의 특성을 활용할 수 있다
2. WebXR 기술과 현황
WebXR은 VR, AR, MR을 포괄하는 기술로, 사용자와 환경 간 상호작용을 향상시킨다
XR기기는 모바일보다 자연스러운 인터랙션과 파노라마 시야를 제공한다
3. 웹사이트 유형과 UI 설계 필요성
웹사이트는 크게 동적과 정적으로 구분된다. 정적 웹은 정보 전달에 초점이고 인터랙션이 제한적이다. 비중이 더 크다. 기존 연구는 주로 UI구성과 XR전환에 집중했으며 비용문제로 중소기업은 도전리스크가 크다.
4. WebXR UI 설계 원리
본 연구는 비용 효율적이고 일반적인 WebXR UI프레임워크 설계가 목표다. 사용자에게 몰입감 있고 탐색이 용이한 3D UI 제공을 목표로 한다.
5. 정적 웹사이트 구조와 설계 원칙
정적 웹사이트는 일반적으로 홈, 소개, 연락처 페이지로 구성된다. 헤더, 본문, 푸터 구조가 표준이다.
반응형 레이아웃(Responsive Layout)은 다양한 디바이스에 적합하게 설계된다. 웹 컴포넌트를 활용하여 재사용 가능하고 일관된 UI 설계 가능하다
Page Builder 시스템은 드래그 앤 드롭 방식으로 페이지를 빠르게 구성하는 도구다
6. WebXR 사용자 인터페이스 분석
XR 특성을 반영한 3D 레이아웃과 인터랙션 설계 필요하다.
주요 XR 특징은 파노라마 시야와 인터랙티브 모드다. 파노라마 시야는 2D에서 3D 공간으로 전환, 버튼과 아이콘이 뒤 또는 위에 배치 가능하다. 3D 레이아웃은 사용자 시야를 고려하여 콘텐츠를 다양한 각도와 위치에 배치하는 방식이다.
인터랙션은 제스처(스크롤, 드래그, 줌)를 활용하며, HoloLens와 같은 기기에서 자연스러운 제스처를 지원한다.
7. WebXR UI 설계 원칙
메인 콘텐츠는 3D 공간에서 모듈별로 배치하여 시각적 집중도를 높인다. 콘텐츠는 사용자 위치와 시선에 따라 조절 가능하며, 투명도를 활용해 방해 요소 최소화한다. 네비게이션은 3D 링과 제스처를 통해 위치 이동과 메뉴 선택 가능하다.
위치 패널과 메뉴 패널은 슬라이드 또는 회전 제스처로 전환하며, ‘홈’ 버튼으로 빠른 이동 가능하다. 사용자 경험 향상을 위해 가상 공간 내 콘텐츠 배치와 인터랙션 설계한다.
8. 결론 및 향후 연구 방향
XR 특성을 반영한 WebXR UI 프레임워크 설계로 사용자 경험 향상 기대한다. 비용 효율적이고 적용이 쉬운 구조 제시, 중소기업 대상 적합하다. 현재는 정적 웹사이트에 초점, 동적 웹사이트와의 확장 필요하다. 미래 연구는 동적 웹사이트, 전자상거래, 소셜 네트워크 등 다양한 서비스에 적용 예정이다.