설명서Commerce시작

가게 앞이 뭐죠?

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 초급
  • 중간
  • 관리자
  • 기본
  • 사용자

Adobe Commerce 또는 Magento Open Source 구현 내에서 상점 전면은 상점의 외부 공개 부분입니다. 고객이 쇼핑하고 구매하는 데 사용하는 콘텐츠 및 기능 구성 요소를 제공합니다.

고객이 판매하는 경로를 구매 경로 ​라고도 하며, 상점에는 고객이 이 경로를 완료할 수 있도록 구성 요소가 포함되어 있습니다. 다음 섹션에서는 전략적 가치를 제공하는 기본 페이지 유형(고객이 스토어에서 쇼핑하는 동안 주로 방문하는 위치)에 대한 개요를 제공합니다. 이를 검토할 때 고객 여정의 각 단계에서 사용할 수 있는 다양한 스토어 기능을 고려하십시오.

Commerce 상점 첫 화면

Edge Delivery Services에서 제공하는 Commerce Storefront ​의 도입으로 Adobe은 첨단 기술을 활용하여 탁월한 속도와 사용자 경험을 제공하는 고성능, 확장 및 안정적인 스토어프런트를 제공합니다.

  • 향상된 성능: Edge Delivery Services에서 상점 전면을 호스팅하면 로드 시간이 빨라지고 사이트 성능이 향상되므로 전환율이 높아지고 SEO 등급이 향상됩니다.

  • 확장성: 아키텍처는 성능 저하 없이 트래픽 증가 및 대규모 제품 카탈로그를 처리할 수 있도록 원활한 확장을 지원합니다.

  • 유연성: 상점은 사용자 지정이 가능하므로 기업이 고유한 요구에 맞게 쇼핑 환경을 조정할 수 있습니다.

  • 향상된 사용자 환경: 고급 캐싱, 실시간 업데이트 및 개인화된 콘텐츠 전달과 같은 기능은 더 부드럽고 매력적인 쇼핑 경험에 기여합니다.

주요 기능

Edge Delivery Services에서 제공하는 Commerce Storefront는 판매자와 개발자 모두에게 도움이 되는 몇 가지 주요 기능을 제공합니다. 이러한 기능을 통해 기업은 매력적인 쇼핑 경험을 만들 수 있을 뿐만 아니라 필요에 따라 매장을 맞춤화하고 확장할 수 있는 유연성을 유지할 수 있습니다.

Commerce Storefront 설정 및 최적화에 대한 자세한 정보와 지침은 Adobe Commerce Storefront 설명서를 참조하십시오.

판매자

Edge Delivery Services 기반의 Commerce Storefront는 상인이 콘텐츠를 쉽게 만들고 관리할 수 있도록 직관적인 문서 기반 작성 환경을 제공합니다. 판매자는 Microsoft Word 또는 Google Docs과 같은 친숙한 도구를 사용하여 버전 제어를 유지하고 팀 구성원과 공동 작업하면서 풍부한 콘텐츠를 만들 수 있습니다.

  • 간소화된 콘텐츠 만들기: Microsoft Word 또는 Google Docs과 같은 친숙한 문서 기반 작성 도구를 사용하여 콘텐츠를 만들고 편집합니다.

  • 실시간 미리 보기: 게시하기 전에 실시간 미리 보기 기능을 사용하여 변경 내용을 즉시 확인하세요.

  • 버전 제어: 콘텐츠 변경 내용을 추적하고 쉽게 이전 버전으로 롤백합니다.

  • 공동 작업 워크플로: 여러 팀원이 내장된 검토 프로세스와 동시에 콘텐츠를 작업할 수 있습니다.

  • 콘텐츠 재사용: 일관성을 유지하기 위해 여러 페이지에서 재사용할 수 있는 콘텐츠 블록을 만듭니다.

개발자

Headless 구현을 통해 개발자는 프론트엔드 프레젠테이션 레이어와 백엔드 상거래 기능을 분리하여 Commerce의 강력한 백엔드 서비스를 활용하면서 최신 기술로 구축된 유연하고 사용자 정의 스토어프론트를 사용할 수 있습니다.

  • API 우선 아키텍처: Commerce 백엔드 서비스를 활용하면서 최신 프레임워크를 사용하여 사용자 지정 프론트엔드 경험을 빌드합니다.

  • 구성 가능한 구성 요소: 다른 페이지 레이아웃으로 조립할 수 있는 재사용 가능한 모듈식 구성 요소를 만들고 배포합니다.

  • 확장 가능한 플랫폼: 핵심 코드를 수정하지 않고 API 및 웹후크를 통해 사용자 지정 기능을 추가하십시오.

  • 최신 개발 도구: 더 빠른 구현 및 배포를 위해 업계 표준 개발 도구 및 워크플로를 사용합니다.

NOTE
Commerce Storefront는 다양한 이점을 제공하지만 Adobe은 원래의 Luma 기반 스토어프론트를 계속 지원합니다. 현재 Luma를 사용하고 있는 기업은 중단 없이 계속 운영할 수 있으며, 원하는 속도로 새로운 상점으로 전환할 수 있습니다. 이 페이지의 나머지 섹션은 Luma 예를 기반으로 합니다.

홈 페이지

대부분의 사람들이 다른 곳에 머무르거나 다른 곳으로 이동하기 전에 페이지에서 몇 초만 보내는 것을 알고 계십니까? 인상을 남기는 것은 그리 길지 않다. 연구에 따르면 사람들은 또한 특히 다른 사람들의 사진을 좋아한다고 합니다. 어떤 디자인을 선택하든 홈 페이지의 모든 것은 방문자를 판매 프로세스의 다음 단계로 이동시킵니다. 이 아이디어는 관심의 한 지점에서 다음 지점으로 집중적인 흐름으로 그들의 주의를 유도하는 것이다.

Example storefront 홈 페이지 {width="700"}

카탈로그 페이지

카탈로그 페이지 목록에는 일반적으로 작은 제품 이미지와 간단한 설명이 있으며 목록 또는 격자로 서식을 지정할 수 있습니다. 블록, 비디오 및 키워드가 풍부한 설명을 추가하고 프로모션 또는 시즌을 위한 특별한 디자인을 만들 수도 있습니다. 다양한 카테고리의 제품을 선별한 컬렉션인 라이프스타일 또는 브랜드를 특징으로 하는 특별한 카테고리를 만들 수 있습니다.

초기 제품 설명은 보통 쇼핑객에게 더 자세히 살펴볼 수 있을 만큼 충분한 정보를 제공합니다. 본인이 원하는 것을 알고 있는 사람은 장바구니에 제품을 추가해 가지고 갈 수 있다. 계정에 로그인한 상태에서 쇼핑하는 고객은 개인화된 쇼핑 경험을 즐깁니다.

상점 앞 컬렉션 페이지 {width="700"}

검색 결과

탐색 기능만 사용하는 사람보다 검색을 사용하는 사람이 구매 가능성이 거의 두 배 높다는 사실을 알고 계십니까? 이러한 구매자는 사전 자격을 갖춘 ​것으로 간주할 수 있습니다.

Adobe Commerce용 Live Search을(를) 사용하면 스토어에서 빠르고, 관련성이 높고, 직관적인 검색 환경을 제공할 수 있으며, Adobe Commerce에서 추가 비용 없이 사용할 수 있습니다.

실시간 검색 예 - 입력한 대로 검색 {width="700"}

표준 카탈로그 검색

표준 카탈로그 검색을 사용하는 저장소에 오른쪽 상단의 검색 상자와 바닥글의 고급 검색 링크가 있습니다. 구매자가 제출하는 모든 검색어가 저장되므로 고객이 찾고 있는 항목을 정확하게 확인할 수 있습니다. 제안을 제공하고 동의어와 일반적인 철자를 입력할 수 있습니다. 그런 다음 검색어를 입력할 때 특정 페이지를 표시합니다.

표준 카탈로그 검색 결과의 예 {width="700"}

제품 페이지

제품 페이지에는 많은 작업이 진행 중입니다. 제품 페이지에서 가장 먼저 눈길을 끄는 것은 고해상도 줌과 썸네일 갤러리가 돋보이는 메인 이미지다. 가격 및 가용성 외에도 자세한 정보와 관련 제품 목록이 포함된 탭 섹션이 있습니다.

Example storefront 제품 페이지 {width="700"}

장바구니

장바구니에는 할인 쿠폰, 예상 배송 및 세금을 포함한 주문 합계가 표시됩니다. 이러한 특징은 신뢰 배지와 씰을 전시하기에 좋은 장소입니다. 장바구니 페이지를 하나의 최종 오퍼에 대한 기회로 사용할 수도 있습니다. 예를 들어 특정 제품이 장바구니에 있을 때 충동 구매 옵션으로 표시되는 교차 판매 항목을 설정할 수 있습니다.

상점 장바구니 페이지 예제 {width="700"}

체크아웃 페이지

체크아웃 프로세스는 다음 두 단계로 구성됩니다.

  1. 배송 정보

    체크아웃 프로세스의 첫 단계는 고객이 배송 주소 정보를 완성하고 배송 방법을 선택하는 것입니다. 고객이 계정을 보유한 경우 배송 주소가 자동으로 입력되지만 필요한 경우 변경할 수 있습니다.
    게스트 고객이 이전에 등록한 것으로 인식된 이메일 주소를 입력하면 스토어 구성의 Enable Guest Checkout Login 필드가 Yes(으)로 설정된 경우 로그인 프롬프트가 표시됩니다(구성 참조 안내서 ​의 Checkout Options 참조). 그러나 이 설정은 인증되지 않은 사용자에게 고객 정보를 노출할 수 있습니다.

    Storefront 체크아웃 페이지 예제 {width="700"}

  2. 검토 및 지급 정보

    체크아웃 프로세스의 두 번째 단계는 고객이 결제 방법을 선택하고 선택적으로 할인 코드를 적용하는 것입니다.

    note note
    NOTE
    Commerce에서 여러 쿠폰 코드를 구성할 수 있지만 고객은 하나의 쿠폰 코드만 장바구니에 적용할 수 있습니다. 자세한 내용은 쿠폰 코드를 참조하십시오.

    Storefront 체크아웃 페이지 예제 {width="700"}

페이지 맨 위에 있는 진행률 표시줄은 체크아웃 프로세스의 각 단계를 따르며 주문 요약 ​에는 이 시점까지 입력된 정보가 표시됩니다.

NOTE
2단계 체크아웃 예외 사항은 가상 및/또는 다운로드 가능한 제품에 적용됩니다. 장바구니에 이러한 유형의 제품만 있는 경우, 배송 정보가 필요하지 않으므로 체크아웃은 자동으로 한 단계 절차로 변환됩니다.
recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66