제작 사례
하이브 빌더로 만든 병원 홈페이지.
HEADER
하이브디자인
수정됨
리로드
헤더 높이
기본 높이
px
56
스크롤 높이
px
56
가로폭
기본 메뉴 넓이
%
100
스크롤 메뉴 넓이
%
100
최대 너비
px
2400
본문 컨테이너 폭
px
1250
로고 너비
기본 너비
px
120
스크롤 너비
px
120
레이아웃
배치
위치 / 고정
Position
스크롤 중 상단 메뉴 유지
PC·모바일에서 아래로 내려도 메뉴를 숨기지 않습니다.
PC·모바일에서 아래로 내려도 메뉴를 숨기지 않습니다.
상단 여백
px
0
스크롤 상단 여백
px
0
효과
유리 헤더 (반투명 + 흐림, 글자색 자동)
모바일 로고 왼쪽 · 메뉴 버튼 오른쪽
모바일 떠 있는 캡슐형
전체 메뉴도 반투명 유리
배경 블러
px
20
배경 모서리 (radius)
px
0
스크롤 모서리 (radius)
px
0
px · 0 = 기존. 배경은 화면 전체, 로고·메뉴만 이 폭 안에
내부 좌우 패딩
px
32
표시 설정
배경 없음 (모든 상태 투명)
최상단만 투명 (스크롤 시 색상)
그림자(박스쉐도우) 끄기
PC 메뉴 표시
햄버거 옆 메뉴 (PC 메뉴를 숨겼을 때, 최대 6개)
모바일 바로가기 줄
바로가기 줄 맨 앞에 "홈" 넣기
모바일 화면(900px 이하)에서 헤더 아래에 가로 메뉴 한 줄이 따라옵니다. 항목을 비워 두면 1단계 메뉴가 그대로 나옵니다. 켜기와 항목, "홈" 설정은 저장한 뒤 화면에 반영됩니다.
햄버거 버튼 표시
└ 햄버거 PC
└ 햄버거 모바일
햄버거 마우스 오버 효과 (막대 이동 모션)
모바일 헤더 스크롤 성능 개선 (첫 숨김 모션 최적화)
아이콘 개별 바로 표시 (PC/모바일 · 선택하지 않은 아이콘은 점 메뉴에 유지)
└ 로그인 / 정보수정
└ 회원가입 / 로그아웃
└ 지도 / 오시는 길
└ 언어 선택
└ 장바구니
└ 검색
다국어 표기 (헤더 언어 선택 버튼)
번역 미완성 시 플러그인 사용 (미발행 언어만)
언어 아이콘 이동 URL
비워두면 현재 페이지의 언어 경로를 자동 사용합니다.외국인 전용 사이트 묶음
외국인 전용 사이트(/global/)를 발행했으면, 언어 선택 목록 아래에 이 이름으로 따로 묶어 보여 줍니다(예: 피부과, Dermatology). 한국어 이름을 비우면 나오지 않습니다. 외국어 화면은 그 언어 이름을, 비어 있으면 영어 이름을 씁니다.
점 메뉴 표시
└ 점 메뉴 PC
└ 점 메뉴 모바일
검색 아이콘 표시
└ 검색 PC
└ 검색 모바일
위젯 표시 (PC / 모바일 별도)
진료중 배지
└ 진료중 배지 PC
└ 진료중 배지 모바일
AI 챗봇 위젯
└ AI 챗봇 PC
└ AI 챗봇 모바일
대체 카톡상담 표시
└ 대체 카톡상담 PC
└ 대체 카톡상담 모바일
PC 배치
모바일 배치
AI 챗봇을 끈 기기에 카톡상담을 표시합니다. 대표 카카오 주소 또는 지점별 상담 주소가 필요합니다.
장바구니 아이콘
└ 장바구니 PC
└ 장바구니 모바일
보관함(하트) 아이콘 (내 보관함이 켜진 사이트만, 저장 뒤 새로고침)
전화 아이콘 (헤더 노출 / cf_8 자동 연동)
액션 슬롯 1
둥글기
px
글자색
배경색
└ 노출 PC
└ 노출 모바일
액션 슬롯 2
둥글기
px
글자색
배경색
└ 노출 PC
└ 노출 모바일
액션 슬롯 버튼을 맨 끝에 (검색·언어 등 아이콘 뒤)
헤더 배경
기본 배경 색상 / 투명도
메뉴 오버 시 배경 색상 / 투명도
메뉴 오버 시 텍스트 색상
메뉴 오버 배경 (별도 설정, 기본: 오픈 배경 동일)
스크롤 시 배경 (별도 설정, 기본: 기본 배경 동일)
서브페이지 배경 (인덱스 외 페이지 — 미입력 시 기본 배경 사용) 서브페이지
브랜드 컬러 (cf_ 연동)
메인 컬러 cf_10
서브 컬러 cf_16
배경 cf_2
밑줄 컬러 cf_4
대메뉴
기본 텍스트
서브페이지 텍스트 서브전용
호버 텍스트
호버 배경
드롭다운 / 서브메뉴
투명 배경 텍스트 투명상태
스크롤 메뉴 텍스트
드롭다운 배경
드롭다운 텍스트
드롭다운 호버
테두리 끄기 (버티컬)
음영 끄기 (버티컬)
모서리 각지게 (둥근모서리 끄기)
상단 포인트 라인 (메인색)
모바일 글자 크기 (사이트 전체)
전체 비율
%
100
헤더·본문 섹션·푸터 등 모든 페이지의 모바일 텍스트를 한 번에 키우거나 줄입니다.
100% = 기본 · 데스크탑 크기는 영향 없음 · 저장 후 반영
100% = 기본 · 데스크탑 크기는 영향 없음 · 저장 후 반영
모바일 폰트
1단 크기
px
26
2단 크기
px
16
드로어 좌 패널 (브랜드)
텍스트 색상
드로어 우 패널 (메뉴)
배경
메뉴 텍스트
서브 텍스트
호버 색상
전체 메뉴 디자인 · 추가 블록
햄버거 버튼으로 여는 전체 메뉴입니다. v2는 PC 오른쪽 시트·모바일 전체 화면으로 열리며 마이(예약·상담·장바구니), 메뉴/이벤트/콘텐츠 탭, 공식 채널, 진료시간, 아래 고정 상담 막대를 보여 줍니다. 자료가 없는 블록은 자동으로 숨습니다.
메뉴 디자인
카드형 바탕색
공용 화면 바탕색
카드형 모양
기본형 PC 레이아웃
기본형 PC 위 줄
기본형 PC 메뉴판 바탕
기본형 PC 왼쪽 판
아래 고정 상담 막대 (상담 · 전화 · 카카오 · 네이버)
이벤트 탭
콘텐츠 탭: 새 글 (칼럼 · 전후 · 후기 · 시술)
콘텐츠 탭: 유튜브 쇼츠 (쇼케이스 관리 영상)
SNS 채널 카드 (기본 정보에 주소가 있는 채널)
진료시간 카드 (오늘 진료 상태 포함)
쇼케이스 바로가기 (콘텐츠 탭)
이벤트 표시
이벤트 개수
새 콘텐츠 출처
새 콘텐츠 개수
번호 목록형 세부 설정
위 "메뉴 디자인"이 번호 목록형일 때만 적용됩니다. 숫자 칸을 비우면 괄호 안 기본값을 씁니다.
PC 메뉴 처음 상태
PC 에서 열 때 스크롤바 자리
로고 사용 방식
텍스트 모드는 메뉴 색상을 자동으로 따라갑니다 (스크롤·메뉴 hover 색 자동 전환).
로고 텍스트
다국어는 「설정 → 다국어」 탭에서 자동 번역되거나 수동 입력 가능 (source: head / logo).
텍스트 스타일
폰트
크기
px
19
굵기
자간
em
0
영문 폰트 (.eng_b2 클래스)
글꼴 이름은 웹폰트 CSS 안의 font-family 이름과 같게 적어 주세요. 주소를 비우면 방문자 기기에 설치된 글꼴일 때만 보입니다. 저장하면 페이지 전체에 적용됩니다.
국문 폰트를 선택하면 해당 폰트를 영문 콘텐츠에도 그대로 적용합니다.
한글 폰트 (.pret 클래스)
글꼴 이름은 웹폰트 CSS 안의 font-family 이름과 같게 적어 주세요. 주소를 비우면 방문자 기기에 설치된 글꼴일 때만 보입니다. 저장하면 페이지 전체에 적용됩니다.
메인에서도 한글 글꼴을 첫 화면 뒤에 싣기 (Pretendard 경량 v2 일 때, 서브 페이지와 같은 방식)
켜면 첫 방문은 크기를 맞춘 대체 글꼴로 먼저 그리고 화면이 뜬 뒤 경량 v2(약 500KB)를 받습니다. 다시 오면 바로 v2 로 보입니다. 모바일 첫 화면 속도가 빨라집니다.
미리보기
DESIGN GUIDE 2026
디자인 가이드 미리보기
저장 후 페이지 전체에 적용됩니다. 구글폰트는 외부 서버에서 로드되어 첫 진입 속도에 영향을 줄 수 있습니다.
헤더 전용 폰트
