# 웹사이트 개요

## 웹사이트 개요

방문자들이 찾아올 멋진 HighLevel 사이트를 만들 준비가 되셨나요? 이 글에서는 사이트 빌더, 설정 등을 자세히 안내해드리겠습니다. 이제 비즈니스를 한 단계 업그레이드할 시간입니다!

**목차**

* [사이트란 무엇인가요?](#사이트란-무엇인가요)
* [퍼널 vs 웹사이트, 어떤 것을 사용해야 하나요?](#퍼널-vs-웹사이트-어떤-것을-사용해야-하나요)
* [사이트 템플릿으로 시작하기](#사이트-템플릿으로-시작하기)
* [퍼널 AI로 시작하기](#퍼널-ai로-시작하기)
* [사이트 빌더 개요](#사이트-빌더-개요)
* [새 요소 추가하기](#새-요소-추가하기)
* [패딩과 마진](#패딩과-마진)
* [요소 이동하기](#요소-이동하기)
* [컬럼 순서 바꾸기 (간단한 단계)](#컬럼-순서-바꾸기-간단한-단계)
* [요소 복제하기](#요소-복제하기)
* [팝업 설정](#팝업-설정)
* [SEO 메타 데이터](#seo-메타-데이터)
* [커스텀 코드 미리보기](#커스텀-코드-미리보기)
* [2컬럼 모드 vs 자동 모드](#2컬럼-모드-vs-자동-모드)
* [실행취소/다시실행](#실행취소다시실행)
* [버전, 미리보기, 저장, 발행](#버전-미리보기-저장-발행)
* [사이트의 모바일 뷰 편집하기](#사이트의-모바일-뷰-편집하기)
* [모바일 모드](#모바일-모드)
* [요소를 모바일/데스크톱 전용으로 표시 설정](#요소를-모바일데스크톱-전용으로-표시-설정)
* [모바일 반응형 설정](#모바일-반응형-설정)
* [사이트 설정 및 발행](#사이트-설정-및-발행)
* [사이트 페이지에 상품 연결하기 (주문 양식)](#사이트-페이지에-상품-연결하기-주문-양식)
* [사이트 통계](#사이트-통계)
* [사이트 매출](#사이트-매출)
* [사이트 설정](#사이트-설정)
* [발행/페이지 설정](#발행페이지-설정)
* [자주 묻는 질문](#자주-묻는-질문)

## **사이트란 무엇인가요?**

사이트(Sites) 기능을 통해 HighLevel에서 고객을 위한 웹사이트를 만들 수 있습니다. 비즈니스를 위한 완벽한 홈페이지를 만들어보세요. 더 많은 리드를 수집하는 랜딩 페이지를 빠르게 제작할 수도 있습니다. 가능성은 무한합니다.

HighLevel에는 두 가지 유형의 사이트 빌더(Site Builder)가 있습니다. 비슷하지만 서로 다른 기능을 제공합니다. 각 유형을 살펴보겠습니다.

* **퍼널(Funnels):** 일반적으로 퍼널은 매우 직선적인 페이지 순서를 가지며, 이것이 퍼널에서만 A/B 테스트를 제공하는 이유입니다. 퍼널은 단계별 웹페이지 시리즈로, 일반적으로 리드 수집이나 예약 접수 같은 특정 목적으로 사용됩니다.
* **웹사이트(Websites):** 비즈니스 홈페이지처럼 어떤 용도든 웹페이지를 구축하는 공간입니다. 일반적으로 연락처가 따라가는 진행 경로가 없기 때문에 웹사이트에서는 A/B 테스트를 제공하지 않습니다.

퍼널과 거의 동일한 목적으로 웹사이트를 사용할 수 있지만, 웹사이트는 몇 가지 작은 차이점이 있습니다.

***

### 퍼널 vs 웹사이트, 어떤 것을 사용해야 하나요?

몇 가지 차이점을 제외하면 퍼널과 웹사이트는 동일합니다. 둘 다 여러 웹페이지를 담고 있으며, 어떤 것을 선택하든 다양한 목적으로 사용할 수 있습니다. 중요한 것은 웹페이지에서 A/B 테스트 기능을 사용하고 싶은지와 페이지 뷰 UI입니다.

퍼널과 웹사이트의 주요 차이점:

* [퍼널에서 A/B 테스트](/hyperclass-docs/and-sites/xml-sitemaps/split-testing-in-funnels.md) - 퍼널에서만 A/B 테스트가 가능합니다. 퍼널의 A/B 테스트는 페이지의 변형을 만들어 어느 것이 더 나은지 확인하는 것입니다.
* [이커머스 (온라인 스토어)](/hyperclass-docs/e-commerce/how-to-set-up-an-e-commerce-online-store-websites.md) - 웹사이트만 이커머스(온라인 스토어) 기능을 만들고 활용할 수 있습니다.
* 페이지 뷰 UI - 퍼널 뷰와 웹사이트 뷰에 따라 페이지 뷰 UI가 다릅니다.

![퍼널과 웹사이트 차이점](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037847868/original/CAuF9LotWoqox385UOXQgWQWMlAiJ515PA.png?1733432307)

### 사이트 템플릿으로 시작하기

새 사이트를 만들 때 수백 개의 템플릿 중에서 선택할 수 있습니다. 템플릿을 선택하면 선택한 후 모든 부분을 편집할 수 있습니다. 모든 템플릿을 확인해보시기를 권합니다!

템플릿을 선택하면 템플릿이 로드됩니다. 아직 하지 않았다면 "편집(Edit)" 페이지를 클릭하여 페이지 중 하나로 이동해서 사이트 빌더를 열어 특정 페이지를 편집하세요.

![사이트 템플릿 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037848015/original/yg-l6vmXyYdQr3w8ja3d4w33rG9w-l7NzQ.png?1733432696)

### 퍼널 AI로 시작하기

새 퍼널을 만들 때 AI를 사용하여 퍼널을 만드는 새로운 기능이 있습니다. 퍼널 AI를 선택하면 요구사항에 가장 적합한 원하는 도메인/업계를 선택할 수 있습니다.

![퍼널 AI 사용하기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037848309/original/sO-FbiUvERb6d0YnvkndribWb71Lli59lw.gif?1733433571)

**참고:** 5회 무료 생성 후 $0.99가 청구됩니다.

계속 진행하면 디자인 선호도와 콘텐츠 선호도를 기반으로 자신만의 디자인 선호도를 선택할 수 있습니다. AI에게 잠시 시간을 주면 디자인 템플릿이 준비됩니다!

### **사이트 빌더 개요**

퍼널과 사이트 빌더 모두에서 동일한 기능과 요소 계층이 존재합니다. 사이트 빌더를 살펴보고 사이트를 만드는 데 어떻게 사용하는지 확인해보겠습니다.

**사이트 빌더 네비게이션 바**

사이트 빌더 네비게이션 바는 빌더 상단에 위치하며 다양한 기능들을 전환할 수 있게 해줍니다. 아래에서 각 탭을 검토해보겠습니다.

![사이트 빌더 네비게이션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037892421/original/kOQUF5bxpP2UpxrOWkP2KWui9UhXoHwlQg.png?1733492720)

### 새 요소 추가하기

행(Row)과 컬럼(Column)은 사이트의 기본 구성 요소이며 요소(Element)를 담는 데 사용됩니다. 이미지 같은 요소를 추가하려면 최소한 하나의 섹션(Section), 하나의 행, 하나의 컬럼이 필요합니다. 그러면 요소를 추가하라는 메시지가 나타납니다. 여러 요소가 있으며, 각 요소는 고유합니다.

**참고:** 페이지 빌더 요소는 이제 새로운 기본 스타일링(업데이트된 타이포그래피, 플레이스홀더 이미지/콘텐츠, 기본 색상)을 사용하므로 새 페이지가 처음부터 더 모던하게 보입니다. 우측 사이드바 설정, 컬러 피커, 또는 브랜드 보드를 사용하여 여전히 스타일을 재정의할 수 있습니다.

이제 사이트에 요소를 추가해보겠습니다. 사이트 편집기의 우측 상단에서 "요소 추가(Add Element)"를 선택하여 추가할 수 있는 항목을 확인하세요.

요소를 더 빠르게 찾으려면 빠른 추가 검색을 사용하세요. 정확한 요소 이름을 모르더라도 일반적인 키워드나 관련 키워드로 검색할 수 있습니다. 예를 들어 제목(Heading)을 찾기 위해 "headline" 또는 "title"로, 캘린더(Calendar)를 찾기 위해 "booking" 또는 "schedule"로, 이미지 슬라이더(Image Slider)를 찾기 위해 "slider"로 검색하세요.

원하는 요소를 찾으면 클릭하고 원하는 영역으로 드래그하세요.

퍼널이나 사이트를 편집할 때 이미지나 파일을 선택하면 미디어 선택기가 모달에서 열리고 드래그 앤 드롭을 통한 즉석 업로드를 지원합니다.

![요소 추가하기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037892771/original/hSF08VfaaSAKddbMW1YdH7_ekjx_TC3eOQ.gif?1733493054)

#### 요소 중첩 이해하기

웹페이지의 모든 요소에는 섹션이 필요합니다. 이 섹션 내에는 최소한 하나의 행이 있어야 합니다. 이 행에는 최소한 하나의 컬럼이 필요합니다. 이 세 가지(섹션 > 행 > 컬럼)를 모두 추가하면 + 요소 추가 바에서 요소를 추가할 수 있습니다.

크기 순으로 나열하면:

섹션(초록색) > 행(파란색) > 컬럼(분홍색) > 요소(주황색)

**참고:** 계층구조는 여전히 존재하지만(섹션 → 행 → 컬럼 → 요소), 향상된 드래그 앤 드롭 기능으로 빌더가 캔버스에 요소를 떨어뜨릴 때 구조를 자동으로 생성할 수 있습니다.

![요소 계층구조](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155016416833/original/DnfQCyv0NrNZdsKFMrKXJu3e2uRQu8KhCg.png?1703884046)

섹션, 행, 컬럼에 대해...

* 섹션 안에 섹션을 추가할 수 없습니다. 행 안에 행을 추가하거나 컬럼 안에 컬럼을 추가할 수도 없습니다. 또한 요소 안에 요소를 추가할 수 없습니다.
* 섹션에 여러 행을 추가할 수 있습니다. 행 내에서 여러 컬럼을 추가할 수 있습니다. 컬럼 내에서 여러 요소를 추가할 수 있습니다.
* 요소를 추가하려면 최소한 하나의 섹션, 하나의 행, 하나의 컬럼이 있어야 합니다.

#### 요소 설정

특정 섹션, 행, 컬럼, 또는 요소를 편집하려면 요소 위에 마우스를 올린 다음 나타나는 기어 설정 아이콘을 클릭하세요. 또한 요소의 어느 부분을 클릭해도 우측에 팝아웃 설정 메뉴가 자동으로 열립니다.

![요소 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037895259/original/KOlM0cCLvHriHUm6DSl-Kd7ipW6PMWAETA.png?1733494932)

이 설정에서 패딩, 마진을 추가하고, 표시 설정을 변경하는 등 많은 작업을 할 수 있습니다. 또한 사이트를 훌륭하게 만드는 데 사용할 수 있는 더 많은 설정을 제공하는 "일반(General)" 및 "고급(Advanced)" 탭에 주목하세요.

### 패딩과 마진

웹페이지의 요소를 이동하거나 요소 간에 공간을 두고 싶을 때 패딩(Padding)이나 마진(Margin)을 조정해야 합니다. 이는 객체 설정에서 수행되며, 객체를 클릭하면 우측에 이 설정 메뉴가 팝아웃됩니다.

**패딩** - 섹션, 행, 컬럼, 또는 요소 내부에 공간을 추가합니다. 패딩은 객체의 외부에서 안쪽으로 공간을 추가합니다.

**마진** - 섹션, 행, 컬럼, 또는 요소 외부에 거리를 추가합니다. 다른 객체들과의 간격을 만듭니다.

### 요소 이동하기

객체 위에 마우스를 올릴 때 보이는 위아래 화살표를 사용하여 객체를 이동할 수 있습니다. 이는 주변 요소를 기준으로 요소를 위아래로 이동시킵니다. 또한 객체 위에 마우스를 올리고 이동 아이콘을 클릭하여 누른 상태로 유지하면 객체를 이동할 수 있습니다. 누른 상태를 해제하면 새 위치에 놓입니다.

![요소 이동하기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037895757/original/be6Ukb483TviZIsk_FOVE_kwSkT5R6dH3A.png?1733495249)

객체를 두 가지 방법으로 이동할 수 있습니다:

* **옵션 1:** 위/아래 화살표(사용 가능한 경우)로 주변 요소를 기준으로 객체를 위아래로 이동합니다.
* **옵션 2:** 드래그 앤 드롭: 객체 어디든 잡고 새 위치로 드래그한 다음 놓아서 떨어뜨립니다(이동 아이콘/핸들 불필요).

Agency View → Labs에서 향상된 드래그 앤 드롭이 활성화되면 요소의 어디든 드래그하여 요소를 이동할 수도 있습니다.

### 컬럼 순서 바꾸기 (간단한 단계)

* 행 위에 마우스를 올려 컬럼 경계와 드롭 영역을 표시합니다.
* 동일한 행 내에서 컬럼을 좌우로 드래그합니다.
* 배치 표시자가 새 위치를 보여줄 때 놓습니다.
* 태블릿/모바일 뷰를 검토하여 반응형 순서가 여전히 올바르게 보이는지 확인합니다.

**참고:** 순서 바꾸기는 현재 동일한 행 내에서만 가능합니다. (확인 필요: 행 간 이동이 지원되는지 여부)

### 요소 복제하기

어떤 객체든 마우스를 올리면 해당 객체와 그 안의 모든 것을 복제할 수 있습니다. 복제된 섹션 내의 모든 설정과 객체가 복사되어 아래에 추가됩니다. 형식이나 객체를 다시 사용하거나 사이트 페이지의 다른 곳에서 사용하고 싶을 때 좋습니다.

![요소 복제하기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037896447/original/NAeJWJHwNk3MZ5LVYtq37yXfLHt1csFdOQ.png?1733495694)

#### 요소 삭제하기

객체를 삭제하거나 제거해야 하는 경우, 객체 위에 마우스를 올린 다음 휴지통 기호를 선택하세요. 객체가 삭제됩니다. 필요한 경우 실행취소/다시실행을 사용하여 다시 추가할 수 있습니다.

![요소 삭제하기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037896603/original/rLLWqKRHu9JlmdAxVlZpp29PAdyYDmA6ew.png?1733495811)

#### **레이어**

레이어는 다양한 객체들이 웹사이트 객체 계층 내에 어떻게 중첩되어 있는지 볼 수 있도록 도와줍니다. 객체를 잘못 배치했거나 모바일과 데스크톱 뷰 모두에서 숨겼을 때 유용합니다.

![레이어](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037896897/original/q5g_wuAj9elgIDCrHXCDc1c2Z-Lj4V3_wg.png?1733496038)

#### 페이지

페이지 탭에서 퍼널이나 웹사이트 내의 다른 웹페이지를 보고 이동할 수 있습니다. 여러 웹페이지를 편집할 때 웹페이지 간에 빠르게 이동할 수 있습니다. 우측과 중앙 사이트 빌더 네비게이션 바 모두에서 이 탭에 접근할 수 있습니다.

![페이지](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037897228/original/v2L-D28zl_JgZ516_FI48vyZIIa698cjJA.png?1733496250)

#### 추적 코드

웹페이지의 헤더나 푸터에 추적 코드를 추가하고 싶은 경우, 이 추적 코드 페이지에서 할 수 있습니다.

![추적 코드](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037897973/original/MzfHqtqyAIE_lB5kP4qgrzyGvfvzBmeOZQ.png?1733496827)

#### 커스텀 CSS

웹사이트에 커스텀 CSS를 추가하고 싶을 때 커스텀 CSS 탭에서 할 수 있습니다. 고유한 요구사항에 맞는 코드를 사용하고 만드는 방법은 개발자와 상담하세요.

![커스텀 CSS](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037897799/original/CekQXF8ZeS7yReGWnQ2q0Cys8OXixvCW3w.png?1733496715)

#### **타이포그래피**

타이포그래피에서 웹페이지 제목과 콘텐츠의 기본 폰트, 그리고 텍스트와 링크 색상을 변경할 수 있습니다.

![타이포그래피](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037898093/original/3MYjaiNHJ9_IAlVpMCXkwd9UWaNupUxD9g.png?1733496931)

#### 배경

웹페이지의 기본 배경 이미지나 배경 색상을 변경하려면 배경 탭을 선택하세요. 섹션 뒤에 배경을 추가합니다. 섹션, 행, 컬럼, 또는 요소에 배경 이미지나 색상을 설정하면 이것의 뒤에 위치합니다.

![배경](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037898231/original/Xy0T7GQvISncWbZ1NrHrYVWgZA02xeN4Lw.png?1733497032)

섹션에 비디오 배경을 설정하고 싶으신가요? 여기서 방법을 알아보세요: [비디오 배경](/hyperclass-docs/miscellaneous/video-background.md)

***

### **팝업 설정**

대부분의 사용자는 팝업을 좋아하지 않지만, 슬픈 사실은 평판이 나쁨에도 불구하고 여전히 꽤 잘 전환된다는 것입니다. 팝업을 추가하고 싶을 때 팝업에서 할 수 있습니다. 선택한 후 우측의 팝아웃 설정 메뉴를 사용하여 속성을 편집합니다.

![팝업 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037898431/original/-PYgTWlbqH5WqlRSm1RPjjJLZl084lr3Ng.png?1733497163)

버튼을 추가한 다음 버튼 액션이 팝업을 배포하도록 하여 팝업을 표시할 수 있습니다. 또한 팝업 설정을 사용하여 종료 시나 시간 지연에 "팝업 표시" - 팝업을 선택한 다음 우측의 설정을 확인하세요.

***

### **SEO 메타 데이터**

여기서 SEO 메타데이터를 편집할 수 있으며, 이는 검색 시 검색 엔진 결과에 표시됩니다. 또한 브라우저의 탭 설정, 사이트 링크를 공유할 때 등에 표시됩니다. 작아 보일 수 있지만 SEO 설정을 하는 것은 중요합니다 - 검색 엔진이 사이트를 찾는 데 도움이 되고 링크를 공유할 때 사용자가 링크를 신뢰하는 데 도움이 됩니다.

![SEO 메타 데이터](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155037899016/original/hw4l9k9n0RKkYQqKt7sV5njzDuwhe-oVew.png?1733497538)

***

### \*\*커스텀 코드


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-sites/xml-sitemaps/websites-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.