3D 창고에 의해 제공되는 Shopify AR

iOS 12 장치에서 Safari 브라우저를 사용하는 고객은 제품의 현실적 및 대화식 버전을 증강 현실(AR)로 볼 수 있습니다. AR를 사용하면 고객에게 제품의 크기, 규모 및 세부 정보를 더 효율적으로 제공할 수 있습니다. 3D 창고 앱을 사용하면 AR 환경을 통해 3D 모델을 업로드하고 스토어의 제품에 연결할 수 있습니다.

3D로 꽃병 보기

고객이 AR에서 제품을 볼 수 있도록 하려면 3D 창고 앱을 설치하고 제품의 3D 모델을 가져오고, 3D 모델을 앱에 추가한 다음 테마를 편집하여 AR Quick Look을 사용하도록 설정한 뒤 AR 배지를 3D 제품에 추가하십시오.

1단계: 3D 창고 앱 설치

2단계: 제품의 3D 모델 가져오기

고객이 AR에서 제품을 볼 수 있으려면 먼저 제품의 3D 모델이 필요합니다. 3D 모델은 3차원으로 개체 또는 표면의 가상 표현입니다. 어떤 각도에서든 개체를 볼 수 있습니다.

제품에 대한 3D 모델 생성을 도와줄 Shopify Expert를 고용할 수 있습니다. Shopify 전문가 마켓플레이스에서 3D 모델 생성 서비스를 제공하는 전문가를 검색하고 전문가를 선택한 다음 견적을 요청하십시오.

견적 요청 양식을 사용하여 프로젝트에 대한 세부 정보를 제공하십시오. 제품 사진 및 제품 치수를 제공하려는 경우 링크된 가이드라인을 준수하는지 확인하십시오.

견적을 요청할 때 Shopify Expert 고용을 요청하지 않아도 됩니다. 이 단계에서는 요청을 검토할 수 있는 전문가에게만 요청을 제출합니다. 전문가가 귀하와 협력하기로 결정하고 나면 비용 및 진행 방법에 대한 자세한 정보와 함께 직접 연락할 것입니다.

작업 요청의 일부로 제품 사진과 제품 치수를 제공하지 않았다면 전문가가 해당 정보를 요청할 것입니다. 사진 촬영 및 측정 시 아래 사양을 따르십시오.

제품 사진

3D 모델은 사진을 사용하여 만들어집니다. 3D 모델을 생성하기 위해, Shopify 전문가는 다양한 각도의 제품 사진을 필요로 합니다.

제품 사진 각도

제품 사진을 찍을 때 다음 가이드라인을 따르십시오.

  • 제품이 조명을 잘 받고 있는지 확인합니다.
  • 제품 전체에 초점을 맞췄는지 확인합니다.
  • 가능하면 휴대폰 카메라를 사용하지 않습니다. 가구와 같은 대형 제품의 경우 렌즈가 50mm인 카메라를 사용하고, 중소형 제품은 70mm 또는 100mm 렌즈를 사용합니다.
  • 특별한 세부 사항이나 텍스처의 추가 사진을 촬영합니다.
  • 사진 파일에 blue vase - top 또는 blue vase - left 등의 명확한 제목을 붙이고 레이블이 명확하게 지정된 폴더에 저장합니다.

제품 치수

정확한 3D 모델을 만들기 위해, Shopify 전문가는 제품에 대한 세부적인 측정을 필요로 합니다. 측정을 제공하는 경우 다음 가이드라인을 따르십시오.

  • 제품의 각 치수를 명확하고 단순한 용어로 설명합니다.
  • 치수를 mm로 제공합니다.
  • 측정값이 어느 치수에 해당하는지 나타내는 다이어그램을 포함합니다.
  • 제품과 관련된 기술 도면 또는 CAD 파일이 있는 경우 해당 도면도 포함합니다.

3D 모델 만들기 예시

나오미는 다음과 같은 파란색 꽃병을 판매하고 있습니다.

꽃병

그녀는 3D 창고 앱을 설치한 다음 전문가 마켓플레이스를 사용하여 꽃병의 3D 모델을 생성하는 Shopify Expert를 고용합니다. 나오미는 70mm 렌즈가 있는 카메라로 촬영한 6개의 고품질 사진을 Shopify Expert에게 제공합니다.

제품 사진 각도

나오미는 전문가에게 제품 치수에 해당하는 측정 도표를 mm로 제공합니다.

꽃병

  • 꽃병 높이(1) ____mm
  • 꽃병 맨 윗부분부터 병목 아랫부분까지(2) ____mm
  • 병목 아랫부분부터 꽃병 바닥까지(3) ____mm
  • 꽃병 입구 지름(4) ____mm
  • 입구 테두리 너비(5) ____mm
  • 병목 아랫부분 지름(6) ____mm
  • 꽃병에 육각 면 8개
  • 육각 면 높이(8) ____mm
  • 육각 면 너비(9) ____mm
  • 꽃병의 가장 넓은 부분의 지름(10) ____mm
  • 꽃병 바닥 지름(11) ____mm
  • 받침 지름 ____mm

Shopify Expert는 이 사진 및 치수를 사용하여 파란색 꽃병의 3D 모델을 생성합니다. Shopify Expert는 Naomi에게 .glb.usdz 파일을 전송하여 3D 창고 앱에 추가합니다.

3단계: 모델의 품질을 확인합니다.

Shopify Expert가 3D 모델을 제공할 때 만족스러운 품질인지 확인해야 합니다. Shopify Expert는 모델 미리 보기에 대한 지침을 제공해야 합니다.

모든 각도에서 모델을 확인합니다. Gltf 뷰어를 사용하여 3D 모델을 미리 볼 수 있습니다. 모델을 검토할 때에는 다음 질문을 고려해 보십시오.

  • 모델의 모양이 전문가에게 제공한 제품 참조 사진과 일치합니까?
  • 모델의 모든 부분이 나머지 부분과 비례합니까?
  • 증강 현실에서 모델을 미리 볼 수 있는 경우, 나머지 장면과 비교하여 모델의 배율이 정확하게 표시됩니까?
  • 모델이 제품과 같은 재료로 만들어진 것처럼 보입니까?
  • 모델의 재료가 늘어나거나 흐릿하거나 왜곡되어 보입니까?
  • 모델의 재료를 보다 사실적으로 보이게 하기 위한 긁힘과 같은 세부 사항이 있습니까?
  • 제품의 부분이 투명하거나 반사되거나 빛을 발하는 경우 올바르게 보입니까?
  • 가장자리가 모두 사실적으로 보입니까? 가장자리 중 너무 날카로워 부드러워질 필요가 있는 곳이 있습니까?
  • 쉽게 볼 수 있는 로고나 텍스트 등의 장식용 디테일이 있습니까?
  • 있으면 안 되는 곳에 틈이나 구멍이 있습니까?

Shopify Expert는 특정 표준에 따라 3D 모델을 구축해야 합니다. 모델을 더 효율적으로 검토할 수 있도록 3D 모델 표준에 대해 자세히 알아보려면 판매자용 3D 모델 생성을 참조하십시오.

모델의 품질이 충분하지 않다고 생각되면 Shopify Expert에게 문의하여 문제점을 설명하십시오.

4단계: 3D 창고 앱에 3D 모델 추가

3D 창고 앱을 설치하고 3D 모델을 소싱한 경우 3D 창고 앱에 해당 모델을 추가해야 합니다.

참고: AR 이미지가 3D 창고 앱에 추가한 후에는 표시되지 않으면 Apple 지원 팀으로 문의하십시오.

단계:

  1. Shopify 관리자에서 을 클릭합니다.
  2. 3D 창고를 클릭합니다.
  3. 3D 모델 추가를 클릭합니다.
  4. 제목 필드에 3D 모델의 제목을 입력합니다.
  5. 링크된 제품 필드에서 이 3D 모델이 연결된 제품 및 이형 상품을 선택하고 제품 선택을 클릭합니다.
  6. 파일 업로드를 클릭하고 Shopify Expert에서 제공하는 .usdz 파일을 선택합니다.
  7. 저장을 클릭합니다.

Shopify Expert가 제공하는 .gltf 또는 .glb 파일에 대해 업로드 프로세스를 반복합니다. 제품과 관련된 3D 모델 파일 유형이 모두 포함되도록 이를 동일한 제품에 연결해야 합니다.

참고: .gltf 파일을 업로드하면 링크된 파일 섹션에 파일을 더 추가 하라는 메시지가 표시됩니다. 파일 업로드를 클릭하여 전문가가 제공한 링크된 텍스처 리소스를 업로드합니다.

허용된 파일 유형

Shopify Expert는 각 3D 모델, .usdz 파일 및 .gltf 또는 .glb 파일에 대해 두 가지 파일 유형을 제공합니다. 이러한 다양한 파일 유형은 다른 플랫폼 및 기능에서 사용됩니다. 예를 들어 고객이 iOS 12 장치에서 Safari 브라우저로 3D 제품을 볼 수 있도록 하려면 .usdz 파일을 업로드해야 합니다. 온라인 스토어가 향후 증강 현실 및 3D 기능과 호환되는지 확인하는 가장 좋은 방법은 두 파일 유형을 모두 업로드하는 것입니다.

5단계: AR Quick Look을 활성화하기 위한 테마 편집

iOS 12 장치에서 Safari 브라우저를 사용하는 고객이 3D 제품을 볼 수 있는 기능인 AR Quick Look을 사용하도록 설정하려면 테마 코드를 편집해야 합니다.

단계:

  1. Shopify 관리자에서 온라인 스토어를 클릭합니다.
  2. 현재 테마 옆의 작업 > 코드 편집을 클릭합니다.
  3. 레이아웃 폴더에서 {/} 테마. 리퀴드를 클릭합니다.
  4. <head> 태그를 찾습니다. 파일 상단 근처에 있어야 합니다.
  5. 다음 줄에 다음 코드를 붙여넣습니다.
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. 저장을 클릭합니다.

  2. 섹션 폴더에서 {/} 제품-템플릿. 리퀴드를 클릭합니다.

  3. 파일 맨 위에 다음 코드를 붙여넣습니다.

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

Quicklook 라이브러리가 제품 템플릿에 추가되었습니다.

  1. 저장을 클릭합니다.

하나 이상의 제품 템플릿을 사용하는 경우 해당 템플릿 파일에도 해당 코드를 추가합니다.

6단계: 3D 제품에 AR 배지 추가

iOS 12 장치를 사용하는 고객은 AR 배지 오버레이가 표시되면 제품을 3D로 확인할 수 있음을 알고 있습니다.

AR 배지 오버레이

제품 이미지에 AR 배지를 표시하려면 테마 코드를 편집해야 합니다.

단계:

  1. Shopify 관리자에서 온라인 스토어를 클릭합니다.
  2. 현재 테마 옆의 작업 > 코드 편집을 클릭합니다.
  3. 섹션 폴더에서 {/} 제품-템플릿. 리퀴드를 클릭합니다.
  4. 제품 사진과 연결된 템플릿의 섹션을 찾습니다. ProductPhoto 또는 featured_image 같은 키워드를 찾으십시오.
    제품 포토 리퀴드
  5. 제품 사진 섹션에서 첫 번째 <img... > 태그를 찾습니다.
  6. 해당 태그 위의 줄에 다음 코드를 붙여넣습니다.
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

코드가 포함된 제품 사진 액체

  1. 저장을 클릭합니다.

  2. 테마의 CSS가 포함된 파일을 엽니다. 이 파일은 일반적으로 자산 폴더에 있으며 대부분 {/}theme.scss.liquid와 같은 제목으로 되어 있습니다.

  3. 파일 맨 아래에 다음 코드를 붙여넣습니다.

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. 저장을 클릭합니다.

3D 모델을 테스트하려면 iOS 12를 실행하는 장치의 Safari 브라우저에서 온라인 스토어를 연 후에 제품 페이지로 이동합니다. 제품 이미지에서 AR 배지를 탭하여 3D로 표시합니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험