> 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="/files/9LJ1K7ORhVVlIt0PnEcJ" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/T8docWdNCYejZnyw5Q8r" alt=""><figcaption></figcaption></figure>

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

***

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

<figure><img src="/files/kgZh9pxzdyQRGftwrpBO" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0Kl1OPIcfP0imnQgav63" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/K4vUZSuQNKV3N9KaN7ev" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/FRwiyw89c1UiAbWb0iFP" alt=""><figcaption></figcaption></figure>

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

***

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

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

<figure><img src="/files/3b75Nc63WFwB3TRGKCsh" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/sBb0KwYa4iOKNhppSXz7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/cDAGYXnPCKEhATaXQdV5" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/7ZSnkJHa87nNhKqkLpKk" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/mNw8WEbo34EXMijjw7AI" alt=""><figcaption></figcaption></figure>

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

### ■ 접근 권한 설정

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

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

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

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

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

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

<div data-full-width="false"><figure><img src="/files/cfFR9H2fsCJpsm55BV5x" alt=""><figcaption></figcaption></figure></div>

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

***

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

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

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

<figure><img src="/files/mvgxT9N8kf3qxE6w89Bz" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8FFL7Oy3XoWA9Xiv35Tk" alt=""><figcaption></figcaption></figure>

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

&#x20;

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

<figure><img src="/files/KJmhgcBFC4INpm5tKlFC" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Z2krGdB71x8tIwZh19BG" alt=""><figcaption></figcaption></figure>

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

&#x20;&#x20;

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

<figure><img src="/files/4DsBY0bAlnlKrDELGy7P" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/FHiEIQpUFuXx2hyf8nEh" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/J8ticN5wn1EfbtWzrnK3" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/qPdBVD71wT7MawoVjVRS" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/w6xwMTy0RbxhN2VBIHOS" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0EOCjTONKMGhbbZMxAuC" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/KJmi5tIbFDTU6z1Cuw9q" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/d2ECsuVybDSPoXgojzja" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/6SmVXv6AnjDxzZIdYLNH" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/JKIUyFuIeEtIyBrUVMML" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/l6E1OvtdYk1gqqpXwG9O" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/VChZMOxqcNZCgJhdPHOS" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/AIVJrzPsgLGkdHIDFyl0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/qX4DEwn6GNLDimr9wBAe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/NHgo1WeQ11GepoGXolA3" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/BWogFdESvZ5vBxtHrx19" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/vESZ5InZLh2zwmU1n85i" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/03L1D6Q2GwpJ1CL0rDBG" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/CESbxgclLC4vsdWkedBS" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/jVsE3rgyq1XM0IHsP0Kv" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/egqAN8GjslNe96AK7ETF" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/rgD8A0Ue6lHgPG8TmZ7x" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Shk0EQeRquE4MzNRM8ba" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/mtd0AEmzcfqsU3bXziYs" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/os25Ip9anXqM54Soplw1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/iNyXbkQZBNufvWF6aQSF" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/g5C7R838GmgTqfFIyqQd" alt=""><figcaption></figcaption></figure>

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

***

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

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

<figure><img src="/files/z8Y9Ya9ZPtp2Xc5IeSQJ" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/vF2sYmouN36xwcX8C7pe" alt=""><figcaption></figcaption></figure>

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