헤더 및 푸터

개요

헤더는 웹사이트 상단(데스크톱의 경우 왼쪽)에 위치한 내비게이션 바이며, 방문자가 브랜드를 식별하고 페이지를 전환하며 주요 액션 버튼을 클릭할 수 있도록 돕습니다. 푸터는 사이트 하단에 위치한 마무리 섹션으로, 브랜드 소개, 다단 내비게이션, 연락처 정보, 소셜 아이콘, 법적 고지 사항 링크 등을 통합합니다.

• 편집 방법: 에디터 미리보기에서 헤더나 푸터를 직접 클릭하거나, 상단 툴바에서 "레이아웃"을 열고 목록에서 "헤더" 또는 "푸터"를 선택합니다. 변경 사항은 실시간으로 미리보기되며 자동으로 초안에 저장됩니다. 우측 상단의 "게시"를 클릭하면 라이브 사이트에 업데이트됩니다.
• 전체 설정: 헤더와 푸터는 기본적으로 전체 사이트에 적용됩니다. 한 번 수정하면 모든 표준 페이지에서 변경 사항이 동기화됩니다(멀티 링크 도구 페이지에는 헤더나 푸터가 포함되지 않습니다).

헤더 디자인하기

1. 브랜드 정보 및 로고 설정

헤더 폼의 "기본 정보" 섹션에서는 좌측 상단에 표시되는 브랜드 아이덴티티를 자유롭게 조합할 수 있습니다.

• 브랜드 정보 표시(다중 선택 캡슐): "브랜드 로고"와 "사이트 이름"을 체크하거나 해제합니다.
  • 둘 다 선택하면 헤더에 로고와 사이트 이름이 나란히 표시됩니다. "왼쪽 사이드바" 레이아웃을 사용하는 경우, 사이트 이름은 로고 아래 별도의 줄에 자동으로 나타납니다.
  • 둘 다 체크 해제하면 브랜드 영역은 비어 있게 됩니다. "브랜드 로고"만 선택했는데 로고가 업로드되지 않은 경우, 시스템은 자동으로 사이트 이름 텍스트를 대신 표시합니다.
• 로고 소스 및 크기:
  • 브랜드 로고 사용(기본값): 에 설정된 글로벌 로고를 사용합니다(라이트 모드 및 다크 모드 버전 지원).
  • 헤더용 지정: 헤더 전용 가로형 텍스트 로고가 필요한 경우, 이 옵션을 선택하여 별도의 이미지를 업로드하거나 아이콘을 선택합니다.
  • 로고 크기: "소형, 중형(기본값), 대형" 크기 옵션을 제공합니다.

2. 기기별 브랜드 소셜 링크 설정(데스크톱/태블릿/모바일)

데스크톱 내비게이션 바는 일반적으로 소셜 아이콘 전체를 나열하지 않고 미니멀하게 유지합니다. 하지만 태블릿이나 모바일에서 햄버거 메뉴를 열었을 때는 방문자에게 매우 유용합니다. 따라서 헤더의 "소셜 링크 표시" 설정은 데스크톱, 태블릿, 모바일별로 독립적인 구성을 지원합니다.

1. 먼저 에서 소셜 플랫폼 링크를 입력합니다(필드 옆 "설정으로 이동"을 클릭하여 패널을 직접 열 수 있습니다).
2. 헤더 폼의 "소셜 링크 표시" 우측에서 데스크톱, 태블릿, 모바일 아이콘을 클릭하여 구성할 기기를 전환합니다.
   • 기본 상태: 데스크톱 상단 내비게이션은 기본적으로 꺼져 있으며("왼쪽 사이드바" 레이아웃에서만 기본 활성화), 태블릿과 모바일 햄버거 메뉴는 소셜 링크가 기본적으로 활성화되어 있습니다.
3. 아래의 플랫폼 캡슐(예: Instagram, LINE, YouTube)을 클릭하여 해당 기기의 개별 플랫폼을 토글합니다(기기의 모든 캡슐을 선택 해제하면 해당 기기에서 소셜 아이콘이 숨겨집니다).

3. 헤더 레이아웃, 모듈 배경 및 외관

헤더의 "레이아웃 및 외관" 섹션에서는 시각적 썸네일과 토글을 사용하여 전체 스타일을 조정할 수 있습니다.

• 모듈 배경(6가지 표면 색상): 자동 교차(기본값, 반투명 유리), 순백색(다크 모드 시 짙은 검정), 안개 회색(차콜 그레이), 브랜드 소프트 라이트, 브랜드 메인 컬러, 매트 블랙(소프트 차콜) 중에서 선택할 수 있습니다. 다크 모드나 브랜드 메인 컬러 배경을 선택하면 내비게이션 텍스트, 아이콘, 버튼이 자동으로 흰색으로 반전되어 페이지 전체에서 100% 가독성을 보장합니다.
• 스크롤 시 헤더 축소: 기본적으로 활성화되어 있으며, 방문자가 아래로 스크롤하면 헤더 높이가 약간 줄어들어 화면 공간을 더 확보합니다.
• 하단 브랜드 장식선 표시: 헤더 하단에 브랜드 컬러의 은은한 그라데이션 라인을 추가합니다.
• 사용자 지정 버튼 추가(최대 2개): 헤더 우측(또는 왼쪽 사이드바 하단)에 최대 2개의 글로벌 버튼을 배치할 수 있습니다. 각 버튼에 대해 "브랜드 메인", "기본", "텍스트 화살표" 스타일을 선택하세요.

4. 기능 버튼(검색, 장바구니)

헤더의 맨 오른쪽, 액션 버튼 옆에는 기능 버튼인 "검색"과 "장바구니"가 있습니다. 헤더 폼의 "기능 버튼" 섹션에서 표시 여부를 결정하고 드래그 핸들(⋮⋮)을 사용하여 순서를 조정할 수 있습니다.

• 검색(사이트 내 검색): 새 사이트에서는 기본적으로 활성화되어 있습니다. 기존 사이트에서는 여기서 수동으로 활성화하고 "게시"를 클릭하세요(무료, 프로, 비즈니스 플랜에서 사용 가능).
  • 방문자 사용 방법: 사이트가 게시되고 검색 가능한 공개 콘텐츠가 포함되어 있으면 돋보기 아이콘이 나타납니다. 방문자가 클릭하거나(데스크톱에서는 / 또는 ⌘K 입력) 모든 공개 게시된 콘텐츠(표준 페이지, 하위 페이지, 블로그 게시물, 카테고리, 태그, 제품 등. 품절 상품은 마지막에 표시)를 검색할 수 있습니다. 창 하단의 "모든 결과 보기"를 클릭하여 /search 결과 페이지로 이동할 수도 있습니다.
  • 제외 콘텐츠: 초안, 숨겨진 페이지, 빈 카테고리, 보호된 디지털 파일 이름은 검색되지 않습니다. 특정 공개 페이지, 제품, 게시물을 사이트 검색에서 숨기려면 페이지 SEO 패널의 에서 "사이트 검색에서 제외"를 체크하세요. 에디터 캔버스에는 검색 창을 미리보기 위한 돋보기가 표시되며, 방문자는 사이트 게시 후 사용할 수 있습니다.
  • 버튼을 끈다고 검색이 비활성화되지는 않음: 이 토글은 헤더에 돋보기 아이콘을 표시할지 여부만 제어합니다. 사이트의 /search 결과 페이지와 는 게시된 사이트에서 계속 사용할 수 있으며, 인덱스는 사용자 지정 프론트엔드나 AI 어시스턴트를 지원하기 위해 평소대로 업데이트됩니다. 방문자가 특정 페이지를 찾지 못하게 하려면 버튼을 숨기는 대신 위에서 언급한 "사이트 검색에서 제외" 옵션을 사용하세요.
• 장바구니: "스토어 › 설정 › 일반"에서 "장바구니 활성화"가 켜져 있는지(새 사이트에서는 기본 활성화) 확인하고, 최소 하나 이상의 제품이 등록되어 있어야 합니다. 조건이 충족되지 않으면 토글이 비활성화되고 누락된 단계가 표시됩니다. "설정으로 이동"을 클릭하여 새 탭에서 해결하세요. 돌아오면 에디터가 업데이트됩니다.
• 장바구니 숨기기: 조건이 충족되면 "장바구니" 토글을 끄기만 하면 됩니다. 방문자는 제품의 "장바구니에 담기"를 클릭하여 계속 결제할 수 있습니다.
• 스토어 설정에서: "스토어 › 설정 › 일반"의 "장바구니 활성화" 설명에는 이 헤더 설정을 직접 여는 링크도 포함되어 있습니다.
• 기기별 위치: 데스크톱에서는 모든 버튼이 액션 버튼 오른쪽에 배치됩니다. 모바일과 태블릿에서는 최대 2개의 기능 버튼이 메뉴 버튼 옆에 나타나고, 나머지는 열린 메뉴 상단에 자동으로 배치됩니다. "왼쪽 사이드바" 레이아웃에서는 기능 버튼이 하나만 있으면 브랜드 로고와 같은 줄에 배치되고, 두 개 이상이면 로고와 사이트 이름 아래 별도의 줄에 배치됩니다.

푸터 디자인하기

1. 브랜드 로고, 테두리 없는 표현 및 소셜 링크

• 브랜드 정보 표시: 다중 선택 캡슐을 사용하여 "브랜드 로고", "사이트 이름", "소셜 링크" 표시 여부를 결정합니다.
• 소셜 링크 표시(개별 선택): 활성화되면 플랫폼 캡슐이 콤팩트하게 나열되어 푸터에 표시할 소셜 링크를 자유롭게 선택할 수 있습니다.
• 로고 크기 및 "로고 흰색 테두리":
  • 푸터 로고는 기본적으로 깔끔하고 테두리 없이 비율에 맞게 표시됩니다(가로형 로고나 투명 배경은 불필요한 흰색 테두리로 잘리지 않음. 크기: 소형/중형/대형).
  • 이미지에 흰색 배경이 필요한 경우 "로고 흰색 테두리" 토글을 활성화하세요.
• 브랜드 소개 및 저작권 텍스트: 짧은 브랜드 설명(150자 초과 시 접힘)과 저작권 문구(예: © 2026 Brand Name)를 입력합니다.

2. 다단 그룹 내비게이션, 연락처 정보 및 법적 링크

• "그룹"을 사용한 다단 푸터 내비게이션 만들기:
  • 푸터의 "내비게이션 항목"에 항목을 추가할 때 링크 유형을 "드롭다운 그룹"으로 설정합니다. 이 그룹은 데스크톱 푸터에서 자동으로 별도의 열로 렌더링됩니다(그룹 이름이 열 헤더가 되고, 하위 항목은 수직 링크 목록이 됨).
  • 단일 링크 항목은 기본 내비게이션 열에 추가됩니다. 우측의 "문의하기"와 결합하면 깔끔한 4단 푸터 그리드를 만들 수 있습니다.
• 연락처 정보: 주소, 전화번호, 이메일, 영업시간( 에서 가져옴) 표시 여부를 선택합니다.
• 법적 링크 및 쿠키 설정: 푸터 하단에 나열할 법적 링크를 선택합니다(먼저 에서 해당 페이지를 활성화하세요). 가 활성화된 경우, 방문자가 환경 설정을 업데이트할 수 있도록 "쿠키 설정" 버튼도 여기에 제공됩니다.

3. 푸터 레이아웃, 모듈 배경 및 듀얼 액션 버튼

• 푸터 레이아웃(3가지 유형):
  • 다단 표준(기본값): 좌측에 브랜드 로고, 소개, 버튼, 소셜 아이콘; 우측에 다단 내비게이션 및 연락처 정보.
  • 중앙 대칭: 로고, 이름, 소개, 버튼, 소셜 아이콘, 내비게이션을 중앙에 배치.
  • 미니멀 단일 라인: 상단 큰 섹션을 생략하고 사이트 이름, 저작권 텍스트, 액션 버튼, 소셜 아이콘, 법적 링크만 한 줄로 깔끔하게 표시.
• 모듈 배경(6가지 표면 색상): 기본값은 부드러운 안개 회색/차콜 그레이입니다. "브랜드 메인 컬러" 또는 "매트 블랙/소프트 차콜"을 선택하면 푸터의 연락처 아이콘 테두리, 텍스트, 구분선이 가시성을 보장하기 위해 자동으로 대비가 높은 시맨틱 색상으로 전환됩니다.
• 사용자 지정 버튼 추가(최대 2개): 브랜드 소개 아래(또는 미니멀 단일 라인의 오른쪽)에 최대 2개의 액션 버튼을 배치할 수 있습니다.

내비게이션 항목, 드롭다운 및 페이지 내 #앵커 링크 만들기

헤더와 푸터 내비게이션 메뉴는 페이지를 추가해도 자동으로 채워지지 않습니다. "내비게이션 항목"에서 수동으로 추가하고 순서를 조정해야 합니다.

1. 통합 링크 선택기로 대상 바인딩

"내비게이션 항목 추가"를 클릭하고 표시 텍스트(예: "서비스")를 입력한 후 "링크 대상 선택"에서 검색하거나 선택합니다.

• 내부 콘텐츠: 표준 페이지, 제품, 제품 카테고리, 블로그 게시물 또는 게시물 카테고리/태그/작성자를 직접 선택합니다(선택한 페이지가 "숨김"이거나 게시물이 "초안"인 경우 알림 라벨이 표시됩니다. 라이브 사이트는 404 오류를 방지하기 위해 게시되지 않은 항목을 자동으로 숨깁니다).
• 외부 URL: 맨 아래로 스크롤하여 "외부 URL"을 선택합니다(또는 검색 상자에 https://...를 직접 붙여넣기). "같은 탭" 또는 "새 탭"에서 열기를 선택합니다.
• 드롭다운 그룹: "드롭다운 그룹"으로 전환한 후 최대 8개의 하위 항목을 추가합니다(선택한 페이지에 대해 이미 공개 하위 페이지를 만든 경우 "N개의 하위 페이지를 드롭다운으로 추가" 버튼을 클릭하여 한 번에 가져올 수 있습니다. 참조). 헤더에서는 호버 또는 클릭으로 트리거되는 드롭다운 메뉴로 나타납니다(왼쪽 사이드바 및 모바일에서는 아코디언). 푸터에서는 자동으로 독립적인 내비게이션 열이 됩니다.

2. "내비게이션 또는 버튼 클릭 → 특정 섹션으로 스크롤" 설정(페이지 내 #앵커 점프)

원페이지 사이트이거나 방문자가 내비게이션의 "FAQ"를 클릭했을 때 홈페이지 중간의 FAQ 섹션으로 부드럽게 스크롤되길 원한다면 다음 두 단계를 따르세요.

1. 대상 모듈의 앵커 ID 이름 지정: 대상 모듈(예: FAQ)을 클릭하고 우측 폼 하단의 "전체 및 고급 설정"으로 스크롤하여 "블록 앵커 ID"에 소문자 영문 이름(예: faq)을 입력합니다.
2. 내비게이션 항목 또는 버튼에서 앵커 선택: 헤더(또는 사용자 지정 버튼) 에디터를 열고 "링크 대상 선택"에서 페이지(예: "홈페이지")를 선택하면 아래에 "페이지 앵커 선택" 드롭다운이 나타납니다. 거기서 #faq를 선택하기만 하면 됩니다!

관련 문서