모바일 화면(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
대메뉴
기본 텍스트
서브페이지 텍스트 서브전용
호버 텍스트
호버 배경
드롭다운 / 서브메뉴
투명 배경 텍스트 투명상태
스크롤 메뉴 텍스트
드롭다운 배경
드롭다운 텍스트
드롭다운 호버
테두리 끄기(버티컬)
음영 끄기(버티컬)
모서리 각지게(둥근모서리 끄기)
상단 포인트 라인(메인색)
메뉴 관리끌어서 순서 변경
입력 칸에서 Enter 아래에 새 메뉴 · Alt+↑↓ 순서 · Alt+←→ 단계
메뉴 불러오는 중...
메뉴 뱃지
메뉴 DB를 저장하지 않고 선택한 메뉴의 뱃지만 즉시 저장합니다.
메뉴명 BEST
드롭다운 방식
저장 후 새로고침이 필요합니다 (HTML 구조 변경)
방식
패널(고급) 스타일
레이아웃
클린 컬럼형은 밴드 없이 표시합니다. 정렬 컬럼형은 로고·버튼 사이의 폭을 균등하게 나누어 대메뉴와 전체 하위항목을 같은 열에 맞춥니다.
그룹패널 메뉴
메뉴마다 '관련 이벤트 / 빠른 링크' 같은 그룹과 링크를 직접 넣을 수 있습니다. 저장 후 새로고침 반영.
뒷배경
패널 스타일
메뉴 구조
패널 시작 위치
왼쪽 대메뉴명
왼쪽 대메뉴명 크기
px
16
2차 메뉴 아이콘
카드 배경
카드 라운드
px
28
그룹 제목 크기
px
12
그룹 제목 색상
메뉴 패널 · 이미지 배치 (PC)
사용자 지정으로 전환하면 아래 값을 적용합니다. 좁은 화면에서는 폭과 이미지가 화면 안으로 줄어듭니다. 모바일 전체 메뉴는 기존 구성을 유지합니다.
px
1000
px
0
px
48
px
320
px
240
그룹 링크 크기
px
13
그룹 링크 색상
링크 오버 효과
카드형 그룹패널 링크에도 동일하게 적용됩니다.
메뉴 불러오는 중...
1단 메뉴
폰트 크기
px
14
굵기
자간
em
-0.01
좌우 패딩
px
20
마우스 오버 효과
대메뉴 전체 문구에 적용 · 호버 텍스트/배경 색상 옵션 연동
활성 메뉴 표시
현재 페이지 메뉴 표시 · 배경/알약/박스 색은 메인색(cf_10) 연동
2단 (서브) 메뉴
폰트 크기
px
14
자간
em
0.02
하위메뉴 정렬
마우스 오버 효과
강조선 색상은 메인색(cf_10) 연동 · 버티컬 드롭다운 기준
모바일 글자 크기 (사이트 전체)
전체 비율
%
100
헤더·본문 섹션·푸터 등 모든 페이지의 모바일 텍스트를 한 번에 키우거나 줄입니다.
100% = 기본 · 데스크탑 크기는 영향 없음 · 저장 후 반영
모바일 폰트
1단 크기
px
26
2단 크기
px
16
드로어 좌 패널 (브랜드)
텍스트 색상
드로어 우 패널 (메뉴)
배경
메뉴 텍스트
서브 텍스트
호버 색상
전체 메뉴 디자인 · 추가 블록
햄버거 버튼으로 여는 전체 메뉴입니다. v2는 PC 오른쪽 시트·모바일 전체 화면으로 열리며 마이(예약·상담·장바구니), 메뉴/이벤트/콘텐츠 탭, 공식 채널, 진료시간, 아래 고정 상담 막대를 보여 줍니다. 자료가 없는 블록은 자동으로 숨습니다.
메뉴 디자인
카드형 바탕색
공용 화면 바탕색
카드형 모양
아래 고정 상담 막대 (상담 · 전화 · 카카오 · 네이버)
이벤트 탭
콘텐츠 탭: 새 글 (칼럼 · 전후 · 후기 · 시술)
콘텐츠 탭: 유튜브 쇼츠 (쇼케이스 관리 영상)
SNS 채널 카드 (기본 정보에 주소가 있는 채널)
진료시간 카드 (오늘 진료 상태 포함)
쇼케이스 바로가기 (콘텐츠 탭)
이벤트 표시
이벤트 개수
새 콘텐츠 출처
새 콘텐츠 개수
번호 목록형 세부 설정
위 "메뉴 디자인"이 번호 목록형일 때만 적용됩니다. 숫자 칸을 비우면 괄호 안 기본값을 씁니다.
PC 메뉴 처음 상태
로고 사용 방식
텍스트 모드는 메뉴 색상을 자동으로 따라갑니다 (스크롤·메뉴 hover 색 자동 전환).
로고 텍스트
다국어는 「설정 → 다국어」 탭에서 자동 번역되거나 수동 입력 가능 (source: head / logo).
텍스트 스타일
폰트
크기
px
19
굵기
자간
em
0
상황별 로고
기본 로고
스크롤 전 기본 상태 (메인 페이지)
logo_default.png
화이트 로고
어두운 배경 / hover용
logo_white.png
스크롤 로고
헤더 고정 후 상태 (비우면 기본 로고 사용)
logo_scroll.png
호버 로고
대메뉴 hover 시 (비우면 화이트 로고 사용)
logo_hover.png
서브페이지 로고
메인 외 모든 페이지 — 기본/스크롤 상태 (비우면 스크롤 로고 사용)
없음
로그인 다크 로고
밝은 로그인 화면 전용 로고. 비우면 스크롤 → 서브페이지 → 기본 로고 순으로 사용
없음
모바일 메뉴 로고
햄버거 메뉴(드로어)가 열렸을 때 상단에 표시되는 로고 전용 — 모바일 헤더(닫힘 상태)는 기본 로고 그대로. 비우면 기본 로고 사용
없음
영문 폰트 (.eng_b2 클래스)
글꼴 이름은 웹폰트 CSS 안의 font-family 이름과 같게 적어 주세요. 주소를 비우면 방문자 기기에 설치된 글꼴일 때만 보입니다. 저장하면 페이지 전체에 적용됩니다.
국문 폰트를 선택하면 해당 폰트를 영문 콘텐츠에도 그대로 적용합니다.
한글 폰트 (.pret 클래스)
글꼴 이름은 웹폰트 CSS 안의 font-family 이름과 같게 적어 주세요. 주소를 비우면 방문자 기기에 설치된 글꼴일 때만 보입니다. 저장하면 페이지 전체에 적용됩니다.
메인에서도 한글 글꼴을 첫 화면 뒤에 싣기 (Pretendard 경량 v2 일 때, 서브 페이지와 같은 방식)
켜면 첫 방문은 크기를 맞춘 대체 글꼴로 먼저 그리고 화면이 뜬 뒤 경량 v2(약 500KB)를 받습니다. 다시 오면 바로 v2 로 보입니다. 모바일 첫 화면 속도가 빨라집니다.
미리보기
DESIGN GUIDE 2026디자인 가이드 미리보기
저장 후 페이지 전체에 적용됩니다. 구글폰트는 외부 서버에서 로드되어 첫 진입 속도에 영향을 줄 수 있습니다.
내부 모드는 위의 ‘가로 폭’ 설정을 경계로 사용하며, 루프 ON/OFF 모두 해당 범위 밖의 카드를 숨깁니다.
추가 옵션 · 의료진 팀 썸네일
간격을 제외한 너비를 균등하게 나눕니다. 사진이 적으면 실제 개수에 맞추고, 많으면 가로로 넘길 수 있습니다.
추가 옵션 · 의료진 상세
첫 줄 직함은 ‘카드 라벨’ 글꼴·크기·색상, 아래 소개문구는 ‘카드 설명’ 글꼴·크기·색상을 각각 사용합니다.
추가 옵션 · Face Balance
사진·영상 관리는 이 섹션의 ‘사진/영상 관리’에서 합니다. 장면 1은 사진 1장, 장면 2는 2장, 장면 3은 3장, 장면 4는 포스터 사진과 MP4/WebM 영상을 등록하세요. 영상이 없으면 포스터 사진이 표시됩니다.
네비게이션
슬라이더 전환
마키 설정
리얼 셀피 메인 연동
그리드 설정
표시 개수
HTML 코드
※ 입력값은 sanitize 없이 그대로 출력됩니다. 슈퍼관리자만 저장 가능.
PHP 인클루드 (개발자)
※ skin/main_php/ 안의 .php 파일만 include 가능합니다 (디렉토리 traversal 차단).
※ 파일 안에서 $_sec, $tpl_key, $sid 변수 사용 가능.
※ 디렉토리가 없으면 FTP로 직접 만들어 주세요: /hive05/www/skin/main_php/
섹션 스타일
vh
vh
0이면 PC 값을 따라갑니다. 권장: PC 100, 모바일 60~80
섹션 라운드
등장 모션
고급
/care 시술 연결
시술 관리의 이름·설명·가격·이미지를 가져옵니다. 탭은 연결한 시술의 실제 카테고리와 표시 순서를 자동으로 따릅니다. 아래 설정은 전체 저장 시 적용됩니다.
내부 모드는 위의 ‘가로 폭’ 설정을 경계로 사용하며, 루프 ON/OFF 모두 해당 범위 밖의 카드를 숨깁니다.
추가 옵션 · 의료진 팀 썸네일
간격을 제외한 너비를 균등하게 나눕니다. 사진이 적으면 실제 개수에 맞추고, 많으면 가로로 넘길 수 있습니다.
추가 옵션 · 의료진 상세
첫 줄 직함은 ‘카드 라벨’ 글꼴·크기·색상, 아래 소개문구는 ‘카드 설명’ 글꼴·크기·색상을 각각 사용합니다.
추가 옵션 · Face Balance
사진·영상 관리는 이 섹션의 ‘사진/영상 관리’에서 합니다. 장면 1은 사진 1장, 장면 2는 2장, 장면 3은 3장, 장면 4는 포스터 사진과 MP4/WebM 영상을 등록하세요. 영상이 없으면 포스터 사진이 표시됩니다.
네비게이션
슬라이더 전환
마키 설정
리얼 셀피 메인 연동
그리드 설정
표시 개수
HTML 코드
※ 입력값은 sanitize 없이 그대로 출력됩니다. 슈퍼관리자만 저장 가능.
PHP 인클루드 (개발자)
※ skin/main_php/ 안의 .php 파일만 include 가능합니다 (디렉토리 traversal 차단).
※ 파일 안에서 $_sec, $tpl_key, $sid 변수 사용 가능.
※ 디렉토리가 없으면 FTP로 직접 만들어 주세요: /hive05/www/skin/main_php/
섹션 스타일
vh
vh
0이면 PC 값을 따라갑니다. 권장: PC 100, 모바일 60~80
섹션 라운드
등장 모션
고급
/care 시술 연결
시술 관리의 이름·설명·가격·이미지를 가져옵니다. 탭은 연결한 시술의 실제 카테고리와 표시 순서를 자동으로 따릅니다. 아래 설정은 전체 저장 시 적용됩니다.
내부 모드는 위의 ‘가로 폭’ 설정을 경계로 사용하며, 루프 ON/OFF 모두 해당 범위 밖의 카드를 숨깁니다.
추가 옵션 · 의료진 팀 썸네일
간격을 제외한 너비를 균등하게 나눕니다. 사진이 적으면 실제 개수에 맞추고, 많으면 가로로 넘길 수 있습니다.
추가 옵션 · 의료진 상세
첫 줄 직함은 ‘카드 라벨’ 글꼴·크기·색상, 아래 소개문구는 ‘카드 설명’ 글꼴·크기·색상을 각각 사용합니다.
추가 옵션 · Face Balance
사진·영상 관리는 이 섹션의 ‘사진/영상 관리’에서 합니다. 장면 1은 사진 1장, 장면 2는 2장, 장면 3은 3장, 장면 4는 포스터 사진과 MP4/WebM 영상을 등록하세요. 영상이 없으면 포스터 사진이 표시됩니다.
네비게이션
슬라이더 전환
마키 설정
리얼 셀피 메인 연동
그리드 설정
표시 개수
HTML 코드
※ 입력값은 sanitize 없이 그대로 출력됩니다. 슈퍼관리자만 저장 가능.
PHP 인클루드 (개발자)
※ skin/main_php/ 안의 .php 파일만 include 가능합니다 (디렉토리 traversal 차단).
※ 파일 안에서 $_sec, $tpl_key, $sid 변수 사용 가능.
※ 디렉토리가 없으면 FTP로 직접 만들어 주세요: /hive05/www/skin/main_php/
섹션 스타일
vh
vh
0이면 PC 값을 따라갑니다. 권장: PC 100, 모바일 60~80
섹션 라운드
등장 모션
고급
/care 시술 연결
시술 관리의 이름·설명·가격·이미지를 가져옵니다. 탭은 연결한 시술의 실제 카테고리와 표시 순서를 자동으로 따릅니다. 아래 설정은 전체 저장 시 적용됩니다.
내부 모드는 위의 ‘가로 폭’ 설정을 경계로 사용하며, 루프 ON/OFF 모두 해당 범위 밖의 카드를 숨깁니다.
추가 옵션 · 의료진 팀 썸네일
간격을 제외한 너비를 균등하게 나눕니다. 사진이 적으면 실제 개수에 맞추고, 많으면 가로로 넘길 수 있습니다.
추가 옵션 · 의료진 상세
첫 줄 직함은 ‘카드 라벨’ 글꼴·크기·색상, 아래 소개문구는 ‘카드 설명’ 글꼴·크기·색상을 각각 사용합니다.
추가 옵션 · Face Balance
사진·영상 관리는 이 섹션의 ‘사진/영상 관리’에서 합니다. 장면 1은 사진 1장, 장면 2는 2장, 장면 3은 3장, 장면 4는 포스터 사진과 MP4/WebM 영상을 등록하세요. 영상이 없으면 포스터 사진이 표시됩니다.
네비게이션
슬라이더 전환
마키 설정
리얼 셀피 메인 연동
그리드 설정
표시 개수
HTML 코드
※ 입력값은 sanitize 없이 그대로 출력됩니다. 슈퍼관리자만 저장 가능.
PHP 인클루드 (개발자)
※ skin/main_php/ 안의 .php 파일만 include 가능합니다 (디렉토리 traversal 차단).
※ 파일 안에서 $_sec, $tpl_key, $sid 변수 사용 가능.
※ 디렉토리가 없으면 FTP로 직접 만들어 주세요: /hive05/www/skin/main_php/
섹션 스타일
vh
vh
0이면 PC 값을 따라갑니다. 권장: PC 100, 모바일 60~80
섹션 라운드
등장 모션
고급
/care 시술 연결
시술 관리의 이름·설명·가격·이미지를 가져옵니다. 탭은 연결한 시술의 실제 카테고리와 표시 순서를 자동으로 따릅니다. 아래 설정은 전체 저장 시 적용됩니다.
내부 모드는 위의 ‘가로 폭’ 설정을 경계로 사용하며, 루프 ON/OFF 모두 해당 범위 밖의 카드를 숨깁니다.
추가 옵션 · 의료진 팀 썸네일
간격을 제외한 너비를 균등하게 나눕니다. 사진이 적으면 실제 개수에 맞추고, 많으면 가로로 넘길 수 있습니다.
추가 옵션 · 의료진 상세
첫 줄 직함은 ‘카드 라벨’ 글꼴·크기·색상, 아래 소개문구는 ‘카드 설명’ 글꼴·크기·색상을 각각 사용합니다.
추가 옵션 · Face Balance
사진·영상 관리는 이 섹션의 ‘사진/영상 관리’에서 합니다. 장면 1은 사진 1장, 장면 2는 2장, 장면 3은 3장, 장면 4는 포스터 사진과 MP4/WebM 영상을 등록하세요. 영상이 없으면 포스터 사진이 표시됩니다.
네비게이션
슬라이더 전환
마키 설정
리얼 셀피 메인 연동
그리드 설정
표시 개수
HTML 코드
※ 입력값은 sanitize 없이 그대로 출력됩니다. 슈퍼관리자만 저장 가능.
PHP 인클루드 (개발자)
※ skin/main_php/ 안의 .php 파일만 include 가능합니다 (디렉토리 traversal 차단).
※ 파일 안에서 $_sec, $tpl_key, $sid 변수 사용 가능.
※ 디렉토리가 없으면 FTP로 직접 만들어 주세요: /hive05/www/skin/main_php/
섹션 스타일
vh
vh
0이면 PC 값을 따라갑니다. 권장: PC 100, 모바일 60~80
섹션 라운드
등장 모션
고급
/care 시술 연결
시술 관리의 이름·설명·가격·이미지를 가져옵니다. 탭은 연결한 시술의 실제 카테고리와 표시 순서를 자동으로 따릅니다. 아래 설정은 전체 저장 시 적용됩니다.
