이미지 뷰어 설정

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 4분

    • 이미지 뷰어를 사용하여 미디어 캐러셀에서 볼 수 있도록 필드에 이미지를 추가할 수 있습니다.

    이미지 뷰어를 사용하면 Logik 관리자가 미디어 캐러셀에서 볼 수 있는 지원되는 필드에 추천 이미지를 추가할 수 있습니다. 이 문서에서는 Logik 관리자에서 이미지 뷰어를 설정하는 방법과 이미지 뷰어가 레이아웃에 표시되는 방식을 다룹니다.

    지원되는 필드 표시 유형

    • 정적 이미지
    • MultiSelectProductPickerGrid
    • MultiSelectVisualProductPicker
    • 제품 피커그리드
    • VisualProduct선택기
    • 다중 선택 picklistGrid
    • 단일 선택 picklistGrid
    • 다중 선택 시각적 선택기
    • 시각적 선택기

    정적 이미지

    정적 이미지 필드에 대한 이미지 뷰어를 표시하려면 다음 단계를 수행합니다.

    1. 이미지 뷰어를 추가할 레이아웃을 엽니다.
    2. 필드 위에 마우스를 대고 기어 아이콘을 클릭합니다.
    3. 원시 값 메뉴를 열고 아래의 자리 표시자 텍스트 대신 필수 입력을 포함하면서 다음을 추가합니다.

      정적 이미지 코드

    4. 저장을 클릭하고 Blueprint를 배포합니다.

    이미지 뷰어의 원시 값 상세 정보

    관리자 UI를 통해 이미지 표시 구성요소의 "원시 값" 섹션에 다음을 추가합니다. 여기서 Array<FeatureImage> 는 기능 이미지 유형 형식의 추가 기능 이미지 배열이고 carouselEnabled 는 예 또는 아니오로 설정됩니다.

    "featureImageSettings": {
      "additionalImages": Array<FeatureImage>,
      "carouselEnabled": boolean
  }

    기본적으로 carouselEnabled 는 false입니다.

    기능 이미지 정의

    FeatureImage = {
  “src”: string,
  “alt”?: string,
  "label"?: string,
}

    제품 선택기

    제품 선택기 필드에 대한 이미지 뷰어를 표시하려면 다음 단계를 수행합니다.

    1. 제품 선택기 필드를 선택합니다.
    2. 옵션 필드 탭을 선택합니다.
    3. + 추가를 클릭합니다.
      • 필드 유형을 텍스트로 설정합니다.
      • 제품 목록 속성을 제품 확장으로 설정합니다.
    4. 이미지 뷰어에 포함할 각 이미지에 대해 하나의 텍스트 필드를 만듭니다.
      주:
      대체 텍스트 또는 레이블을 표시하려면 각 유형에 대한 추가 필드를 만들어야 합니다. 이러한 필드는 필수가 아닙니다.

      제품 선택기 설정

    5. 대량 작업 탭을 선택합니다.
    6. 새 작업 추가를 클릭합니다.
    7. 유형 선택 결정된 작업.
    8. 대량 작업 이름을 입력합니다.
    9. 이미지 뷰어에 추가된 모든 필드를 선택합니다.

      제품 피켓 설정

    10. 저장을 클릭합니다.
    11. 대량 작업 탭에서 각 이미지의 URL과 레이블 텍스트, 원하는 경우 대체 텍스트를 입력합니다.

      이미지 뷰어 데모

    12. 저장을 클릭합니다.
    13. 제품 선택기 필드가 포함된 레이아웃을 엽니다.
    14. 필드 위에 마우스를 대고 기어 아이콘을 클릭합니다.
    15. 이미지 뷰어 사용을 켜기로 전환합니다.
    16. 이미지 뷰어 설정 섹션을 확장합니다.
    17. 이미지 URL, 대체 텍스트 및 레이블에 해당하는 3-4단계에서 만든 필드를 선택합니다.

      대체 텍스트와 레이블은 선택 사항입니다.

    18. + 추가를 클릭하고 포함하려는 각 이미지에 대해 17단계를 반복합니다.

      이미지 뷰어 설정

    19. 저장을 클릭하고 Blueprint를 배포합니다.

    선택 목록

    1. 선택 목록 필드를 엽니다.
    2. 선택 목록 확장 탭을 클릭합니다.
    3. 데이터 임포트를 클릭합니다.
    4. 다음 열을 포함하는 CSV를 만듭니다.
      • 값
      • 이미지 URL
        • 표시할 이미지에 유효한 URL인지 확인하십시오.
        • 이미지 뷰어에 포함할 각 이미지에 대한 imageUrl 열을 생성합니다.
      • imageLabel(선택 사항)
      • imageAltText(선택 사항)

        CSV 파일

    5. 생성된 CSV를 임포트합니다.
    6. 열 매핑을 클릭합니다.
    7. 추가된 각 필드에 대해 매핑 메뉴를 선택하고 확장 매핑 섹션에서 열 이름을 선택합니다.

      선택 목록 확장

    8. 매핑 저장을 클릭합니다.
    9. 제품 선택기 필드가 포함된 레이아웃을 엽니다.
    10. 필드 위에 마우스를 대고 기어 아이콘을 클릭합니다.
    11. 이미지 뷰어 사용을 켜기로 전환합니다.
    12. 이미지 뷰어 설정 섹션을 확장합니다.
    13. 이미지 URL, 대체 텍스트 및 레이블에 해당하는 선택 목록 확장 데이터에서 생성된 필드를 선택합니다.

      대체 텍스트와 레이블은 선택 사항입니다.

    14. + 추가를 클릭하고 포함하려는 각 이미지에 대해 13단계를 반복합니다.

      이미지 뷰어 설정

    15. 저장을 클릭하고 Blueprint를 배포합니다.

    일반 가이드라인

    뷰어의 모든 이미지에 대해 이미지 크기가 동일한지 확인합니다. 일치하지 않으면 썸네일과 추천 이미지가 제대로 정렬되지 않습니다.

    표시할 순서대로 이미지를 추가합니다. 이미지는 이미지 뷰어 설정에서 위에서 아래로 표시됩니다. 필드의 이름은 표시 순서에 영향을 주지 않습니다.

    창을 적절하게 채울 수 있을 만큼 해상도가 충분히 높은 이미지를 사용하십시오. 저해상도 이미지는 창에 맞게 크기가 확장되어 추천 이미지로 선택할 때 보기 좋지 않습니다.

    최적의 성능을 얻으려면 이미지 뷰어의 렌더링 시간에 영향을 미치므로 크거나 고해상도의 이미지를 사용하지 마십시오.

    이미지 뷰어 표시

    이미지 뷰가 포함된 필드가 있는 레이아웃에서 사용자는 이미지 위로 마우스를 가져가면 확장 아이콘을 볼 수 있습니다.

    제품 화면

    클릭하면 이미지 보기가 대화 상자에서 열립니다.

    이미지 뷰어 표시

    사용자는 화살표 버튼을 사용하거나 추천 이미지 아래의 썸네일을 클릭하여 이미지 사이를 이동할 수 있습니다. 이 캐러셀은 제공된 경우 레이블과 대체 텍스트를 표시합니다. 사용자는 대화 상자 외부를 클릭하거나 오른쪽 위에 있는 X 를 클릭하여 대화 상자를 닫을 수 있습니다.