# WordPress로 WooCommerce 스토어 시작하기

URL: https://canvaswp.com/ko/guides/start-a-woocommerce-store-with-wordpress/
Updated: 2026-11-03

가이드

WooCommerce는 쇼핑몰을 운영합니다. 제품, 주문, 세금, 결제를 처리하죠. 하지만 그것이 쇼핑몰을 여러분의 브랜드처럼 보이게 만들어 주지는 않습니다. 이 가이드에서는 WordPress에 이미 포함된 편집기의 블록으로, 고객이 실제로 보게 되는 네 개의 화면을 만듭니다.

2026년 9월 5일 에 게시됨 최종 업데이트 2026년 11월 3일 작성자: SemiColonWeb의 Canvas 팀

## 1단계: WooCommerce 설치

WooCommerce는 WordPress 플러그인 디렉터리에서 제공하는 무료 플러그인이며, 제품 데이터, 재고, 주문, 세금 규칙, 배송 지역, 결제 게이트웨이 등 모든 상거래 기능을 계속 담당합니다. Canvas는 이 계층을 대체하지 않으므로 기존 WooCommerce 확장 기능도 계속 작동합니다.

### 설치 방법 두 가지

- **설정 마법사에 맡기세요.** 설정 중에 쇼핑몰 데모를 선택하면, 쇼핑몰에는 쇼핑몰 플러그인이 필요하므로 가져오기가 실행되기 전에 플러그인 단계에서 WooCommerce을 설치하고 활성화합니다.
- **직접 설치하세요**. 플러그인 > 새로 추가에서 WooCommerce 온보딩을 실행하세요. 현재 운영 중인 사이트에 쇼핑몰을 추가하려는 경우에 이 방법을 사용하세요.

어느 쪽이든 WooCommerce 설정을 한 번 진행하면서 국가, 통화, 판매 품목에 관한 질문에 답하세요. 이 답변은 나중에 세금과 배송을 결정하며, 되돌리기가 번거롭습니다.

실제 주문을 받기 전에 이메일 발송 서비스를 설정하세요. 기본적으로 주문 확인 메일은 서버를 통해 WordPress에서 발송되는데, 영수증이 스팸함으로 들어가는 쇼핑몰은 답변할 수 없는 지원 요청을 만들게 됩니다.

## 2단계: 스토어 데모 또는 빈 카탈로그에서 시작하기

여기서는 선택해야 할 것이 있으며, 10분 정도 고민할 가치가 있습니다.

### 스토어 데모 가져오기

전체 88개 데모 가운데 21개는 실제로 작동하는 WooCommerce 스토어입니다. 이를 가져오면 상품, 카테고리, 속성, 스와치 색상, 디자인된 쇼핑몰, 디자인된 상품 페이지, 장바구니, 결제 페이지가 모두 제자리에 갖춰져 있으며 전부 편집할 수 있습니다. 구성 요소가 어떻게 맞물리는지 가장 빠르게 확인하는 방법이며, 원하지 않으면 가져오기 전체를 되돌릴 수도 있습니다.

### 자신만의 카탈로그로 구축하기

이미 상품을 판매하고 있어 데이터베이스에 상품이 있다면, 기존 웹사이트에 페이지만 가져오는 범위를 선택하세요. 데모 페이지와 그 페이지가 사용하는 레코드만 가져오고, 데모의 설정, 메뉴, 전면 페이지는 가져오지 않습니다. 상품 카탈로그는 현재 위치 그대로 유지됩니다.

어느 경우든 사이트의 기존 WooCommerce 페이지를 그대로 사용하므로, 쇼핑, 장바구니, 결제, 계정 페이지는 항상 하나씩만 존재합니다.

[데모 가져오기 작동 방식 자세히 보기](https://canvaswp.com/ko/guides/import-a-wordpress-demo-website/)

[WooCommerce 스토어 데모 9개](https://canvaswp.com/ko/wordpress-themes/ecommerce/)

## 3단계: 첫 제품 추가

제품은 WordPress 관리자 화면의 ‘Products’ 아래에 WooCommerce 레코드로 추가하며, 이 과정은 의도적으로 평범하게 설계되어 있습니다. 레이아웃보다 여기에 시간을 들이세요. 좋은 제품 페이지는 대부분 좋은 제품 데이터로 만들어지기 때문입니다.

- **제품마다 선명한 사진 한 장을,** 모든 항목을 같은 방식으로 촬영하세요. 형태가 맞으면 카탈로그 그리드가 잘 디자인된 것처럼 보이고, 맞지 않으면 대충 만든 것처럼 보입니다.
- **구매자가 실제로 궁금해하는 내용에 답하는 짧은 설명.** 사이즈, 소재, 배송 기간, 맞지 않을 때의 처리 방법.
- **고객이 상품을 찾는 방식에 맞춘 카테고리**이며, 재고를 보관하는 방식에 맞춘 카테고리가 아닙니다.
- **변형이 있는 항목에는 속성을 지정하세요.** 색상, 크기, 마감. 관리자에서 색상 용어에 실제 색상 값을 입력하세요. 그래야 나중에 드롭다운이 색상 견본으로 바뀝니다.
- **재고, 무게, 치수**(실물 상품을 배송하는 경우). 배송 규칙이 이 정보를 참조합니다.

디자인하기 전에 상품을 세 개 추가하세요. 자리 표시용 상품 하나만 두고 판단한 레이아웃은 결국 다시 만들게 됩니다.

## 4단계: 스토어 페이지 디자인

쇼핑몰은 카탈로그이며, 그 역할은 방문자를 제품 페이지로 빠르게 안내하는 것입니다. Canvas는 이를 위한 블록을 제공하며, 보통은 레이아웃 세 가지 중 하나를 고르는 테마 설정 하나로 충분합니다.

### 블록

상품 그리드는 카테고리, 태그, 검색 결과 또는 직접 고른 목록에서 상품을 가져옵니다. 상품 캐러셀은 홈페이지에서 같은 방식으로 한 줄에 상품을 보여줍니다. 상품 카테고리 카드는 방문자를 해당 섹션으로 안내합니다. 가격 필터를 사용하면 쇼핑객이 긴 카탈로그를 좁혀 볼 수 있습니다. 각 항목은 설정 패널을 갖춘 블록이므로, 열 개수, 소스, 정렬 순서를 코드가 아닌 컨트롤로 조정할 수 있습니다.

### 바탕이 되는 템플릿

쇼핑몰 자체는 사이트 편집기에서 열 수 있는 블록 템플릿입니다. 필터와 카테고리가 카탈로그에서 제 역할을 하는지에 따라 전체 너비, 왼쪽 사이드바, 오른쪽 사이드바 또는 양쪽 사이드바로 구성할 수 있습니다. 총 18개의 스토어 템플릿이 있으며, 쇼핑몰, 제품 페이지, 아카이브, 장바구니, 결제 페이지를 다룹니다.

### 스토어 전체 기본값

테마 옵션은 5개 탭(카탈로그, 제품 페이지, 장바구니 및 결제, 헤더 미니 장바구니, 카탈로그 모드)에 걸쳐 39개의 쇼핑몰 설정을 담고 있습니다. 페이지당 제품 수, 페이지네이션, 제품 이미지 모양, 추가 갤러리 이미지를 마우스 오버 시 표시할지 여부, 마우스 오버 오버레이의 제공 항목이 모두 여기서 설정됩니다. 블록에서 개별적으로 설정한 항목은 해당 블록이 있는 페이지에서 여전히 우선합니다.

**테마 옵션, Shop.** 스토어 전체의 기본값이며, 자체 설정을 지정한 블록에서는 이 값을 덮어씁니다.

## 5단계: 상품 페이지 디자인

이 페이지는 판매를 담당하는 페이지이므로, 모든 온라인 상점이 사용하는 기본 구성보다 더 신경 써야 합니다.

### 부품을 조합해 직접 만들기

제품 페이지의 모든 요소는 블록입니다. 이미지 갤러리, 가격, 별점, 메타 정보, 짧은 설명, 변형 스와치, 장바구니 담기 버튼, 탭, 공유 행, 관련 제품까지 모두 블록으로 구성됩니다. 블록을 옮기고, 스타일을 바꾸고, 아예 빼도 페이지는 계속 작동합니다. 각 블록이 WooCommerce에 자신만의 데이터를 요청하기 때문입니다.

### 또는 기본 제공 레이아웃에서 시작하기

처음부터 직접 구성하고 싶지 않다면 제공되는 단일 제품 레이아웃 중 하나를 선택해 구성 요소를 옮기세요. 기본 레이아웃, 스크롤할 때 갤러리를 따라 움직이는 고정 요약 레이아웃, 목록형 레이아웃, 색상 중심 디자인, 스토어 디자인, 맞춤 링크를 지원하는 갤러리 레이아웃 두 가지, 왼쪽, 오른쪽 또는 양쪽 사이드바가 있는 변형이 있습니다. 편집기에서 제품마다 레이아웃을 지정하거나 테마 옵션에서 스토어 기본값을 설정하세요.

### 첫 화면에 무엇을 넣어야 할까요?

사진, 이름, 가격, 변형 선택, 장바구니에 담기 버튼. 대부분 사람들이 읽지 않는 설명을 포함한 나머지는 아래에 두어도 됩니다. 동의하지 않는다고 결정하기 전에 휴대폰에서 먼저 확인해 보세요.

## 6단계: 장바구니와 결제

이 두 화면에서 매출이 새어 나가는 경우가 많지만, 대부분의 테마에서는 손댈 수 없는 화면들입니다. 여기서는 다른 모든 요소와 마찬가지로 블록입니다.

### 장바구니

장바구니 내용을 보여 주는 장바구니 테이블 블록, 금액을 보여 주는 장바구니 합계 블록, 구매자가 실제로 추가할 만한 항목을 보여 주는 추가 구매 블록을 사용하세요. 간결하게 구성하고 결제 버튼이 눈에 잘 띄도록 유지하세요. 가장 흔한 장바구니 실수는 합계와 결제 버튼 사이에 홍보 콘텐츠를 빼곡하게 넣는 것입니다.

### 결제 화면

폼용 결제 블록, 구매 항목을 보여 주는 주문 검토 블록, 고객에게 상황을 알려 주는 알림 블록이 있습니다. 주문, 결제, 이메일 처리는 WooCommerce가 계속 담당하며, 결제 화면의 모습은 여러분이 정합니다.

### 투자 가치가 있는 규칙

- 배송에 꼭 필요한 항목만 입력받으세요.
- 결제 단계 전에 배송비를 포함한 총 금액을 표시하세요.
- 주문 상품이 언제 도착할지 며칠 단위로 텍스트로 알려 주세요.
- 처음 구매하는 망설이는 고객이 쉽게 볼 수 있는 곳에 반품 정책을 두세요.

## 7단계: 스와치, 장바구니 담기 및 카드 스타일

보통 플러그인 하나씩이 필요한 쇼핑몰 기능 세 가지가 이 연동에 포함되어 있습니다.

- **속성 색상 스와치.** 관리자에서 상품 속성 용어에 색상을 지정하면, 가변 상품은 드롭다운 대신 색상 점 또는 알약 모양 버튼을 제공합니다. 그러면 고객은 색상을 보고 옵션 조합을 고르게 되며, 이는 휴대폰에서 특히 중요합니다.
- **페이지 새로고침 없이 장바구니에 담기.** 그리드, 캐러셀 또는 카드 오버레이에서 상품을 추가하면 장바구니가 현재 페이지에서 바로 업데이트되므로, 쇼핑객은 보던 페이지에 그대로 머물고 헤더 장바구니의 수량도 계속 반영됩니다.
- **상품 카드 스타일.** 모든 카탈로그 이미지를 하나의 모양으로 고정해 그리드가 정렬되도록 하고, 추가 갤러리 이미지를 마우스 오버 시 표시할지 슬라이드쇼로 재생할지 선택하며, 마우스 오버 오버레이에 구매, 빠른 보기 또는 둘 다를 제공할지 정하세요.

세 가지 모두 설정으로 제공됩니다. 어느 것도 코드 스니펫, 자식 테마 또는 두 번째 플러그인이 필요하지 않으며, 더 단순한 동작을 원하면 각각 끌 수 있습니다.

일부 테마는 이 기능을 단독 제품으로 판매합니다. OceanWP는 무료 WooCommerce 연동을 제공하고 Ocean eCommerce Pro를 별도 제품으로 제공하며, [Canvas와 OceanWP의 비교](https://canvaswp.com/ko/compare/oceanwp/)에서는 각 플랜이 쇼핑몰에 무엇을 포함하는지 설명합니다.

## 8단계: 결제, 속도 설정, 그다음 테스트 주문

디자인은 나중에, 결제는 먼저 설정하세요. 쇼핑몰이 열렸다고 누구에게든 알리기 전에 이 단계를 먼저 진행하세요.

### WooCommerce에서 하는 상업용 설정

- 사용할 결제 게이트웨이를 연결하고 인증을 완료하세요. 이 과정은 보통 예상보다 오래 걸립니다.
- 실제로 배송하는 지역에 맞춰 세금 규칙과 배송 지역을 설정하세요.
- 환불, 반품, 배송 페이지를 작성하고, 푸터와 결제 페이지에서 링크로 연결하세요.

### Canvas의 속도 최적화

WooCommerce는 웹사이트의 모든 페이지에서 스크립트와 스타일시트를 불러오며, 여기에는 아무것도 판매하지 않는 페이지도 포함됩니다. 다음 다섯 가지 설정으로 이 부담을 줄일 수 있습니다. 스토어 출력이 없는 페이지에서 WooCommerce JavaScript 제거, 주문 귀속 추적 끄기, 장바구니를 보여주는 모든 페이지에서 서버를 주기적으로 조회하는 장바구니 프래그먼트 스크립트 중지, 계정 및 결제 페이지 밖에서 비밀번호 강도 및 select 라이브러리 제거. 이 설정들은 총 35개의 최적화 항목에 포함되며, 모두 되돌릴 수 있습니다.

### 그다음 실제 주문을 하세요

휴대폰으로 모바일 데이터를 사용해 직접 운영하는 쇼핑몰에서 상품을 구매해 보세요. 결제 게이트웨이가 테스트 환불을 지원한다면 실제 카드로 결제하세요. 확인 이메일이 도착하는지, 주문이 관리자 화면에 표시되는지 확인한 뒤 직접 환불하세요. 이 5분 동안 찾아낸 문제는 그렇지 않았다면 고객이 발견했을 문제입니다.

**Performance, WooCommerce 탭.** 페이지에서 전혀 사용하지 않는 스크립트를 위한, 되돌릴 수 있는 스위치 5개입니다.

## 출처

이 가이드에서 Canvas 자체가 아닌 내용을 설명하는 경우, 해당 내용을 다루는 공식 페이지는 다음과 같습니다.

- [WooCommerce 설치 및 제거](https://woocommerce.com/document/installing-uninstalling-woocommerce/) woocommerce.com · WooCommerce는 무료이며, 플러그인 화면에서 설치할 수 있고 자체 설정 마법사가 열립니다
- [WooCommerce 페이지](https://woocommerce.com/document/woocommerce-pages/) woocommerce.com · WooCommerce는 쇼핑, 장바구니, 결제, 계정 각각에 대해 페이지를 하나씩 지정합니다
- [WooCommerce에서 세금 설정하기](https://woocommerce.com/document/setting-up-taxes-in-woocommerce/) woocommerce.com · 세율은 WooCommerce 설정에서 지정합니다
- [배송 지역 설정하기](https://woocommerce.com/document/setting-up-shipping-zones/) woocommerce.com · 배송 구역은 상품을 배송하는 지리적 영역입니다
- [주문 출처 추적](https://woocommerce.com/document/order-attribution-tracking/) woocommerce.com · 주문 어트리뷰션이 기록하는 내용과 이를 끄는 WooCommerce 설정

다음에 할 일

## 다음 단계

쇼핑몰을 중심으로 사이트의 나머지 부분을 다루는 가이드 두 편과 스토어 기능 전체를 소개합니다.

[가이드 **레스토랑 웹사이트 만들기** 실제 프로젝트에서 처음부터 끝까지 진행하는 가져오기와 이어지는 편집 과정](https://canvaswp.com/ko/guides/build-a-restaurant-website-with-wordpress/) [가이드 **고객 웹사이트 구축** 모든 고객에게 하나의 라이선스 적용: 키, 스테이징 사본, 인수인계 방식.](https://canvaswp.com/ko/guides/build-client-websites-with-wordpress/) [제품 **Canvas와 WooCommerce** 스토어 블록 24개와 스토어 템플릿 18개.](https://canvaswp.com/ko/woocommerce/)

질문

## 자주 묻는 질문

나머지 질문은 [전체 FAQ](https://canvaswp.com/ko/faq/)에서 확인할 수 있으며, [문서](https://docs.canvaswp.com/)에서는 모든 설정을 자세히 다룹니다.

**여전히 WooCommerce 플러그인이 필요한가요?**

예, Canvas 스토어는 여전히 WooCommerce 플러그인 위에서 실행됩니다. Canvas는 그 위에 블록, 템플릿, 옵션을 추가하고 플러그인이 계속 담당하도록 두므로, 주문, 상품, 세금, 배송, 결제는 다른 확장 기능이 찾는 위치에 그대로 있습니다. 스토어 데모로 시작하면 설정 마법사가 가져오기를 실행하기 전에 WooCommerce를 설치하고 활성화합니다.

**스토어 블록은 별도로 구매해야 하나요?**

아니요, Canvas 스토어 블록은 모든 플랜에 추가 비용 없이 포함됩니다. 24개의 스토어 블록은 모두 프리미엄 블록이며, 모든 플랜에 모든 프리미엄 블록이 포함됩니다. 여기에 18개의 스토어 템플릿과 21개의 데모 스토어 전체가 함께 제공됩니다. 이커머스 등급이나 스토어 애드온은 없습니다.

**이 블록을 WooCommerce 블록과 함께 사용할 수 있나요?**

네, 자유롭게 섞어 사용하셔도 됩니다. Canvas 스토어 블록은 일반적인 등록 블록이므로 같은 템플릿과 같은 페이지에서 WooCommerce 블록 및 코어 블록과 나란히 배치할 수 있습니다. 한 번에 한 부분씩 교체하고 나머지 레이아웃은 그대로 두세요.

**스토어 데모를 가져오면 결제 페이지가 두 개 생기나요?**

아니요, Canvas 스토어 데모를 가져와도 결제 페이지는 하나만 남습니다. 가져오기 도구가 사이트에 있는 상점, 장바구니, 결제, 계정 페이지를 찾아 데모 메뉴와 링크를 이 페이지들로 연결하므로, 각 페이지는 하나씩만 유지됩니다. 기존 상품과 주문은 그대로 유지되며, 전체 가져오기는 되돌릴 수 있습니다.