# 사이트 개요

## 사이트 개요

방문자들이 찾아올 멋진 하이퍼클래스 사이트를 만들 준비가 되셨나요? 이 가이드에서는 사이트 빌더(Site Builder), 설정(Settings) 및 기타 다양한 기능을 자세히 살펴보겠습니다. 비즈니스를 한 단계 끌어올릴 시간입니다!

**목차**

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

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

사이트(Sites)는 하이퍼클래스에서 고객을 위한 웹사이트를 만들 수 있는 기능입니다. 비즈니스를 위한 완벽한 홈페이지를 제작하거나, 더 많은 리드를 확보할 수 있는 랜딩 페이지를 만들어 보세요. 가능성은 무한합니다.

하이퍼클래스에는 두 가지 유형의 사이트 빌더가 있으며, 비슷해 보이지만 각각 다른 기능을 제공합니다. 각 사이트 유형을 살펴보겠습니다.

* **퍼널(Funnels):** 일반적으로 퍼널은 매우 직접적인 페이지 순서를 가지고 있어, 퍼널에서만 분할 테스트를 제공합니다. 퍼널은 리드 확보나 예약 관리 등 특정 목적을 위한 단계별 웹페이지 시리즈입니다.
* **웹사이트(Websites):** 비즈니스 홈페이지 등 다양한 용도의 웹페이지를 구축하는 공간입니다. 일반적으로 연락처가 따라가는 특정한 진행 경로가 없기 때문에 웹사이트에서는 분할 테스트를 제공하지 않습니다.

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

***

### 퍼널과 웹사이트 중 무엇을 사용해야 하나요?

몇 가지 차이점을 제외하면 퍼널과 웹사이트는 동일합니다. 둘 다 웹페이지 그룹을 담고 있으며 선택에 관계없이 다양한 목적으로 사용할 수 있습니다. 중요한 것은 웹페이지에서 분할 테스트(Split Testing) 기능을 사용하고 싶은지와 페이지 뷰 UI입니다.

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

* [퍼널에서의 분할 테스트](/hyperclass-docs/and-sites/xml-sitemaps/split-testing-in-funnels.md) - 퍼널에서만 분할 테스트가 가능합니다. 퍼널의 분할 테스트는 페이지의 변형을 만들어 어느 것이 더 나은지 확인하는 기능입니다.
* [이커머스 (온라인 스토어)](/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를 선택하면 요구사항에 가장 적합한 원하는 도메인/산업을 선택할 수 있습니다.

![](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), 하나의 행(Row), 하나의 컬럼(Column)이 필요합니다. 그러면 요소를 추가하라는 메시지가 표시됩니다. 각각 고유한 여러 요소가 있습니다.

**참고:** 페이지 빌더 요소는 이제 새로 고쳐진 기본 스타일(업데이트된 타이포그래피, 플레이스홀더 이미지/콘텐츠, 기본 색상)을 사용하므로 새 페이지가 즉시 더 현대적으로 보입니다. 오른쪽 사이드바 설정, 색상 선택기 또는 브랜드 보드를 사용하여 여전히 스타일을 재정의할 수 있습니다.

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

요소를 더 빠르게 찾으려면 빠른 추가 검색(Quick Add Search)을 사용하세요. 정확한 요소 이름을 모르더라도 일반적이거나 관련된 키워드로 검색할 수 있습니다. 예를 들어 제목(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)

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

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

가장 큰 것부터 가장 작은 것까지:

섹션(Section, 녹색) > 행(Row, 파란색) > 컬럼(Column, 분홍색) > 요소(Element, 주황색)

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

![](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)

#### **레이어**

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

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

#### 페이지

페이지(Pages) 탭에서 퍼널이나 웹사이트 내의 다른 웹페이지를 보고 탐색할 수 있습니다. 여러 웹페이지를 편집할 때 웹페이지 간에 빠르게 이동할 수 있는 기능을 제공합니다. 오른쪽과 가운데 사이트 빌더 내비게이션 바에서 이 탭에 접근할 수 있습니다.

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

#### 추적 코드

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

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

#### 커스텀 CSS

웹사이트에 커스텀 CSS를 추가하고 싶을 때는 커스텀 CSS(Custom CSS) 탭에서 할 수 있습니다. 고유한 요구사항에 맞는 코드 사용 및 생성 방법은 개발자와 상의하시기 바랍니다.

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

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

타이포그래피(Typography)에서 웹페이지 제목과 콘텐츠의 기본 폰트뿐만 아니라 텍스트 및 링크 색상을 변경할 수 있습니다.

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

#### 배경

웹페이지의 기본 배경 이미지나 배경 색상을 변경하려면 배경(Background) 탭을 선택할 수 있습니다. 이는 섹션 뒤에 배경을 추가합니다. 섹션, 행, 컬럼 또는 요소에 배경 이미지나 색상이 설정되어 있으면 그것이 이 배경 뒤에 표시됩니다.

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

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

***

### **팝업 설정**

대부분의 사용자는 팝업을 싫어하지만, 불행히도 평판이 나쁨에도 불구하고 여전히 꽤 잘 전환됩니다. 팝업을 추가하고 싶을 때는 팝업(Pop Up)에서 할 수 있습니다. 선택한 후 오른쪽의 팝아웃 설정 메뉴를 사용하여 속성을 편집합니다.

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

버튼을 추가한 다음 버튼 액션으로 팝업을 배포하여 팝업을 표시할 수 있습니다. 또한 팝업 설정을 사용하여 종료 시나 시간 지연으로 "팝업 표시"를 할 수도 있습니다 - 팝업을 선택한 다음 오른쪽 설정을 확인하세요.

***

### **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/settings/user-access/sites-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.