1단계: Photta 위젯 키 가져오기
business.photta.app에서 Photta Business 대시보드에 로그인하세요. 설정 → API 키로 이동하여 pk_live_로 시작하는 공개 키를 복사하세요. 이것이 필요한 유일한 인증 정보입니다. 키가 작동하기 전에 설정 → 허용된 도메인에 WooCommerce 스토어 도메인(예: mystore.com)을 추가해야 합니다. 도메인 확인은 모든 가상 착용 요청 시 실행되므로, 실제 서비스 시작 전에 허용 목록을 설정해야 합니다.
localhost와 같은 서브도메인이나 스테이징 URL에서 로컬 테스트를 수행하는 경우, 해당 도메인을 별도로 허용 목록에 추가하세요. 유료 플랜에서는 최대 10개의 도메인을 추가할 수 있습니다. 체험판 계정은 1개의 도메인을 허용합니다. 도메인이 등록되면 해당 소스로부터의 요청이 즉시 수락되며 전파 지연은 없습니다.
2단계: 쇼트코드 vs 스크립트 태그 선택
WooCommerce은 두 가지 깔끔한 통합 경로를 제공합니다. 쇼트코드 방식([photta_widget pk="pk_live_..."])은 제품 페이지 템플릿 내부의 특정 위치나 커스텀 WooCommerce 훅에 위젯을 붙여넣을 수 있게 해줍니다. 버튼이 제품 갤러리와 장바구니 담기 버튼 사이에 정확히 나타나길 원하는 경우 이상적입니다. 쇼트코드를 사용하려면 WooCommerce 제품 템플릿 파일 single-product/add-to-cart/simple.php에 직접 붙여넣거나 페이지 빌더 블록을 사용하세요.
스크립트 태그 방식은 wp_enqueue_script를 사용하여 테마의 functions.php 파일을 통해 SDK를 글로벌하게 삽입합니다. 차일드 테마의 functions.php에 다음을 추가하세요: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); 이렇게 하면 템플릿 수정 없이 모든 제품 페이지에 위젯 버튼이 자동으로 렌더링됩니다. 대부분의 판매자는 간편함 때문에 스크립트 태그 방식을 선호합니다.
3단계: 선택한 스니펫 붙여넣기 및 저장
쇼트코드 경로의 경우: 단일 제품 페이지에 대한 차일드 테마의 WooCommerce 템플릿 오버라이드 파일을 엽니다. 버튼이 나타나길 원하는 정확한 수직 위치에 [photta_widget pk="pk_live_..."]를 붙여넣으세요. 파일을 저장합니다. 쇼트코드 렌더러는 Photta의 경량 헬퍼에 의해 등록됩니다. SDK 자체가 로드될 때 쇼트코드 핸들러를 등록하므로 별도의 플러그인 파일은 필요하지 않습니다.
스크립트 태그 경로의 경우: 워드프레스 관리자에서 외모 → 테마 파일 편집기를 열고, 차일드 테마의 functions.php로 이동하여 2단계에서 보여준 wp_footer 액션 스니펫을 추가합니다. 파일 업데이트를 클릭하여 저장하세요. 에디터를 새로고침하여 코드가 존재하는지 확인해 스니펫이 저장되었는지 검증하세요. 캐시 플러그인(WP Rocket, W3 Total Cache 등)을 사용하는 경우, 새로운 푸터 스크립트가 적용되도록 지금 캐시를 삭제하세요.
4단계: 스토어에 위젯이 나타나는지 확인
비밀 모드 브라우저 창에서 WooCommerce 스토어의 제품 페이지로 이동하세요. 장바구니 담기 섹션 근처에 '직접 입어보기' 버튼이 보여야 합니다. 버튼을 클릭하고 테스트 사진을 업로드하여 가상 착용 결과가 렌더링되는지 확인하세요. 버튼이 나타나지 않으면 브라우저 콘솔(F12)을 열어 photta 오류를 확인하세요. 403 도메인 오류는 도메인이 아직 허용된 도메인 목록에 없음을 의미합니다.
또한 Ctrl+U(소스 보기)를 누르고 photta를 검색하여 페이지 HTML 소스에 SDK 스크립트 태그가 나타나는지 확인하세요. 태그가 없는데 wp_footer 훅을 추가했다면, 테마의 푸터 템플릿에서 wp_footer()를 호출하고 있는지 다시 확인하세요. 일부 오래되거나 과도하게 커스터마이징된 테마는 이 호출을 생략하기도 합니다. footer.php의 </body> 닫는 태그 앞에 <?php wp_footer(); ?>를 추가하면 이 문제가 해결됩니다.
5단계: 카테고리별 표시 설정
기본적으로 위젯 버튼은 모든 제품 페이지에 나타납니다. 특정 카테고리로 제한하려면 스크립트 태그에 콤마로 구분된 WooCommerce 카테고리 슬러그 목록과 함께 data-categories 속성을 추가하세요: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. SDK는 현재 페이지의 WooCommerce 카테고리 데이터를 읽고 일치하지 않는 페이지에서는 자동으로 버튼을 숨깁니다.
쇼트코드 사용자의 경우, 대상 카테고리와 연결된 템플릿에만 쇼트코드를 배치하거나, 쇼트코드를 WooCommerce 조건문으로 감싸세요: has_term() PHP 함수를 사용하여 쇼트코드를 출력하기 전에 현재 제품이 대상 카테고리에 속하는지 확인하세요. 이 패턴을 사용하면 템플릿을 복제하지 않고도 어떤 제품 유형에 가상 착용 옵션을 표시할지 정밀하게 제어할 수 있습니다.