# 시작하기 - 빈 페이지에서 웹사이트 만들기
처음부터 웹사이트를 만드는 것이 막막하게 느껴질 수 있지만, 빈 페이지 때문에 포기하지 마세요. 이 가이드를 따라하면 아이디어에서 발행까지 빠른 시간 내에 완성할 수 있습니다.
***
**목차**
* [준비 및 계획](#준비-및-계획)
* [빈 웹사이트 만들기](#빈-웹사이트-만들기)
* [홈 페이지 구축](#홈-페이지-구축)
* [추가 페이지 만들기](#추가-페이지-만들기)
* [네비게이션 추가](#네비게이션-추가)
* [미리보기, 설정 및 발행](#미리보기-설정-및-발행)
***
## **준비 및 계획**
Hyperclass에 로그인하거나 첫 번째 요소를 드래그하기 전에, 웹사이트를 미리 계획하는 시간을 가지면 상당한 시간과 노력을 절약할 수 있고, 훨씬 더 효과적인 사이트를 만들 수 있습니다.
* **웹사이트의 목적** 정의: 이 웹사이트의 주요 목표가 무엇인가요? 리드 생성, 상품 판매, 정보 제공, 브랜드 인지도 구축, 예약 받기 중 어느 것인가요? 이를 명확히 하면 모든 디자인과 콘텐츠 결정에 방향을 제시합니다.
* 타겟 고객은 누구인가요? 그들의 니즈, 선호도, 고민을 이해하면 그들에게 어필할 수 있는 웹사이트 콘텐츠와 디자인을 만들 수 있습니다.
* **콘텐츠 및 구조** 개요 작성: 어떤 페이지들이 필요한가요? 대부분의 비즈니스 웹사이트는 홈, 소개, 서비스/상품, 연락처 페이지로 시작합니다. 목표에 따라 더 많거나 적은 페이지가 필요할 수 있습니다.
* 각 페이지에 어떤 핵심 정보나 행동 유도 버튼이 필요한가요? 방문자가 각 페이지에서 무엇을 하거나 배우기를 원하는지 생각해보세요.
* 자산 준비: 로고, 브랜드 컬러, 이미지, 동영상, 텍스트 콘텐츠(또는 최소한 아이디어)가 준비되어 있나요?
* **간단한 계획**: 표를 만들어 정리하면 도움이 됩니다. 계획은 다음과 같을 수 있습니다:
| 페이지/요소 | 목적 | 섹션 및 콘텐츠 |
| -------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| 홈 | 비즈니스 소개, 핵심 서비스 강조, 주요 행동 유도 | 메인 헤드라인 (예: 비즈니스에 오신 것을 환영합니다)
서브 헤드라인 (예: 우리는 당신이 OO하도록 돕습니다)
행동 유도 버튼 (예: 상담 예약하기)
소개 미디어 (예: 히어로 이미지 또는 영상)
각 상품/서비스 개요
|
| 소개 페이지 | 신뢰 구축, 스토리 전달, 팀 소개 | 회사 연혁/미션
팀원 사진 및 소개
가치/차별화 포인트
|
| 연락처 | 방문자가 연락할 수 있도록, 위치 제공 | 연락처 폼
전화번호, 이메일
주소
지도
|
| 서비스/상품 | 제공하는 것에 대한 상세 정보 | 상품/서비스 목록 및 설명
가격 정보
혜택
사례 연구
|
| 네비게이션 메뉴 | 사이트 전체 쉬운 탐색 | 로고, 페이지 링크 |
| 푸터 | 중요 링크, 저작권, 연락처 정보 | 저작권 공지
개인정보보호정책
이용약관
연락처 정보
소셜 미디어 아이콘
|
***
## 빈 웹사이트 만들기
* Sites(사이트) → Websites(웹사이트) → New Website(새 웹사이트) → From Blank(빈 페이지에서)로 이동하고 Create(만들기)를 클릭합니다.
* Add New Page(새 페이지 추가)를 클릭한 다음 **이름**(예: Home)을 입력하고 \*\*Create New Page(새 페이지 만들기)\*\*를 클릭합니다.
***
## 홈 페이지 구축
* Create From Blank(빈 페이지에서 만들기)를 클릭합니다.
* Website Builder(웹사이트 빌더)를 엽니다.
* 편집기 이해하기:
* **컨트롤 패널**: 왼쪽 패널(4)에 표시될 내용(요소, 페이지, 메타데이터 등)을 제어합니다.
* **기기 전환기**: 데스크톱과 모바일 뷰를 전환하여 반응형 디자인을 테스트합니다.
* **메타 컨트롤**: 히스토리, 실행취소, 미리보기, 저장, 발행 등.
* **왼쪽 패널**: 페이지의 요소와 설정.
* **가운데 패널**: 페이지의 실시간 편집 가능한 미리보기.
* **오른쪽 패널**: 선택된 섹션, 행, 요소의 설정 및 스타일링 옵션.
* **섹션 추가**: 가운데 패널(비어있는 경우) 또는 왼쪽 사이드바의 + (요소/섹션 추가) 아이콘을 클릭하여 Sections(섹션)을 선택한 다음, 섹션 너비(예: Full Width)를 선택합니다.
* **행 추가**: 새로 만든 초록색 테두리 섹션 안에서 드래그하여 Row(행)을 추가하고 1 Column을 선택합니다.
* **헤드라인과 서브헤드라인 추가**: 1 Column Row에서 Add Element(요소 추가)를 클릭합니다.
* **헤드라인**: "Headline" 요소를 행에 드래그합니다. 텍스트를 클릭하여 편집하고(예: "환영합니다") 오른쪽 패널에서 폰트, 크기, 색상 등을 변경합니다.
* **서브헤드라인**: + Add Element를 다시 클릭하여 "Sub-Headline"을 메인 헤드라인 아래에 드래그합니다. 텍스트를 편집하고 스타일을 조정합니다(예: "우리는 당신의 성장을 돕습니다").
* **버튼 추가**: 서브헤드라인 아래에 **버튼**을 추가합니다. 버튼 텍스트를 \*\*"지금 전화하세요"\*\*로 편집합니다.
* **액션 추가**: 버튼 설정(오른쪽 패널)에서 Button Actions(버튼 액션)으로 스크롤하여 Call(전화)을 선택하고 전화번호를 입력합니다.
* **반복**: 섹션, 행, 요소를 계속 추가하여 홈페이지를 구성합니다.
* **저장**: 저장 아이콘을 클릭합니다.
## 추가 페이지 만들기
* Sites(사이트) → Websites(웹사이트) → Site Details(사이트 상세)로 이동합니다(페이지 편집기에 있다면 뒤로 가기 버튼 클릭).
* **새 페이지 추가**: Add New Page(새 페이지 추가) 버튼을 클릭합니다. 페이지 이름을 입력하고(예: About Us) \*\*Create New Page(새 페이지 만들기)\*\*를 클릭합니다.
* **빈 페이지에서 만들기**: 이 경우 Create From Blank(빈 페이지에서 만들기) 버튼을 클릭합니다.
* **페이지 구축**: 같은 방식으로 요소와 콘텐츠를 페이지에 추가합니다. **텍스트** 요소와 **이미지** 요소를 추가할 수 있습니다. 반드시 \*\*Save(저장)\*\*을 클릭한 다음 \*\*Back(뒤로)\*\*을 클릭하세요.
## 네비게이션 추가
* Sites(사이트) → Websites(웹사이트) → Site Details(사이트 상세)로 이동합니다(페이지 편집기에 있다면 뒤로 가기 버튼 클릭).
* **홈 페이지 편집**: "home" 제목의 페이지 카드 아래에서 \*\*Edit(편집)\*\*을 클릭합니다.
* **상단 전체 너비 섹션 추가**: 페이지의 최상단, 다른 모든 섹션 위에 새로운 전체 너비 섹션을 추가합니다.
* **1열 행과 네비게이션 메뉴 추가**: 새로운 상단 섹션 안에 1열 행을 추가한 다음, Navigation Menu(네비게이션 메뉴)라는 요소를 추가합니다.
* **네비게이션 메뉴 설정 편집**: 네비게이션 메뉴를 클릭하여 선택한 다음, 오른쪽 설정 바에서 각 링크가 올바른 페이지로 연결되도록 하고, 로고를 추가하는 등의 작업을 합니다.
* **하단 전체 너비 섹션 추가**: 페이지 하단, 다른 모든 섹션 아래에 새로운 전체 너비 섹션을 추가합니다.
* **미리 만들어진 푸터 추가**: Elements(요소) → Prebuilt Elements(미리 만든 요소) → Footer(푸터)를 열고 푸터를 하단 섹션에 드래그합니다.
* **네비게이션 메뉴와 푸터 편집**: 각 요소를 선택하여 삭제하거나 **오른쪽 패널**에서 설정을 편집합니다. 완료되면 \*\*Save(저장)\*\*과 \*\*Back(뒤로)\*\*을 클릭합니다.
## 미리보기, 설정 및 발행
* Sites(사이트) → Websites(웹사이트) → Site Details(사이트 상세)로 이동하여 **preview page button(페이지 미리보기 버튼)**(화살표가 있는 박스 아이콘)을 클릭합니다. **또는** 페이지 빌더에 있다면 **preview button(미리보기 버튼)**(눈 모양 아이콘)을 클릭합니다.
* **모바일 미리보기**: 페이지 빌더에서 모바일 폰 아이콘을 클릭하여 데스크톱과 모바일 뷰를 전환합니다. 또는 미리보기에서 우클릭하여 검사를 선택한 다음, 검사 패널에서 데스크톱/모바일 아이콘을 클릭합니다.
* **반응형 디자인 조정**: 페이지 편집기에서 데스크톱과 모바일 모두에서 좋아 보일 때까지 요소와 설정을 조정합니다. 한 요소가 원하는 대로 보이지 않는다면, 복제하여 **고급 설정**에서 하나는 **데스크톱에서 보이기**, 다른 하나는 **모바일에서 보이기**로 설정할 수 있습니다.
* **저장 및 발행**: 자주 저장하고 때로는 발행해야 합니다. 완료되면 마지막으로 저장하고 발행하는 것을 잊지 마세요.
* **SEO 메타 데이터**: 페이지 빌더에서 SEO 아이콘을 클릭하여 SEO Meta Data 패널을 엽니다. SEO 및 메타 데이터 상세 정보(제목, 설명, 파비콘 등)를 편집합니다.
* **도메인 연결**: 선택사항이지만, 커스텀 도메인이 있다면 사이트에 연결할 수 있습니다.
***
*원문 최종 수정: Thu, 5 Jun, 2025 at 8:19 PM* *Hyperclass 사용 가이드 — hyperclass.ai*
---
# 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/getting-started/getting-started-launch-a-website-from-blank.md?ask=
```
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.