헤더 및 푸터 디자인

약 13분

개요

헤더는 웹사이트 맨 위에 있는 탐색 영역입니다. 방문자는 이를 사용하여 브랜드를 인식하고, 페이지 간을 전환하거나, 주요 클릭 유도 문구(Call to Action)를 클릭합니다. 푸터는 사이트 하단에 있는 정보 영역으로, 일반적으로 연락처 정보, 소셜 미디어 링크, 법적 약관 및 보조 탐색 메뉴가 포함됩니다.

이 두 모듈은 일반적으로 사이트 전체에 적용되도록 설정되므로, 한 곳에서 변경하면 해당 헤더 또는 푸터를 사용하는 모든 페이지에 업데이트가 반영됩니다. 이를 통해 로고, 탐색, 연락처 정보의 일관성을 유지할 수 있습니다.

설정 위치

에디터 상단의 "레이아웃"을 엽니다. 헤더는 목록 상단에, 푸터는 하단에 표시됩니다. "편집"을 클릭하여 해당 설정 양식을 엽니다. 에디터 미리보기에서 헤더 또는 푸터를 직접 클릭하여 양식을 열 수도 있습니다.

현재 페이지에 헤더나 푸터가 없다면, "레이아웃"에서 추가 옵션을 제공합니다. 추가 후에는 콘텐츠를 입력하기 전에 사이트 전체에 적용할지 확인하는 것이 좋습니다.

헤더 디자인하기

1. 브랜드 로고 설정

헤더에는 이미지 로고 또는 아이콘 로고를 사용할 수 있습니다. 로고는 가장 자주 보이는 브랜드 식별자이므로, 가장자리가 선명하고 축소해도 인식 가능한 버전을 선택하세요.

이미지 로고의 경우, 충분한 대비를 이루는 깔끔한 배경을 사용하세요. 로고 텍스트가 너무 얇거나 색상이 너무 밝으면 데스크톱 및 모바일 미리보기에서 명확도를 확인하세요.

2. 탐색 항목 만들기

탐색 항목은 헤더 내의 링크입니다. 페이지 목록에서 자동으로 생성되지 않으므로, 헤더 양식에서 하나씩 추가, 이름 지정 및 순서 지정해야 합니다. 이를 통해 방문자가 가장 먼저 보는 옵션을 제어할 수 있습니다.

각 항목은 다음으로 연결될 수 있습니다:

"서비스" 또는 "문의하기"와 같은 사이트 내 페이지.
"가격" 또는 "자주 묻는 질문"과 같이 동일 페이지 내 특정 섹션.
예약 시스템, 스토어, 소셜 미디어 또는 파트너 플랫폼과 같은 외부 URL.

외부 링크는 새 탭에서 열리도록 설정할 수 있습니다. 방문자가 사이트를 떠나지 않도록 외부 링크는 새 탭에서 여는 것이 좋습니다.

3. 기본 버튼 추가

헤더에는 "지금 예약", "무료 상담", "지금 쇼핑하기"와 같은 기본 버튼 하나를 포함할 수 있습니다. 이것이 바로 방문자가 취하길 가장 바라는 다음 단계인 클릭 유도 문구(CTA)입니다.

먼저 "설정" → "콘텐츠"에서 사용자 정의 버튼을 만든 다음, 헤더 설정에서 해당 버튼을 선택하세요. 사이트 전체에 단일 사용자 정의 버튼을 사용하면, URL이나 텍스트가 변경될 때 한 곳만 업데이트하면 되므로 불일치가 줄어듭니다.

4. 탐색 순서 구성

가장 중요한 항목을 먼저 배치하세요. 일반적인 웹사이트는 "홈, 서비스, 포트폴리오, 회사 소개, 문의"와 같은 순서를 사용할 수 있습니다. 예약이 주요 목표라면, 버튼 텍스트가 명확하고 위치가 일관적인지 확인하세요.

푸터 디자인하기

푸터는 홈페이지에서 주요 공간을 차지할 필요는 없지만 방문자에게 여전히 필요할 수 있는 정보에 적합합니다. 브랜드 로고, 웹사이트 이름, 간략한 브랜드 설명, 소셜 미디어 링크, 연락처 정보, 사용자 정의 탐색 및 법적 약관을 표시할 수 있습니다.

1. 표시할 브랜드 정보 결정

로고, 웹사이트 이름, 소셜 미디어 링크를 표시할지 여부를 선택할 수 있습니다. 소셜 미디어 링크의 URL은 "설정" → "콘텐츠"에 입력해야 합니다. 푸터는 해당 링크를 표시할지 여부만 결정합니다.

2. 설명 및 사용자 정의 탐색 추가

푸터 설명은 브랜드를 한두 문장으로 다시 설명하는 데 이상적입니다. 사용자 정의 탐색은 FAQ, 환불 정책, 파트너십 정보 또는 채용 기회와 같이 반드시 헤더에 포함될 필요는 없는 중요한 페이지로 연결될 수 있습니다.

3. 연락처 정보 표시

푸터에는 주소, 전화번호, 이메일 및 영업 시간을 선택적으로 표시할 수 있습니다. 이 데이터는 "설정" → "콘텐츠"에서 가져옵니다. 전화번호에는 올바른 국가 코드가 포함되어 있는지, 이메일에 오타가 없는지, 영업 시간이 방문자가 이해하기 쉬운지 확인하세요.

4. 법적 링크 추가

푸터에는 이용 약관, 개인정보 보호정책 페이지 및 쿠키 설정 포털로 연결되는 링크를 선택적으로 표시할 수 있습니다. 법적 페이지의 콘텐츠 및 가시성은 "페이지" → "법적 페이지"에서 관리합니다.

5. 저작권 텍스트 입력

사이트 전체 vs. 페이지별

헤더와 푸터는 기본적으로 사이트 전체에서 사용하는 것이 가장 좋습니다. "사이트 전체"가 활성화되면 변경 사항은 해당 모듈을 사용하는 모든 페이지에 영향을 미칩니다. 이는 메인 사이트 탐색, 공유 연락처 정보 및 법적 링크에 이상적입니다.

특정 페이지에 독립형 이벤트 페이지와 같이 완전히 다른 탐색이 필요한 경우, 양식에서 "사이트 전체"를 비활성화할 수 있습니다. 시스템에서 확인을 요청하고 다른 페이지에서 사용된 콘텐츠를 개별 복사본으로 변환합니다. 이 접근 방식은 예외적인 경우에만 사용해야 합니다. 너무 많은 다른 헤더는 방문자를 혼란스럽게 하고 향후 유지 관리 비용을 증가시킬 수 있습니다.

헤더 또는 푸터 숨기기

"레이아웃"의 눈 아이콘을 사용하여 헤더 또는 푸터를 일시적으로 숨길 수 있습니다. 숨기기 전에 방문자가 필수 탐색, 연락처 정보 또는 법적 링크에 계속 액세스할 수 있는지 확인하세요. 복원하려면 가시성을 다시 활성화하면 됩니다.

팁

헤더 탐색은 4-6개의 명확한 항목으로 유지하세요. 옵션이 너무 많으면 방문자를 압도할 수 있습니다.
헤더의 기본 버튼은 여러 경쟁 목표가 아닌 단일하고 집중된 작업(예: "예약" 또는 "문의")에 사용하세요.
푸터 연락처 정보가 Google 비즈니스 프로필, 소셜 미디어 및 명함과 일치하는지 확인하세요.
게시하기 전에 각 페이지를 확인하여 탐색 링크가 올바른 대상으로 연결되고 외부 링크가 새 탭에서 열리는지 확인하세요.

자주 묻는 질문

아니요. 헤더 양식에서 탐색 항목을 수동으로 추가하고 순서를 지정해야 합니다. 이를 통해 메인 탐색에 포함하고 싶지 않은 페이지를 제외하거나 외부 링크를 추가할 수 있습니다.

예. "레이아웃"의 눈 아이콘을 사용하여 표시/숨기기를 전환할 수 있습니다. 그러나 숨긴 후에도 방문자가 중요한 페이지, 연락처 정보 및 법적 정보에 액세스할 수 있는지 확인하세요.

헤더 양식 목록 내에서 탐색 항목을 드래그 앤 드롭하여 순서를 변경합니다. 페이지 관리의 페이지 순서와 헤더 탐색은 별도로 관리됩니다. 둘 다 확인하세요.

예. 먼저 "설정" → "콘텐츠"에서 사용자 정의 버튼을 만들거나 편집하여 텍스트와 URL을 설정한 다음, 헤더에서 해당 버튼을 선택하세요.

푸터에는 시스템 제공 법률 약관 페이지와 쿠키 설정 포털을 선택적으로 표시할 수 있습니다. 먼저 "페이지" → "법적 페이지"에서 콘텐츠와 가시성을 확인하세요.