스타일 설정
EVOVA 3D 뷰어의 스타일 설정 방법을 안내합니다.
스타일 설정은 프리셋 추가하기 기능을 통해 브랜드 관리자 간 내부 공유가 가능하며, 한 번 저장해두면 다른 제품에도 손쉽게 동일한 설정을 적용할 수 있습니다.
접속 경로
좌측 사이드바 > [라이브러리] > 아이템 선택 > 우측 사이드바 > [스타일]
이미지 1. 스타일 탭
스타일 설정 사용 방법
1. 스타일 관리
이미지 2. 스타일 상태
스타일 탭 상단에서 현재 제품의 스타일 상태를 확인하고 관리할 수 있습니다.
1-1. 스타일 상태 확인
- 스타일이 설정되어 있습니다: 빨간색 점 표시 - 저장된 스타일이 있음
- 스타일이 설정되지 않았습니다: 회색 점 표시 - 저장된 스타일이 없음
- 도움말 아이콘: 호버 시 스타일 설정에 대한 상세 설명 표시
1-2. 스타일 저장 및 삭제
- [스타일 저장] 버튼: 현재 제품에 설정된 모든 스타일을 저장합니다
- 배경 회전, 컬러 칩, 썸네일, UI 등 모든 설정이 한 번에 저장됩니다
- 저장된 스타일은 이후 다른 제품에도 적용할 수 있습니다
- [스타일 삭제] 버튼: 저장된 스타일을 삭제합니다
- 스타일이 설정되어 있을 때만 활성화됩니다
- 삭제 후에는 기본 설정으로 돌아갑니다
2. 프리셋 상세 설정
이미지 3. 스타일 프리셋
[스타일 세부 설정] 버튼을 클릭하면 프리셋 설정 영역이 펼쳐집니다.
2-1. 프리셋 선택
드롭다운 메뉴에서 원하는 프리셋을 선택할 수 있습니다:
- [DEFAULT] 프리셋: EVOVA에서 제공하는 기본 프리셋
- 예:
[DEFAULT] BASIC,[DEFAULT] MINIMAL - 시스템에서 관리하는 표준 스타일
- 예:
- [CUSTOM] 프리셋: 사용자가 생성한 커스텀 프리셋
- 예:
[CUSTOM] my-brand-style - 브랜드 고유의 스타일을 저장하고 재사용
- 예:
- + 추가하기: 새로운 커스텀 프리셋 생성
- 선택 시 프리셋 이름 입력란이 나타납니다
- 영문 또는 숫자로 이름을 입력하고 [저장] 버튼 클릭
2-2. 프리셋 관리
- [저장] 버튼 (커스텀 생성 모드):
- 새 프리셋 이름 입력 후 클릭하여 저장
- 현재 설정된 모든 스타일이 프리셋으로 저장됩니다
- [새로고침] 아이콘 (프리셋 선택 모드):
- 선택한 프리셋의 설정을 다시 불러옵니다
- 수정 중 원래 프리셋 상태로 되돌릴 때 유용합니다
3. 배경 회전 설정
3D 뷰어의 배경과 자동 회전 기능을 설정합니다.
3-1. 배경색
- 컬러 피커를 사용하여 뷰어 배경색 선택
- 제품 색상과 대비되는 색상 선택 권장
3-2. 회전 모드
- 자동: 제품이 일정한 속도로 자동 회전합니다
- 원하는 회전 속도를 숫자로 입력하세요.
- '0'을 입력하면 회전이 정지됩니다.
- 키프레임: 타임라인에 설정된 카메라 경로를 따라 재생
- 고급 에디터의 녹화 탭에서 키프레임 설정 필요
- 더 역동적이고 의도적인 카메라 연출 가능
- 자세한 내용: 타임라인 시퀀스 가이드
4. 컬러 칩 설정
제품에 컬러 옵션이 있을 경우, 컬러 칩 표시 설정을 할 수 있습니다.
참고: 이 섹션은 제품에 컬러 옵션이 설정되어 있을 때만 표시됩니다. Tip: 메타데이터 관리 설정 방법 참고
4-1. 컬러 칩 유형 선택
- 표시할 컬러칩 디자인을 선택합니다.
5. 썸네일 & 로딩 설정
3D 아이템 로딩 방식과 썸네일 표시를 설정합니다.
5-1. 썸네일 옵션 (썸네일 우선 표시)
- ON: 3D 모델 로딩 전에 썸네일 이미지를 먼저 전시
- 사용자가 상호작용하기 전에는 썸네일 이미지가 보임
- 상호작용하면 자연스럽게 3D로 전환
- OFF: 3D 모델만 전시
- 사용자가 상호작용하기 전에도 3D가 보임
5-2. 종료 버튼
- 썸네일 활용 시에만 유용함
- ON: 3D -> 썸네일 이미지로 돌아가는 종료 버튼 배치
- OFF: 종료버튼 배치하지 않음. 시간이 지나면 썸네일로 돌아감.
6. 360 UI
3D 뷰어에 표시되는 컨트롤 UI를 커스터마이징합니다.
6-1. UI 종류
뷰어에 표시되는 아이콘의 디자인 스타일을 선택합니다.
이미지 4. UI 종류
- 드롭다운에서 원하는 UI 스타일 선택
- 브랜드 톤앤매너에 맞는 디자인 선택 가능
6-2. UI 위치
아이콘이 뷰어 화면 내 어디에 위치할지 대략적인 영역을 선택합니다.
- 예: 왼쪽 상단, 오른쪽 하단 등
- 제품 및 브랜드 레이아웃에 맞게 선택
이미지 5. UI 위치
6-3. 세부 위치 조정 (X, Y 좌표)
- 가로: 좌우 위치를 픽셀 단위로 조정
- 세로: 상하 위치를 픽셀 단위로 조정
- 정밀한 배치가 필요할 때 사용
6-4. UI 크기
- PC 크기: 데스크톱 환경에서의 UI 크기
- 모바일 크기: 모바일 환경에서의 UI 크기
배율 기준:
- 1배 = 기본 크기
- 1.5배 = 기본 크기의 1.5배
- 화면 비율이나 시각적 균형을 고려해 디바이스별로 최적화
7. 기타 설정
7-1. 3D 로딩 효과
- ON: 3D 뷰어 최초 로딩 시 3D 효과 연출
- OFF: 3D 뷰어 최초 로딩 시 3D 효과 연출 없음
7-2. 3D 뷰어 정보 버튼 토글
- ON: 뷰어 정보 표시
- OFF: 뷰어 정보 숨김
7-3. 동적 로딩
- 썸네일 옵션 활용 시에만 유용함
- ON: 유저 상호작용이 생길 때 3D 모델 로딩. 불필요한 로딩을 막을 수 있으나, 로딩 대기시간이 유저에게 노출됨.
- OFF: 유저 상호작용 전에도 3D 모델 로딩. 더 나은 사용자경험 제공 가능하나, 썸네일 이미지만 보일 시에도 3D 모델이 로딩됨. (추천)
7-4. 뷰어 로고 설정
- 로고 표시 ON/OFF: 3D 뷰어 내 브랜드 로고 표시 여부
- 로고 이미지 업로드:
- [찾아보기] 클릭하여 이미지 선택
- [업로드] 클릭하여 적용
- 기본값으로 되돌리기: EVOVA 기본 로고로 복원
스타일 적용 순서
- 프리셋 선택 또는 새 프리셋 생성 (선택)
- 5개 섹션 설정:
- 배경 회전
- 시각 효과 (컬러 칩)
- 썸네일 & 로딩
- UI 설정
- 기타 설정
- [스타일 저장] 클릭하여 적용
- 좌측 3D 뷰어에서 실시간 미리보기 확인
프리셋 활용 팁
브랜드별 프리셋 생성
- 브랜드마다 고유한 스타일을 프리셋으로 저장
- 새 제품 추가 시 해당 브랜드 프리셋만 선택하면 즉시 적용
시즌별 스타일 관리
- 예:
[CUSTOM] summer-2025,[CUSTOM] winter-2025 - 계절이나 캠페인별로 스타일 변경 가능
주의사항
- 프리셋 저장 전 확인: 모든 섹션 설정이 완료되었는지 확인
- DEFAULT 프리셋: 수정 불가, 새로운 CUSTOM 프리 셋 생성 필요
- 실시간 미리보기: 설정 변경 시 좌측 뷰어에서 바로 확인
- 스타일 저장 필수: 변경사항은 [스타일 저장] 버튼을 눌러야 최종 적용
맺음말
이커머스에 차원을 더하다
EVOVA는 언제나 브랜드 경험이 더욱 안정적이고 특별해질 수 있도록 함께합니다.
궁금한 점이 있다면 언제든 운영팀에 문의해주세요.
문의 메일: info@metown.co.kr
문의 연락처: 02-6380-0315