웹사이트를 구축하는 것은 예전엔 누군가를 고용해야 하는 프로젝트처럼 느껴졌습니다. 이제는 그렇지 않습니다.
저는 Hostinger Website Builder를 사용해 왔으며, 이 가이드에서는 로그인 순간부터 사이트가 라이브로 전환될 때까지 전체 과정을 단계별로 안내해 드립니다.
시작해보겠습니다.
Hostinger Website Builder란 무엇인가?
Hostinger Website Builder는 AI 기반의 드래그 앤 드롭 웹사이트 빌더로, Hostinger 계정에 직접 내장되어 있습니다.
코드를 설치할 필요도, 코딩 지식도, 디자인 배경 지식도 필요 없습니다. 원하는 내용을 설명하면 AI가 완전한 웹사이트를 생성해 주며, 이후에는 브랜드에 맞게 맞춤 설정할 수 있습니다.
가장 빠르게 무에서 유로 전문적인 웹사이트를 완성하는 방법 중 하나입니다.
1단계: 로그인하고 빌더로 이동하기
Hostinger 계정에 로그인하면 hPanel이라는 메인 대시보드로 이동합니다. 여기에서 웹사이트, 도메인, 이메일 및 결제 관리를 모두 할 수 있습니다.
왼쪽 사이드바에서 Websites를 클릭하세요. 아래에 드롭다운 메뉴가 나타나면 Websites list를 선택합니다.
이제 계정에 연결된 모든 웹사이트가 표시되는 Websites list 페이지에 있습니다.
페이지 우측 상단의 보라색 + Add website 버튼을 클릭하세요.
드롭다운 메뉴에 다음 네 가지 옵션이 표시됩니다:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
여기서 Hostinger Website Builder를 클릭하세요. “AI 기반 드래그 앤 드롭 웹사이트 빌더”입니다.
2단계: AI에 웹사이트 설명하기
Hostinger Website Builder를 선택하면 “Let AI create your online presence.”라는 제목의 설정 화면이 나타납니다.
여기에서 AI에게 구축할 웹사이트 유형을 알려줍니다.
큰 텍스트 상자에 “웹사이트나 비즈니스에 대해 설명하세요.”라는 자리표시자가 보입니다. 이 입력란이 프롬프트 상자이며, 여기에 입력한 내용이 AI가 생성할 모든 것을 결정합니다. 자세히 입력할수록 결과가 더 좋아집니다.
텍스트 상자 아래에는 “Create a business website”, “Create an online store”, “Design a portfolio”, “Launch an appointments website”, “Start a blog”, “Launch a restaurant website”, “Create a one pager website”와 같은 빠른 시작 제안이 표시됩니다.
제안 중 하나를 클릭하면 초안 프롬프트가 입력되고, 이를 수정하거나 확장할 수 있습니다.
화면 맨 아래에는 Pre-made templates와 Link in bio website 링크가 있습니다.
AI를 건너뛰고 기존 디자인을 살펴보고 싶다면 Pre-made templates를 클릭하세요.
소셜 미디어 프로필용 간단한 단일 페이지 사이트가 필요하다면 Link in bio 옵션을 확인해 보세요.
그러나 실제 웹사이트를 구축하는 대부분의 경우 AI 프롬프트 상자를 사용하는 것이 좋습니다.
좋은 AI 프롬프트 작성법
이 과정에서 가장 중요한 부분입니다. AI 프롬프트를 디자이너에게 주는 브리핑이라고 생각하세요. 비전을 명확히 전달할수록 AI 결과가 실제 원하는 것에 가까워집니다.
이 가이드에서는 크리에이티브 에이전시용 웹사이트를 구축하기 위해 다음과 같은 프롬프트를 사용했습니다:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
프롬프트가 구체적입니다. 산업, 톤, 레이아웃 스타일, 필요한 페이지, 홈페이지 구조, 콘텐츠 목표를 모두 포함했습니다. 이 정도 세부 정보가 있으면 AI가 더 좋은 기초 위에서 작업할 수 있습니다.
설명을 입력하면 텍스트 상자 오른쪽 상단에 Improve description 버튼이 나타납니다.
제출 전에 이 버튼을 클릭하세요. AI가 프롬프트를 확장하고 다듬어 놓치기 쉬운 부분을 보완해 줍니다.
준비가 되면 텍스트 상자 오른쪽 하단의 보라색 arrow button(전송 아이콘)을 클릭하여 프롬프트를 제출하고 생성 과정을 시작하세요.
3단계: AI가 사이트를 구축할 때까지 기다리기
프롬프트를 제출하면 Hostinger의 AI가 즉시 작업을 시작합니다. 전체 화면에 짙은 보라색 배경의 로딩 애니메이션이 나타나고, “Looking for matching pictures…”라는 메시지와 진행 상태를 나타내는 진행 막대가 표시됩니다.
이 단계는 보통 30초에서 60초 정도 걸립니다. 이 동안 AI는 페이지 레이아웃 생성, 웹사이트 카피 작성, 스톡 이미지 라이브러리에서 적합한 이미지 선택, 내비게이션 구축 및 전체 사이트 구조화를 수행합니다.
로딩 중에는 탭을 닫지 말고 기다리세요.
4단계: AI가 구축한 결과 검토하기
AI가 완료되면 새로 생성된 웹사이트 미리보기가 표시됩니다. 결과 화면을 보면 정말 흥미롭습니다.
화면 왼쪽에는 생성된 사이트의 라이브 미리보기가, 오른쪽에는 “Your idea summary” 패널이 표시됩니다. 패널에는 제출한 프롬프트 요약과 프롬프트를 수정하거나 업데이트하여 다시 생성할 수 있는 Edit idea 버튼이 있습니다.
제 경우 AI가 사이트 이름을 “BoldCraft Studio”로 지정했고, “Crafting Bold Brands That Shine”라는 헤드라인과 설명, “Start Now”와 “Get Quote”라는 두 개의 콜투액션 버튼이 있는 홈페이지를 생성했습니다.
내비게이션 바에는 요청한 Home, About, Services, Portfolio, Blog, Contact 총 여섯 개 페이지가 포함되어 있었습니다.
미리보기 화면 왼쪽 상단에는 AI가 고려한 대안 디자인을 살펴볼 수 있는 Previous versions와 결과를 평가할 수 있는 Rate site 버튼이 있습니다.
오른쪽 상단에는 데스크톱 및 모바일 보기 아이콘이 있습니다. 사이트가 모바일에서 어떻게 보이는지 미리 확인하는 것이 좋습니다.
전체 방향이 마음에 들면 오른쪽 패널의 보라색 Continue 버튼을 클릭하여 본격적인 편집 화면으로 이동하세요.
결과가 마음에 들지 않으면 Edit idea를 클릭하여 프롬프트를 수정한 뒤 다시 생성할 수 있습니다. 원하는 만큼 반복하세요.
5단계: 에디터 인터페이스 익히기
에디터는 대부분의 시간을 보내게 될 곳입니다. 처음 진입하면 클릭하기 전에 레이아웃을 잠시 살펴보세요.
에디터에는 두 가지 주요 영역이 있습니다:
- 웹사이트 캔버스로, 실시간으로 사이트를 보고 상호작용할 수 있는 중앙 영역
- 제어 패널이 있는 왼쪽의 좁은 수직 사이드바
사이드바의 각 메뉴는 다음과 같은 기능을 제공합니다:
- Setup: 사이트 기본 설정, 연결된 도메인 및 요금제 정보 접근
- Elements: 드래그 앤 드롭 콘텐츠 블록 추가 패널
- Pages: 모든 페이지 표시, 전환, 추가, 이름 변경, 순서 변경, 삭제 가능
- Styles: 전역 디자인 설정(글꼴, 색상 팔레트, 버튼 스타일). 전체 사이트에 일괄 적용
- AI tools: Hostinger의 쓰기 및 콘텐츠 AI 도구 접근
- Blog: 블로그 게시물 생성 및 관리(블로그가 있는 경우)
- Store: 제품 판매를 위한 온라인 스토어 설정(상위 요금제 필요)
- SEO: 메타 제목, 설명 등의 검색 최적화 설정
- More: Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, Help and Resources 등 추가 도구
에디터 상단 툴바에는 왼쪽부터 데스크톱/모바일 미리보기 토글, 실행 취소/다시 실행 버튼, Connect domain 버튼, Preview 버튼, 초록색 Go live 버튼이 있습니다.
6단계: 콘텐츠 편집하기
이제 사이트를 직접 편집하여 개성 있게 만듭니다. 웹사이트 캔버스를 클릭하세요.
페이지의 어떤 섹션 위로 마우스를 올리면 왼쪽 상단에 “Section” 또는 “Header” 같은 파란색 레이블이 나타나고, 그 섹션 위에 작은 툴바가 표시됩니다.
섹션 툴바에는 왼쪽부터 Edit section(배경 이미지/색상, 패딩, 레이아웃 설정), Generate image(AI 이미지 생성기), 복제, 표시/숨기기 토글, 삭제, 위/아래 이동 화살표, 기타 옵션 메뉴가 있습니다.
텍스트를 편집하려면 해당 텍스트를 클릭하고 입력을 시작하세요. 텍스트 요소가 편집 모드로 전환되고 글꼴 크기, 굵기, 정렬, 색상 등의 서식 지정 옵션이 나타납니다.
이미지를 변경하려면 클릭하세요. 내 파일에서 업로드, Hostinger 스톡 이미지 라이브러리 탐색, AI 생성 중 하나를 선택할 수 있습니다.
먼저 홈페이지를 완성한 후 Pages 패널을 사용해 다른 페이지로 전환하며 각각을 편집하세요.
7단계: AI 이미지 생성기 사용하기
전문 사진이 없다면 AI 이미지 생성기는 정말 유용합니다.
페이지 섹션 위로 마우스를 올리고 섹션 툴바의 Generate image를 클릭하세요. 오른쪽에서 패널이 슬라이드 인됩니다.
패널에는 “Image description” 텍스트 상자가 있습니다. 원하는 이미지에 대한 설명을 입력하세요.
구체적이고 시각적인 설명일수록 결과가 좋습니다. 최대 3,000자까지 입력할 수 있으며, 품질 지표가 실시간으로 표시됩니다.
예: “A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office”라고 입력하면 “Great description!”라는 메시지와 함께 품질 막대가 가득 찹니다.
설명이 마음에 들면 Create images 버튼을 클릭하세요. AI가 여러 이미지를 생성해 줍니다.
AI 이미지 생성기는 Business 요금제 이상에서만 사용할 수 있습니다. Premium 요금제 사용자라면 업그레이드 안내가 표시됩니다.
8단계: 페이지에 새 요소 추가하기
페이지에 없는 콘텐츠 블록을 추가하려면 왼쪽 사이드바에서 Elements를 클릭하세요.
텍스트, 버튼, Affiliate link, Add to bag, 이미지, 갤러리, 비디오, 도형, 카드, 지도, Instagram 피드, 연락처 폼 등 다양한 요소가 표시됩니다. 원하는 요소를 끌어다 캔버스 원하는 위치에 놓으면 됩니다.
배치 후 클릭하여 개별 설정과 스타일 옵션을 조정하세요.
AI가 생성한 레이아웃에 얽매이지 않고 언제든지 요소를 추가, 제거, 재배치할 수 있습니다.
9단계: 페이지 관리하기
왼쪽 사이드바에서 Pages를 클릭하면 모든 페이지가 표시됩니다. 페이지 이름을 클릭해 해당 페이지로 이동할 수 있습니다.
새 페이지를 추가하려면 플러스 버튼을 사용하세요. 내비게이션에 표시되는 순서를 변경하려면 목록에서 드래그하세요.
AI가 생성한 페이지 중 필요 없는 것은 여기에서 삭제할 수 있습니다. 추가로 필요한 Testimonials 페이지나 Pricing 페이지 같은 것은 직접 추가하고 Elements 패널로 구성하세요.
10단계: SEO 설정하기
게시 전에 SEO 설정을 해야 합니다. 많은 사람이 이 단계를 건너뛰지만, 실수입니다.
15분만 투자해 SEO 설정을 제대로 하면 Google 검색 유입에 큰 차이를 만들 수 있습니다.
왼쪽 사이드바에서 SEO를 클릭해 “Let’s be found on Google (SEO)” 패널을 엽니다.
패널은 두 부분으로 나뉩니다. 왼쪽에는 모든 페이지 목록이, 오른쪽에는 비즈니스 이름과 사이트 언어를 보여주는 Website overview가 있습니다. 올바르지 않다면 Edit를 클릭해 수정하세요.
사이트 개요 아래에 “Some pages require your attention.”라는 섹션이 있습니다.
주의가 필요한 페이지 옆에는 주황색 경고 아이콘이 표시됩니다. 왼쪽 패널에서 해당 페이지를 클릭해 메타 제목과 메타 설명을 작성하세요.
모든 페이지를 꼼꼼히 채우세요. 좋은 메타 제목은 주요 키워드를 포함하고 60자 이하, 메타 설명은 페이지 내용을 요약하며 160자 이하를 권장합니다. Google 검색 결과에 표시되는 스니펫이므로 몇 분만 투자해도 큰 효과가 있습니다.
11단계: 도메인 연결하기
아직 커스텀 도메인을 연결하지 않았다면 지금이 적기입니다. 에디터 상단 툴바에서 Connect domain 버튼을 클릭하세요.
이미 도메인이 있다면 DNS 설정을 Hostinger 서버로 업데이트하여 연결할 수 있고, 없다면 이 화면에서 도메인을 구매할 수 있습니다.
도메인을 연결하기 전에는 임시 Hostinger 서브도메인(예: yoursite.builder-preview.com)으로 사이트에 접근할 수 있습니다. 테스트용으로는 문제가 없지만, 공개 전에 정식 도메인을 설정하세요.
12단계: 사이트 미리보기 및 라이브 전환
마지막으로 게시하기 전에 에디터 상단 툴바의 Preview 버튼을 클릭하세요.
방문자가 보게 될 화면을 전체 화면으로 미리볼 수 있습니다. 데스크톱 및 모바일 아이콘을 클릭해 두 화면을 모두 확인하세요.
특히 모바일에서 히어로 섹션이 어떻게 보이는지, 내비게이션이 어떻게 접히는지, 이미지가 의도치 않게 잘리는지 확인하세요.
모두 만족스러우면 에디터로 돌아와 오른쪽 상단의 초록색 Go live 버튼을 클릭하세요. 사이트가 이제 인터넷에 게시됩니다.
13단계: 통합 기능 탐색하기
사이트가 라이브된 후에는 왼쪽 사이드바에서 More > Integrations로 이동해 통합 기능을 살펴보세요.
Integrations 패널에서는 Shippo(배송 라벨 생성 및 주문 관리), Printful(주문형 인쇄 상품 판매), Hostinger Reach(이메일 마케팅 및 뉴스레터), Google Ads(유료 광고 캠페인 실행), Custom code(HTML/CSS/JavaScript 추가) 등을 연결할 수 있습니다.
통합 기능을 활성화하려면 옆의 Get started를 클릭하고 안내에 따라 연결한 후 사이트를 다시 게시하세요.
Hostinger Website Builder를 최대한 활용하기 위한 팁
AI 프롬프트는 구체적으로 작성하세요. 두 문장짜리 프롬프트는 일반적인 결과를 만듭니다. 산업, 대상 고객, 디자인 선호, 페이지 구조, 톤을 포함한 자세한 프롬프트는 실제 원하는 결과에 더 가까워집니다. 5분 동안 제대로 된 브리프를 작성하면 이후 편집 시간을 크게 절약할 수 있습니다.
항상 Improve description 버튼을 사용하세요. 쉽게 놓칠 수 있지만 정말 유용합니다. AI가 모호한 부분을 구체적인 디자인 및 콘텐츠 지시로 바꿔 줍니다.
카피를 꼼꼼히 수정하세요. AI가 생성한 카피는 초안으로 적당하지만, 귀하의 비즈니스를 정확히 알 수는 없습니다. 모든 페이지의 텍스트를 실제 서비스, 가치, 목소리에 맞춰 다시 작성하세요.
게시 전 모바일 뷰를 확인하세요. Hostinger는 자동으로 반응형을 지원하지만, 이미지 및 간격이 모바일에서 미세 조정이 필요할 수 있습니다. 라이브 전 모바일 미리보기를 꼭 확인하세요.
모든 페이지에 SEO를 설정하세요. 홈페이지뿐 아니라 모든 페이지에 메타 제목과 설명을 작성하세요. 페이지당 몇 분씩 투자하는 것만으로 검색 가시성을 크게 향상시킬 수 있습니다.
미디어 라이브러리를 사용해 정리하세요. More > Media library에서 모든 이미지를 한곳에서 관리하면 여러 페이지에서 이미지를 재사용하고 사이트 전체의 일관성을 유지하기 쉽습니다.
시간을 두고 개선하세요. 사이트 게시가 끝이 아니라 시작입니다. 비즈니스가 발전함에 따라 정기적으로 콘텐츠를 업데이트하고 블로그를 추가하며 페이지를 다듬어 나가세요.
Hostinger Website Builder는 전문적인 웹사이트를 만드는 데 있던 거의 모든 장벽을 제거합니다. AI가 디자인과 카피의 무거운 부분을 처리하고, 에디터가 맞춤 설정을 쉽게 해 주며, 내장된 SEO 및 통합 기능으로 모든 필요한 도구를 한곳에서 제공합니다.
이 가이드의 단계를 따르면 1시간 이내에 라이브되고 완성도 높은 웹사이트를 만들 수 있습니다.
