공식자료

heritage XEDITION 테마

Zittme 1.0.0부터 코어에 동봉되는 기본 테마 heritage XEDITION의 상세 매뉴얼입니다. heritage 테마의 구조와 설정 체계를 그대로 물려받고, XE 시절 XEDITION 레이아웃과 XEDITION 게시판 스킨의 디자인(골드 포인트 · 다크 그레이 · 직각 구획 · 클래식 테이블 게시판)을 지금 기준으로 다시 그린 와이드 테마입니다. 포인트 색상 연동, 다크 모드, 반응형을 기본 지원합니다.

heritage 테마와의 차이는 "디자인"입니다. 레이아웃 설정 항목, 메뉴 클래스(m / sl / sf) 규칙, 테마 적용 방법은 heritage와 같으므로 둘 중 어느 쪽을 쓰더라도 같은 방식으로 운영할 수 있습니다.

구성

구성요소이름역할
레이아웃heritage_xedition사이트 전체 골격 (헤더 · 메뉴 · 비주얼 · 본문 · 푸터)
게시판 스킨heritage_xedition게시판 목록 · 읽기 · 쓰기 · 댓글 (클래식 테이블형)
회원 스킨heritage_xedition로그인 · 가입 · 마이페이지 · 계정찾기
쪽지 스킨heritage_xedition쪽지함 · 친구 목록
커머스 스킨heritage_xedition쇼핑몰 화면 (커머스 모듈 설치 시)
예약 스킨heritage_xedition예약 화면 (예약 모듈 설치 시)
짓미페이 스킨heritage_xedition결제 화면 (짓미페이 모듈 설치 시)
문의 · 지식iN 스킨heritage_xedition컨택트 · 지식질문 모듈 설치 시
위젯 스킨헤리티지 XEDITION통합 콘텐츠 위젯 · 통합 커머스 위젯 (코어 위젯에 포함)

모든 구성요소가 같은 디자인 토큰(색 · 서체 · 간격 · 직각 모서리)을 공유합니다. 본문 서체는 Pretendard, 영문 제목과 로고 텍스트에는 Raleway가 쓰입니다(한글은 Pretendard로 표시).

heritage 테마와 다른 점

항목heritageheritage XEDITION
포인트 색상 기본값#6c5ce0 (보라)#cda25a (골드)
모서리둥근 모서리직각 (모든 카드 · 버튼 · 입력창)
본문 최대 너비1060 / 1180 / 13201320 / 1440 / 1600 (와이드)
헤더상단 유틸 줄 + 메뉴 바 2단로고 · 메뉴 · 유틸이 한 줄인 전체 폭 헤더. 스크롤하면 높이가 줄고 반투명 블러로 고정
메뉴 드롭다운메뉴 바 아래 밝은 패널각 1차 메뉴 아래 다크 드롭다운, 상단 3px 포인트색 라인
검색헤더 검색창검색 아이콘을 누르면 헤더를 덮는 대형 검색 오버레이
로그인 영역텍스트 링크포인트색 프로필 박스(사진 + 닉네임 + 알림 벨), 올리면 내 정보 · 관리자 · 로그아웃 메뉴
비주얼 슬라이더본문 폭항상 화면 전체 폭
서브 페이지제목 없음회색 서브 타이틀 밴드 (slx / sfx로 숨길 수 있음)
푸터중앙 정렬본문 폭 좌측 정렬 컬럼 + 전체 폭 다크 카피라이트 바
다크 모드 팔레트남색 계열골드에 맞춘 웜 차콜

적용하기

  1. 관리자 > 디자인 설정으로 이동합니다.
  2. 테마 목록에서 헤리티지 XEDITION을 고르고 적용을 누릅니다.
  3. 레이아웃과 각 모듈 스킨이 한 번에 적용됩니다. 특정 구성요소만 빼려면 적용 화면에서 체크를 해제합니다.
  4. Zittme 1.0.0을 새로 설치한 사이트는 이 테마가 처음부터 적용되어 있습니다(레이아웃 + 게시판 · 회원 · 쪽지 스킨). 라이믹스나 0.0.x에서 업데이트한 사이트는 기존 설정이 유지되므로 위 절차로 직접 적용해야 합니다.

    테마 적용은 이전 상태를 기억하므로 언제든 적용 전 상태로 되돌릴 수 있습니다. 사용 중인 테마는 설치된 테마 목록에서 삭제 버튼이 비활성화됩니다.

    레이아웃 설정 전체 항목

    관리자 > 레이아웃 설정, 또는 사이트를 보면서 좌하단 프론트 관리바의 "레이아웃 설정"에서 바꿉니다. 설정은 4개 그룹(탭)으로 나뉩니다.

    기본

    항목기본값설명
    로고 이미지없음높이 40px 기준으로 표시. 비우면 로고 텍스트 사용
    다크모드 로고 이미지없음다크 모드에서 대신 표시할 로고. 비우면 기본 로고를 그대로 사용
    로고 텍스트없음비우면 사이트 제목이 표시됩니다. Raleway 서체로 표시
    포인트 색상#cda25a버튼 · 링크 · 활성 표시 · 프로필 박스 · 드롭다운 상단선과 게시판 · 위젯 스킨 강조색까지 함께 결정합니다
    본문 최대 너비1440px좁게 1320 / 기본 1440 / 넓게 1600. 와이드 테마이므로 기본값이 heritage보다 넓습니다
    메뉴 정렬로고 옆에 붙이기로고 옆 / 가운데. 헤더는 항상 화면 전체 폭을 쓰고, 이 옵션은 메뉴 위치만 바꿉니다
    메뉴 바 색상어둡게어둡게 / 포인트 색상 / 밝게. 모바일 서랍은 이 값과 무관하게 항상 다크 톤입니다
    모바일 다크모드 버튼 위치메뉴 서랍 안메뉴 서랍 안 / 헤더 / 푸터. PC에서는 항상 헤더에 표시
    모바일 언어 선택 위치메뉴 서랍 안메뉴 서랍 안 / 헤더 / 푸터. PC에서는 항상 헤더에 표시. 코어에서 사용 언어가 둘 이상일 때만 나옵니다
    색상 모드방문자 기기 설정에 맞춤자동 / 항상 밝게 / 항상 어둡게

    첫 화면 (비주얼 슬라이더)

    항목기본값설명
    비주얼 슬라이더 표시메인 형태일 때만메인 형태일 때만 / 서브 페이지에도 표시 / 사용 안 함. 슬라이드를 하나도 등록하지 않으면 표시되지 않습니다
    자동 넘김 간격 (초)60이면 자동으로 넘기지 않습니다
    비주얼 슬라이드없음반복 필드. 추가 버튼으로 슬라이드를 여러 장 등록하고 끌어서 순서를 바꿉니다

    슬라이드 1장의 항목: 배경 이미지, 제목, 설명, 버튼 이름, 버튼 링크, 문구 정렬(왼쪽/가운데).

    슬라이더는 본문 폭과 무관하게 항상 화면 전체 폭으로 표시되고, 높이는 화면 폭에 따라 320px에서 600px 사이로 맞춰집니다. 가로 1920px 이상의 배경 이미지를 권장합니다. 좌우 화살표는 반투명 사각 버튼, 페이지 표시는 사각 도트이며 현재 슬라이드는 세로로 긴 포인트색 막대로 표시됩니다.

    본문·사이드

    항목기본값설명
    통합 검색 사용헤더의 검색 아이콘과 검색 오버레이 표시 여부
    사이드에 로그인 상자 표시서브(LNB) 페이지의 사이드에 로그인 위젯을 표시합니다

    푸터

    항목설명
    사이트 소개 문구푸터 좌측 소개 텍스트
    사업자·연락처 정보줄바꿈한 각 줄이 한 항목으로 표시됩니다 (상호 · 대표 · 사업자번호 · 주소 등)
    저작권 표기하단 다크 카피라이트 바에 표시

    푸터 메뉴는 사이트 메뉴 편집에서 "푸터 메뉴"(footer_menu)에 항목을 연결하면 표시됩니다(1뎁스). 카피라이트 바 오른쪽에는 맨 위로 버튼이 있고, 모바일 위치 옵션을 "푸터"로 둔 경우 다크모드 버튼과 언어 선택이 여기에 표시됩니다.

    페이지 유형 (메뉴 클래스 m / sl / sf / slx / sfx)

    페이지마다 다섯 가지 표기 중 하나를 메뉴 클래스로 지정합니다.

    유형메뉴 클래스모양
    메인형m비주얼 슬라이더가 표시되는 홈 화면용. 서브 타이틀 밴드 없음
    서브형sl서브 타이틀 밴드 + 좌측 LNB(현재 메뉴에 하위 메뉴가 있을 때) + 본문
    전체 폭 서브형sf서브 타이틀 밴드 + LNB 없이 본문이 전체 폭
    서브형 (밴드 없음)slxsl과 같지만 서브 타이틀 밴드를 표시하지 않음
    전체 폭 서브형 (밴드 없음)sfxsf와 같지만 서브 타이틀 밴드를 표시하지 않음

    서브 타이틀 밴드는 본문 위에 깔리는 회색 띠로, 현재 메뉴 이름을 제목으로 보여 줍니다. 게시판 스킨의 게시판 타이틀 기능과 겹친다면 slx / sfx로 밴드를 끄고 게시판 타이틀만 쓰거나, 반대로 밴드를 두고 게시판 타이틀을 비우면 됩니다.

    지정 방법

    1. 관리자 > 사이트 메뉴 편집에서 메뉴 항목을 엽니다.
    2. 클래스 입력란에 m, sl, sf, slx, sfx 중 하나를 넣습니다.
    3. 저장하면 그 메뉴로 들어간 페이지가 해당 유형으로 표시됩니다.
    4. 동작 규칙:

      • 클래스를 지정하지 않은 메뉴는 레이아웃 설정의 레이아웃 형태(기본값: 서브)를 따릅니다. 사이트 대문(첫 페이지)은 지정이 없으면 메인형으로 표시됩니다.
      • 하위 메뉴에 클래스를 넣으면 그 페이지에서는 하위 값이 상위보다 우선하고, 하위에 지정이 없으면 상위 메뉴의 클래스를 물려받습니다(3뎁스까지).
      • 클래스 칸에 다른 클래스와 공백으로 함께 적어도 됩니다. 예: sfx highlight
      • 회원 · 쪽지 · 짓미페이 · 통합검색 화면은 클래스 지정이 없으면 자동으로 전체 폭이 됩니다.

      메인 비주얼과의 조합

      • 비주얼 표시 "메인 형태일 때만"(기본) + 홈 메뉴에 m : 홈에서만 슬라이더가 보이는 일반적인 구성
      • 비주얼 표시 "서브 페이지에도 표시" : 유형과 무관하게 모든 페이지 상단에 슬라이더
      • 비주얼 표시 "사용 안 함" : 어디에도 표시하지 않음

      LNB (좌측 하위 메뉴)

      서브형(sl / slx) 페이지에서 현재 1차 메뉴에 하위 메뉴가 있으면 좌측 260px 영역에 하위 메뉴 목록이 나옵니다. 박스 없는 목록 형태로, 제목 아래 구분선과 포인트색 짧은 선이 붙고 현재 항목은 왼쪽 3px 포인트색 막대로 표시됩니다. 3차 메뉴가 있는 항목은 오른쪽 화살표가 붙고 펼쳐진 하위 항목은 꺾임 화살표 아이콘으로 들여쓰기됩니다. 하위 메뉴가 없는 메뉴는 LNB 없이 본문만 표시됩니다.

      헤더와 상단 메뉴 (GNB)

      헤더는 항상 화면 전체 폭을 씁니다. 왼쪽부터 로고, 메뉴, 우측 유틸 순서이고 페이지를 내리면 높이가 줄어든 채 상단에 고정되며 배경이 반투명 블러로 바뀝니다.

      • 사이트 메뉴 편집의 "상단 메뉴"(gnb)에 연결한 항목이 표시되며 3뎁스까지 지원합니다. 1차 메뉴에 마우스를 올리면 그 항목 아래로 다크 드롭다운이 열리고 상단에 3px 포인트색 라인이 붙습니다. 3차 메뉴는 드롭다운 안에서 들여쓰기로 표시됩니다.
      • 현재 페이지의 1차 메뉴에는 아래쪽 3px 포인트색 밑줄이 표시됩니다.
      • 메뉴 정렬 옵션으로 메뉴를 로고 옆에 붙이거나 헤더 가운데에 둘 수 있습니다.

      우측 유틸은 왼쪽부터 다음 순서입니다.

      요소설명
      다크 모드 버튼방문자가 밝게/어둡게를 직접 바꿉니다(기기별 저장)
      검색 아이콘누르면 헤더를 덮는 대형 검색 입력창이 열립니다. X, Esc, 바깥 클릭으로 닫힙니다. 통합 검색 사용을 끄면 숨겨집니다
      언어 버튼KR / EN 같은 축약 코드로 표시. 누르면 사용 언어 목록이 열리고, 보던 페이지를 유지한 채 언어만 바뀝니다. 코어에서 사용 언어가 둘 이상일 때만 나옵니다
      프로필 영역비로그인: 포인트색 로그인 버튼. 로그인: 프로필 사진 + 닉네임 + 알림 벨이 든 포인트색 박스. 올리면 내 정보 · 관리자(관리 권한이 있을 때) · 로그아웃 메뉴가 열립니다

      알림 벨은 알림센터(ncenterlite) 모듈이 설치된 사이트에서 표시되며, 읽지 않은 알림 수와 최근 알림 목록을 보여 줍니다. 이 경우 알림센터의 기본 플로팅 위젯은 자동으로 꺼집니다.

      모바일

      1024px 이하에서는 메뉴가 숨겨지고 오른쪽 끝의 햄버거 버튼으로 서랍 메뉴를 엽니다. 서랍은 포인트 색상을 바탕으로 한 다크 톤이며 메뉴 전체(3뎁스)와 로그인 · 내 정보 · 관리자 링크가 들어갑니다. 다크 모드 버튼과 언어 선택은 레이아웃 설정의 "모바일 ... 위치" 옵션에 따라 서랍 하단 도구 줄, 헤더, 푸터 중 한 곳에 표시됩니다.

      게시판 스킨

      게시판 설정 > 스킨 설정에서 heritage_xedition을 고릅니다. 반응형이므로 모바일 스킨을 따로 두지 않아도 됩니다.

      XEDITION 게시판 스킨의 클래식 테이블 형식을 따릅니다. 목록은 위아래 굵은 구분선 사이에 놓이고 머리글은 밝은 바탕에 더블 보더로 마감됩니다. 공지 행은 옅은 회색 바탕으로 구분됩니다.

      항목설명
      게시판 타이틀 · 설명스킨 설정에서 입력하면 목록 위에 게시판 헤더(제목 + 포인트색 짧은 선 + 설명)가 표시되고, 글쓰기 버튼이 헤더 오른쪽으로 올라갑니다. 비우면 헤더 없이 목록 아래 버튼 줄에 글쓰기가 놓입니다. 글읽기 화면에서는 헤더가 표시되지 않습니다
      목록 형태목록형 / 카드형(썸네일) / 웹진형(썸네일 + 요약) / FAQ형(질문 클릭 시 답변 펼침)
      글쓴이 정렬왼쪽 / 가운데
      프로필 사진 · 서명 · 첨부파일 노출글읽기 화면의 표시 여부
      추천 · 비추천 버튼사용 여부 (기본: 추천만 사용)
      • 댓글 수는 제목 옆에 +N으로 표시됩니다.
      • 새 글 표시는 제목 앞의 7px 포인트색 사각 점으로, 게시판 설정의 "새 글 표시 시간"을 따릅니다(기본 24시간).
      • 글읽기 화면은 어두운 제목 바 대신 큰 제목과 밑줄이 있는 메타 줄(글쓴이 · 날짜 · 조회 · 추천)로 구성됩니다.
      • 버튼은 플랫한 연회색 사각 버튼이며 올리면 포인트색으로 채워집니다. 주 동작 버튼(등록 · 글쓰기)은 처음부터 포인트색입니다.
      • 페이지네이션은 테두리 없는 숫자 나열로, 현재 페이지만 포인트색 숫자와 밑줄로 표시되고 처음/끝은 이중 화살표 아이콘입니다.
      • 썸네일은 직각으로 잘립니다.
      • 강조색은 레이아웃의 포인트 색상과 연동됩니다.

      회원 · 쪽지 스킨

      회원 모듈 설정과 쪽지 설정에서 각각 heritage_xedition을 고릅니다.

      • 화면 상단에는 제목과 그 아래 포인트색 짧은 선이 붙고, 제목과 본문 사이에 충분한 여백을 둡니다.
      • 마이페이지 · 쪽지함의 프로필 영역은 52px 프로필 사진 + 닉네임 + 등급 · 가입일이 든 카드로 표시되며, 카드 상단에 3px 포인트색 선이 붙습니다.
      • 좌측 탐색 메뉴는 레이아웃 LNB와 같은 문법(구분선 제목 + 왼쪽 3px 활성 막대)입니다.
      • 입력창 · 선택 상자 · 버튼 높이는 모두 46px로 통일되어 한 줄에 놓였을 때 어긋나지 않습니다. 버튼은 게시판과 같은 플랫 사각 버튼입니다.
      • 모바일에서는 프로필 카드와 검색 폼이 세로로 쌓입니다.

      위젯 스킨

      통합 콘텐츠 위젯과 통합 커머스 위젯에 "헤리티지 XEDITION" 스킨이 들어 있습니다(코어 위젯에 포함, 별도 설치 불필요).

      • 박스 없이 제목 줄 아래 구분선과 포인트색 짧은 선으로 영역을 나눕니다(게시판 헤더와 같은 문법).
      • 탭형은 탭 줄 하나만 끝까지 긋고 "더보기" 링크가 탭 줄 오른쪽에 놓입니다.
      • 댓글 수 +N, 새 글 사각 점, 직각 썸네일 등 표기는 게시판 스킨과 같습니다.

      다크 모드

      • 색상 모드 "자동"이면 방문자 기기의 라이트/다크 설정을 따르고, 헤더의 전환 버튼으로 방문자가 직접 바꿀 수도 있습니다(기기별 저장).
      • 다크 팔레트는 골드 포인트에 맞춘 웜 차콜(갈색 기가 도는 짙은 회색)입니다. 게시판 · 회원 · 쪽지 · 커머스 · 위젯 스킨까지 함께 전환됩니다.
      • 다크모드 로고 이미지를 따로 등록하면 다크 모드에서 그 로고가 대신 표시됩니다. 등록하지 않으면 기본 로고를 그대로 쓰므로 투명 배경 로고를 권장합니다.

      포인트 색상 바꾸기

      기본 골드(#cda25a) 대신 다른 색을 쓰려면 레이아웃 설정의 포인트 색상만 바꾸면 됩니다. 버튼 · 링크 · 활성 표시 · 프로필 박스 · 드롭다운 상단선 · 게시판과 위젯의 강조색, 체크박스 · 라디오 같은 입력 요소 색까지 한 번에 바뀝니다. 다크 모드에서는 지정한 색을 기준으로 밝기가 자동 보정됩니다.

      짙은 남색이나 검정을 포인트로 쓰면 XEDITION 원본의 모노톤 무드에 가까워지고, 골드를 유지하면 클래식한 느낌이 납니다.

      커스터마이징 (CSS 변수)

      색은 CSS 변수로 관리됩니다. 포인트 색상 하나로 대부분 해결되지만, 더 세밀한 수정은 자식 CSS에서 변수를 재정의하세요. 레이아웃 파일을 직접 고치면 테마 업데이트 때 덮어써질 수 있습니다.

      변수
      --hr-brand포인트 컬러 (레이아웃 설정 값이 주입됨)
      --hr-brand-dark / --hr-brand-light포인트 컬러의 어두운 · 밝은 변형 (호버, 다크 모드 링크)
      --hr-ink본문 글자색
      --hr-muted보조 글자색
      --hr-bg페이지 배경
      --hr-surface카드 · 패널 배경
      --hr-line구분선
      --hr-nav-bg드롭다운 · 푸터 바 · 모바일 서랍 등 다크 요소 배경
      --hr-w본문 최대 너비 (레이아웃 설정 값)
      --hr-font-display제목 · 로고용 서체 (기본 Raleway)
      --hr-radius모서리 반경 (이 테마는 0)

      메인 페이지 구성 예

      1. 홈 메뉴의 클래스를 m으로 지정하고 비주얼 슬라이드를 2장 이상 등록합니다.
      2. 페이지 모듈로 홈 본문을 만들고 통합 콘텐츠 위젯을 줄 단위로 쌓습니다. 위젯 스킨은 "헤리티지 XEDITION"을 고릅니다.
      3. 게시판이 여러 개라면 탭형 위젯으로 묶어 한 영역에 보여 줍니다.
      4. 쇼핑몰을 함께 운영한다면 통합 커머스 위젯으로 상품 줄을 추가합니다.
      5. 자주 묻는 질문

        • 비주얼 슬라이더가 안 나와요: ① 슬라이드가 1장 이상 등록되어 있는지 ② 비주얼 표시가 "사용 안 함"이 아닌지 ③ 현재 페이지가 메인형(m)인지(표시 설정이 "메인 형태일 때만"인 경우) 순서로 확인하세요.
        • 서브 페이지 위에 회색 띠(제목)를 없애고 싶어요: 메뉴 클래스를 slx 또는 sfx로 바꾸세요.
        • 좌측 메뉴(LNB)가 안 나와요: 서브형(sl / slx)이어야 하고, 현재 1차 메뉴에 하위 메뉴가 있어야 합니다.
        • 메뉴를 가운데로 옮겼더니 활성 메뉴 옆에 가는 세로선이 보여요: 1.0.0의 문제입니다. 테마 1.0.1 이상으로 업데이트하세요.
        • 다크 모드가 적용되지 않아요: 색상 모드가 "항상 밝게"로 고정되어 있지 않은지 확인하세요.
        • 일부 모듈 화면이 기본 디자인이에요: 해당 모듈 설정에서 스킨이 heritage_xedition으로 선택되어 있는지 확인하세요. 테마 일괄 적용은 사이트 메뉴에 연결된 모듈에만 적용되므로, 컨택트처럼 메뉴에 연결되지 않은 모듈은 모듈 설정에서 개별로 고릅니다.
        • 포인트 색을 바꿨는데 일부만 바뀌어요: 캐시 때문일 수 있습니다. 관리자 > 캐시 재생성 후 새로고침하세요.
        • 영문 제목 서체가 다르게 보여요: 제목과 로고 텍스트의 영문은 Raleway(구글 폰트)로 표시됩니다. 외부 폰트 로드가 막힌 환경에서는 Pretendard로 대체됩니다.
        • 라이믹스에서 업데이트했는데 테마가 적용되지 않았어요: 업데이트는 기존 디자인 설정을 유지합니다. 관리자 > 디자인 설정에서 헤리티지 XEDITION을 직접 적용하세요.