Hostinger Wordpress Tutorial 2026 - Full Website Setup Guide

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Hostinger에서 WordPress를 설치하고 무료 테마·템플릿으로 편집한 뒤, 모바일·문의 수신·도메인 인증까지 확인하는 웹사이트 전체 구축 가이드다.

📌 핵심 요점

1. 호스팅은 월 표시 가격뿐 아니라 선결제액과 갱신 가격을 함께 비교한다. 영상에서는 무료 도메인과 추가 할인에 최소 12개월 계약이 필요하다고 안내하며, 도메인을 정하지 못했어도 임시 주소로 제작을 시작할 수 있다.
2. Hostinger의 독립 AI 웹사이트 빌더와 WordPress 구축을 구분한다. 예제는 디자인 제어와 테마 변경 제약을 피하기 위해 Build from scratch를 선택하고, 불필요한 플러그인을 정리한다. LiteSpeed Cache는 제작 중 비활성화하고 완성 후 다시 활성화한다.
3. Blocksy 무료 테마와 Elementor용 무료 템플릿을 가져와 코드를 작성하지 않고 페이지를 편집한다. 텍스트·이미지·버튼 링크를 실제 콘텐츠로 바꾸고, 컨테이너 배경 이미지와 개별 이미지 요소를 구분하며, 변경 사항은 Publish로 게시한다.
4. 모바일 설정과 전체 공통 설정을 구분하고 실제 방문자 화면을 확인한다. WPForms의 문의 항목과 알림 주소를 수정한 뒤 테스트 메시지를 보내며, 접수 확인 문구뿐 아니라 받은편지함 도착까지 검증한다.
5. 새 페이지는 메뉴에 직접 추가하고, 공통 헤더·푸터의 로고와 예제 문구를 수정한다. 실제 도메인을 등록한 뒤 소유자 정보와 인증 이메일을 확인하고, 연결 상태를 점검한다. 마지막으로 플랜에 포함된 이메일을 신청하고 메일함을 만든다.

🧩 배경과 문제 정의

• 워드프레스 경험이 없는 초보자가 Hostinger에서 호스팅을 구매하고, 무료 테마와 플러그인으로 웹사이트를 구성하는 과정이다. Elementor로 화면을 직접 편집하므로 코드를 작성하지 않는다.
• 호스팅은 계약 기간에 따라 월 단가와 선결제 부담이 달라지며, 무료 도메인과 할인 적용 조건도 확인해야 한다. 도메인 이름을 정하지 못했더라도 임시 주소에서 제작을 시작할 수 있다.
• Hostinger의 독립 AI 웹사이트 빌더는 워드프레스와 다른 제품이다. 워드프레스 설치 과정의 AI 제작 옵션도 테마 변경과 디자인 제어에 제약이 있을 수 있어 선택을 구분해야 한다.
• 완성 기준은 템플릿 설치에 그치지 않는다. 실제 콘텐츠 교체, 모바일 화면 점검, 문의 메시지 수신 확인, 메뉴와 공통 영역 편집, 도메인 연결과 소유자 인증까지 필요하다.

🕒 시간순 섹션별 상세정리

1. 호스팅 요금제와 계약 기간 선택

• 제휴 링크에는 기존 프로모션에 추가되는 10% 할인이 자동 적용된다고 안내한다. Premium은 웹사이트 3개, 첫해 도메인과 이메일을 포함하며, 상위 Unlimited는 무제한 웹사이트와 일일 백업을 제공한다. 추가 기능이 필요한 경우가 아니라면 Premium으로 시작하는 선택을 권한다. [02:16]
• 계약 기간은 1개월부터 48개월까지 선택할 수 있다. 장기 계약은 월 단가가 낮고 단기 계약은 선결제 부담이 작지만, 1개월 계약에는 무료 도메인과 해당 쿠폰이 적용되지 않는다. 두 혜택을 받으려면 최소 12개월을 선택해야 한다. [02:43]

2. 도메인 결정을 미루고 호스팅 구매 완료

• 첫해 무료 도메인은 웹사이트를 완성한 뒤 신청할 수 있으므로 이름을 정하지 못했어도 구매와 제작을 진행할 수 있다. 외부에서 이미 구매한 도메인도 마지막 연결 화면에서 등록처에 따른 안내를 받아 연결할 수 있다. [03:18]
• 이번 제작에는 이메일 마케팅 추가 상품이 필요하지 않아 선택하지 않는다. 호스팅 계정은 Google, GitHub 또는 이메일로 만들 수 있으며, 예제에서는 이메일과 비밀번호를 사용한다. [03:39]

3. 워드프레스 설치 방식과 접속 정보 설정

• 새 사이트 생성에서 WordPress로 구축하는 옵션을 선택한다. 임시 도메인은 바로 제작할 수 있는 무료 주소를 제공하고, 요금제의 무료 도메인 혜택은 나중에 사용할 수 있도록 유지된다. 원하는 도메인이 이미 정해졌다면 이 단계에서 입력해도 된다. [04:54]
• 서버 위치는 방문자와 가까운 지역을 선택하면 일반적으로 페이지 로딩에 유리하다. 위치 선택 화면이 없으면 Hostinger가 이미 지역을 정한 상태다. 워드프레스 로그인은 Hostinger 계정과 별개이므로 접속 정보를 안전하게 보관하고, 브라우저가 자동 입력한 계정 정보를 필요에 따라 변경한다. [05:30]

4. 불필요한 플러그인 제거와 캐시 일시 중지

• Hostinger Reach는 마케팅 서비스용이고 Hostinger Tools의 기능 상당수는 hPanel에서도 제공된다. Easy Onboarding은 직접 편집하는 과정에 간섭하거나 AI 빌더 사용을 유도할 수 있어 우선 제거 대상으로 권하며, 예제에서는 Hostinger 플러그인을 모두 정리한다. [07:17]
• 제거할 플러그인을 선택해 일괄 비활성화한 뒤, 다시 선택해 일괄 삭제한다. 비활성화 확인 후 삭제를 진행하는 순서다. [07:46]

5. Blocksy 테마와 무료 Elementor 템플릿 가져오기

• 테마는 글꼴·색상·헤더·푸터와 전체 배치의 기반이고, 템플릿은 그 위에 구성된 완성형 페이지 묶음이다. Blocksy 무료 버전은 시각적 헤더·푸터 편집과 사이트 전체 색상·글꼴 설정을 제공하며, 제작자는 최근 비교에서 무료 템플릿의 디자인이 더 일관되게 현대적이었다고 평가한다. [08:59]
• 외모의 테마 화면에서 Blocksy를 설치·활성화하고, 스타터 템플릿 접근에 필요한 Companion 플러그인도 활성화한다. Starter Sites에서 빌더를 Elementor, 요금제를 Free로 필터링한 뒤 템플릿을 고른다. 예제는 미리보기로 디자인과 동작을 확인한 Persona 템플릿을 사용한다. [11:00]

6. Elementor 구조 이해와 텍스트·이미지 교체

• 로그인 상태의 상단 관리 바나 관리자 화면의 페이지 목록에서 Edit with Elementor로 편집기를 연다. 페이지는 중첩 가능한 컨테이너와 그 안의 제목·본문·버튼·이미지 요소로 구성되며, 구조 패널에서 계층을 확인할 수 있다. 변경 사항은 Windows의 Ctrl+Z 또는 Mac의 Command+Z로 되돌릴 수 있다. [12:51]
• 텍스트는 요소를 선택해 직접 입력한다. 버튼은 링크 필드에서 사이트의 페이지를 검색해 연결하고, 이미지는 미디어 라이브러리에서 선택하거나 새 파일을 업로드한다. 이미지에 제목과 대체 텍스트를 입력하면 SEO에 도움이 된다고 안내한다. [13:41]

7. 요소 추가·복제와 변경 사항 게시

• 기존 요소는 우클릭으로 삭제하고, 새 요소는 왼쪽 위 더하기 버튼으로 요소 패널을 열어 원하는 위치에 끌어 놓는다. 분홍색 표시가 삽입 위치를 보여주며, Elementor의 새 세대 요소 때문에 설정 패널이 달라도 기본 편집 방식은 같다. [14:38]
• 이미 원하는 스타일의 요소가 있다면 복제해 이동하면 처음부터 꾸미는 작업을 줄일 수 있다. 편집 내용은 Publish로 게시해야 방문자 화면에 반영되며, 상단 중앙의 페이지 이름에서 다른 페이지로 전환할 수 있다. [15:07]

8. 모바일 전용 설정과 전체 공통 설정 구분

• 방문자의 약 절반이 휴대전화로 사이트를 본다는 설명을 근거로, 페이지를 완성하기 전에 모바일 보기를 점검한다. 예제 템플릿은 데스크톱에서 왼쪽 정렬, 모바일에서 가운데 정렬을 사용한다. 설정 옆 기기 아이콘이 있는 항목만 기기별로 적용되고, 아이콘이 없는 설정은 모든 기기에 적용된다. [15:56]
• 글꼴 설정 안에도 기기별 옵션이 있어 모바일 제목의 크기를 줄여 한 줄로 맞출 수 있다. 반면 텍스트 내용은 모든 기기에서 공유된다. 작은 화면에 맞지 않는 요소는 Advanced의 Responsive에서 특정 기기에만 숨길 수 있다. [16:37]

9. 문의 폼 확인과 WPForms 편집 환경 준비

• 문의 폼은 개인 이메일 주소를 공개하지 않고 방문자의 메시지를 받은 뒤 받은편지함에서 답장할 수 있게 한다. 템플릿에 폼이 포함됐는지 먼저 확인하고, 어떤 플러그인을 사용하든 실제 메시지 도착까지 검증해야 한다. [18:00]
• 예제 폼은 Elementor 패널의 Edit WPForms 표시로 사용하는 플러그인을 확인할 수 있다. 편집 팝업이 계속 로딩된다면 팝업을 건너뛰고 워드프레스 관리자 메뉴의 WPForms에서 해당 폼을 직접 편집한다. [18:41]

10. 문의 항목과 알림 수신 주소를 사업에 맞게 수정

• 사진 촬영 사업에 맞춰 기존 예산 드롭다운의 오타를 수정하고 질문을 What are you planning으로 바꾼다. 금액 선택지는 웨딩 촬영·약혼 촬영·인물 촬영으로 교체하고, 기타 요청을 받을 선택지도 추가한다. 선택지는 더하기와 빼기 버튼으로 조정한다. [20:10]
• Settings의 General에서 제출 버튼 문구를 변경할 수 있다. 예제에서는 Check availability를 더 명확한 Send your message로 바꾼다. [20:28]

11. 문의 폼 삽입과 실제 이메일 수신 검증

• 폼을 저장한 뒤 새 폼의 자동 삽입 안내는 건너뛰고, 연락처 페이지를 Elementor로 연다. WPForms 위젯을 원하는 위치에 끌어 놓고 드롭다운에서 저장한 폼을 선택한 다음 게시한다. [21:36]
• 실제 페이지 미리보기에서 테스트 정보를 입력해 제출하고, 폼 자리에 접수 확인 메시지가 나타나는지 확인한다. 이 확인 문구도 WPForms 설정에서 변경할 수 있다. [21:53]

12. 새 페이지 생성과 페이지 레이아웃 선택

• 워드프레스 상단 관리 바의 New에서 Page를 선택하고 이름을 입력한다. 예제에서는 Gallery 페이지를 생성해 게시한 뒤 Elementor로 편집한다. 페이지 생성만으로 메뉴에 자동 추가되지는 않는다. [22:54]
• 새 페이지도 요소를 끌어 넣어 구성할 수 있다. Elementor의 페이지 설정에서는 제목, 게시 상태와 페이지 레이아웃을 변경한다. [23:11]

13. 메뉴에 페이지 추가하고 순서·하위 관계 조정

• 새 페이지를 방문자가 메뉴에서 찾게 하려면 외모의 Menus에서 직접 추가해야 한다. 최근 페이지 목록에 없다면 View All에서 페이지를 선택하고 Add to Menu를 누른다. [24:16]
• 메뉴 항목을 끌어 순서를 바꿀 수 있으며, 오른쪽으로 들여 놓으면 앞 항목의 하위 메뉴가 된다. 예제에서는 Gallery가 Services 아래로 들어간 상태를 왼쪽으로 옮겨 독립 항목으로 되돌린다. [24:45]

14. 공통 헤더·푸터와 브랜드 정보 편집

• 모든 페이지에 나타나는 헤더와 푸터는 Customizer에서 관리한다. Blocksy의 시각적 헤더 빌더는 행과 블록으로 구성되며, 로고·메뉴·검색·버튼을 각각 편집할 수 있다. 로고 없이 사이트 이름을 텍스트로 표시하는 방식도 가능하다. [25:51]
• 로고를 업로드하면 대체 텍스트를 사업 이름으로 지정하고 높이 슬라이더로 크기를 조정한다. 투명 배경의 PNG를 사용하면 헤더 위에 흰 사각형 없이 로고를 배치할 수 있다. 게시 후 새 탭에서 실제 표시 상태를 확인한다. [26:32]

15. 실제 도메인 등록과 인증·연결 대기

• hPanel의 Websites에서 임시 도메인을 사용하는 사이트를 찾아 도메인 연결을 시작한다. 원하는 주소를 검색해 첫해 무료 제공 여부를 확인하고, 개인 사이트에는 자신의 이름, 사업 사이트에는 사업 이름을 활용하되 짧고 기억하기 쉬운 이름을 권한다. 확장자는 방문자에게 익숙한 .com을 추천한다. [28:21]
• 자동 입력된 도메인 소유자의 이름·이메일·전화번호·주소를 확인한 뒤 등록한다. 잘못된 연락처는 추후 도메인 정지로 이어질 수 있다. 일부 사용자에게는 문자로 받은 6자리 코드를 입력하는 전화 인증이 추가되지만, 항상 나타나는 절차는 아니다. [28:56]

16. 자체 도메인 이메일 신청과 무료 플랜 선택

• 플랜에 포함된 이메일을 신청하려면 왼쪽의 ‘Emails’를 열고, 무료 이메일 신청 화면 하단에서 ‘Start free’를 클릭한다. [30:04]
• 이메일에 사용할 도메인을 선택한 뒤 ‘Next’를 클릭한다. 예시에서는 marissa.com을 선택한다. [30:26]

17. 메일함 생성과 웹사이트 구축 결과

• 주소 앞부분을 ‘hello’로 지정하면 [email protected]이 된다. 이메일 비밀번호를 설정하고 ‘Create mailbox’를 클릭해 메일함을 만든다. [30:47]
• 생성 확인 후 ‘Open inbox’를 클릭하면 Hostinger 메일 대시보드가 열린다. 호스팅 설정과 WordPress 설치를 거쳐 완성한 웹사이트는 휴대전화에서도 작동하며 방문자의 메시지를 받을 수 있다. [31:00]

🧾 결론

• 템플릿 설치는 출발점이다. 실제 콘텐츠, 모바일 화면, 메뉴, 문의 수신, 도메인 인증까지 확인해야 구축을 마쳤다고 볼 수 있다.
• 페이지 콘텐츠는 Elementor에서, 공통 헤더·푸터는 Blocksy의 Customizer에서 관리하므로 편집 대상에 맞는 화면을 사용해야 한다.
• 도메인 결정은 뒤로 미룰 수 있지만, 등록 후 소유자 정보 확인과 이메일 인증은 반드시 처리해야 한다.

📈 투자·시사 포인트

• 초기 구축 비용은 무료 테마·플러그인 활용으로 줄일 수 있다. 다만 호스팅 계약 기간, 갱신 가격, 무료 제공 기간을 함께 확인해야 비용 판단이 가능하다.
• 상위 요금제 선택은 필요한 기능에 따라 결정한다. 영상은 추가 기능이 필요하지 않으면 Premium으로 시작하고, 무제한 사이트나 일일 백업 등이 필요할 때 상위 플랜을 고려하도록 안내한다.
• 사업용 사이트에서는 문의 전달과 모바일 사용성이 실무상 중요한 점검 대상이다. 완성된 화면만 확인하지 말고 방문자가 연락을 보내고 운영자가 받는 과정까지 검증해야 한다.
• AI 제작 옵션의 빠른 초안 생성과 테마 변경·디자인 제어 사이의 제약을 비교필요가 있다. 영상의 선택은 직접 편집할 수 있는 구성을 우선하는 사례다.

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

• 요금제별 사이트 수, 추가 할인, 무료 도메인·이메일, 환불 조건은 영상의 안내다. 실제 구매 시점의 적용 조건과 갱신 가격을 확인해야 하며, 제휴 링크가 가장 저렴하다는 마무리 주장도 별도 비교가 필요하다.
• AI 제작 옵션의 헤더·푸터 제약과 테마 변경 문제는 제작자의 테스트 결과다. 현재 버전에서도 같은 문제가 발생하는지는 확인이 필요하다.
• 무료 이메일 신청 과정에는 Start free trial이라는 표현이 나온다. 무료 이용 기간, 한도와 이후 비용은 제공된 설명만으로 확정하기 어렵다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 필요한 사이트 수와 백업 기능을 정한 뒤 계약 기간별 선결제액·갱신 가격·무료 혜택 조건을 비교한다.
• WordPress 구축 옵션을 선택하고 Hostinger 계정과 별도인 WordPress 접속 정보를 안전하게 보관한다.
• Blocksy와 Elementor 템플릿의 예제 콘텐츠를 교체하고 버튼 링크, 메뉴, 헤더·푸터를 게시 후 확인한다.
• 모바일과 데스크톱 미리보기에서 정렬·글꼴·숨김 설정을 확인하고, 완성 후 LiteSpeed Cache를 다시 활성화한다.

❓ 열린 질문

• 필요한 사이트 수와 백업 수준을 고려하면 Premium으로 충분한가, 상위 요금제 기능이 필요한가?
• 선택한 템플릿은 실제 콘텐츠를 넣은 뒤에도 모바일에서 읽기 쉽고 문의 폼을 사용하기 편한가?
• 현재 제공되는 AI 제작 옵션은 원하는 테마 변경과 헤더·푸터 편집을 어느 정도 지원하는가?