1. 개요 및 특징
DX 히어로 슬라이더는 DXCMS의 홈 페이지 및 일반 페이지 상단에 풀스크린 히어로 슬라이더를 출력하는 플러그인입니다. 16가지 고급 전환 애니메이션 스타일을 제공하며, styles/ 폴더에 PHP 파일을 추가하는 것만으로 새 스타일이 자동 등록됩니다.주요 특징
• 16가지 고급 전환 스타일 — 크로스페이드부터 3D 워프까지• styles/ 폴더에 파일 추가만으로 새 스타일 자동 등록
• 홈(메인) + 모든 페이지 지원
• 페이지별 개별 스타일 설정 가능
• 자동 재생 / 수동 제어 지원
• PC/모바일 높이 개별 설정
• 기존 테마 히어로 자동 숨김 (충돌 없음)
• 슬라이드 드래그 순서 변경
• 이미지 URL 또는 DXCMS 업로더 사용
• 슬라이드별 제목, 부제목, 설명, 링크 버튼, 추가 필드 2개
• PHP 5.6+ 호환 — 외부 라이브러리 없음
2. 설치 방법
파일 구조
plugins/
dx-hero-slider/
manifest.php ← 플러그인 메타 정보
plugin.php ← 훅 등록, AJAX 처리, 슬라이더 렌더링
core/
install.php ← DB 테이블 설치
helper.php ← 공통 함수 (설정/슬라이드/스타일 조회)
admin/
index.php ← 관리자 화면
styles/
luxuryfade.php ← 스타일 파일 (16개)
splitcurtain.php
... (총 16개)
설치 절차
1. plugins/dx-hero-slider/ 폴더를 DXCMS 루트의 plugins/ 폴더에 복사2. 관리자 → 플러그인 → DX 히어로 슬라이더 → 활성화
3. 활성화 시 3개 DB 테이블 자동 생성 (hs_settings, hs_slides, hs_pages)
4. 샘플 슬라이드 3개 자동 삽입
5. 관리자 사이드바 → 레이아웃 → 히어로 슬라이더 메뉴 확인
6. 스타일 선택 후 저장 → 홈페이지에서 확인
플러그인 활성화 후 관리자 사이드바에 "레이아웃" 섹션과 "히어로 슬라이더" 링크가 자동 추가됩니다.
기존 테마의 히어로 영역(.dx-hero)은 슬라이더 활성 시 자동으로 숨겨집니다.
3. 관리자 화면 사용법
관리자 사이드바 → 레이아웃 → 히어로 슬라이더 접속관리자 화면은 4개 탭으로 구성됩니다: 스타일 선택 / 슬라이드 관리 / 기본 설정 / 페이지별 설정
3-1. 스타일 선택 탭
슬라이더의 전환 효과 스타일을 선택합니다.1. 스타일 카드 중 원하는 것을 클릭
2. 선택한 스타일에 초록색 체크 표시 확인
3. 하단 "저장" 버튼 클릭
styles/ 폴더에 새 PHP 파일을 추가하면 이 화면에 자동으로 표시됩니다.
각 스타일 카드에는 SVG 미리보기, 이름, 설명이 표시됩니다.
3-2. 슬라이드 관리 탭
슬라이드 추가, 수정, 삭제, 순서 변경을 합니다.슬라이드 추가
1. "+ 슬라이드 추가" 버튼 클릭
2. 슬라이드 편집 모달에서 정보 입력
3. "저장" 클릭
슬라이드 편집
• 목록에서 슬라이드 항목의 수정(✏️) 버튼 클릭
• 이미지 URL, 제목, 부제목, 설명, 링크 등 수정
• "저장" 클릭
슬라이드 순서 변경
• 목록에서 ⠿ 핸들을 드래그하여 순서 변경
• 드래그 후 자동 저장
슬라이드 활성/비활성
• 목록의 토글 스위치로 활성/비활성 전환
• 비활성 슬라이드는 화면에 표시되지 않음
3-3. 기본 설정 탭
| 설정 항목 | 설명 | 기본값 |
| 플러그인 활성화 | 전체 ON/OFF 제어 | ON |
| 자동 재생 | 슬라이드 자동 전환 여부 | ON |
| 자동 재생 간격 | 슬라이드 전환 대기 시간 (밀리초) | 5000 (5초) |
| 높이 (PC) | 데스크톱 기준 히어로 높이 | 55vh |
| 높이 (모바일) | 모바일 기준 히어로 높이 | 45vh |
높이는 px, vh, % 단위 모두 지원합니다. (예: 600px, 70vh, 50%)
3-4. 페이지별 설정 탭
페이지별로 다른 스타일을 적용하거나 슬라이더를 비활성화할 수 있습니다.설정 방법
1. 페이지 SLUG 입력 (홈은 "home" 입력)
2. 페이지 타입 선택: 홈 / 페이지
3. 스타일 선택: 전역 따름 / 특정 스타일 / 없음(비활성)
4. "추가/수정" 클릭
| 스타일 옵션 | 설명 |
| 전역 따름 | 기본 설정의 전역 스타일 적용 |
| 특정 스타일 | 이 페이지에만 해당 스타일 적용 |
| 없음 (none) | 이 페이지에서 슬라이더 비활성화 |
우선순위: 페이지별 설정 > 전역 설정
4. 슬라이드 필드 가이드
| 필드 | 필수 | 설명 |
| 이미지 URL | 필수 | 슬라이드 배경 이미지 URL. 외부 URL 또는 DXCMS 업로더 사용 |
| 제목 (Title) | 권장 | 메인 헤드라인 텍스트 |
| 부제목 (Subtitle) | 선택 | 제목 위/아래에 표시되는 작은 텍스트 (스타일별 상이) |
| 설명 (Description) | 선택 | 본문 설명 텍스트 |
| 링크 URL | 선택 | 버튼 클릭 시 이동할 URL |
| 링크 라벨 | 선택 | 버튼에 표시될 텍스트 (기본: "자세히 보기") |
| 추가 필드1 (Extra1) | 선택 | 스타일별 추가 필드 (배지, 태그 등) |
| 추가 필드2 (Extra2) | 선택 | 스타일별 추가 필드 |
| 정렬 순서 | 선택 | 숫자가 낮을수록 먼저 표시 (드래그로도 변경 가능) |
| 활성화 | 선택 | OFF 시 슬라이드 숨김 |
추가 필드1, 2는 선택한 스타일에 따라 용도가 다릅니다. 스타일 편집 모달에서 해당 필드 레이블이 표시됩니다.
이미지 권장 크기: 1920×1080px 이상. WebP, JPG, PNG 형식 권장.
5. 전환 스타일 목록 (16가지)
| 스타일 ID | 이름 | 전환 효과 설명 |
| luxuryfade | Luxury Fade | 부드러운 크로스페이드. 럭셔리하고 우아한 전환 효과. |
| splitcurtain | Split Curtain | 세로 커튼이 좌우로 갈라지는 드라마틱한 전환. |
| splitreveal | Split Reveal | 좌우로 분리되며 새 슬라이드가 나타나는 전환. |
| diagonal | Diagonal Shutter | 대각선으로 갈라지는 셔터 스타일 전환. |
| depthstack | Depth Stack | 카드가 Z축으로 쌓이는 3D 깊이감 전환. |
| cascadegrid | Cascade Grid | 컬럼이 위에서 내려오는 그리드 전환. |
| multicolumn | Multi Column | 여러 컬럼이 교차 스크롤하는 전환. |
| bentomosaic | Bento Mosaic | 격자 모자이크 조각으로 분해되는 전환. |
| shutterblade | Shutter Blade | 수평 셔터가 닫혔다 열리는 전환. |
| circularexpand | Circular Expand | 원이 중앙에서 퍼지며 나타나는 전환. |
| irisripple | Iris Ripple | 원형 아이리스가 확장되는 전환. |
| pixeldissolve | Pixel Dissolve | 수평 밴드로 분해되는 전환. |
| zaxiswarp | Z-Axis Warp | 카메라가 Z축으로 돌진하는 3D 워프 전환. |
| glitchpersp | Glitch Perspective | 3D 원근 글리치 전환. 사이버펑크 스타일. |
| techparallax | Tech Parallax | 레이어 패럴랙스 + 테크 스타일 전환. |
| neonglitch | Neon Glitch | 사이버펑크 네온 글리치 전환. 형광 색상 강조. |
스타일 카드 클릭 → SVG 미리보기로 전환 방향을 미리 확인할 수 있습니다.
6. 커스텀 스타일 개발 가이드
styles/ 폴더에 PHP 파일을 추가하면 관리자 화면에 자동으로 등록됩니다. 스타일 파일을 직접 제작하여 판매할 수 있습니다.파일 구조
<?php
/**
* @name My Style ← 관리자에 표시될 이름 (필수)
* @desc 스타일 설명 ← 관리자에 표시될 설명
* @preview <svg>...</svg> ← 미리보기 SVG (160×80 권장)
* @extra1 배지 텍스트 ← 추가 필드1 레이블 (선택)
* @extra2 태그 ← 추가 필드2 레이블 (선택)
*/
if (!defined('DX_CMS')) exit('Direct access not allowed.');
// $DXHS 변수로 슬라이드 데이터 접근
$slides = $DXHS['slides']; // 슬라이드 배열
$settings = $DXHS['settings']; // 전역 설정
$styleId = $DXHS['style_id']; // 현재 스타일 ID
// 높이 설정
$hpc = $settings['height_pc']; // 예: 55vh
$hmo = $settings['height_mo']; // 예: 45vh
// 자동 재생 설정
$autoPlay = (int)$settings['auto_play'];
$interval = (int)$settings['auto_interval']; // 밀리초
// 슬라이드 렌더링
?><div id="dxhs-wrap" style="..."><?php foreach ($slides as $sl): ?>
<!-- 슬라이드 HTML -->
<div class="dxhs-slide">
<img src="<?php echo htmlspecialchars($sl['image_url'],ENT_QUOTES); ?>">
<h2><?php echo htmlspecialchars($sl['title'],ENT_QUOTES); ?></h2>
</div>
<?php endforeach; ?>
</div>
<script>
// 슬라이더 JS 구현
</script>
슬라이드 데이터 구조
| 필드명 | 설명 |
| $sl['id'] | 슬라이드 ID |
| $sl['image_url'] | 배경 이미지 URL |
| $sl['title'] | 제목 |
| $sl['subtitle'] | 부제목 |
| $sl['description'] | 설명 |
| $sl['link_url'] | 링크 URL |
| $sl['link_label'] | 링크 버튼 텍스트 |
| $sl['extra1'] | 추가 필드1 값 |
| $sl['extra2'] | 추가 필드2 값 |
| $sl['sort_order'] | 정렬 순서 |
| $sl['is_active'] | 활성화 여부 (1=활성) |
스타일 파일은 styles/ 폴더에 저장하면 자동 등록됩니다. 파일명이 스타일 ID가 됩니다.
@name, @desc 주석이 없으면 파일명이 스타일 이름으로 표시됩니다.
@preview SVG는 160×80 기준으로 작성하면 관리자 미리보기에 최적화됩니다.
7. DB 테이블 구조
7-1. hs_settings — 전역 설정
| 컬럼 | 타입 | 기본값 | 설명 |
| id | INT | 1 | 항상 1 (단일 행) |
| active_style | VARCHAR(100) | '' | 현재 전역 스타일 ID |
| is_active | TINYINT(1) | 1 | 플러그인 활성화 여부 |
| auto_play | TINYINT(1) | 1 | 자동 재생 여부 |
| auto_interval | INT | 5000 | 자동 재생 간격 (밀리초) |
| height_pc | VARCHAR(20) | 55vh | PC 높이 |
| height_mo | VARCHAR(20) | 45vh | 모바일 높이 |
| updated_at | DATETIME | 마지막 수정일 |
7-2. hs_slides — 슬라이드 목록
| 컬럼 | 타입 | 설명 |
| id | INT AUTO_INCREMENT | 슬라이드 ID |
| sort_order | INT | 정렬 순서 |
| is_active | TINYINT(1) | 활성화 여부 |
| image_url | TEXT | 배경 이미지 URL |
| title | VARCHAR(300) | 제목 |
| subtitle | VARCHAR(200) | 부제목 |
| description | VARCHAR(500) | 설명 |
| link_url | VARCHAR(500) | 링크 URL |
| link_label | VARCHAR(100) | 링크 버튼 텍스트 |
| extra1 | VARCHAR(300) | 스타일별 추가 필드1 (배지, 태그 등) |
| extra2 | VARCHAR(300) | 스타일별 추가 필드2 |
| created_at | DATETIME | 생성일 |
| updated_at | DATETIME | 마지막 수정일 |
7-3. hs_pages — 페이지별 스타일 설정
| 컬럼 | 타입 | 설명 |
| id | INT AUTO_INCREMENT | ID |
| page_type | VARCHAR(20) | 페이지 타입 (home / page) |
| page_slug | VARCHAR(100) | 페이지 SLUG (UNIQUE) — 홈은 "home" |
| style_id | VARCHAR(100) | 스타일 ID / "" (전역 따름) / "none" (비활성) |
| updated_at | DATETIME | 마지막 수정일 |
8. 동작 방식
페이지 로드
↓
dx_top 훅 (priority 1)
↓
dxhs_resolve($ctx) 실행
— 플러그인 활성화 여부 확인
— 페이지 타입 확인 (home / page만 동작)
— 페이지별 스타일 조회 → 전역 스타일 조회 순서
— 스타일 파일 존재 확인
— 활성 슬라이드 1개 이상 확인
↓
조건 충족 시: 기존 테마 히어로 숨김 CSS 출력
(.dx-hero { display:none !important })
↓
dx_middle 훅 (priority 10)
↓
스타일 파일 require
($DXHS 변수로 슬라이드 데이터 전달)
↓
슬라이더 HTML + JS 출력
AJAX 통신
관리자 화면의 모든 저장/삭제 작업은 AJAX(_dxhs 파라미터)로 처리됩니다.| _dxhs 값 | 설명 |
| save_settings | 전역 설정 저장 |
| save_slide | 슬라이드 추가/수정 |
| del_slide | 슬라이드 삭제 |
| sort_slides | 슬라이드 순서 저장 |
| save_page | 페이지별 스타일 설정 저장 |
| del_page | 페이지별 설정 삭제 |
9. FAQ
Q. 슬라이더가 홈에는 나오는데 다른 페이지에서는 안 나와요.
페이지별 설정 탭에서 해당 페이지 SLUG를 추가하고 스타일을 선택해주세요. 또는 전역 설정만으로 홈+모든 페이지에 동일 스타일이 적용됩니다.Q. 기존 테마 히어로와 슬라이더가 겹쳐서 표시돼요.
플러그인이 활성화되면 .dx-hero에 display:none이 자동 적용됩니다. 겹친다면 테마의 히어로 클래스명이 다른 경우입니다. plugin.php의 dx_top 훅에서 해당 클래스명을 추가해주세요.Q. 새 스타일을 추가했는데 관리자 목록에 안 나와요.
styles/ 폴더에 .php 파일로 저장하고, 파일 상단에 @name 주석을 반드시 포함해야 합니다. 파일에 문법 오류가 있으면 목록에서 제외됩니다.Q. 특정 페이지에서만 슬라이더를 끄고 싶어요.
페이지별 설정 탭에서 해당 페이지 SLUG를 추가하고 스타일을 "없음(none)"으로 선택하면 해당 페이지에서만 슬라이더가 비활성화됩니다.Q. 자동 재생 간격을 3초로 하려면?
기본 설정 탭 → 자동 재생 간격에 "3000"을 입력하세요. 밀리초 단위입니다.Q. 슬라이드 이미지를 DXCMS에 업로드된 이미지로 사용하고 싶어요.
슬라이드 편집 모달의 이미지 URL 필드 옆 업로더 버튼을 클릭하면 DXCMS 파일 업로드 API를 통해 이미지를 업로드하고 URL을 자동 입력할 수 있습니다.Q. 모바일에서 슬라이더 높이가 너무 커요.
기본 설정 탭 → 높이(모바일) 값을 조정하세요. "40vh", "300px" 등으로 설정 가능합니다.Q. Extra1, Extra2 필드는 어디에 표시되나요?
스타일마다 다릅니다. 예를 들어 Luxury Fade 스타일에서는 Extra1이 배지(Badge)로 표시되고, Tech Parallax에서는 기술 태그로 표시됩니다. 스타일 편집 모달에서 해당 필드의 레이블을 확인하세요.
라이선스
디자인원엑스 라이선스 참고
https://designonex.com/notice/view/1787577858493247
