Wix 연동#

사이트 유형에 맞는 Wix 확장 기능을 통해 Wix Stores에 Room Visualizer를 연동하세요. Wix Editor와 Wix Studio에는 서로 다른 접근 방식이 필요합니다.

검증 상태: 2026년 9월 7일에 Wix 확장 문서를 검토했습니다. 고객 Wix 사이트나 앱 인증 정보가 없어 전체 과정에 대한 검증은 수행하지 못했습니다. SDK와 컨테이너는 스토어의 동일한 DOM에 있어야 하며 HTML iframe으로 대체할 수 없습니다.

SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.

올바른 Wix 연동 방식 선택#

Wix 문서는 Stores 임베디드 스크립트를 Wix Studio에서 사용할 수 없다고 명시하며, 앱에 사이트 플러그인 확장을 사용하도록 안내합니다. Editor용 임베디드 스크립트 솔루션을 설치한 뒤 Studio도 지원한다고 판단하지 마세요.

사전 준비#

Wix Stores가 설치된 Wix 테스트 사이트, 사용자 정의 코드 또는 앱 확장 배포 권한, ideal.house Shop ID 및 Publishable Key, 가져온 테스트 SKU를 준비하세요. 선택한 Wix 상품 옵션이 자체 SKU를 가지는지 결정하세요. 모든 앱 비밀 정보와 백엔드 API 키는 브라우저 페이지에 노출하지 마세요.

최소 SDK 마크업#

Wix에서 코드를 스토어 문서 안에서 실행할 수 있는 경우 지원되는 ideal.house 마크업은 다음과 같습니다.

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

상품 코드는 가져온 ideal.house sku와 정확히 일치해야 합니다.

Wix Editor: 단일 사이트에 설치#

Wix 대시보드의 설정 → 사용자 정의 코드에서 SDK 태그를 추가하고 본문 또는 본문 끝에 배치한 다음 필요한 상품 페이지를 선택하세요. 사이트를 배포하세요. 운영 환경 확인에는 미리보기 모드만으로 충분하지 않습니다.

그런 다음 동일한 최상위 문서에 컨테이너를 생성하는 상품 페이지 사용자 정의 요소 또는 Wix Stores 확장 지점을 추가하세요. 버튼에 Wix HTML 임베드를 사용하지 마세요. 이는 iframe 안에서 실행되므로 부모 문서의 스크립트가 컨테이너를 찾을 수 없고 iframe의 스크립트는 상품 페이지를 제어할 수 없습니다.

배치 가능한 요소는 자체 코드에서 다음 작업 하나를 노출해야 합니다.

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

페이지 또는 확장에서 사용할 수 있는 API를 통해 Wix가 완전한 현재 상품/옵션을 보고한 후에만 호출하세요. 이는 고객이 구현하는 어댑터 코드이며 검증되지 않은 Wix 페이지 이벤트를 의도적으로 지정하지 않습니다.

Wix 앱: Wix Editor 스토어용 임베디드 스크립트#

Wix Stores는 임베디드 스크립트 확장에 details-placeholder 및 bottom-placeholder 위치를 제공합니다. 이 자리표시자 중 하나에 마운트 요소를 덧붙이세요. 다른 앱도 공유할 수 있으므로 기존 내용을 대체하지 마세요. SDK 스크립트를 별도의 임베디드 조각으로 구성하거나 정확한 src, data-shop-id 및 data-publishable-key 속성으로 프로그래밍 방식으로 생성하세요.

CLI로 생성한 임베디드 스크립트에서 사용 가능한 Wix 사이트 API는 스토어 컨텍스트를 읽을 수 있습니다. Wix가 지원하는 Stores API로 현재 상품 옵션의 SKU를 구한 다음 setIdealhouseSku() 연결 함수를 호출하세요. 완전한 SKU가 준비될 때까지 자리표시자를 비워 두세요.

Wix Studio: 사이트 플러그인#

문서화된 상품 페이지 슬롯을 대상으로 Wix Stores 사이트 플러그인을 만드세요. 플러그인 UI에서 컨테이너를 렌더링하고 Wix가 렌더링한 사이트 문서에서 SDK를 불러오세요. 플러그인은 확정된 현재 상품 옵션의 SKU를 DOM 컨테이너에 전달해야 합니다. Wix Studio 슬롯 이름과 컴포넌트 API는 변경될 수 있으므로 확장을 생성할 때 이 가이드의 이름을 복사하지 말고 최신 CLI/API 참조 문서에서 선택하세요.

컨트롤을 격리된 iframe 안에 렌더링하는 플러그인 슬롯을 사용하지 마세요. SDK와 뷰어는 해당 경계에서 검증되지 않았습니다. 스토어 문서에 컨테이너를 배치하는 Wix 확장 지점을 선택하거나 문서를 직접 제어할 수 있는 헤드리스 스토어를 사용하세요.

상품 매핑 및 탐색#

Wix 상품 또는 상품 옵션의 sku를 ideal.house sku에 매핑하세요. Wix 상품 ID로 조용히 대체하지 마세요. 생성된 ID를 의도적으로 가져온 경우가 아니라면 카탈로그 SKU와 일치하지 않습니다.

Wix 상품 페이지는 옵션 선택 또는 클라이언트 탐색 중 콘텐츠를 교체할 수 있습니다. 문서화된 각 상품/선택 콜백에서 다음을 수행하세요.

1. 이전에 렌더링된 컨테이너를 비우세요.
2. 완전히 선택된 상품 옵션을 확인하세요.
3. 해당 SKU로 새 컨테이너를 삽입하세요.
4. 완전하거나 시각화 가능한 SKU가 없으면 마운트 요소를 비워 두세요.

갤러리와 반복 요소에서는 각 항목에 자체 항목별 SKU가 필요합니다. 빠른 보기 및 모달 상품도 모달 슬롯에 동일한 생명주기 연결이 필요합니다.

상품 가져오기#

Wix Stores는 ideal.house와 자동으로 동기화되지 않습니다. Wix 상품 및 상품 옵션 필드를 내보내고 필요한 각 Wix SKU를 sku로 설정한 다음 상품 업로드를 사용하세요. 상품 가져오기, 작업 상태, 상품 목록 조회, 상품 수정, 상품 삭제 및 오류와 재시도를 참고하세요.

Wix에서 ideal.house로의 자동 동기화, 앱 설치 흐름 또는 Wix 웹훅 처리기는 고객이 구현해야 합니다. 이 가이드는 이를 제공한다고 보장하지 않습니다.

배포 전 검증#

1. 데스크톱과 모바일의 비공개 브라우저 창에서 배포된 사이트를 테스트하세요.
2. SDK가 컨테이너와 동일한 문서에서 한 번만 불러와지는지 확인하세요.
3. DOM의 상품 코드를 가져온 SKU와 정확히 비교하세요.
4. 최종 상품 옵션이 선택될 때까지 각 옵션을 변경하고 이전 컨테이너가 제거되며 새 컨테이너가 표시되는지 확인하세요.
5. Wix 클라이언트 탐색, 상품 갤러리/반복 요소 페이지, 빠른 보기, 브라우저 뒤로 가기/앞으로 가기, 동의 설정 및 회원/로그아웃 모드를 테스트하세요.
6. 알 수 없거나 비어 있는 SKU에서 동작하지 않는 시각화 컨트롤이 남지 않는지 확인하세요.
7. 앱의 경우 지원 범위에 따라 별도의 Wix Editor 및 Studio 테스트 사이트에서 설치, 활성화, 비활성화 및 제거를 테스트하세요.

연동 제거#

Wix 사용자 정의 코드 항목을 삭제하거나 비활성화하고 상품 페이지 요소를 제거하세요. 앱의 경우 임베디드 스크립트 또는 사이트 플러그인 확장을 제거하고 테스트 사이트에서 앱을 삭제하세요. 배포 후 스크립트 요청과 모든 data-idealhouse-* 노드가 사라졌는지 확인하세요.

공식 플랫폼 참고 문서#

• Wix: 임베디드 스크립트로 Wix Stores 사용자 정의
• Wix: 임베디드 스크립트 소개
• Wix: 사이트 확장 소개
• Wix: 사용자 정의 요소