> For the complete documentation index, see [llms.txt](https://didisam.gitbook.io/guide-new-ver/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://didisam.gitbook.io/guide-new-ver/features/homepage-design.md).

# 홈페이지 디자인

스튜디오의 홈페이지 디자인 기능을 이용해 운영하고자 하는 홈페이지의 성격에 맞게 메뉴를 구성하고 \
편집할 수 있어요.\\

\
이 가이드에서는 각 메뉴와 섹션을 설정하는 방법부터 활용 팁까지,
\
홈페이지를 쉽게 만들 수 있도록 필요한 내용을 순서대로 안내해 드려요.\
\
세부 기능에는 어떤 것들이 있는지 알아볼까요? 😉 

***

## **✅ 홈페이지 브랜드 컬러 설정하기** <a href="#undefined" id="undefined"></a>

홈페이지의 브랜드 컬러를 설정하고, 내 홈페이지의 아이덴티티를 한층 강화해 보세요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FfnBXaoKHRgXbNRNgE6qU%2Fimage.png?alt=media&amp;token=3b9be4d8-43c1-4f56-a1da-02d1d16c17bf" alt=""><figcaption></figcaption></figure>

* 위 버튼을 클릭 후, 원하는 컬러를 설정할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2Fk9syplKrlRpiP3nHy68V%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%87%E1%85%B3%E1%84%85%E1%85%A2%E1%86%AB%E1%84%83%E1%85%B3%E1%84%8F%E1%85%A5%E1%86%AF%E1%84%85%E1%85%A5_%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=d7ffe798-a840-49e2-ae0c-88bc585152fa" alt=""><figcaption></figcaption></figure>

* 색상과 투명도를 자유롭게 조정해 보세요.
* 단, 너무 밝은 색으로 지정할 시 일부 버튼이 잘 보이지 않을 수 있어요.

***

## **✅** GNB 설정하기 <a href="#undefined" id="undefined"></a>

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2Fya2sxcDsqhK4pcjlK2Mq%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_GNB.jpg?alt=media&amp;token=df90a85a-33ab-49bf-ab2b-03ca8ce9fe72" alt=""><figcaption></figcaption></figure>

* 홈페이지 상단(GNB)를 클릭하면 노출되는 GNB 편집창에서
  \
  홈페이지 왼쪽 상단에 표시될 로고 이미지를 업로드하고,
  &#x20;GNB의 배경색을 설정할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FV0CYurhlI6qrFQOuYy3I%2Fimage.png?alt=media&amp;token=2f95a206-5535-46d9-9e2f-67092fe3ece7" alt=""><figcaption></figcaption></figure>

* 스크롤을  내려 기본으로 제공되는 상위 메뉴 목록을 확인할 수 있어요.
  \
  (기본 상위 메뉴 : 클래스, 커뮤니티, 공지사항, 교재/교구, 게시판)
* 상위 메뉴를 드래그해 GNB에 표시되는 순서를 조정하고,
  &#x20; \
  눈 아이콘을 클릭해 메뉴 노출/숨김 여부를 설정해 보세요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FIFvsv6uF7YfSqpvxXCsl%2Fimage.png?alt=media&amp;token=8d7ce5b6-25a0-4d8c-b421-bd7ea9e8b7f9" alt=""><figcaption></figcaption></figure>

* '메뉴 추가하기' 버튼을 눌러 새로운 상위 메뉴를 만들 수 있어요.<br>

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FkmbEkWdUUUjTKwYNsXs8%2Fimage.png?alt=media&amp;token=36aebe63-06f0-4456-b901-a2bda7c37f6f" alt=""><figcaption></figcaption></figure>

* 상위 메뉴 정렬(왼쪽, 가운데, 오른쪽)을 선택할 수 있고,
  &#x20;\
  하위 메뉴가 노출되는 스타일도 지정할 수 있어요.
* 선택한 스타일에 따라 추가 가능한 하위 메뉴의 최대 개수가 달라져요.
  \
  (세로형 : 최대 12개, 와이드형 : 최대 24개)

***

## **✅ 상위 메뉴 설정하기** <a href="#undefined" id="undefined"></a>

상단의 '메뉴 선택하기'에서 편집할 메뉴를 선택해 이동해 보세요.\
'상위 메뉴 수정'에서 메뉴 이름을 바꾸거나 접근 권한을 설정할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FXJdQIxGDXpafJrJiXP5R%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%A1%E1%86%BC%E1%84%8B%E1%85%B1%E1%84%86%E1%85%A6%E1%84%82%E1%85%B2.jpg?alt=media&amp;token=bd4e2dc3-5212-4e5f-9e09-b1e0e1450bf9" alt=""><figcaption></figcaption></figure>

### ■ 기본 상위 메뉴 편집

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2Fir9WCkoTGuVwtk3AJEks%2Fimage.png?alt=media&amp;token=d5c6ccb9-4738-4e85-a337-903877eb82c6" alt=""><figcaption></figcaption></figure>

* 기본 상위 메뉴(클래스, 커뮤니티, 공지사항, 교재/교구, 게시판)의 이름을 바꾸거나 \
  헤더 이미지를 추가할 수 있어요.<br>

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FxCKe40eHoq9Ikj4lTCv8%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8F%E1%85%A5%E1%84%86%E1%85%B2%E1%84%82%E1%85%B5%E1%84%90%E1%85%B5.jpg?alt=media&amp;token=d8618517-41cb-40f8-a6df-4f470f587660" alt=""><figcaption></figcaption></figure>

* 커뮤니티, 게시판 메뉴의 경우 sns형, 리스트형 중 원하는 레이아웃을 선택해
  \
  커뮤니티 화면 스타일을 변경할 수 있어요.

### ■ 커스텀 상위 메뉴 편집

직접 추가한 상위 메뉴에는 원하는 섹션을 자유롭게 추가해 페이지를 꾸밀 수 있고,
\
하위 메뉴 '사용'을 클릭해 하위 메뉴도 추가할 수 있어요.

섹션 추가에 대한 자세한 내용은 하단 '섹션 추가하기' 부분을 참고해 주세요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FsIrKsw9Un1s9yyDz64bm%2Fimage.png?alt=media&amp;token=2fe41e50-4f78-4422-84ea-24de22c725db" alt=""><figcaption></figcaption></figure>

* 상단의 '메뉴 선택하기'에서 편집할 하위 메뉴를 선택해 보세요.
* 하위 메뉴에도 섹션을 추가해 페이지를 구성할 수 있고,
  \
  '메뉴 이동 경로' 를 설정해 메뉴명을 클릭할 시 원하는 페이지 혹은 클래스로 이동하게 할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FJzfkSzZLKoZ2autw4XnS%2Fimage.png?alt=media&amp;token=19d17bb1-039d-4c0d-922e-dd1b4a65a113" alt=""><figcaption></figcaption></figure>

* 메뉴 이동 경로를 사용하는 경우에도
  \
  특정 회원에게만 해당 메뉴가 노출되도록 설정할 수 있어요.
* 하단의 '지정 대상' 설정을 활성화한 후,
  &#x20; 지정 회원을 추가해 설정을 완료해 주세요.

### ■ 접근 권한 설정

모든 상위, 하위 메뉴는 특정 회원에게만 페이지 접근 권한을 부여할 수 있어요.

**메뉴의 노출 여부**와 **접근 권한 설정**의 차이를 참고해 홈페이지를 더 다양하게 활용해 보세요.

**👁️ 메뉴를 미노출로 설정한 경우 (눈 아이콘)**

* 메뉴명이 홈페이지 GNB에서 보이지 않아요.
* 하지만 URL 혹은 다른 섹션을 통해서는 접근이 가능하기에 하위 메뉴 이동 경로나 이미지·텍스트 섹션, 배너 버튼 등을 이용해 해당 페이지로 자연스럽게 진입하도록 구성할 수 있어요.<br>

**👤메뉴의 접근 권한을 비공개 혹은 지정 회원으로 설정했을 경우**

* 메뉴명을 클릭할 시 접근 권한이 없다는 안내가 노출되고, URL을 직접 입력하더라도 접근 권한이 없으면 페이지를 볼 수 없어요.

<div data-full-width="false"><figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FfOApo7yJiYrAM21TvW2K%2Fimage.png?alt=media&amp;token=9e073391-3487-43a1-b799-571572c0cccf" alt=""><figcaption></figcaption></figure></div>

* 접근 권한 허용할 지정 회원을 선택한 후, 해당 회원에게만 메뉴명이 노출되도록 설정할 수 있어요. ('지정 회원 외 대상에게 메뉴 숨김' 선택)
* 임직원 전용 페이지나, 특정 회원에게만 제공하는 특별 콘텐츠, 클래스를 운영할 때 활용하기 좋아요.

***

## **✅ 섹션 추가하기** <a href="#undefined" id="undefined"></a>

기본 상단 메뉴 중 '홈' 메뉴 페이지와 하위 메뉴의 페이지에는 여러 섹션을 조합해 구성할 수 있어요.\
추가한 섹션 순서 변경도 가능해요.

### ■ **배너 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FgDpkS5ZVFdLrj67cRQyU%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1(%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5).jpg?alt=media&amp;token=cd2f458b-4550-4c8e-be97-f2584436cf6e" alt=""><figcaption></figcaption></figure>

* 배너는 3가지 세부 디자인 스타일중에서 선택해서 추가할 수 있어요.
* 배너의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FEg0dhp1c3vl9IG3WMoFQ%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5.jpg?alt=media&amp;token=2f932db6-0e51-45fd-b0e3-8e33db1b5fc1" alt=""><figcaption></figcaption></figure>

* 배너의 디자인 스타일, 배경색, 이미지, 텍스트 및 버튼 정렬 등 설정을 변경해서 원하는 배너를 추가해 보세요.

&#x20;

### ■ **슬라이드 배너 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FCmHIOdRm0stbdvcAqAhX%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=b5bb6d10-51d1-4b68-add6-77cbe38f421c" alt=""><figcaption></figcaption></figure>

* 배너는 3가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
* 배너의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FrdIRveISKN8GZbGuTCtj%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3%E1%84%87%E1%85%A2%E1%84%82%E1%85%A5%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=8cf15443-e9a5-4a4e-9d76-a9bcfda3d5cd" alt=""><figcaption></figcaption></figure>

* 슬라이드가 되는 시간 설정을 할 수 있으며, 배너는 최대 4개까지 추가할 수 있어요.
* 배너 추가하기 버튼을 통해 배너를 추가해 주세요.

&#x20;&#x20;

### ■ **텍스트 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FT2AzuL2gG8UPY45j0Jxs%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%90%E1%85%A6%E1%86%A8%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=0d62d45b-1bcb-41b0-aa5c-1c9dd82b71d3" alt=""><figcaption></figcaption></figure>

* 텍스트는 4가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
* 텍스트의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FUfbCtuEPMPzLlQnT73Xv%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%90%E1%85%A6%E1%86%A8%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=e130a6fe-b7d9-4a67-9f1f-d91f559e0da8" alt=""><figcaption></figcaption></figure>

* 텍스트 섹션의 배경색과 정렬 기준, 추가한 텍스트의 순서를 설정할 수 있어요.
* 추가한 텍스트의 개수에 따라 텍스트 섹션의 디자인 스타일이 달라지니 참고해 주세요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FkCj4fRB17H7Pgrsz5sSN%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC__%E1%84%90%E1%85%A6%E1%86%A8%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=3c5f9cad-3f0a-47d4-b925-32fd3e1b84df" alt=""><figcaption></figcaption></figure>

* 텍스트의 제목과 내용을 입력할 수 있으며, 특정 페이지로 이동 가능한 버튼을 둘 수도 있어요.

### ■ **이미지 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FsTwi3qhNpl1hay0JMEdv%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=bfe33a04-e94b-4882-9565-21a1c97afdd2" alt=""><figcaption></figcaption></figure>

* 이미지는 3가지 세부 이미지 카드 디자인 스타일 중에서 선택해서 추가할 수 있어요.
* 이미지의 카드 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.&#x20;

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F1jclFA7OHqv1NkIag2JS%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=cff07e67-091c-43e9-a93a-073812561a27" alt=""><figcaption></figcaption></figure>

* 이미지의 카드 디자인 스타일, 텍스트 정렬 기준, 배경색, 이미지 나열 방식 등을 선택할 수 있어요.
* 추가한 이미지의 개수에 따라 이미지 섹션의 디자인 스타일이 달라지니 참고해 주세요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F4CMF4QmPqy5OsgbCUuub%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=515dd417-f629-422f-86e6-1cf464563f6c" alt=""><figcaption></figcaption></figure>

* 이미지 카드에 표시될 제목과 내용을 입력할 수 있으며, 특정 페이지로 이동 가능한 버튼을 둘 수도 있어요.

### ■ **슬라이드 이미지 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FYi557YoL9mKRK16t8BhO%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=3d743677-d46e-4c31-9767-bef959ef16fd" alt=""><figcaption></figcaption></figure>

* 슬라이드 이미지는 이미지 섹션을 슬라이드형으로 추가할 수 있는 섹션이에요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FPkN615b0dkV0MCXyczrm%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3%20%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5.jpg?alt=media&amp;token=d7cdf151-4c5c-4880-b6e9-427595126ee7" alt=""><figcaption></figcaption></figure>

* 섹션의 제목과 내용, 배경색, 슬라이드 시간 등을 설정할 수 있어요.
* 이미지는 최대 20개까지 추가할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FEiTpub28rbTXg6F4L6Yg%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=6bb3a20f-42ef-41c6-add8-b9318595b8c2" alt=""><figcaption></figcaption></figure>

* 이미지에는 특정 페이지로 이동 가능한 버튼을 둘 수도 있어요.

### ■ **클래스 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FthRCHgqYEl8RV6cUUhlZ%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B3%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=fba59348-5faf-4370-8d24-348efe4145f2" alt=""><figcaption></figcaption></figure>

* 클래스 섹션은 내 홈페이지에 등록된 클래스 중 노출하고 싶은 클래스를 골라 구성할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FoS8qojwWkVARppVQ07d5%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B3%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=b24a5fec-22ed-41c1-8d54-2f3f856c17eb" alt=""><figcaption></figcaption></figure>

* 섹션의 제목과 내용, 배경색, 클래스 나열 형태 등을 설정할 수 있어요.
* 클래스 나열 형태가 고정형인 경우, 최대 4개까지 추가할 수 있으며, \
  슬라이드형인 경우 최대 12개까지 추가할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F7YfiyzC1xeQ5SGWlU3v5%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B3%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=a10b5561-87e4-4367-98a0-a76fe62f4353" alt=""><figcaption></figcaption></figure>

* 클래스는 전체회원을 대상으로 공개된 클래스만 선택할 수 있어요.<br>

### ■ **동영상 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FVbSkoXX8boQpOQ7sf0YZ%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%83%E1%85%A9%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%89%E1%85%A1%E1%86%BC%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=48cba0b9-2712-4995-8d37-8226afd7398e" alt=""><figcaption></figcaption></figure>

* 동영상 섹션은 페이지에서 재생될 동영상을 추가할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FcB0Ld8hB7AYxIPNCOJAK%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%83%E1%85%A9%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%89%E1%85%A1%E1%86%BC%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=978f8758-84e4-4d9d-b395-ca503e735e9e" alt=""><figcaption></figcaption></figure>

* 섹션의 제목과 내용, 배경색 등을 설정할 수 있어요.
* 동영상은 최대 4개까지 추가할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FKLn1IJqAHy4mxfwxdSPD%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%83%E1%85%A9%E1%86%BC%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%89%E1%85%A1%E1%86%BC%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=a86d033d-e96d-44f7-a0c1-733db89590fd" alt=""><figcaption></figcaption></figure>

* 재생 전 표시될 썸네일 이미지도 추가할 수 있어요.

### ■ **지도/연락처 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FNTYrNFLOirQj6AarkvLg%2F%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%85%E1%85%A1%E1%86%A8%E1%84%8E%E1%85%A5%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=34b7c2a2-50db-4ab3-9e34-10ff0c01904c" alt=""><figcaption></figcaption></figure>

* 2가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
* 지도/연락처의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FQUoBLo1Ielb1B4a8Y2Ao%2F%E1%84%8B%E1%85%A7%E1%86%AB%E1%84%85%E1%85%A1%E1%86%A8%E1%84%8E%E1%85%A5%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=9ede0ca4-69d7-4abe-933e-bc2bb85327b0" alt=""><figcaption></figcaption></figure>

* 디자인 스타일, 텍스트 정렬 기준, 배경색 등을 선택할 수 있어요.
* 주소는 위치 선택 후, 상세주소까지 작성해 주세요.

### ■ **공지사항 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FkFbYVnRsp9iEw1As8cFM%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%80%E1%85%A9%E1%86%BC%E1%84%8C%E1%85%B5%E1%84%89%E1%85%A1%E1%84%92%E1%85%A1%E1%86%BC%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=1f54bbab-44c9-47e0-9cd8-c8815e5ad012" alt=""><figcaption></figcaption></figure>

* 2가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
* 공지사항의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F22AtEy95YSMjdQCmNcSM%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%80%E1%85%A9%E1%86%BC%E1%84%8C%E1%85%B5%E1%84%89%E1%85%A1%E1%84%92%E1%85%A1%E1%86%BC%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=088a2952-a145-4973-a33e-8734303282ea" alt=""><figcaption></figcaption></figure>

* 디자인 스타일, 텍스트 정렬 기준, 배경색 등을 설정할 수 있어요.
* 디자인 스타일 중, 나열형의 경우 슬라이드 시간도 설정할 수 있어요.
* 공지사항은 최대 5개까지 추가할 수 있어요.

### ■ **수강후기 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FkB9tchjTZYJFdfXOtMuz%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%AE%E1%84%80%E1%85%A1%E1%86%BC%E1%84%92%E1%85%AE%E1%84%80%E1%85%B5%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=7101ff45-1f06-4558-9a6a-de57cb7a9c52" alt=""><figcaption></figcaption></figure>

* 가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
* 수강후기 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F9UuYxN4vP85ArkYxlqb6%2F%E1%84%89%E1%85%AE%E1%84%8C%E1%85%A5%E1%86%BC_%E1%84%89%E1%85%AE%E1%84%80%E1%85%A1%E1%86%BC%E1%84%92%E1%85%AE%E1%84%80%E1%85%B5%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=e6527c6c-6135-4c70-9ea1-e754364d3cf1" alt=""><figcaption></figcaption></figure>

* 텍스트 정렬 기준, 배경색 등을 설정할 수 있어요.
* 수강후기는 최근 수강후기가 노출되며, 선택한 개수에 따라 디자인 스타일이 달라지니 참고해 주세요.

### ■ **교재/교구 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FZ0x7DcsxSog7oGF25qne%2F%E1%84%80%E1%85%AD%E1%84%80%E1%85%AE%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=8669fc96-ef1e-4293-95c0-6044f6fcf9ad" alt=""><figcaption></figcaption></figure>

* 교재/교구 섹션은 내 홈페이지에 등록된 교재/교구 중 노출하고 싶은 교재/교구를 골라 구성할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F4CZWPHRJs4GD7sBIaZx0%2F%E1%84%80%E1%85%AD%E1%84%80%E1%85%AE%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC.jpg?alt=media&amp;token=333fcecd-6e30-4311-8d52-e87aee390755" alt=""><figcaption></figcaption></figure>

* 텍스트 정렬 기준, 배경색 등을 설정할 수 있어요.
* 교재/교구 나열 방식은 고정형과 슬라이드형이 있으며 고정형은 최대 4개까지 추가할 수 있으며\
  슬라이드형은 12개까지 추가할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FoAr08aTN3zW6ilRhtBg5%2F%E1%84%80%E1%85%AD%E1%84%80%E1%85%AE%20%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1%20%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=f9102c48-acfa-43ae-af20-a60b8784a515" alt=""><figcaption></figcaption></figure>

* 교재/교구는 전체회원을 대상으로 공개된 교재/교구만 선택할 수 있어요.

### **■ 코드 블럭 추가하기**

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2F1qTSdv1InJ04uwhIpvbv%2F%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A5%E1%86%A8%20%E1%84%89%E1%85%A6%E1%86%A8%E1%84%89%E1%85%A7%E1%86%AB%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=ce5ffa7f-1ee2-462e-92ab-895ff3f01158" alt=""><figcaption></figcaption></figure>

* 코드 블럭 섹션을 통해 코드를 삽입하여 내 홈페이지를 더 다양하고 알차게 구성할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FOZEF61pZk2iIjx2uEBgm%2F%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%E1%84%87%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A5%E1%86%A8_%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1.jpg?alt=media&amp;token=d060aa45-c6be-499c-919f-d6f207794708" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FsykRNvTlDGV6TP5bLSgT%2F%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1_%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%85%E1%85%A7%E1%86%A8%20%E1%84%86%E1%85%A9%E1%84%83%E1%85%A1%E1%86%AF.jpg?alt=media&amp;token=6df0e3e3-1cad-467f-baf3-576b4c60f425" alt=""><figcaption></figcaption></figure>

* 코드를 통해 위젯을 추가하거나 마케팅 도구 삽입 등 다양하게 활용해 보세요.
* 잘못된 코드를 삽입할 시에는 정상적으로 작동하지 않으니 유의해 주세요.

***

## **✅ 푸터 설정하기** <a href="#undefined" id="undefined"></a>

푸터는 홈페이지 맨 하단에 표시되는 영역으로, 사업자 정보가 표시되는 부분이에요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FGkgOGj0b3pzq5iWH9LMQ%2Fimage.png?alt=media&amp;token=38ce84f9-dd24-4520-b83e-4a753724784a" alt=""><figcaption></figcaption></figure>

* 배경색과 정렬 기준 등을 설정할 수 있으며, 사업자 정보의 경우 \
  회사명, 대표명, 사업자 등록번호, 통신판매업 신고번호, 학원설립·운영등록번호를 입력할 수 있어요.&#x20;
* 필요에 따라 대표명과 사업자 등록번호는 노출되지 않도록 설정할 수 있어요.

<figure><img src="https://1603737133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlAiaVYCsYFYWmRLI0cU0%2Fuploads%2FZDtX70qv71qHDzompXnK%2Fimage.png?alt=media&amp;token=71d4ff72-f8a8-44a6-8729-7f9d23336aef" alt=""><figcaption></figcaption></figure>

* 푸터 설정을 하면 위와 같이 정보가 보여져요.
* 토스 PG를 연결한 홈페이지의 경우 에스크로 서비스 로고와 서비스 가입 확인을 나타내는 링크로 이동하는 버튼 또한 노출돼요.