Hostinger WooCommerce Tutorial (2026) - Full Setup Guide

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Hostinger에서 WordPress와 WooCommerce로 온라인 상점을 구축하고, 디자인·상품·결제·배송·세금을 설정해 공개와 주문 관리까지 진행하는 실습 가이드다.

📌 핵심 요점

1. 초기 비용과 갱신 비용을 함께 확인한다. 무료 Astra 테마·Starter Templates·WooCommerce를 사용하고 호스팅을 유료로 구매하는 구성이다. 호스팅 계약 기간, 무료 도메인 적용 조건, 이후 도메인 갱신 비용을 주문 내역에서 확인한다.
2. 기본 상점을 생성한 뒤 브랜드에 맞게 수정한다. WordPress 설치와 도메인 이메일 인증을 마치고 Astra와 무료 상점 템플릿을 적용한다. 블록 편집기로 로고·색상·글꼴·메뉴·홈페이지를 수정하고, 예시 구성에 불필요한 플러그인을 정리한다.
3. 상품 특성에 맞는 유형과 구매 동선을 구성한다. 단순 상품에는 가격·이미지·분류를 입력하고, 옵션 상품에는 색상별 이미지·가격·재고를 설정한다. 그룹 상품으로 관련 상품을 함께 보여 주며, 홈페이지 상품 목록과 버튼을 실제 상점 페이지에 연결한다.
4. 결제·배송·세금을 판매 조건에 맞춘다. WooPayments나 다른 결제 수단을 선택하고 판매 국가·통화·배송 구역을 설정한다. 예시는 미국 판매, 정액 배송 10달러, 75달러 이상 무료 배송, WooCommerce Tax의 자동 세금 계산을 사용한다.
5. 공개 후 구매 동작과 주문 처리를 확인한다. 쿠폰 할인과 사용 제한을 설정하고 사이트를 ‘Live’로 전환한다. 장바구니·쿠폰·배송 주소·결제 수단 선택을 확인하며, 주문은 WordPress에서, 호스팅·도메인·청구는 Hostinger hPanel에서 관리한다.

🧩 배경과 문제 정의

• Hostinger에서 호스팅·도메인·WordPress를 한곳에서 설정하고, WooCommerce 기반 온라인 상점을 구축한다. 예시는 게이밍 기어 상점이지만 상품 종류에 맞춰 디자인과 콘텐츠를 바꿀 수 있다.
• 테마는 사이트의 글꼴·색상·전체 레이아웃을 담당하고, 템플릿은 상점 페이지와 초기 콘텐츠를 제공한다. 기본 예시를 실제 브랜드와 상품에 맞게 교체하는 작업이 필요하다.
• 무료 Astra 테마·Starter Templates·WooCommerce를 활용해 호스팅 외 추가 비용을 줄이는 구성이다. 처리 범위는 호스팅 구매부터 상점 디자인 수정과 첫 상품의 설명·대표 이미지 입력까지다.

🕒 시간순 섹션별 상세정리

1. 무료 구성 요소와 초기 상점에 맞는 호스팅 선택

• 테마·템플릿·WooCommerce는 무료로 사용하며, 안내된 구성에서 비용을 지불하는 항목은 상점을 상시 운영할 Hostinger 호스팅 플랜이다. 영상의 전용 링크에는 당시 프로모션 가격에 추가 10% 할인이 적용된다고 안내한다. [01:57]
• Unlimited와 Cloud Startup 중 초기 상점에는 Unlimited를 권장한다. Cloud Startup은 트래픽이 많은 사이트용 상위 플랜이며, Unlimited에는 빠른 저장 공간·일일 백업·추가 웹사이트 운영 여지가 포함된다. [02:32]

2. 호스팅 결제 기간과 도메인 갱신 비용 확인

• 호스팅 결제 기간은 기본 48개월이며 24개월·12개월·1개월로 변경할 수 있다. 최소 12개월을 권장하는 근거는 할인과 첫해 무료 도메인 혜택이다. [03:02]
• 원하는 도메인의 사용 가능 여부를 확인해 선택한다. 도메인 등록 기간은 기본 2년이며 1년 또는 3년으로 바꿀 수 있다. [03:38]

3. Hostinger 가입과 WordPress 자동 설치

• 이메일과 비밀번호로 Hostinger 계정을 만들고, 선택 사항인 전화번호와 청구 주소·결제 정보를 입력해 결제를 완료한다. [04:35]
• 온보딩에서 새 사이트 생성과 WordPress 구축을 선택하고, 확보한 도메인을 연결해 등록 정보를 확인한다. 데이터센터 선택 화면이 나오면 일반적으로 지연 시간이 유리하다는 이유로 기본값을 유지하도록 권장한다. [05:26]

4. 도메인 이메일 인증과 관리자 화면 정리

• 도메인이 이메일 인증 대기 상태라면 가입 이메일로 받은 Hostinger 인증 메일에서 ‘Verify email’을 누른다. 인증 후 관리자 화면을 새로고침하면 예시의 사용자 지정 도메인이 활성 상태로 바뀐다. [06:38]
• 처음 표시되는 화면은 WordPress 내부의 Hostinger 화면이다. 왼쪽 ‘Dashboard’를 선택하면 실제 WordPress 대시보드로 이동한다. [07:08]

5. Astra 테마 적용과 사전 설치 플러그인 정리

• 테마는 사이트의 글꼴·색상·전체 레이아웃을 제어한다. ‘Appearance → Themes → Add Theme’에서 무료 Astra 테마를 검색해 설치하고 활성화한다. [08:43]
• Astra 테마 자체에는 상점 페이지와 레이아웃이 포함되지 않으므로 템플릿을 추가해야 한다. 예시에서는 초기 구성을 정리하기 위해 Hostinger가 사전 설치한 플러그인을 일괄 비활성화한 뒤 삭제한다. [09:41]

6. 추가 비용을 줄이는 편집기와 상점 템플릿 선택

• ‘Starter Templates’ 플러그인을 설치하고 활성화하면 템플릿 온보딩을 시작할 수 있다. [10:13]
• WooCommerce 기능 일부가 Elementor 유료 플랜에 묶여 있다는 이유로 WordPress 블록 편집기를 선택한다. 호스팅 외 비용을 추가하지 않는 것이 선택 기준이다. [10:41]

7. 상점 페이지 생성과 불필요한 장바구니 확장 기능 제거

• 템플릿 미리보기에서 로고·글꼴·색상을 조정할 수 있지만 예시에서는 이후에 변경한다. 기능 선택 단계에서는 페이지 빌더·문의 양식·전자상거래를 최소 구성으로 켜고, SEO와 쿠키 동의 기능은 선택에 맡긴다. [12:21]
• ‘Submit and build my website’를 실행하면 몇 분 뒤 홈페이지·상점·상품 상세·장바구니·결제 페이지를 갖춘 기본 상점이 생성된다. [12:51]

8. 로고·상점 이름·브라우저 아이콘 설정

• ‘Customize → Header → Site Title and Logo’에서 로고를 업로드하고 너비 슬라이더로 크기를 조절한다. 사이트 제목에는 예시 상점 이름인 ‘Vortex’를 입력하며, 이 이름은 브라우저 탭에도 반영된다. [15:21]
• 투명 헤더 설정의 ‘Different Transparent Logo’를 끄면 업로드한 사용자 지정 로고가 해당 헤더에도 적용된다. [15:35]

9. 전체 브랜드 스타일과 상품 상세 레이아웃 조정

• 스타일 가이드에서 버튼·색상·글꼴을 조정할 수 있다. 예시 게이밍 상점에는 어두운 배경, 보라색 강조색, 굵고 강한 인상의 글꼴을 적용한다. [17:14]
• ‘WooCommerce → Single Product’에서 상품 상세 레이아웃을 조정한다. 템플릿에 따라 전체 너비로 설정되어 있을 수 있으며, 예시에서는 일반 레이아웃인 ‘Normal’을 권장한다. [17:37]

10. 메뉴 순서와 상점 링크 이름 수정

• 기본 메뉴 편집 화면에서 항목을 드래그해 순서를 바꾸고, 각 항목의 펼침 메뉴에서 표시 정보를 수정할 수 있다. [18:19]
• 템플릿의 상점 메뉴 이름인 ‘Plants’를 탐색 레이블 ‘Shop’으로 바꾼다. 새 페이지를 메뉴에 넣으려면 ‘Add Items’에서 추가할 페이지를 선택한다. [18:46]

11. 블록 구조 이해와 홈페이지 핵심 문구·버튼 수정

• 홈페이지의 제목·본문·버튼은 각각 블록이며, 컨테이너가 여러 블록을 묶는다. 블록이나 컨테이너를 선택하면 오른쪽에 해당 요소의 설정이 나타나며, 다른 상점 페이지에도 같은 구조가 적용된다. [19:58]
• 첫 화면의 문구를 ‘Built for gamers’, 큰 제목을 ‘Gear that keeps up with you’로 바꾸고 버튼 표시 문구를 ‘Shop all’로 수정한다. [20:39]

12. 첫 화면 배경 교체와 상품 표시 영역 이해

• 목록 보기에서 ‘Hero’ 컨테이너를 선택한 뒤 스타일 설정의 배경 이미지를 교체한다. 내부 텍스트 블록이 아니라 전체 섹션을 선택해야 배경을 바꿀 수 있다. [22:09]
• 교체한 이미지가 편집기에서 중앙에 맞지 않아 보일 수 있지만, 예시에서는 저장 후 실제 사이트 미리보기에서 올바르게 표시된다고 보여준다. [22:21]

13. 불필요한 홈페이지 섹션 삭제와 서비스 영역 보완

• 예시에서는 소개·고객 후기·행동 유도 섹션을 삭제하고 하단 서비스 목록은 유지한다. 남길 섹션은 앞서 사용한 방식대로 내부 텍스트와 블록을 수정할 수 있다. [24:03]
• 목록 보기에서 실제 내용과 이름이 맞지 않던 ‘Services’ 섹션을 ‘New Arrivals’로 바꿔 식별하기 쉽게 만든다. 하단 서비스 목록의 예시 문구도 상점에 맞는 내용으로 교체한다. [24:49]

14. 전체 페이지 관리와 새 페이지 생성

• 실제 홈페이지에서는 숏코드가 상품 목록으로 표시된다. 관리자 ‘Pages’에는 템플릿의 소개·문의 페이지와 WooCommerce의 결제·장바구니·계정·상점 페이지가 함께 있으며, ‘Quick Edit’으로 상점 페이지 제목도 ‘Plants’에서 ‘Shop’으로 수정한다. [26:42]
• 기존 페이지의 ‘Edit’를 선택하면 블록 편집기에서 홈페이지와 같은 방식으로 텍스트와 이미지를 바꿀 수 있다. 각 페이지를 실제 상점에 맞게 수정한다. [27:18]

15. 데모 상품 삭제와 첫 실제 상품 입력

• ‘Products’의 기본 상품은 템플릿이 가져온 데모다. 전체 선택 후 ‘Move to trash’를 적용하며, 예시에서는 한 번에 20개씩 처리되므로 남은 상품에도 같은 작업을 반복해 목록을 비운다. [28:49]
• ‘Add New Product’에서 첫 상품 이름을 ‘Aurora RGB Mechanical Keyboard’로 입력한다. 긴 상품 설명에는 제품의 기능과 구매할 이유를 작성하며, 직접 쓰거나 ChatGPT·Claude 같은 도구로 초안을 만들 수 있다. [29:30]

16. 단순 상품의 이미지·가격·분류 설정

• 대표 이미지는 상품 이미지로 지정하고, 추가 사진은 상품 갤러리에 올린다. 단순 상품은 하나의 가격을 가진 단일 상품에 사용하는 유형이다 [30:55]
• 키보드의 정상가는 89.99달러, 할인가격은 74.99달러로 설정하며 할인 일정도 예약할 수 있다. 재고 탭에서는 수량을, 배송 탭에서는 무게와 크기를 관리하고, 짧은 설명에는 상품 페이지 상단에 표시할 한두 문장 요약을 넣는다 [31:36]

17. 색상 선택이 가능한 옵션 상품의 속성 구성

• 색상이나 크기처럼 고객이 선택할 항목이 있는 상품은 옵션 상품으로 만든다. 무선 게이밍 마우스를 새로 등록하고 상품 유형을 Variable product로 변경한다 [33:28]
• 속성 이름을 Color로 지정하고 색상 값을 파이프 기호 |로 구분해 입력한 뒤 저장한다. 의류의 크기나 커피의 맛처럼 다른 선택 항목에도 같은 방식을 적용할 수 있다 [34:46]

18. 옵션별 이미지·가격과 실제 선택 화면 완성

• 속성을 바탕으로 옵션을 생성하면 색상마다 별도 항목이 만들어진다. 각 옵션에는 사진·가격·재고를 둘 수 있으며, 흰색 마우스에는 해당 사진과 59.99달러의 가격을 입력한다 [35:50]
• 흰색·페일 라임·분홍색에 각각 맞는 이미지를 연결하고 변경 사항을 저장한다. 옵션마다 가격·재고·배송 정보를 독립적으로 조정할 수 있다 [36:25]

19. 관련 상품을 한 페이지에 묶어 추가 구매 유도

• 그룹 상품은 관련 상품을 한 페이지에서 함께 보여 주되 고객이 구매할 항목을 선택하게 한다. 키보드와 마우스를 묶기 위해 상품 유형을 Grouped product로 바꾸고 연결된 상품에서 두 상품을 검색해 추가한다 [38:56]
• 묶음 대표 이미지와 bundles 카테고리를 지정해 게시한다. 고객은 키보드 수량과 마우스 색상 등을 선택할 수 있어, 별도로 등록한 상품들을 함께 구매하도록 유도할 수 있다 [39:55]

20. 홈페이지 상품 목록과 구매 링크 연결

• 홈페이지의 상품 쇼트코드는 표시 개수 6개, 열 수 3개, 최신 상품 우선 정렬을 지정한다. 삭제된 데모 식물 카테고리를 keyboards, mice, bundles로 교체하며, 카테고리 사이는 쉼표로 구분하고 여러 단어로 된 이름에는 공백 대신 하이픈을 사용한다 [41:17]
• Shop now 버튼의 임시 # 링크를 상점 페이지로 바꾸고 저장한다. 홈페이지에서 상품을 누르면 이미지·제목·설명·장바구니 버튼이 있는 상품 페이지로 이동하지만, 대금을 받으려면 결제 수단을 추가로 설정해야 한다 [42:15]

21. 결제 수단과 판매 지역의 기본 조건 설정

• WooPayments는 대부분의 카드와 Apple Pay를 하나의 플러그인으로 처리해 간단한 설정을 원하는 경우의 추천 선택지다. Complete setup으로 설정을 진행할 수 있고, PayPal이나 다른 결제 수단도 상점에 맞게 선택할 수 있다 [43:09]
• 상점 주소는 배송과 세금 계산에 사용된다. 기본 판매·배송 범위는 모든 국가이지만, 예시에서는 해외 배송을 아직 제공하지 않으므로 판매 국가를 미국으로 제한한다 [44:07]

22. 배송 구역과 정액·무료 배송 조건 구성

• 배송 구역은 같은 배송 요금을 적용할 지역의 묶음이며, 여러 국가에 배송한다면 구역을 추가할 수 있다. 예시에서는 구역 이름과 대상 지역을 미국으로 지정한다 [45:08]
• 배송 방식에는 무료 배송·정액 배송·직접 수령이 있다. 정액 배송은 주문마다 일정한 배송비를 부과하며, 예시에서는 실제 배송 비용을 고려해 10달러로 설정한다 [45:38]

23. WooCommerce Tax로 자동 세금 계산 활성화

• WooCommerce Tax 플러그인을 설치·활성화하고 연결 절차를 진행한다. WordPress.com 계정 연결 화면에서 이메일을 입력해 설정을 완료한다 [47:16]
• WooCommerce의 세금 설정에서 자동 세금 계산을 활성화하고 저장한다. 이후 결제 시 고객의 위치를 기준으로 세율을 계산하도록 구성된다 [47:52]

24. 할인 쿠폰과 사용 제한 설정

• 새 쿠폰에 예시 코드 10 off를 입력하고 할인 유형을 장바구니 고정 금액 할인에서 백분율 할인으로 변경한다. 쿠폰 설명은 관리자에게만 보인다 [48:34]
• 할인율을 10%로 지정한다. 최소 구매 금액이나 전체 사용 횟수 제한도 설정할 수 있으며, 쿠폰을 게시하면 상점에서 사용할 수 있다 [48:52]

25. 상점 공개와 장바구니 동작 확인

• Coming soon 상태에서는 방문자가 구매할 수 없으므로 사이트 공개 설정을 Live로 바꾸고 저장한다. 저장 후 상점이 공개 상태가 된다 [49:32]
• 공개된 상점에서 상품을 장바구니에 담고 쿠폰을 적용해 할인이 작동하는지 확인한다. 고객이 배송 주소를 입력·변경하고 결제 수단을 선택할 수 있는지도 확인한다 [50:14]

26. 주문 처리와 공개 이후의 운영 관리

• WooCommerce 주문 목록에서 주문을 열면 고객 이름, 주문 상태, 청구·배송 정보, 주문 상품을 확인할 수 있다. 예시 주문은 Processing 상태다 [51:10]
• 상품 발송과 처리가 끝나면 주문 상태를 Completed로 변경하고 업데이트한다. 문제가 생겼을 때 사용할 취소·환불 관련 선택지도 있으며, 예시에서는 발송을 마친 것으로 가정해 완료 상태로 바꾼다 [51:37]

🧾 결론

• 템플릿으로 기본 페이지를 빠르게 만들 수 있지만, 데모 상품과 문구·이미지·메뉴·링크를 실제 상점에 맞게 교체해야 한다.
• 상품을 게시한 뒤에도 결제 수단, 판매 지역, 배송비, 세금, 공개 상태를 설정해야 구매를 받을 준비가 된다.
• 편집기 화면과 실제 사이트의 표시가 다를 수 있으므로, 저장 후 방문자 화면에서 상품 목록·옵션 이미지·구매 동선을 확인해야 한다.
• 공개 이후에는 주문 확인과 발송 후 상태 변경을 포함한 운영 관리가 이어진다.

📈 투자·시사 포인트

• 초기 구축 예산은 무료 구성 요소를 활용해 줄일 수 있지만, 호스팅 계약 기간과 도메인 갱신 비용을 함께 비교해야 한다.
• 무료 배송 기준과 할인 쿠폰은 추가 구매를 유도하는 장치다. 예시 금액을 그대로 적용하기보다 실제 배송비와 상품 이익률에 맞춰 정해야 한다.
• 단순·옵션·그룹 상품을 구분하면 상품 선택과 관련 상품의 동시 구매를 지원할 수 있다. 다만 자료에는 매출 증가 효과를 입증하는 수치가 없다.
• 자료의 활용 가치는 상점 구축과 운영 절차에 있으며, 특정 기업이나 자산의 투자 수익성을 판단할 근거는 제시하지 않는다.

⚠️ 불확실하거나 확인이 필요한 부분

• 호스팅 할인, 추가 10% 할인, 무료 도메인 조건과 연 20달러의 도메인 갱신 비용은 영상 당시 안내 또는 예시다. 실제 구매 시 적용 가격과 갱신 조건을 확인해야 한다.
• WooPayments와 WooCommerce Tax의 판매 국가별 지원 범위 및 적용 조건은 자료에서 검증하지 않는다. 미국 예시를 다른 판매 지역에 적용할 수 있는지 별도 확인이 필요하다.
• 장바구니·쿠폰·결제 화면 확인은 제시되지만, 실제 대금 승인·정산·환불이 끝까지 성공했다는 근거는 없다. 주문 완료 처리도 발송을 마쳤다고 가정한 예시다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 호스팅 계약 기간별 결제액, 할인 적용 여부, 도메인 등록 기간과 갱신 비용을 확인한다.
• WordPress 설치와 도메인 이메일 인증을 마치고, Astra·무료 템플릿·블록 편집기로 기본 상점을 구성한다.
• 데모 상품과 문구·이미지를 교체하고, 메뉴·홈페이지 버튼·상품 목록이 올바른 페이지와 카테고리를 가리키는지 확인한다.
• 상품별 유형을 정하고 가격·재고·배송 정보·분류를 입력한 뒤, 옵션 선택에 따라 이미지와 가격이 올바르게 표시되는지 확인한다.

❓ 열린 질문

• 실제 판매 국가에서 사용할 수 있는 결제 수단과 자동 세금 계산 기능은 무엇이며, 어떤 설정 조건이 필요한가?
• 상품 이익률과 배송 비용을 고려하면 무료 배송 기준과 쿠폰 할인율을 얼마로 정해야 하는가?
• 상점에 필요한 기능을 유지하면서 제거할 수 있는 플러그인은 무엇인가?