추천 배치: CheckoutOS 문서

배치 전략은 고객 여정에서 추천이 표시되는 위치를 결정해요. 적절한 순간에 알맞은 위치에 표시하면 참여도와 전환율을 크게 높일 수 있어요.

사용 가능한 표시 위치

상품 페이지

고객이 탐색하는 동안 관련 상품을 보여줘요.

상품 페이지 배치

{
  "placement": {
    "location": "product_page",
    "positions": [
      {
        "id": "below_add_to_cart",
        "title": "Frequently Bought Together",
        "algorithm": "frequently_bought_together",
        "max_products": 3,
        "layout": "horizontal_cards"
      },
      {
        "id": "below_description",
        "title": "You May Also Like",
        "algorithm": "content_based",
        "max_products": 4,
        "layout": "grid_2x2"
      },
      {
        "id": "sidebar",
        "title": "Recently Viewed",
        "algorithm": "recently_viewed",
        "max_products": 4,
        "layout": "vertical_list"
      }
    ]
  }
}

상품 페이지에 가장 적합한 알고리즘

자주 함께 구매하는 상품 — 보완 상품의 높은 전환율
콘텐츠 기반 유사도 — 대안 상품 찾기
최근 본 상품 — 재참여 유도
업그레이드 옵션 — 상위 등급 상품 추가 판매

장바구니 페이지

결제 단계로 넘어가기 전에 상품을 추가할 마지막 기회예요.

장바구니 페이지 배치

{
  "placement": {
    "location": "cart_page",
    "positions": [
      {
        "id": "below_cart_items",
        "title": "Complete Your Order",
        "algorithm": "based_on_cart",
        "max_products": 3,
        "layout": "horizontal_scroll",
        "show_add_button": true
      },
      {
        "id": "cart_sidebar",
        "title": "Don't Forget",
        "algorithm": "frequently_bought_together",
        "max_products": 2,
        "layout": "compact_cards"
      }
    ]
  }
}

장바구니 페이지 전략

이 단계에서는 부담 없이 추가할 수 있는 상품에 집중하세요. 액세서리, 소모품, 작은 추가 상품처럼 장바구니의 상품을 보완하고 쉽게 구매를 결정할 수 있는 상품을 보여주세요.

결제 단계

결제 과정에서 추가 판매를 제안하기 좋은 전략적 시점이에요.

결제 단계 배치

{
  "placement": {
    "location": "checkout",
    "positions": [
      {
        "id": "pre_payment",
        "title": "Add to Your Order",
        "algorithm": "high_converting_upsells",
        "max_products": 1,
        "layout": "inline_banner",
        "timing": "before_payment_step"
      },
      {
        "id": "post_purchase",
        "title": "One More Thing...",
        "algorithm": "personalized",
        "max_products": 2,
        "layout": "featured_card",
        "timing": "after_order_confirmed"
      }
    ]
  }
}

감사 페이지

구매 후 고객의 참여를 다시 유도해요.

감사 페이지 배치

{
  "placement": {
    "location": "thank_you_page",
    "positions": [
      {
        "id": "main_recommendations",
        "title": "Based on Your Purchase",
        "algorithm": "post_purchase",
        "max_products": 4,
        "layout": "grid_2x2",
        "offer_discount": true,
        "discount_amount": "10%"
      },
      {
        "id": "trending_section",
        "title": "Trending Now",
        "algorithm": "trending",
        "max_products": 4,
        "layout": "horizontal_scroll"
      }
    ]
  }
}

레이아웃 옵션

사용 가능한 레이아웃

horizontal_cards — 상품 카드를 나란히 표시해요
vertical_list — 세로로 쌓인 목록 보기
grid_2x2 — 2x2 상품 그리드
grid_3x2 — 3x2 상품 그리드
horizontal_scroll — 스크롤 가능한 캐러셀
compact_cards — 사이드바에 사용하는 작은 카드
inline_banner — 단일 상품 배너
featured_card — 크고 눈에 띄는 카드

표시 설정

표시 옵션

{
  "display": {
    "product_card": {
      "show_image": true,
      "image_size": "medium",
      "show_title": true,
      "title_max_lines": 2,
      "show_price": true,
      "show_compare_at_price": true,
      "show_rating": true,
      "show_reviews_count": false,
      "show_badges": ["sale", "new", "bestseller"],
      "show_quick_add": true
    },
    "section": {
      "title_style": "bold",
      "show_view_all_link": true,
      "background_color": "transparent",
      "padding": "medium"
    },
    "responsive": {
      "mobile_products": 2,
      "tablet_products": 3,
      "desktop_products": 4
    }
  }
}

표시 위치 A/B 테스트

여러 위치를 테스트해 효과적인 배치를 찾아요.

배치 A/B 테스트

{
  "experiment": {
    "name": "Cart Recommendation Position",
    "variants": [
      {
        "name": "Control",
        "weight": 50,
        "position": "below_cart_items"
      },
      {
        "name": "Sidebar",
        "weight": 50,
        "position": "cart_sidebar"
      }
    ],
    "success_metric": "recommendation_ctr"
  }
}

모바일 최적화

추천은 모바일 화면에 맞게 조정되어야 해요.

모바일 권장 사항

표시되는 상품 수를 줄이세요(데스크톱 4개, 모바일 2~3개)
공간을 효율적으로 쓰도록 가로 스크롤을 사용하세요
추가 버튼의 터치 영역을 넓히세요
첫 화면 아래의 이미지는 필요할 때 로드하세요
접을 수 있는 섹션을 고려하세요

모바일 설정

{
  "mobile": {
    "placements": {
      "product_page": {
        "positions": ["below_add_to_cart"],
        "max_products": 2,
        "layout": "horizontal_scroll"
      },
      "cart_page": {
        "positions": ["below_cart_items"],
        "max_products": 2,
        "layout": "horizontal_scroll",
        "collapsed_by_default": false
      }
    }
  }
}

성능 고려 사항

페이지 로딩에 미치는 영향

추천을 표시하는 위치가 늘어날 때마다 로딩 시간이 추가돼요. 지연 로딩을 사용하고, 처음 표시하는 상품 수를 제한하고, Core Web Vitals를 모니터링해 추천이 페이지 성능에 악영향을 주지 않도록 하세요.

권장 방법

배치 전략

맥락에 맞는 알고리즘을 선택해요 — 장바구니 페이지에는 장바구니 기반 추천, 로그인한 사용자에게는 맞춤 추천을 제공하세요
과도하게 표시하지 않아요 — 페이지당 최대 2~3곳에 표시하세요
제목을 테스트해요 — “이 상품도 좋아하실 거예요”와 “스타일을 완성하세요”를 비교하세요
고객 여정을 고려해요 — 초기에는 발견을, 후기에는 긴급성을 강조하세요
각 위치의 성과를 측정해요 — 일부 위치는 성과가 낮을 수 있어요

추천 배치