스타일 편집 모드

게시될 뷰어의 모습을 조정하는 모드입니다. 오른쪽 사이드바에는 스타일 · 시네마틱 · 연결 세 탭만 남고, 뷰포트에는 게시된 뷰어와 완전히 동일한 실제 뷰어가 뜹니다. 여기서 보이는 그대로 게시되므로 배경·UI·연출을 눈으로 확인하며 맞출 수 있습니다. 아직 한 번도 저장하지 않은 로컬 아이템은 첫 저장 후부터 이 모드를 쓸 수 있습니다.

시작하기

상단 모드 전환에서 스타일을 선택합니다. 스타일 설정은 아이템마다 따로 저장되며, 탭 상단의 헤더가 현재 상태를 알려 줍니다.

• 저장 / 변경사항 저장 — 스타일 설정을 아이템에 기록합니다. "스타일 저장됨"과 "저장된 스타일 없음"으로 저장 여부를 표시합니다
• 삭제 — 저장된 스타일을 지우고 기본값으로 되돌립니다
• 프리셋 설정 — 조직에 등록된 프리셋을 고르고 불러오기를 누르면 현재 설정이 그 프리셋으로 바뀝니다. 불러온 뒤 개별 항목을 다시 조정할 수 있습니다
• 공유 — 공유 링크 복사, 새 탭에서 열기, HTML 태그 복사, 통계 보기 버튼이 있습니다. 용도에 맞게 골라 쓰세요

스타일과 시네마틱 탭은 같은 저장 헤더를 공유하므로 어느 탭에서 저장해도 두 탭의 설정이 함께 기록됩니다.

스타일 탭

뷰어의 기본 모습과 동작을 정하는 설정이 위에서 아래로 놓여 있습니다.

배경

• 배경 타입 — 색상 · 이미지 · 360 이미지 · 투명
• 색상 — 배경 색상과 대체 배경 색상을 정합니다
• 이미지 — PNG/JPG/WebP(5 MB 이하)를 올리고 맞춤(채우기 · 맞추기 · 늘리기), 위치(가운데 · 위 · 아래 · 왼쪽 · 오른쪽), 불투명도를 조절합니다
• 360 이미지 — 2:1 equirectangular 이미지(10 MB 이하)를 배경으로 두르고 360 회전으로 방향을 맞춥니다. 보이는 배경으로만 쓰이며 환경/반사 설정은 그대로입니다
• 투명 — 배경이 투명해져 iframe으로 삽입했을 때 뒤쪽 페이지가 비칩니다. 임베드 코드에 자동으로 반영됩니다
• 반사 모드 — 배경이 스플랫 표면에 비치는 방식을 고릅니다

로딩

로딩 화면의 커스텀 로고를 켜고 로고 이미지, 너비·높이, 배경색, 숨쉬기 애니메이션을 정합니다. 통계에서 "완료 전 이탈"이 많다면 여기부터 손보세요.

회전

• 회전 모드 — 자동은 일정 속도로 계속 돌고 회전 속도로 빠르기를 정합니다. 키프레임은 타임라인에 만든 카메라 키프레임을 재생합니다. 뷰어가 열렸을 때 아이템이 어떻게 움직일지 정하는 핵심 설정입니다
• 비활성 시 초기 시점 복귀 — 사용자가 카메라를 조작한 뒤 대기 시간(초) 동안 추가 조작이 없으면 초기 카메라 위치와 타겟으로 부드럽게 돌아갑니다

애니메이션

애니메이션 모드는 없음 · 반복 · 한번입니다. 키프레임 애니메이션을 반복할지 한 번만 재생할지 정합니다. 타임라인 만들기는 → 타임라인과 애니메이션 챕터를 보세요.

썸네일

썸네일 옵션은 사용 · 사용 안함 · 팝업입니다. 사용은 썸네일을 먼저 보여 준 뒤 3D를 불러오고, 팝업은 썸네일을 눌렀을 때 뷰어를 팝업으로 엽니다. 팝업에서는 나가기 버튼을 켤 수 있습니다.

UI 설정

• UI 타입 — 360 White 1~7, 360 Black, Finger, Finger Anim, Toggle 3D, 3D Logo, SSF 360, None 중에서 조작 안내 UI를 고릅니다
• 위치 — 가운데 · 왼쪽 위 · 오른쪽 위 · 왼쪽 아래 · 오른쪽 아래. 상세 위치의 X/Y 오프셋으로 미세 조정합니다
• UI 배율과 UI 크기(px) — PC와 모바일을 따로 정합니다

치수표시

치수 기본 표시를 켜면 뷰어를 열었을 때 치수 UI가 바로 보입니다. 치수 자체는 일반 편집 모드의 치수 탭에서 만듭니다.

상태표시

제품 메타데이터를 바탕으로 색상 변형 등 상태를 뷰어에 표시합니다. 먼저 제품 메타데이터 & 관리의 열기로 제품 그룹, 색상명, 아이콘, 순서를 설정해야 합니다.

• 컬러바 — 기본 · 기본표시 · 언더바 · 하단버튼형 · 아이콘 · 아이콘표시 · 숨김
• 컬러칩 아웃라인 — 기본 · 진하게 · 흰색 · 없음

컨트롤러

• 카메라 타입 — 오브젝트(제품 주위를 도는 오빗) · 맵 · 포인터 락 · 워크 · 프레젠테이션
• 더블클릭시 해당 지점 이동 — 더블클릭한 3D 지점으로 카메라 타겟을 옮깁니다
• WASD 이동 — 게시된 뷰어에서 키보드로 카메라를 움직일 수 있게 합니다

HTML 설정

임베드 iframe의 PC 너비, 모바일 너비, 화면 비율(1:1 · 9:16 · 16:9 · 사용자 정의)을 정합니다. HTML 태그 복사에 그대로 반영됩니다.

뷰어 내부 3D 영역

iframe 안에서 실제 3D 화면이 차지하는 영역입니다. 기본 · 넓게 · 전체 프리셋을 고르거나 PC 3D 영역 너비와 모바일 3D 영역 높이를 직접 정합니다.

성능

• 렌더링 화질 — 최고(원본) · 높음(1024) · 중간(512) · 낮음(256) · 매우 낮음(128) · 직접 입력. 렌더 해상도를 낮춰 저사양 기기에서 프레임을 확보합니다
• 정렬 정밀도와 정렬 쓰로틀 — 스플랫 정렬의 정밀도와 갱신 빈도
• 정지 시 선명하게(슈퍼샘플링) — 카메라가 멈추면 더 높은 해상도로 다시 그립니다
• LOD — 거리 또는 화면크기 기준으로 detail 스플랫을 걸러 렌더 부담을 줄입니다. 두 기준을 AND/OR로 결합하고, 항상 표시 비율, 렌더 거리, 페이드 폭, 최소 픽셀을 조절합니다

기타 설정

뷰어 정보, 동적 로딩, 뷰어 로고 표시 여부를 켜고 끕니다.

시네마틱 탭

뷰어에 고급 효과를 적용해 다양한 연출을 만드는 기능입니다. 세 절로 나뉩니다.

시네마틱

• 피사계 심도(배경 흐림) — 렌즈 초점거리(길수록 망원, 인물사진 느낌은 85mm 근처), 조리개(낮을수록 얕은 심도), 선명 범위(제품 두께만큼 주면 제품은 선명하고 배경만 흐려짐), 깊이 민감도, 초점 거리(0이면 화면 중앙 표면에 자동 초점)
• 바닥 그림자 — 원형은 형상과 무관한 부드러운 그림자로 항상 가볍게 동작하고, 실루엣은 제품의 실제 밑면 형상을 스플랫 또는 콜라이더 기반으로 투영합니다. 높이 감쇠, 진하기, 부드러움, 광원 기울기, 그림자 방향, 크기, 가로세로 비율, 각도, 위치를 조절하며 로드 시 위치·크기 자동 인식을 켜면 실물에 맞춰 잡습니다
• 비네트 — 화면 가장자리를 살짝 어둡게 해 시선을 제품으로 모읍니다
• 등장 페이드 — 로딩이 끝난 뒤 제품이 서서히 나타납니다
• 카메라 인트로 — 로딩 완료 시 살짝 물러난 각도에서 기본 위치로 들어옵니다. 조작하면 즉시 해제됩니다
• 자이로 패럴랙스 — 모바일 기기를 기울이면 시점이 살짝 따라 움직입니다

등장 페이드와 카메라 인트로는 뷰어 전용이라 에디터 프리뷰에서는 재생되지 않습니다.

시네마틱+ (룩·연출)

• 룩 프리셋 — 아래 설정을 초기화한 뒤 조합을 한 번에 적용합니다. 적용 후 개별 조정할 수 있고 기본값으로 되돌립니다
• 룩 그레이딩 — 컬러 필터(없음 · 흑백 · 세피아 · 쿨톤 · 웜톤 · 비비드 · 페이드), 색온도, 노출·대비·채도. 화면 합성 단계(CSS)에 적용되어 렌더 성능에 영향이 없지만 영상 녹화와 썸네일 캡처에는 반영되지 않습니다
• 오버레이 — 스포트라이트, 앰비언트 워시(상단 환경광)와 색상, 필름 그레인, 레터박스(시네마 바)와 바 높이, 비네트 색상, 바닥 그림자 색조, 타이틀 카드(제품명)
• 프레임 · 배경 — 모서리 라운드, 카드 그림자, 단색 배경일 때의 배경 그라데이션(시작 색 · 끝 색 · 방향)
• 카메라 모션 — 카메라 인트로 스타일(스윙 · 돌리 · 라이즈), 등장 페이드 시간, 마우스 패럴랙스(PC), 유휴 드리프트, 왕복 스윙 회전과 스윙 각도, 호버 시 자동회전 일시정지, 카메라 부드러움

뷰어 UX (조작감·편의·품질)

• 조작감 — 회전 감도, 줌 감도, 플릭 스핀(관성 회전), 더블탭 줌(모바일), 빈 공간 더블클릭 시점 초기화, 햅틱 피드백(모바일), 잡기 커서
• 편의 — 스크롤 가드(임베드에서 탭 후 조작), 첫 방문 조작 힌트, 스크린샷 버튼, 현재 시점 링크 복사 버튼, 콘텐츠 보호(우클릭 차단), 장시간 유휴 절전(4분)
• 품질 · 접근성 — 자동 품질(저사양 해상도 강하), 모바일 라이트(무거운 효과 자동 끔), 모션 최소화 설정 존중, 로딩 진행률 표시, 캔버스 등장 페이드, 다크모드 배경색

방문자가 뷰어를 조작할 수 있다는 것을 모르고 지나치는 경우(통계의 이탈 세션이 많을 때) 자동 회전, 첫 방문 조작 힌트, 유휴 드리프트가 도움이 됩니다.

연결 탭

두 아이템을 연결하면 뷰어에 전환 버튼이 생겨 방문자가 오갈 수 있습니다.

• 연결 종류 — 열림/닫힘(예: 뚜껑을 연 상태와 닫은 상태)과 베리에이션(예: 색상 변형). 같은 종류의 연결은 아이템당 하나만 둘 수 있어 새로 만들려면 먼저 해제해야 합니다
• 현재 아이템의 상태와 연결할 아이템 — 이 아이템의 역할(열림 또는 닫힘)을 정하고 이름이나 ID로 검색해 상대 아이템을 고릅니다. 이미 같은 종류의 연결에 속한 아이템은 고를 수 없습니다
• 뷰어 버튼 — 뷰어의 숏폼·치수·열림/닫힘 버튼 표시 방식(TYPE 1 · TYPE 2)으로 아이템 전체에 공통 적용됩니다. 버튼 라벨은 라벨 저장으로 따로 저장합니다
• 전환 크로스페이드 — 켜면 이전 화면 위에서 부드럽게 전환하고, 끄면 바로 로딩 표시로 넘어갑니다
• 이동 →로 상대 아이템 편집기로 바로 갈 수 있고, 연결 해제로 끊습니다

전환 클릭과 로딩 성공률은 통계의 "연결된 아이템 전환"에 집계됩니다.

제품 정보

상태표시 절의 제품 메타데이터 & 관리에서 제품명 · 브랜드 · 품번 · 가격 · 색상 · 연결 웹사이트와 상태표시용 제품 그룹, 색상명, 아이콘, 순서를 입력합니다. 라이브러리와 상세 페이지에도 표시됩니다.

게시와 임베드

• 상단 저장 후, 스타일 탭의 HTML 태그 복사나 아이템 상세 페이지의 태그 복사로 임베드 코드를 얻습니다. 자사몰 · 홈페이지에 한 줄로 삽입할 수 있으며, HTML 설정의 너비·비율과 투명 배경이 그대로 들어갑니다. 자세한 방법은 → 라이브러리 › 게시와 공유 챕터
• 스크립트 삽입이 제한되는 플랫폼(스마트스토어 등)은 3D 회전 영상으로 활용하세요