신선한 테마 (쇼핑몰)

신선식품 쇼핑몰을 위한 Zittme 공식 테마 신선한(sinsunhan)의 상세 매뉴얼입니다. 커머스 모듈과 짝을 이루어 설계되었으며, 대문(메인페이지)을 레이아웃이 직접 그리는 것이 가장 큰 특징입니다 — 위젯 페이지를 따로 만들지 않아도 슬라이더 · 일일특가 · 기획전 · 상품 섹션 · 랭킹 · 게시판 최신 글이 갖춰진 쇼핑몰 대문이 완성됩니다. 다크 모드와 반응형을 기본 지원하고, 기본 서체는 Pretendard입니다.

이 문서의 화면은 실제 데모 사이트를 그대로 캡처한 것입니다.

구성

모든 구성요소가 같은 디자인 토큰(브랜드 그린 · 서체 · 라운드 · 간격)을 공유합니다. 포인트 색상은 레이아웃 설정 한 곳에서 바꾸면 전 화면에 함께 적용됩니다.

설치와 적용

1. 테마 파일을 themes/sinsunhan 에 둡니다. (스토어 설치 또는 압축 해제)
2. 관리자 > 디자인 설정에서 신선한 테마를 고르고 적용합니다. 레이아웃과 모듈 스킨이 한 번에 적용됩니다.
3. 쪽지 스킨은 커뮤니케이션 모듈 설정에서, 메시지 스킨은 메시지 모듈 설정에서 신선한 을 선택합니다.
4. 커머스 모듈이 설치되어 있으면 상점 메뉴 · 헤더 검색 · 대문 상품 섹션이 자동으로 연동됩니다. 상점 모듈이 여러 개면 레이아웃 설정 > 메인 구성의 "상점 모듈 주소(mid)" 에 사용할 mid 를 적습니다.

함께 권장하는 사이트 설정

• 반응형 전환: 이 테마는 반응형이므로 모바일 전용 뷰를 끄는 것을 권장합니다. 시스템 설정 > 고급에서 모바일 뷰를 끄거나, config/config.user.inc.php 는 두지 않고 mobile.enabled 를 끕니다. 켜져 있으면 모바일에서 별도 모바일 레이아웃이 대신 표시됩니다.
• XE 호환 버튼 스타일 끄기: 코어 공통 CSS의 XE 시절 .btn 스타일(height 24px !important)이 스킨 버튼을 덮어쓸 수 있습니다. config/config.user.inc.php 에 아래 한 줄을 넣고 files/cache/assets 안의 파일을 비우면 깔끔하게 제거됩니다.

define('DISABLE_XE_BTN_STYLES', true);

테마 내장 메인페이지 (메인 구성)

사이트 대문이 메인 형태일 때 레이아웃이 직접 그리는 영역입니다. 레이아웃 설정 > 메인 구성 탭의 "메인페이지 섹션" 반복 필드로 섹션을 순서대로 조립합니다. 하나도 등록하지 않으면 기본 구성(카테고리 → 일일특가 → 기획전 → 추천 → 배너 → 랭킹 → 신상품 → 배너 → 할인 → 최신 글)이 사용됩니다.

섹션 종류	내용	출처(source)	개수(count)
상점 카테고리 타일	1차 카테고리 바로가기 타일	-	표시할 타일 수
일일특가	할인율 상위 상품이 날마다 하나씩 로테이션, 자정 카운트다운	-	-
진행 중 기획전 카드	커머스 기획전을 이미지 카드로	-	카드 수
추천 / 신상품 / 할인 / 인기 상품	상품 카드 그리드 (담기 바 포함)	-	상품 수
실시간 인기 랭킹	구매수 → 조회수 순 1~N위	-	순위 수
배너 스트립	비주얼 슬라이드 이미지를 중간 배너로 재사용	몇 번째 슬라이드인지 번호 (비우면 차례대로)	-
게시판 최신 글	게시판 글 목록. mid 를 쉼표로 여러 개 적으면 다단 배치	게시판 mid (예: notice,board)	글 수

섹션 제목을 비우면 종류별 기본 제목이 사용됩니다.

비주얼 슬라이더

레이아웃 설정 > 첫 화면 탭에서 슬라이드를 등록합니다(배경 이미지 · 제목 · 설명 · 버튼 · 정렬). 컨트롤(화살표 + 점)은 우하단에 한 덩어리로 모여 있어 모바일에서도 문구를 가리지 않습니다.

슬라이드를 하나도 등록하지 않으면 커머스 상점 홈 배너를 자동으로 승계합니다 — 상점 배너만 관리해도 대문 슬라이더가 함께 채워집니다.

상점 화면 (커머스 스킨)



상점 홈은 배너 슬라이더 · 카테고리 타일 · 기획전 · 추천/신상품/할인 섹션으로 구성됩니다. 배너는 커머스 관리자 > 프론트 설정에서 등록합니다.



목록 화면 상단에는 1차 카테고리 칩과 현재 카테고리의 2차 칩, 검색과 정렬이 배치됩니다. 모바일에서는 칩 줄이 여러 줄로 접히지 않고 좌우 스와이프 한 줄로 표시됩니다.



상품 상세는 일반 옵션 · 추가 옵션 · 조합형 옵션(축 × 축)을 모두 지원합니다. 위 화면은 분쇄도 × 용량 2축 조합형 옵션의 예입니다.

기획전



커머스 관리자에서 기획전을 만들면 상점 홈과 메인페이지의 기획전 카드에 자동으로 노출됩니다. 배너는 이미지 · 단색 · 그라디언트 중 고를 수 있습니다.

기획전 노출 기간(start_date / end_date)을 직접 DB 나 스크립트로 넣는 경우 반드시 14자리(YmdHis) 로 저장해야 합니다. 8자리로 넣으면 날짜 비교에서 항상 기간 만료로 처리되어 노출되지 않습니다.

게시판 스킨

게시판 스킨 설정의 목록 형태에서 게시판마다 다른 모양을 고를 수 있습니다.

형태	용도	예시
목록형	공지사항 등 일반 게시판. 카드 프레임 + 구분선 행	아래 공지사항 화면
웹진형	썸네일 + 요약이 있는 커뮤니티	아래 자유게시판 화면
카드형	썸네일 중심 갤러리	-
FAQ형	질문 클릭 시 답변이 펼쳐지는 아코디언	아래 Q&A 화면







웹진형 · 카드형 · FAQ형 필수 설정

썸네일과 요약이 나오려면 두 가지 설정이 필요합니다.

1. 게시판 목록 설정에 '요약' 컬럼 포함 — 목록 설정에 summary 가 없으면 목록 조회 자체가 본문을 가져오지 않아 요약·FAQ 답변이 빈 채로 나옵니다.
2. 문서 설정의 썸네일 대상을 '본문 포함'(content)으로 — 기본값(첨부파일만)에서는 본문 이미지로 썸네일을 만들지 않습니다. 설정을 바꾼 뒤에는 files/thumbnails 안의 파일을 비워 기존 실패 캐시(0바이트 파일)를 지워야 다시 생성됩니다.

모바일



• 하단에 홈 · 카테고리 · 검색 · 장바구니 · 마이페이지 5탭 바가 고정됩니다.
• 카테고리 탭은 상점 카테고리 바텀시트(1차 헤더 + 2차 칩), 검색 탭은 상점 검색 바텀시트를 아래에서 띄웁니다. 상점이 없는 사이트에서는 메뉴 서랍이 대신 열립니다.
• 메뉴 서랍은 계정 버튼 · 카테고리 칩 · 메뉴 목록 · 다크모드/언어 도구로 구성됩니다.

푸터

레이아웃 설정 > 푸터 탭에서 구성합니다. 항목을 비우면 해당 블록은 표시되지 않습니다.

항목	설명
사이트 소개 문구	로고 아래 한 줄 소개
고객센터 전화번호 / 운영시간	좌측 고객센터 블록. 전화번호를 비우면 블록 전체가 숨습니다
문의 이메일	이메일 문의 링크
사업자·연락처 정보	줄바꿈한 각 줄이 한 항목으로 표시
인스타그램 · 페이스북 · 유튜브 · 블로그 주소	입력한 것만 SNS 아이콘으로 표시
하단 안내 문구	저작권 위 작은 면책·안내 문구
저작권 표기	맨 아래 표기

페이지 유형과 LNB

사이트맵의 메뉴 클래스에 m(메인) / sl(서브) / sf(전체 폭)를 입력해 페이지 유형을 지정합니다. 사이트 대문은 클래스를 지정하지 않아도 메인으로 처리되고, 회원 · 쪽지 · 결제 화면은 자동으로 전체 폭이 됩니다. 이 테마의 서브페이지는 LNB 없이 본문 전체 폭으로 동작합니다.

레이아웃 설정 전체 항목

기본

항목	기본값	설명
로고 이미지 / 다크모드 로고	없음	높이 40px 기준. 비우면 로고 텍스트 사용
로고 텍스트	없음	비우면 사이트 제목
포인트 색상	브랜드 그린	버튼 · 링크 · 활성 표시 · 스킨 강조색을 함께 결정
본문 최대 너비	1180px	1060 / 1180 / 1320
메뉴 바 너비 · 색상	본문 폭 · 어둡게	전체 폭 채우기, 포인트색 · 밝게 선택 가능
모바일 다크모드 · 언어 버튼 위치	메뉴 서랍 안	헤더 · 푸터로 이동 가능
색상 모드	기기 설정에 맞춤	자동 / 항상 밝게 / 항상 어둡게

첫 화면

비주얼 슬라이더 표시 조건 · 자동 넘김 간격 · 슬라이드 목록(반복 필드).

메인 구성

상점 모듈 주소(mid) · 메인페이지 섹션(반복 필드). 위 "테마 내장 메인페이지" 참고.

본문·사이드

통합 검색 사용 여부 · (구형 호환) 사이드 로그인 상자.

푸터

위 "푸터" 표 참고.