섹션 템플릿 ① 헤더·푸터

웹사이트를 만들 때 맨 위의 로고와 메뉴, 맨 아래의 회사 정보와 링크 모음은 거의 모든 페이지에 필요합니다. 에디터에는 이 두 영역을 미리 만들어 둔 헤더 템플릿 8종과 푸터 템플릿 8종이 있습니다. 이 글에서는 어떤 템플릿이 있는지, 페이지의 어디에 들어가는지, 넣은 뒤 로고 글자와 버튼 문구, 링크를 어떻게 고치는지 안내합니다. 섹션 추가 창을 여는 방법과 탭 구성은 별도 글에서 다룹니다.

1. 헤더·푸터 템플릿은 어디에 있나요

섹션 추가 창의 섹션 템플릿 탭 왼쪽 카테고리 목록에서 헤더와 푸터를 고릅니다. 창을 처음 열면 히어로 카테고리가 먼저 선택되어 있으니, 목록에서 헤더나 푸터를 직접 눌러 주세요. 카드를 누르면 바로 페이지에 들어갑니다.

2. 헤더 템플릿 8종

모든 헤더에는 로고와 예시 메뉴가 들어 있고, 대부분 오른쪽에 강조 버튼이 하나 있습니다.

• 심플 헤더: 흰 배경, 보라색 로고, 메뉴 4개와 무료 시작 버튼
• 다크 헤더: 검은 배경, 흰 로고, 메뉴 4개와 시작하기 버튼
• 중앙 정렬 헤더: 흰 배경, 로고와 메뉴 5개. 버튼은 없습니다.
• [SaaS] 다크 프리미엄 헤더: 짙은 남색 배경, 아이콘이 붙은 로고, 가운데 메뉴, 오른쪽 Sign in 링크와 버튼
• [Editorial] 따뜻한 세리프 헤더: 명조 계열 글자의 로고, 메뉴 4개와 수강 신청 버튼, 아래쪽 얇은 선
• [Dev B2B] 터미널 헤더: 검은 배경, 고정폭 글자의 로고와 슬래시로 시작하는 메뉴, Get API key 버튼
• [Ecommerce] 알림바 + 헤더: 맨 위에 보라색 알림 띠가 한 줄 더 있고 그 아래에 로고, 메뉴, 지금 구매 버튼
• [Agency] 미니멀 대담 헤더: 검은 배경, 굵은 대문자 로고, 짧은 영문 메뉴, Contact 버튼

3. 푸터 템플릿 8종

기본형 3종과 쇼핑몰용 1종입니다.

• 심플 푸터: 검은 배경에 이름과 한 줄 소개, 제품·회사 링크 두 묶음, 저작권과 약관 링크
• 컬럼 푸터: 밝은 배경에 소개 문장과 제품·회사·고객 지원 링크 세 묶음, 하단에 저작권과 약관 링크
• 미니멀 푸터: 로고, 링크 5개, 저작권을 한 줄에 놓은 얇은 푸터
• [Ecommerce] 결제·배송 안심 푸터: 위쪽에 무료 배송·30일 환불·무이자 할부·안전 결제 안내 4칸, 아래에 쇼핑·고객 지원·회사 링크, 고객센터 번호, 사업자 정보 문구

나머지 4종은 디자인 시스템별 푸터입니다.

• [SaaS] 다크 프리미엄 4컬럼: 아이콘 로고, 소개 문장, SNS 버튼 4개, Product·Resources·Company 링크
• [Editorial] 따뜻한 세리프 푸터: 기울임꼴 인용문과 Curriculum·Resources·About 링크
• [Dev B2B] 시스템 상태 푸터: 고정폭 글자, All systems operational 표시, 슬래시로 시작하는 링크
• [Agency] 과감한 컨택 푸터: 큼직한 문구와 Email·Studio·Follow 정보, 하단 대문자 로고

4. 어디에 들어가나요

헤더도 푸터도 특별한 자리가 정해져 있지 않고 일반 섹션처럼 들어갑니다. 왼쪽 패널의 섹션 추가로 연 창에서 고르면 헤더든 푸터든 페이지 맨 아래에 붙습니다. 푸터는 그대로 두면 되지만, 헤더는 위로 올려야 합니다. 방법은 두 가지입니다.

• 첫 섹션 위쪽 가장자리에 있는 + 버튼으로 창을 열어 고르면 헤더가 맨 위에 들어갑니다.
• 맨 아래에 들어간 헤더에 마우스를 올리면 왼쪽에 둥근 위로 이동 버튼이 나타납니다. 누를 때마다 한 칸씩 올라갑니다.

5. 문구·로고·링크 고치기

템플릿의 로고는 이미지가 아니라 글자입니다. 로고를 누르면 곧바로 텍스트 편집 창이 열리고, 글자를 고치면서 같은 창에서 크기, 굵기, 정렬, 색상도 바꿀 수 있습니다. 헤더의 강조 버튼 문구와 푸터의 모든 글자도 같은 방식입니다. Esc 키를 누르거나 바깥을 누르면 편집이 끝납니다.

링크는 텍스트 편집 창 아래쪽의 링크 버튼으로 바꿉니다. 누르면 URL 입력칸이 나타나고 새 탭, 적용, 제거 버튼이 보입니다. 주소를 넣고 적용을 누르면 로고, 버튼, 푸터의 각 링크에 연결됩니다. 연결할 주소는 https://로 시작하는 전체 주소로 적어 주세요.

헤더의 메뉴 항목(기능, 가격 등)은 이 방식으로 고치지 않습니다. 메뉴 항목을 누르면 왼쪽에 메뉴 편집 패널이 열리며, 메뉴를 만드는 방법은 별도 글에서 다룹니다.

6. 이렇게 활용해 보세요

• 회사 소개 페이지에는 미니멀 푸터, 쇼핑 페이지에는 결제·배송 안심 푸터처럼 용도에 맞는 푸터를 골라 보세요.
• 라이트 헤더와 다크 헤더를 번갈아 넣어 보면서 페이지 분위기에 맞는 쪽을 고를 수 있습니다.
• 푸터에 있는 약관·개인정보처리방침 글자에 실제 안내 페이지 주소를 연결해 두세요.

7. 알아 두실 점

• 템플릿에는 BrandName, 고객센터 번호, 사업자등록번호, 이메일 주소 같은 예시 값이 들어 있습니다. 공개 전에 실제 정보로 모두 바꿔 주세요.
• 고친 내용은 상단의 저장을 눌러야 보관됩니다.

섹션을 넣은 뒤 페이지 색과 글꼴을 한꺼번에 바꾸는 방법은 테마를 다루는 별도 글에서 안내합니다.