🎨홈페이지 디자인
스튜디오의 홈페이지 디자인 기능을 이용해 운영하고자 하는 홈페이지의 성격에 맞게 메뉴를 구성하고 편집할 수 있어요. 이 가이드에서는 각 메뉴와 섹션을 설정하는 방법부터 활용 팁까지, 홈페이지를 쉽게 만들 수 있도록 필요한 내용을 순서대로 안내해 드려요. 세부 기능에는 어떤 것들이 있는지 알아볼까요? 😉
✅ 홈페이지 브랜드 컬러 설정하기
홈페이지의 브랜드 컬러를 설정하고, 내 홈페이지의 아이덴티티를 한층 강화해 보세요.
위 버튼을 클릭 후, 원하는 컬러를 설정할 수 있어요.
색상과 투명도를 자유롭게 조정해 보세요.
단, 너무 밝은 색으로 지정할 시 일부 버튼이 잘 보이지 않을 수 있어요.
✅ GNB 설정하기
홈페이지 상단(GNB)를 클릭하면 노출되는 GNB 편집창에서 홈페이지 왼쪽 상단에 표시될 로고 이미지를 업로드하고, GNB의 배경색을 설정할 수 있어요.
스크롤을 내려 기본으로 제공되는 상위 메뉴 목록을 확인할 수 있어요. (기본 상위 메뉴 : 클래스, 커뮤니티, 공지사항, 교재/교구, 게시판)
상위 메뉴를 드래그해 GNB에 표시되는 순서를 조정하고, 눈 아이콘을 클릭해 메뉴 노출/숨김 여부를 설정해 보세요.
'메뉴 추가하기' 버튼을 눌러 새로운 상위 메뉴를 만들 수 있어요.
상위 메뉴 정렬(왼쪽, 가운데, 오른쪽)을 선택할 수 있고, 하위 메뉴가 노출되는 스타일도 지정할 수 있어요.
선택한 스타일에 따라 추가 가능한 하위 메뉴의 최대 개수가 달라져요. (세로형 : 최대 12개, 와이드형 : 최대 24개)
✅ 상위 메뉴 설정하기
상단의 '메뉴 선택하기'에서 편집할 메뉴를 선택해 이동해 보세요. '상위 메뉴 수정'에서 메뉴 이름을 바꾸거나 접근 권한을 설정할 수 있어요.
■ 기본 상위 메뉴 편집
기본 상위 메뉴(클래스, 커뮤니티, 공지사항, 교재/교구, 게시판)의 이름을 바꾸거나 헤더 이미지를 추가할 수 있어요.
커뮤니티, 게시판 메뉴의 경우 sns형, 리스트형 중 원하는 레이아웃을 선택해 커뮤니티 화면 스타일을 변경할 수 있어요.
■ 커스텀 상위 메뉴 편집
직접 추가한 상위 메뉴에는 원하는 섹션을 자유롭게 추가해 페이지를 꾸밀 수 있고, 하위 메뉴 '사용'을 클릭해 하위 메뉴도 추가할 수 있어요.
섹션 추가에 대한 자세한 내용은 하단 '섹션 추가하기' 부분을 참고해 주세요.
상단의 '메뉴 선택하기'에서 편집할 하위 메뉴를 선택해 보세요.
하위 메뉴에도 섹션을 추가해 페이지를 구성할 수 있고, '메뉴 이동 경로' 를 설정해 메뉴명을 클릭할 시 원하는 페이지 혹은 클래스로 이동하게 할 수 있어요.
메뉴 이동 경로를 사용하는 경우에도 특정 회원에게만 해당 메뉴가 노출되도록 설정할 수 있어요.
하단의 '지정 대상' 설정을 활성화한 후, 지정 회원을 추가해 설정을 완료해 주세요.
■ 접근 권한 설정
모든 상위, 하위 메뉴는 특정 회원에게만 페이지 접근 권한을 부여할 수 있어요.
메뉴의 노출 여부와 접근 권한 설정의 차이를 참고해 홈페이지를 더 다양하게 활용해 보세요.
👁️ 메뉴를 미노출로 설정한 경우 (눈 아이콘)
메뉴명이 홈페이지 GNB에서 보이지 않아요.
하지만 URL 혹은 다른 섹션을 통해서는 접근이 가능하기에 하위 메뉴 이동 경로나 이미지·텍스트 섹션, 배너 버튼 등을 이용해 해당 페이지로 자연스럽게 진입하도록 구성할 수 있어요.
👤메뉴의 접근 권한을 비공개 혹은 지정 회원으로 설정했을 경우
메뉴명을 클릭할 시 접근 권한이 없다는 안내가 노출되고, URL을 직접 입력하더라도 접근 권한이 없으면 페이지를 볼 수 없어요.
접근 권한 허용할 지정 회원을 선택한 후, 해당 회원에게만 메뉴명이 노출되도록 설정할 수 있어요. ('지정 회원 외 대상에게 메뉴 숨김' 선택)
임직원 전용 페이지나, 특정 회원에게만 제공하는 특별 콘텐츠, 클래스를 운영할 때 활용하기 좋아요.
✅ 섹션 추가하기
기본 상단 메뉴 중 '홈' 메뉴 페이지와 하위 메뉴의 페이지에는 여러 섹션을 조합해 구성할 수 있어요. 추가한 섹션 순서 변경도 가능해요.
■ 배너 추가하기
배너는 3가지 세부 디자인 스타일중에서 선택해서 추가할 수 있어요.
배너의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
배너의 디자인 스타일, 배경색, 이미지, 텍스트 및 버튼 정렬 등 설정을 변경해서 원하는 배너를 추가해 보세요.
■ 슬라이드 배너 추가하기
배너는 3가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
배너의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
슬라이드가 되는 시간 설정을 할 수 있으며, 배너는 최대 4개까지 추가할 수 있어요.
배너 추가하기 버튼을 통해 배너를 추가해 주세요.
■ 텍스트 추가하기
텍스트는 4가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
텍스트의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
텍스트 섹션의 배경색과 정렬 기준, 추가한 텍스트의 순서를 설정할 수 있어요.
추가한 텍스트의 개수에 따라 텍스트 섹션의 디자인 스타일이 달라지니 참고해 주세요.
텍스트의 제목과 내용을 입력할 수 있으며, 특정 페이지로 이동 가능한 버튼을 둘 수도 있어요.
■ 이미지 추가하기
이미지는 3가지 세부 이미지 카드 디자인 스타일 중에서 선택해서 추가할 수 있어요.
이미지의 카드 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
이미지의 카드 디자인 스타일, 텍스트 정렬 기준, 배경색, 이미지 나열 방식 등을 선택할 수 있어요.
추가한 이미지의 개수에 따라 이미지 섹션의 디자인 스타일이 달라지니 참고해 주세요.
이미지 카드에 표시될 제목과 내용을 입력할 수 있으며, 특정 페이지로 이동 가능한 버튼을 둘 수도 있어요.
■ 슬라이드 이미지 추가하기
슬라이드 이미지는 이미지 섹션을 슬라이드형으로 추가할 수 있는 섹션이에요.
섹션의 제목과 내용, 배경색, 슬라이드 시간 등을 설정할 수 있어요.
이미지는 최대 20개까지 추가할 수 있어요.
이미지에는 특정 페이지로 이동 가능한 버튼을 둘 수도 있어요.
■ 클래스 추가하기
클래스 섹션은 내 홈페이지에 등록된 클래스 중 노출하고 싶은 클래스를 골라 구성할 수 있어요.
섹션의 제목과 내용, 배경색, 클래스 나열 형태 등을 설정할 수 있어요.
클래스 나열 형태가 고정형인 경우, 최대 4개까지 추가할 수 있으며, 슬라이드형인 경우 최대 12개까지 추가할 수 있어요.
클래스는 전체회원을 대상으로 공개된 클래스만 선택할 수 있어요.
■ 동영상 추가하기
동영상 섹션은 페이지에서 재생될 동영상을 추가할 수 있어요.
섹션의 제목과 내용, 배경색 등을 설정할 수 있어요.
동영상은 최대 4개까지 추가할 수 있어요.
재생 전 표시될 썸네일 이미지도 추가할 수 있어요.
■ 지도/연락처 추가하기
2가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
지도/연락처의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
디자인 스타일, 텍스트 정렬 기준, 배경색 등을 선택할 수 있어요.
주소는 위치 선택 후, 상세주소까지 작성해 주세요.
■ 공지사항 추가하기
2가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
공지사항의 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
디자인 스타일, 텍스트 정렬 기준, 배경색 등을 설정할 수 있어요.
디자인 스타일 중, 나열형의 경우 슬라이드 시간도 설정할 수 있어요.
공지사항은 최대 5개까지 추가할 수 있어요.
■ 수강후기 추가하기
가지 세부 디자인 스타일 중에서 선택해서 추가할 수 있어요.
수강후기 디자인 스타일은 이후 편집 화면에서 변경할 수도 있어요.
텍스트 정렬 기준, 배경색 등을 설정할 수 있어요.
수강후기는 최근 수강후기가 노출되며, 선택한 개수에 따라 디자인 스타일이 달라지니 참고해 주세요.
■ 교재/교구 추가하기
교재/교구 섹션은 내 홈페이지에 등록된 교재/교구 중 노출하고 싶은 교재/교구를 골라 구성할 수 있어요.
텍스트 정렬 기준, 배경색 등을 설정할 수 있어요.
교재/교구 나열 방식은 고정형과 슬라이드형이 있으며 고정형은 최대 4개까지 추가할 수 있으며 슬라이드형은 12개까지 추가할 수 있어요.
교재/교구는 전체회원을 대상으로 공개된 교재/교구만 선택할 수 있어요.
■ 코드 블럭 추가하기
코드 블럭 섹션을 통해 코드를 삽입하여 내 홈페이지를 더 다양하고 알차게 구성할 수 있어요.
코드를 통해 위젯을 추가하거나 마케팅 도구 삽입 등 다양하게 활용해 보세요.
잘못된 코드를 삽입할 시에는 정상적으로 작동하지 않으니 유의해 주세요.
✅ 푸터 설정하기
푸터는 홈페이지 맨 하단에 표시되는 영역으로, 사업자 정보가 표시되는 부분이에요.
배경색과 정렬 기준 등을 설정할 수 있으며, 사업자 정보의 경우 회사명, 대표명, 사업자 등록번호, 통신판매업 신고번호, 학원설립·운영등록번호를 입력할 수 있어요.
필요에 따라 대표명과 사업자 등록번호는 노출되지 않도록 설정할 수 있어요.
푸터 설정을 하면 위와 같이 정보가 보여져요.
토스 PG를 연결한 홈페이지의 경우 에스크로 서비스 로고와 서비스 가입 확인을 나타내는 링크로 이동하는 버튼 또한 노출돼요.
Last updated