커스터마이징#

VRISM Viewer SDK를 브랜드에 맞게 꾸미는 방법을 소개합니다. React와 Vanilla JavaScript 환경에서 모두 사용할 수 있습니다.

🎨 커스터마이징 방법#

VRISM Viewer SDK는 두 가지 방식으로 커스터마이징할 수 있습니다:

1. UI 설정을 통한 커스터마이징#

• 배경색, 로더 색상, UI 요소 표시/숨김
• 카메라 동작, 스텝 기능 설정
• 프로그래밍 방식으로 제어

2. CSS Variables를 통한 커스터마이징#

• 버튼 색상, 크기, 위치 조정

• 브랜드 컬러 적용

• 세밀한 스타일 제어

🎯 주요 커스터마이징 영역#

UI 설정#

배경색

• viewerBackgroundColor : 뷰어 배경색 설정

로더

• loader.type : 로더 타입 ['circle' | 'bar']
• loader.size : 로더 크기
• loader.loaderFillColor : 로더 로딩 색상
• loader.loaderPlaceholderColor 로더 배경 색상

UI 요소:

• gestureGuide : 제스처 가이드
• fullscreenButton : 전체화면 버튼
• userGuide : 사용자 가이드

카메라 요소

• autoRotation : 자동회전
• controls.enableZoom : 줌
• controls.enablePan : 팬
• controls.enableRotate : 회전
• desktop.angle.x/y : 데스크톱 각도
• desktop.zoom : 데스크톱 줌
• desktop.limits.angleUp/angleDown/zoomMin/zoomMax : 데스크톱 제한
• mobile.angle.x/y : 모바일 각도
• mobile.zoom : 모바일 줌
• mobile.limits.angleUp/angleDown/zoomMin/zoomMax : 모바일 제한

ℹ️ 데스크톱/모바일 설정은 viewport 가로 폭 769px을 기준으로 자동 분기됩니다.

VTO(가상착용) 버튼

• vtoControl - VTO 기능 활성화/비활성화

CSS Variables#

전체화면 버튼

• --fullscreenBtnBgColor: 배경색
• --fullscreenIconColor: 아이콘 색
• --fullscreenIconSize: 아이콘 크기
• --fullscreenBtnSize: 버튼 크기
• --fullscreenBtnTop: 상단 위치 [string | 'auto']
• --fullscreenBtnRight: 우측 위치 [string | 'auto']
• --fullscreenBtnBottom: 하단 위치 [string | 'auto']
• --fullscreenBtnLeft: 좌측 위치 [string | 'auto']

사용자 가이드 버튼

• --guideBtnBgColor: 배경색
• --guideBtnIconColor: 아이콘 색
• --guideBtnSize: 버튼 크기
• --guideIconSize: 아이콘 크기
• --guideBtnTop: 상단 위치 [string | 'auto']
• --guideBtnRight: 우측 위치 [string | 'auto']
• --guideBtnBottom: 하단 위치 [string | 'auto']
• --guideBtnLeft: 좌측 위치 [string | 'auto']

VTO 버튼

• --vtoBtnBgColor: 배경색
• --vtoBtnColor: 텍스트 색
• --vtoFontSize: 텍스트 크기
• --vtoIconSize: 아이콘 크기
• --vtoBtnTop: 상단 위치 [string | 'auto']
• --vtoBtnRight: 우측 위치 [string | 'auto']
• --vtoBtnBottom: 하단 위치 [string | 'auto']
• --vtoBtnLeft: 좌측 위치 [string | 'auto']

제스처 가이드

• --gestureGuideIconSize: 아이콘 크기

스텝 기능#

• 스텝 제어: ui.step.enabled, ui.step.stepControls, ui.step.stepNavigation, ui.step.stepDots, ui.step.stepAnnotation

• 외부 제어: 커스텀 네비게이션 구현

📚 환경별 가이드#

각 환경에 맞는 커스터마이징 방법을 확인하세요:

• CSS Variables - 공통적으로 적용가능한 CSS Variables
• React 커스터마이징 - React 환경에서의 커스터마이징
• Vanilla JavaScript 커스터마이징 - Vanilla JavaScript 환경에서의 커스터마이징

이제 원하는 환경의 가이드를 선택하여 커스터마이징을 시작하세요!