라이선스
| 항목 | 내용 |
| 재배포·판매 | ❌ 금지 |
| 스타일 파일 추가 분 | ✅ 별도 판매 가능 |
| 플러그인 원천 시스템 | DesignOneX 소유 |
| 상업적 사용 | ✅ 허용 |
스타일 파일(styles/styleN.php)을 직접 제작하여 판매하는 것은 허용되나, 플러그인 코어(plugin.php, core/, admin/) 자체의 재배포 및 판매는 금지됩니다.
1. 개요 및 특징
DX Hero Slider는 DXCMS 전용 히어로 슬라이더 통합 플러그인입니다. 하나의 플러그인 폴더(dx-hero-slider)에서 16가지 슬라이더 스타일을 관리하며, styles/ 폴더에 파일을 추가하는 것만으로 새로운 스타일을 자동 등록할 수 있습니다.주요 특징
- 16가지 전문적인 슬라이더 전환 효과 기본 제공
- 홈(메인) + 페이지 적용 지원 (게시판 제외)
- 페이지별 개별 스타일 지정 가능
- 배경 이미지 풀블리드(전체 화면 너비) + 텍스트는 컨테이너(1200px) 정렬
- 슬라이드 제목/설명에 줄바꿈(Shift+Enter) 지원
- 자동 재생, 터치 스와이프, 키보드 방향키 지원
- 다크모드 호환
2. 설치 방법 (단계별)
STEP 1 — 플러그인 파일 업로드
다운로드한 dx-hero-slider.zip을 압축 해제한 후, 아래 경로에 폴더를 업로드합니다.DXCMS 루트/
└── plugins/
└── dx-hero-slider/ ← 이 폴더 전체 업로드
├── plugin.php
├── manifest.php
├── core/
│ ├── install.php
│ └── helper.php
├── styles/
│ ├── splitcurtain.php
│ ├── luxuryfade.php
│ └── ... (16개)
└── admin/
└── index.php
ℹ FTP, SFTP, 또는 호스팅 파일 관리자를 통해 업로드하세요. 폴더 권한은 755, 파일 권한은 644로 설정하세요.
STEP 2 — DXCMS 관리자에서 플러그인 활성화
DXCMS 관리자 페이지에 로그인한 후 아래 경로로 이동합니다.관리자 → 플러그인 → 플러그인 목록
목록에서 DX 히어로 슬라이더를 찾아 활성화 버튼을 클릭합니다.
✅ 활성화 시 DB 테이블(hs_settings, hs_slides, hs_pages)이 자동 생성되고 샘플 슬라이드 3개가 등록됩니다.
STEP 3 — 관리자 사이드바 확인
플러그인 활성화 후 관리자 좌측 사이드바에 레이아웃 섹션이 생성되고 그 아래 🎬 히어로 슬라이더 메뉴가 표시됩니다.⚠ 사이드바에 메뉴가 보이지 않으면 페이지를 새로고침(F5)하세요.
STEP 4 — 기본 슬라이더 활성화
사이드바에서 히어로 슬라이더를 클릭 → 🎨 스타일 탭에서 원하는 디자인 카드를 클릭 → 💾 스타일 적용 버튼을 클릭합니다. 홈 페이지에서 슬라이더가 즉시 표시됩니다.3. 관리자 화면 사용법
관리자 경로: 관리자 → 레이아웃 → 🎬 히어로 슬라이더화면 상단에 탭 4개가 있습니다: 🎨 스타일 · 🖼 슬라이드 · ⚙ 전역 설정 · 📄 페이지별
3-1. 스타일 탭 — 슬라이더 디자인 선택
16개의 스타일 카드가 격자로 표시됩니다. 사용법:1. 원하는 스타일 카드를 클릭합니다 (초록 테두리로 선택 표시)
2. 하단의 💾 스타일 적용 버튼을 클릭합니다
3. 홈 페이지를 열어 슬라이더를 확인합니다
상단 우측 토글 스위치로 슬라이더 전체를 활성/비활성할 수 있습니다.
✅ 스타일 변경은 즉시 저장되며 페이지 새로고침 없이도 반영됩니다.
3-2. 슬라이드 탭 — 슬라이드 추가/수정/삭제
슬라이드 추가:1. 우측 상단 + 추가 버튼 클릭
2. 모달 창에서 배경 이미지 URL 입력 또는 📁 업로드 버튼으로 이미지 업로드
3. 제목, 서브타이틀, 설명 입력 (Shift+Enter로 줄바꿈)
4. 링크 URL과 버튼 텍스트 입력 (선택사항)
5. 순서 번호 입력 (숫자가 낮을수록 앞에 표시)
6. 💾 저장 클릭
슬라이드 순서 변경:
각 슬라이드 항목 왼쪽의 ⠿ 아이콘을 드래그하여 순서를 변경할 수 있습니다. 변경 즉시 자동 저장됩니다.
슬라이드 수정/삭제:
- 수정: 슬라이드 항목 우측 ✏ 버튼 클릭 → 모달에서 수정 → 💾 저장
- 삭제: 🗑 버튼 클릭 → 확인 팝업에서 삭제 확인
⚠ 삭제한 슬라이드는 복구할 수 없습니다. 필요하면 비활성 처리를 먼저 고려하세요.
3-3. 전역 설정 탭
모든 페이지에 공통으로 적용되는 설정입니다.- PC 높이: 슬라이더 높이 (기본값 55vh, 예: 500px, 60vh)
- 모바일 높이: 모바일에서의 높이 (기본값 45vh)
- 자동 재생: 토글로 자동 재생 켜기/끄기
- 전환 간격(ms): 슬라이드 자동 전환 시간 (기본값 5000ms = 5초)
3-4. 페이지별 탭
특정 페이지에만 다른 슬라이더 스타일을 적용하거나, 특정 페이지에서 슬라이더를 비활성화할 수 있습니다.페이지 추가 방법:
1. 타입 선택: 홈(메인) 또는 페이지
2. Slug 입력: 홈은 "home" 고정, 페이지는 해당 페이지의 slug (예: about, service)
3. 스타일 선택: 해당 페이지에 적용할 스타일 선택 ("없음"은 슬라이더 비표시)
4. + 추가 버튼 클릭
등록된 페이지 목록에서 스타일 선택 후 저장 버튼을 클릭하면 즉시 반영됩니다.
ℹ 우선순위: 페이지별 설정 > 전역 설정. 페이지별 설정이 있으면 전역 스타일이 아닌 페이지별 스타일이 적용됩니다.
4. 슬라이드 입력 필드 상세
| 컬럼명 | 타입 | 설명 |
| id | INT UNSIGNED | 자동 증가 기본키 |
| sort_order | INT UNSIGNED | 표시 순서 (낮을수록 앞) |
| is_active | TINYINT(1) | 활성(1) / 비활성(0) |
| image_url | TEXT | 배경 이미지 URL |
| title | VARCHAR(300) | 슬라이드 제목 (HTML 줄바꿈 <br> 지원) |
| subtitle | VARCHAR(200) | 서브타이틀 (소문자 강조 텍스트) |
| description | VARCHAR(500) | 설명 텍스트 |
| link_url | VARCHAR(500) | 버튼 클릭 시 이동할 URL |
| link_label | VARCHAR(100) | 버튼 텍스트 (예: 자세히 보기) |
| extra1 | VARCHAR(300) | 스타일별 추가 필드 (뱃지, eyebrow 등) |
| extra2 | VARCHAR(300) | 스타일별 추가 필드 2 |
✅ 제목(title)과 설명(description)은 입력창에서 Shift+Enter로 줄바꿈을 입력할 수 있으며, 저장 시 <br> 태그로 변환되어 화면에 표시됩니다.
ℹ extra1 필드는 스타일에 따라 용도가 다릅니다. Tech Parallax 스타일에서는 상단 뱃지 텍스트로 사용됩니다.
5. 적용 범위 및 우선순위
적용 가능한 페이지 타입
- ✅ 홈(메인) 페이지
- ✅ 일반 페이지 (slug 기반)
- ❌ 게시판 — 적용되지 않습니다
동작 우선순위
슬라이더가 표시될 때 아래 순서로 스타일을 결정합니다.1순위: 페이지별 설정 (해당 slug에 설정된 스타일)
2순위: 전역 설정 (스타일 탭에서 선택한 스타일)
미적용: 전역 설정이 비어있거나 비활성 상태
슬라이더 표시 레이아웃
|←────────── 100vw 풀블리드 배경이미지 ──────────→||←── max-width:1200px 컨테이너 ──→|
| 제목 텍스트 |
| 서브타이틀 |
| 설명 |
| [버튼] PREV NEXT |
| |
ℹ 배경 이미지는 화면 전체 너비로 표시되고, 텍스트와 컨트롤(PREV/NEXT)은 DXCMS 기본 컨테이너(최대 1200px)에 맞게 정렬됩니다.
6. 새 스타일 추가 방법 (개발자)
styles/ 폴더에 PHP 파일을 추가하면 관리자 화면에 자동으로 스타일 카드가 등록됩니다.파일 구조
<?php/**
* @name 내 슬라이더 이름
* @desc 슬라이더에 대한 설명
* @preview <svg...> ← 160x80 SVG 미리보기
*/
if (!defined('DX_CMS')) exit('Direct access not allowed.');
$_s = $DXHS['settings']; // 전역 설정
$_sls = $DXHS['slides']; // 슬라이드 목록 배열
$_h = !empty($_s['height_pc']) ? $_s['height_pc'] : '55vh';
$_ap = (int)$_s['auto_play'];
$_iv = max(1000, (int)$_s['auto_interval']);
$_cnt = count($_sls);
if (!$_cnt) return;
?>
<div id="dxXX-root">
<!-- 슬라이더 HTML/CSS/JS 작성 -->
</div>
필수 CSS 규칙
#dxXX-root {position: relative;
width: 100vw; /* 풀블리드 */
margin-left: calc(-50vw + 50%); /* 컨테이너 이탈 */
margin-right: calc(-50vw + 50%);
margin-top: -24px; /* main padding 상쇄 */
margin-bottom: 24px; /* 하단 여백 */
}
/* 텍스트/컨트롤 위치 — 컨테이너 기준 정렬 */
.dxXX-content {
left: max(16px, calc((100vw - 1200px) / 2 + 16px));
}
⚠ prefix(XX)는 다른 스타일과 중복되지 않는 고유한 값을 사용하세요. 예: myslider → dxms-root
데이터 접근
// PHP에서 슬라이드 데이터 접근foreach ($DXHS['slides'] as $i => $sl) {
$sl['image_url'] // 배경 이미지 URL
$sl['title'] // 제목 (HTML, <br> 포함 가능)
$sl['subtitle'] // 서브타이틀
$sl['description'] // 설명
$sl['link_url'] // 링크 URL
$sl['link_label'] // 버튼 텍스트
$sl['extra1'] // 추가 필드 1
$sl['extra2'] // 추가 필드 2
}
7. DB 테이블 구조
플러그인 활성화 시 아래 3개의 테이블이 자동 생성됩니다.{prefix}hs_settings — 전역 설정
active_style VARCHAR(100) — 현재 활성 스타일 IDis_active TINYINT(1) — 슬라이더 전체 활성 여부
auto_play TINYINT(1) — 자동 재생 여부
auto_interval INT UNSIGNED — 자동 전환 간격 (ms)
height_pc VARCHAR(20) — PC 높이 (예: 55vh)
height_mo VARCHAR(20) — 모바일 높이 (예: 45vh)
{prefix}hs_slides — 슬라이드 목록
위 4장의 DB 컬럼 표를 참조하세요.{prefix}hs_pages — 페이지별 설정
page_type VARCHAR(20) — home | pagepage_slug VARCHAR(100) — 페이지 slug (UNIQUE)
style_id VARCHAR(100) — 스타일 ID | none(비활성) | 빈값(전역따름)
8. 자주 묻는 질문 (FAQ)
Q. 슬라이더가 홈에는 보이는데 페이지에서는 안 보입니다.
A. 📄 페이지별 탭에서 해당 페이지 slug를 추가하고 스타일을 지정하세요. 또는 전역 설정이 활성화되어 있는지 확인하세요.Q. 이미지 업로드가 안 됩니다.
A. DXCMS의 /api/upload 엔드포인트가 정상 동작하는지 확인하세요. 서버의 PHP upload_max_filesize, post_max_size 설정도 확인하세요.Q. 제목에 줄바꿈을 넣었는데 화면에 한 줄로 나옵니다.
A. 제목 입력창에서 Shift+Enter로 줄바꿈을 입력해야 합니다. 일반 Enter는 저장 동작을 트리거할 수 있습니다.Q. 자동 재생이 마우스를 올리면 멈춥니다.
A. 의도된 동작입니다. 슬라이더에 마우스를 올리면 자동 재생이 일시 정지되고, 마우스를 내리면 재개됩니다. 사용자 경험을 위한 기능입니다.Q. 새로운 스타일을 추가했는데 관리자에서 안 보입니다.
A. styles/ 폴더의 PHP 파일에 @name 주석이 포함되어 있는지 확인하세요. 파일 권한도 644인지 확인하세요.Q. 슬라이더 처음 로드 시 잠깐 검은 화면이 보입니다.
A. 인터넷 속도에 따라 이미지 로딩 시간이 걸릴 수 있습니다. 이미지를 WebP 형식으로 최적화하고 크기를 1920×1080px 이하로 압축하면 개선됩니다.9. 문제 해결 (Troubleshooting)
슬라이더가 전혀 표시되지 않을 때
1. 관리자 → 플러그인 목록에서 DX 히어로 슬라이더가 활성화 상태인지 확인2. 스타일 탭에서 스타일이 선택(적용)되어 있는지 확인
3. 상단 토글 스위치가 활성(초록) 상태인지 확인
4. 슬라이드 탭에서 등록된 슬라이드가 최소 1개 이상인지 확인
5. 브라우저 개발자 도구(F12) → Console 탭에서 JavaScript 오류 확인
관리자 사이드바에 메뉴가 없을 때
1. plugins/dx-hero-slider/plugin.php 파일이 존재하는지 확인2. DXCMS 관리자 페이지 새로고침 (Ctrl+F5)
3. 다른 레이아웃 플러그인(dx-sub-hero 등)이 활성화되어 있으면 이미 레이아웃 섹션이 있는지 확인
이미지가 잘리거나 비율이 이상할 때
슬라이더 배경 이미지는 object-fit: cover로 표시됩니다. 이상적인 이미지 비율은 16:9 (1920×1080px)이며, 주요 피사체는 이미지 중앙에 배치하는 것이 좋습니다.높이 설정이 적용되지 않을 때
전역 설정 탭에서 높이를 변경한 후 반드시 💾 저장 버튼을 클릭하세요. 단위를 포함해서 입력해야 합니다. 예: 55vh, 500px
