# 이커머스 온라인 스토어(웹사이트) 설정 방법 **목차** * [온라인 스토어란?](#온라인-스토어란) * [이커머스 스토어 설정하기](#이커머스-스토어-설정하기) * [자주 묻는 질문 (FAQ)](#자주-묻는-질문-faq) * [BNPL (선구매 후결제) 결제 방법](#bnpl-선구매-후결제-결제-방법)-결제-방법) * [이커머스 스토어용 상품 컬렉션 사용법](#이커머스-스토어용-상품-컬렉션-사용법) * [상품 상세 페이지에서 바로구매 버튼 설정법](#상품-상세-페이지에서-바로구매-버튼-설정법) ## 온라인 스토어란? 온라인 스토어는 비즈니스가 전 세계 고객에게 제품이나 서비스를 판매할 수 있는 가상 플랫폼입니다. 고객이 컴퓨터나 모바일 기기를 사용해 집에서 편안하게 상품을 둘러보고, 선택하고, 구매할 수 있게 해줍니다. **온라인 스토어의 중요성** * **글로벌 도달 범위:** 전 세계 고객에게 다가가 지리적 제약을 넘어 시장을 확장할 수 있습니다. * **편의성:** 고객이 언제든, 어디서든 쇼핑할 수 있어 접근성과 편의성이 향상됩니다. * **운영 비용 절감:** 물리적 매장과 관련된 비용을 없애고 운영의 유연성을 확보할 수 있습니다. * **자동화된 거래:** 자동 결제 처리와 주문 관리로 판매 프로세스를 간소화할 수 있습니다. ## 이커머스 스토어 설정하기 Hyperclass에서 나만의 이커머스 온라인 스토어를 설정하고 사용하는 단계별 방법을 알아보겠습니다. ### 1. 온라인 스토어에 표시할 상품 생성 및 구성 비즈니스는 Payments(결제) → Products(상품)에서 스토어 상품을 생성하고 구성할 수 있습니다. 상품명, 설명 설정, 상품 이미지 및 동영상 첨부, 가격 정의, 옵션 설정 등을 할 수 있습니다. ![상품 설정 화면](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009727501/original/aqaIqFqjzvW5k-0YO-cCiHPC0DwZ7Kl00g.png?1696943137) 비즈니스 사용자는 상품을 생성할 때 상단의 토글을 사용하여 온라인 스토어에 표시할 상품을 정의할 수 있습니다. ![온라인 스토어 표시 토글](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009721589/original/oMklDADbeNQGev6oQxYlotjzQ7zqRePs9Q.png?1696940947) 또한 비즈니스는 이제 온라인 스토어에서 상품/서비스를 제시하는 데 필요한 3가지 핵심 기능을 사용할 수 있습니다: * **리치 텍스트 설명 활성화** 비즈니스는 제공하는 상품에 대해 서식, 정렬, 굵게, 기울임체 강조, 글머리 기호 목록, 표 요소 등을 포함한 리치 텍스트 설명을 제공할 수 있습니다. 이 상품 설명은 상품 상세 페이지에 자동으로 표시됩니다. * **상품에 여러 이미지/동영상 첨부** 상품에 적절한 이미지와 동영상을 표시하는 것은 이커머스 스토어의 핵심 부분입니다. 비즈니스는 상품에 여러 이미지와 동영상을 첨부할 수 있습니다. * **상품 옵션 생성** 비즈니스는 이제 구성하는 상품에 크기/색상/재료 등과 같은 옵션을 추가할 수 있습니다. 이를 통해 동일한 상품의 다른 옵션들을 맞춤형 가격과 함께 판매할 수 있습니다. ![상품 옵션 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009723989/original/bjwe0V3kLzr_TUH6kW9yTY3rB6NNwAvmKw.png?1696941961) ## 2. 웹사이트에서 온라인 스토어 활성화 및 편집 * 온라인 스토어는 기존 웹사이트와 새로 만드는 웹사이트 모두에 추가할 수 있습니다 * 비즈니스는 웹사이트 빌더 내에서 + 아이콘을 클릭하여 요소를 추가해 온라인 스토어를 활성화할 수 있습니다 ![웹사이트 빌더에서 스토어 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009725484/original/POrkzAFDk_KKKU4kMhLb5mBbqS-O12d_3w.png?1696942354) ![스토어 요소 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009725940/original/_IsW7PlSOyEX3rv0gcI9DCfiuD4qvDvhlg.png?1696942517) 웹사이트에 온라인 스토어를 추가하면 기본적으로 5개의 페이지가 웹사이트에 추가되어 스토어의 구성 요소가 됩니다. 비즈니스는 스토어 요소 주변에 다른 종류의 요소를 추가하여 브랜드 요구 사항에 맞는 전반적인 맞춤형 고객 경험을 제공할 수 있습니다: * **상품 목록 페이지** 고객에게 모든 상품이나 서비스를 보여주는 요소가 포함됩니다. * **상품 상세 페이지** 구매할 때 유용한 정보가 담긴 리치 텍스트 상품 설명을 표시할 수 있습니다. * **장바구니 페이지** 고객이 구매하려는 항목의 요약을 보고, 결제 진행 전에 서비스를 추가하거나 제거할 수 있습니다. * **결제 페이지** 잠재 리드/고객이 배송 정보, 이메일, 기타 세부 정보를 입력하고, 쿠폰 코드를 적용하고, 카드, Apple Pay, Google Pay로 온라인 결제를 할 수 있습니다. * **감사 페이지** 구매에 대한 결제가 성공적으로 완료된 후 주문 확인을 자동으로 표시할 수 있습니다. ![기본 스토어 페이지들](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009726192/original/GZwk9jvkFpikz-O_ZCXGIOxsZkxIz6IMIg.png?1696942645) 사용자는 기본으로 추가된 요소들을 전체 웹사이트의 브랜드 미학에 맞게 포맷할 수 있습니다. 각 요소에는 포맷을 위한 일반 설정과 고급 설정이 있습니다. **팁:** 스토어 빌더에서 특정 스토어 요소는 캔버스에서 직접 항목 선택을 지원합니다. Featured Product(추천 상품)와 Collections List(컬렉션 목록)의 경우, 항목을 더블클릭하여 매핑하거나 검토할 수 있습니다. 매핑되지 않은 항목은 선택 창을 자동으로 열고, 매핑된 항목은 빠른 확인을 위해 강조 표시됩니다. ![스토어 요소 매핑](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155067305838/original/hy0QDggtQsh6DGc3HiIYOTAYA71uFhqpZg.jpeg?1773924595) ### 상품 제목 표시 동작 (스토어프론트) 상품 제목은 결제 과정에서 명확성을 향상시키기 위해 대부분의 스토어프론트 구매 페이지와 주요 스토어 요소에서 전체가 표시됩니다(말줄임표 없이). **전체 제목이 표시되는 곳** * 상품 상세 페이지(PDP) * 장바구니 페이지 * 사이드 장바구니 / 장바구니 오버레이 * 결제 페이지 * 감사 페이지 * 업셀 상품 요소 * 컬렉션 목록 요소 * 추천 상품 요소 **제목 렌더링 방식** * 제목은 필요에 따라 여러 줄로 줄바꿈됩니다. * 데스크탑과 모바일에서 가격 및 CTA 버튼의 레이아웃 정렬이 일관되게 유지됩니다. **포함되지 않는 곳** * 상품 목록 페이지(PLP) * 추천 상품들 요소 이러한 영역은 기존 제목 줄임 동작을 계속 사용합니다. ### 온라인 스토어에서 주문 제출 및 결제 추적 비즈니스는 Payments(결제) → Orders(주문) 및 Payments(결제) → Transactions(거래)로 이동하여 온라인 스토어에 접수된 모든 주문과 결제를 추적할 수 있습니다. 비즈니스는 또한 같은 방법으로 환불을 처리할 수 있습니다. ## 3. 주문 처리 및 배송 세부 정보를 고객에게 전송 비즈니스는 또한 주문을 처리 완료로 표시하고 고객과 배송/추적 세부 정보를 공유할 수 있습니다. 기본적으로 온라인 스토어에 접수된 모든 주문은 미처리 상태입니다. 비즈니스 사용자는 추적 번호, 배송업체, 배송 상태를 추적할 URL을 첨부할 수 있습니다. 주문이 처리 완료로 표시되면 처리와 관련된 항목이 주문 세부 정보에 포함되어 처리가 완료된 날짜, 추적 세부 정보, 주문에서 처리된 항목 수가 강조 표시됩니다. ![주문 처리 상세](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155010720165/original/46L6kOfY9cwN1MMhecnfzXMJgL9VPo1K_g.png?1697878751) ![주문 처리 정보](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155010720167/original/_oC5R-NsFMB5IHbzrVDlKzRMzDaFs0hUEw.png?1697878765) ### 온라인 스토어 생성 시 추가 참고사항 * 일회성 상품만 온라인 스토어에 포함됩니다. 비즈니스는 여전히 퍼널과 주문 폼을 사용하여 정기 상품을 판매할 수 있습니다 * 자동 영수증, Order Submitted(주문 제출) 트리거, 이메일 빌더 내 Shopping Cart(쇼핑카트) 요소로 구매한 항목을 자동 입력, Payments Received(결제 수신) 트리거, 쿠폰 코드는 생성된 모든 온라인 스토어에서 자동으로 작동합니다 * 기존의 모든 상품은 기본적으로 온라인 스토어에서 사용할 수 없습니다. 비즈니스는 스토어에서 보여주고 싶은 상품을 선택하여 해당 상품의 토글을 켤 수 있습니다 * 비즈니스는 Payments(결제) 메뉴 하위의 Orders(주문) 및 Transactions(거래) 목록을 사용하여 제출된 주문을 추적하고, 결제를 받고, 환불을 시작할 수 있습니다 * 스토어 페이지의 FAQ 콘텐츠를 편집하려면 먼저 페이지 빌더 내에서 FAQ 요소를 클릭하여 활성화하세요. 그런 다음 오른쪽 FAQ List(FAQ 목록) 패널에서 수정하려는 질문을 선택하세요. 그러면 질문과 해당 답변이 모두 열려 직접 변경할 수 있습니다. ## 자주 묻는 질문 (FAQ) **Q. 온라인 스토어에서 정기 상품을 판매할 수 있나요?** 아니요, 온라인 스토어에는 기본적으로 일회성 상품만 나열됩니다. **Q. 제품과 서비스의 여러 이미지를 첨부했습니다. 각 옵션에 대해 기본 이미지를 설정할 수 있는 방법이 있나요?** 현재로서는 불가능합니다. 지금은 옵션 선택과 관계없이 상품 이미지가 표시됩니다. **Q. 테스트 목적으로 스토어를 만들었습니다. 이제 어떻게 삭제하나요?** 사용자는 자동으로 추가된 페이지 중 하나를 삭제하여 스토어를 삭제할 수 있습니다. 확인하면 스토어와 관련된 모든 데이터가 손실됩니다. ![스토어 삭제 확인](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155009744202/original/U5jTD4ols1v4yh2DubIrxUTrVh31jgIHtw.png?1696949786) **Q. 상품의 다른 옵션에 대해 다른 가격을 설정할 수 있나요?** 네, 사용자는 구성된 각 옵션의 가격을 맞춤 설정할 수 있습니다. 기본적으로 각 옵션의 가격은 상품의 가격이 됩니다. **Q. 생성된 주문을 처리 완료로 표시하는 방법은 무엇인가요? 고객과 배송 세부 정보를 어떻게 공유하나요?** 사용자는 주문 상세 내에서 항목을 처리하고 추적 번호/URL을 첨부하여 고객에게 배송 업데이트를 자동으로 전송할 수 있습니다. 이 기능은 현재 사용할 수 없지만 작업 중이며 곧 출시될 예정입니다. **Q. 같은 로케이션 내에서 여러 스토어를 만들 수 있나요?** 네, 같은 로케이션 내에서 여러 스토어를 만들 수 있습니다. **Q. 퍼널과 웹사이트 모두에서 온라인 스토어를 만들 수 있나요?** 아니요, 온라인 스토어는 웹사이트 내에서만 구성할 수 있습니다. 사용자는 여전히 퍼널에서 주문 폼을 사용하여 상품을 판매할 수 있습니다. ## BNPL (선구매 후결제) 결제 방법 **커뮤니티 추가 튜토리얼** ## 이커머스 스토어용 상품 컬렉션 사용법 **커뮤니티 추가 튜토리얼** ## 상품 상세 페이지에서 바로구매 버튼 설정법 **커뮤니티 추가 튜토리얼** *** *원문 최종 수정: Thu, 19 Mar, 2026 at 8:02 AM* *Hyperclass 사용 가이드 — hyperclass.ai* --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://hyperclass.gitbook.io/hyperclass-docs/e-commerce/how-to-set-up-an-e-commerce-online-store-websites.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.