Hostinger Website Builder - Full Tutorial for Beginners (2026)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Hostinger Website Builder는 초보자가 AI로 웹사이트 초안을 만든 뒤 직접 디자인과 운영 기능을 설정하고 자체 도메인으로 공개하는 과정을 지원한다.

📌 핵심 요점

1. 시작은 요금제 선택과 사이트 설명 작성이다. 사업 내용, 필요한 페이지, 원하는 분위기를 구체적으로 적어 AI 초안을 만들고 데스크톱·모바일 미리보기로 확인한다.
2. 편집의 기본 단위는 페이지·섹션·요소다. 텍스트, 버튼 링크, 이미지, 배경을 직접 수정하고 AI 작성·이미지 생성 도구로 초안을 보완한다.
3. 사이트의 완성도는 수동 점검에서 높아진다. 모바일 간격과 표시 여부, 공통 헤더·푸터, 메뉴 순서, 전체 색상·글꼴을 조정해야 한다.
4. 필요에 따라 블로그, 상품 판매, 예약, 문의 폼을 추가한다. 실제 운영을 위해서는 결제 제공업체 연결, 상품·예약 정보, 배송·세금, 문의 알림까지 설정해야 한다.
5. 공개 전에는 페이지별 SEO와 도메인 연결을 마무리한다. 영상은 도메인 등록 이메일을 14일 안에 인증하도록 안내하며, 공개 이후 수정 사항도 다시 게시해야 반영된다고 설명한다.

🧩 배경과 문제 정의

이 영상은 웹사이트 제작 경험이 없는 시청자가 Hostinger Website Builder로 사이트를 만들고 공개하도록 안내하는 실습 튜토리얼이다. 사진 여행 투어 사업을 예제로 삼아 AI 초안 생성에서 디자인 수정, 예약·상점·문의 기능, SEO, 도메인 연결까지 진행한다.

출발점은 사업 설명을 입력해 만든 AI 초안이다. 이후에는 수동 조정을 익히는 경로를 선택하며, 템플릿으로 시작해도 비슷한 편집 방법을 사용할 수 있다고 설명한다. 핵심 과제는 생성된 화면을 실제 사업 정보와 방문자 행동에 맞는 운영 가능한 사이트로 바꾸는 것이다.

영상에는 가입 링크와 할인 안내가 포함되어 있다. 요금제 추천과 기능 설명은 진행자가 소개한 조건으로 구분해 읽어야 하며, 제공된 자막만으로 현재 가격이나 성능을 검증할 수는 없다.

🕒 시간순 섹션별 상세정리

1. 튜토리얼 목표와 요금제 선택

• AI가 사이트 초안을 만들고 사용자가 각 부분을 수정하는 전체 과정을 소개하며, 초보자도 따라 할 수 있는 단계별 제작을 목표로 제시한다. [00:32]
• 할인 링크를 안내한 뒤 단순한 사이트에는 Premium도 가능하지만, 더 많은 기능과 전자상거래를 포함한다는 이유로 Unlimited 요금제를 추천한다. [01:18]
• 48개월 계약의 할인과 12개월 계약의 1년 무료 도메인을 설명하고, 계정 등록·청구 주소·결제 정보 입력을 진행한다. [01:57]

2. 생성 경로 선택과 사이트 설명 작성

• 새 사이트와 Hostinger AI Builder를 선택한 뒤 수동 조정을 익힐 수 있는 경로로 진행하고, 우선 임시 도메인을 사용한다. [02:37]
• 템플릿으로 시작하는 대안도 있지만, 예제에서는 사진 여행 투어 사업의 설명과 필요한 페이지, 원하는 외관을 입력해 초안을 생성한다. [03:26]
• 설명 작성에 Chat GPT나 Claude를 활용할 수 있다고 안내하고, 생성 후 페이지 구성과 모바일 화면을 미리 확인한다. [03:52]

3. 편집기 구조와 텍스트·버튼 수정

• 결과가 만족스럽지 않으면 아이디어를 수정할 수 있으며, 초안을 출발점으로 삼아 편집기에 진입한다. [04:11]
• 왼쪽 도구 모음에서 요소·페이지·스타일·AI 도구를 찾을 수 있다. 사이트는 페이지 안의 섹션, 섹션 안의 텍스트·버튼·이미지로 구성된다. [04:39]
• 텍스트의 내용과 서식을 바꾸고, 버튼 문구를 투어 참여로 수정해 사이트 내부 페이지에 연결한다. 버튼 색상과 요소 위치도 조정한다. [05:31]

4. 이미지 교체와 요소 조작

• 예약 섹션 이미지는 예약 관리에서 다루며, 일반 이미지는 업로드·미디어 라이브러리·AI 생성으로 교체할 수 있다고 보여준다. [06:03]
• 이미지 설명을 수정하며 결과를 반복 생성하고, 생성된 이미지는 미디어 라이브러리에서 다시 사용할 수 있다. [06:21]
• 요소를 끌어 추가하거나 삭제하고 섹션 높이를 조절한다. 잘못 변경했을 때는 실행 취소 버튼을 활용한다. [06:49]

5. AI 문구 작성과 섹션 배경 다듬기

• AI Writer로 문장을 줄이고 여러 후보 중 선택한다. AI 문구와 이미지는 우선 화면을 채운 뒤 나중에 개선하는 출발점으로 드러난다. [07:18]
• 섹션 배경에는 색상·이미지·영상을 넣을 수 있으며, 생성 이미지의 위치와 오버레이 불투명도를 조절해 텍스트 가독성을 높인다. [07:57]
• 기본 조작을 익힌 뒤 모든 페이지의 문구와 이미지를 사업에 맞게 교체하도록 권한다. [08:06]

6. 예약 섹션 추가와 모바일 점검

• 섹션은 프롬프트 생성, 빈 화면, 템플릿으로 추가할 수 있다. 실제 예약 관리를 사용하려면 특별 섹션에서 예약 목록을 선택한다. [09:03]
• 예약 섹션의 외관과 예약 상세 정보를 각각 수정하고, 쓰지 않는 섹션은 삭제한다. [09:22]
• 모바일 보기에서 간격과 요소 위치를 조절하고 긴 섹션을 숨긴다. 진행자는 이 조정이 모바일에만 적용된다고 설명하며 저장 상태도 확인하도록 안내한다. [10:14]

7. 공통 헤더와 AI 로고 제작

• 모든 페이지에 표시되는 헤더의 로고·메뉴 위치와 간격을 조정하고, 스크롤을 따라오는 고정 헤더와 소셜 아이콘·버튼을 설정한다. [10:53]
• 기존 로고를 업로드하거나 AI Logo Maker에 브랜드 분위기·로고 유형·색상을 입력해 생성할 수 있다. 다만 시도 횟수에 따라 크레딧 추가가 필요할 수 있다. [11:33]
• 대안으로 일반 AI 이미지 생성기를 이용해 로고 아이디어를 반복 제작한다. 결과는 Canva나 Photoshop 등에서 추가 보정할 수 있다고 보여준다. [12:01]

8. 로고 마무리와 푸터·페이지 관리

• 로고 배경과 가로세로 비율을 외부 편집기로 다듬고 표시 폭을 조정한다. 헤더 글꼴·배경색·투명도도 설정한다. [12:48]
• 푸터의 색상과 배치를 바꾸고 연락처와 링크가 올바른지 확인한다. [13:07]
• 페이지 목록에서 메뉴 순서를 바꾸고 이름 변경·복제·숨김·홈페이지 지정·삭제를 수행한다. 새 페이지도 AI 생성, 빈 페이지, 템플릿 중 선택해 추가할 수 있다. [14:00]

9. 전체 스타일과 블로그 설정

• 스타일 메뉴에서 색상을 바꾸면 해당 색상의 사용 위치 전체에 반영된다. 글꼴·버튼·애니메이션도 전체 적용되므로 개별 수정이 필요한지 판단한다. [14:42]
• 블로그가 필요하면 페이지를 추가하고 메뉴 이름과 슬러그를 지정한다. 기본 게시물은 편집하거나 비공개 처리·삭제할 수 있다. [15:25]
• 새 글은 직접 쓰거나 말투·길이·프롬프트를 지정해 AI 초안을 만든다. 내용을 검토한 뒤 공개 상태, 예약 발행, 대표 이미지를 설정한다. [16:06]

10. 상점과 결제 연결

• 예제에서는 최초 프롬프트로 상점과 예약이 생성되었다. 상점을 별도로 추가하거나 제거할 수 있고, 헤더 장바구니 아이콘만 숨길 수도 있다. [16:57]
• 상점 관리자에서 Stripe나 PayPal 같은 결제 제공업체를 연결한다. 지역별 옵션과 실제 돈 없이 구매 흐름을 확인하는 테스트 결제를 보여준다. [17:34]
• 사업자 정보, 지역 설정, 연락처와 주소를 입력하며, 이 정보가 고객 청구서에 표시된다고 보여준다. [17:47]

11. 상품·예약과 판매 운영 설정

• 상품 유형과 사진을 추가하고 제목·설명·가격을 입력한다. 이미지에서 상품 정보를 생성하거나 AI Writer로 설명을 작성할 수도 있다. [18:42]
• 예약 목록에서 항목을 수정·삭제하고 예약 가능 시간과 설정을 관리한다. 할인 코드, 고객 목록, 분석, 발송 이메일도 관리 메뉴에 포함된다. [19:14]
• 배송 지역과 요금을 설정하고 세금 규칙을 추가한다. 세금은 거주지와 판매 대상에 따라 달라지므로 전문가에게 확인할 것을 권한다. [19:33]

12. 상점 메뉴와 문의 폼 구성

• 온라인 상점 페이지에 단일 상품이나 상품 목록을 연결해 메뉴에 표시하고, 필요하면 탐색 메뉴에서 숨길 수 있다. [20:12]
• 기존 문의 페이지의 폼을 편집하거나 새 페이지·섹션에 문의 폼을 추가한다. 여러 폼의 제출 내역을 한 목록으로 모을 때는 연결형 설정을 사용한다고 보여준다. [21:08]
• 폼 이름과 알림 이메일을 지정하고 필드 순서·유형·라벨·필수 여부를 조정한다. 제출 목록은 확인하거나 CSV로 내려받을 수 있다. [21:54]

13. 페이지별 SEO 정리

• 공개에 앞서 SEO 메뉴에서 페이지별 경고와 개선 제안을 확인한다. [22:18]
• AI SEO Assistant로 초기 정보를 생성한 뒤 각 페이지에 반복 적용하고, 미리보기·키워드·제목·메타 설명을 직접 조정할 수 있다고 안내한다. [22:46]

14. 자체 도메인 등록과 인증

• 임시 도메인 대신 사용할 주소를 검색하고, 짧고 기억하기 쉬운 이름과 가능하면 .com을 권한다. 선택 후 소유자 정보를 입력해 등록한다. [23:29]
• 도메인을 활성 상태로 유지하려면 14일 안에 이메일 주소를 인증해야 한다고 안내하며, Hostinger 이메일의 인증 버튼을 누른다. [23:43]
• 빌더로 돌아와 도메인 연결을 확인하고 저장한다. 진행자 사례에서는 몇 분 만에 처리되었지만 처리 시간이 걸릴 수 있다고 보여준다. [24:03]

15. 사이트 공개와 이후 업데이트

• 게시 버튼으로 사이트를 공개하며, 게시 과정에서 Hostinger가 사이트를 최적화한다고 보여준다. 새 도메인에서 실제 사이트를 열어 확인한다. [24:25]
• 이후에도 편집기로 돌아와 수정할 수 있으며, 변경 사항을 실제 사이트에 반영하려면 다시 게시해야 한다. [24:38]
• 마지막으로 설명란의 할인 링크를 다시 안내하고 웹사이트 제작 완료 인사로 영상을 마친다. [24:50]

🧾 결론

• 영상의 핵심 작업 방식은 AI 초안 생성과 직접 편집의 결합이다. 생성 결과가 완벽하지 않아도 출발점으로 삼아 문구와 이미지를 반복해서 다듬는다.
• 모든 사이트에 블로그나 상점이 필요한 것은 아니다. 사업 목적에 맞춰 페이지와 기능을 선택하고 불필요한 섹션이나 상점은 제거할 수 있다.
• 사이트 제작의 완료 기준에는 디자인뿐 아니라 모바일 표시, 링크, 문의 접수, 결제 흐름, 도메인과 게시 상태까지 포함된다.

📈 투자·시사 포인트

• 소규모 사업자 관점에서 AI 초안과 통합 편집 도구는 제작 과정을 단순화할 수 있다. 다만 영상에는 실제 절감 시간이나 외주 대비 비용을 입증하는 비교 자료가 없다.
• 비용 판단은 소개된 할인만으로 끝내기 어렵다. 계약 기간, 필요한 상거래 기능, AI 크레딧, 도메인 무료 제공 기간을 함께 비교해야 한다.
• 웹사이트의 사업상 활용은 방문 이후의 행동 설계와 연결된다. 영상은 투어 참여 버튼, 예약, 상품 구매, 문의 폼을 각각 설정하는 방법을 보여준다.
• AI 작성·이미지 생성·SEO 기능이 한 편집기에 통합된 사례지만, 이 튜토리얼만으로 플랫폼의 경쟁 우위나 투자 매력을 판단할 근거는 부족하다.

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

• 요금제 이름과 포함 기능, 할인 적용, 무료 도메인 조건은 영상에서 소개한 내용이다. 정확한 결제 금액과 갱신 비용은 제공된 자막에서 확인되지 않는다.
• AI 로고 제작은 몇 차례 시도 후 추가 크레딧이 필요할 수 있다고 설명한다. 일반 AI 이미지 생성기를 활용하는 대안도 소개하지만, 도구별 정확한 한도와 적용 조건은 제시하지 않는다.
• 진행자는 가입 화면의 선택지가 다르게 보일 수 있다고 언급한다. 모바일 편집이 데스크톱에 영향을 주지 않는다는 설명도 실제 편집 화면에서 변경 항목별로 확인필요가 있다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 사이트의 사업 목적, 필요한 페이지, 디자인 분위기를 정리해 AI 생성 설명에 넣는다.
• 필요한 기능을 기준으로 요금제와 계약 기간을 비교하고 할인, 도메인 제공 조건, AI 크레딧을 확인한다.
• AI 초안의 문구·이미지·버튼 연결을 수정하고 모바일 화면의 간격과 가독성, 저장 상태를 점검한다.
• 판매 기능을 사용할 경우 결제 연결, 상품 가격, 예약 가능 시간, 배송·세금 설정을 마친 뒤 테스트 결제로 구매 흐름을 확인한다.

❓ 열린 질문

• 내 사이트에는 소개 페이지와 문의 폼만 필요한가, 아니면 예약·상품 판매·블로그까지 필요한가?
• AI 초안에서 유지할 부분과 직접 작성하거나 자체 이미지로 교체할 부분은 무엇인가?
• 선택한 계약 기간과 AI 사용량을 기준으로 초기 비용과 이후 운영 비용은 각각 얼마인가?