OKCLEAN 청소업체 원페이지 테마 · 설치 설명서

그누보드5 (v5.6.x) 전용 · Bootstrap 5.3 반응형 · 다크/라이트 모드 버전 1.0.0

0. 먼저 읽어 주세요

이 설명서는 그누보드를 처음 다루는 분도 따라 할 수 있도록 순서대로 정리했습니다. 1번부터 차례대로 진행하면 약 20~30분이면 홈페이지가 완성됩니다.

설치에 필요한 것

항목 내용
웹호스팅 PHP 7.2 ~ 8.2, MySQL 5.5 이상 (국내 카페24·가비아·닷홈 등 대부분 가능)
그누보드 5.6.x (권장 5.6.24) — 먼저 설치되어 있어야 합니다
FTP 프로그램 알드라이브(알FTP)· 파일질라(FileZilla) 등
도메인 라이선스는 도메인 1개에만 적용됩니다

압축을 풀면 이런 구조입니다.

okclean-theme-1.0.0/
├── okclean/            ← 이 폴더를 통째로 서버에 올립니다 (테마 본체)
└── docs/               ← 설명서

1. 그누보드 설치 확인

  1. 웹브라우저에서 내 도메인(예: http://mysite.com)에 접속합니다.
  2. 그누보드 기본 화면이 나오면 정상입니다.
  3. http://mysite.com/adm 으로 들어가 최고관리자로 로그인되는지 확인합니다.

그누보드가 아직 없다면 sir.kr 에서 그누보드5 를 내려받아 먼저 설치하세요.
(그누보드 설치가 어렵다면 카페24, 닷홈 호스팅은 그누보드5 자동설치를 지원하고 있습니다.)

2. 테마 파일 업로드

  1. FTP 프로그램으로 내 서버에 접속합니다.
  2. 그누보드가 설치된 폴더(보통 public_html 또는 www) 안의 theme 폴더로 이동합니다.
  3. 압축을 푼 okclean 폴더 전체를 theme 폴더 안에 업로드합니다.

업로드 후 경로가 이렇게 되어야 합니다.

/public_html/theme/okclean/theme.info.php
/public_html/theme/okclean/index.php
/public_html/theme/okclean/head.php
...

❗ okclean 폴더 안의 내용물만 올리면 안 됩니다. 폴더째 올려 주세요.

폴더 권한 (이미지 업로드용)

/data 폴더의 권한이 707 (또는 777) 인지 확인하세요. 테마가 /data/okclean/ 폴더를 자동으로 만들어 관리자에서 올린 이미지를 저장합니다. 자동 생성이 안 되면 FTP에서 data 안에 okclean 폴더를 직접 만들고 권한을 707로 지정하세요.

3. 테마 적용하기

  1. 관리자 페이지 접속 → 환경설정 → 테마설정 (또는 디자인 → 테마)
  2. 목록에 "OKCLEAN 원페이지 청소업체 테마" 가 보입니다.
  3. [테마적용] 버튼을 누릅니다.
  4. 홈페이지 주소로 접속하면 청소업체 원페이지 화면이 나옵니다. 🎉

4. 문의게시판 만들기 (견적 문의 폼용)

메인 하단의 견적 문의 폼은 그누보드 게시판에 글을 등록하는 방식입니다.

  1. 그누보드는 게시판그룹관리 → community 기본그룹이 만들어져있습니다. (예: community)
  2. 관리자 → 게시판 관리 → 게시판 그룹 에서 그룹이 없으면 하나 만듭니다. (예: 고객지원)
  3. 관리자 → 게시판 관리 → 게시판 추가
  4. 아래와 같이 입력합니다.
항목 값
테이블 이름 inquiry
게시판 제목 견적문의
스킨 okclean_inquiry (테마 스킨)
모바일 스킨 okclean_inquiry
목록 권한 모두
읽기 권한 모두
쓰기 권한 모두 (비회원도 문의 가능하게)
답변 권한 관리자
비밀글 사용 사용 (개인정보 보호를 위해 권장)
자동 비밀글 사용
댓글 사용 사용 (관리자 답변용)
에디터 사용 사용 안 함 (권장)
  1. 저장합니다.

스킨 목록에서 okclean_inquiry 가 안 보이면 테마가 적용되지 않은 상태입니다. 3번을 먼저 진행하세요.

다른 게시판도 만들기 (선택)

용도 추천 스킨 테이블 예시
공지사항 okclean_basic notice
시공사례 / 전후사진 okclean_gallery gallery
견적문의 okclean_inquiry inquiry

5. 테마설정 페이지에서 내용 바꾸기

이 테마의 모든 문구·이미지·링크는 코드 수정 없이 관리자에서 바꿉니다.

접속 방법 (둘 중 하나) - 홈페이지 우측 하단 ⚙ 테마설정 버튼 (최고관리자 로그인 상태에서만 보임) - 주소 직접 입력 : http://내도메인/theme/okclean/adm/theme_config.php

탭별 설정 내용

탭 설정할 수 있는 것
기본정보 업체명, 전화번호, 이메일, 주소, 사업자정보, 로고·파비콘, 메인 색상, 기본 다크/라이트, 상단 메뉴
히어로 상단 큰 화면의 문구, 버튼, 배경 이미지 3장(자동 슬라이드), 유튜브 배경 영상, 어두운 정도, 청소 전/후 비교 이미지
회사소개 소개 제목·문구, 소개 이미지, 숫자 카운터(설립연도·누적 건수 등)
서비스 서비스 6종(아이콘 또는 이미지, 제목, 설명, 링크) — 개수 자유롭게 추가/삭제
요금 요금제 3개(플랜명·가격·포함항목·인기표시), 추가 옵션 요금표(에어컨 냉매 R-32/R-410A 등)
작업과정 4단계 작업 과정(제목·설명·이미지)
강점 강점 카드(아이콘·제목·설명)
연혁 연도별 연혁
문의·지도 문의게시판 선택, 최근 문의 표시 건수/스킨, 카카오맵 키·위도·경도
푸터 하단 소개 문구, 정책 링크, 카피라이트
이미지 관리 이미지 여러 장 업로드 → 파일명을 복사해 각 항목에 붙여넣기
라이선스 라이선스 키 입력 및 상태 확인

모든 탭을 수정한 뒤 화면 맨 아래 [저장하기] 를 한 번만 누르면 전체가 저장됩니다.

이미지 등록 두 가지 방법

  1. 직접 업로드 — 로고, 히어로 배경, 소개 이미지 등은 각 항목의 파일 선택 버튼으로 바로 올립니다.
  2. 이미지 관리 탭 — 여러 장을 한 번에 올린 뒤, 표시된 파일명을 복사해서 서비스·작업과정 항목의 "이미지" 칸에 붙여넣습니다. (https:// 로 시작하는 외부 주소도 사용 가능)

권장 이미지 크기 - 히어로 배경 : 1920 × 1080 px 이상 (가로형) - 소개 이미지 : 1200 × 900 px - 서비스/과정 이미지 : 800 × 500 px - 로고 : 높이 70 px 내외 PNG(배경 투명)

6. 카카오맵 넣기

  1. https://developers.kakao.com 접속 → 카카오 계정 로그인
  2. 내 애플리케이션 → 애플리케이션 추가하기 → 앱 이름·회사명 입력
  3. 생성된 앱 클릭 → 앱 키 중 JavaScript 키 복사
  4. 왼쪽 메뉴 플랫폼 → Web → 사이트 도메인에 http://내도메인, https://내도메인 등록 ← 꼭 해야 지도가 뜹니다
  5. 테마설정 → 문의·지도 탭 → JavaScript 키 붙여넣기
  6. 위도·경도는 카카오맵에서 우리 가게 위치 우클릭 → "이 위치의 좌표 복사" 로 확인 후 입력

7. 라이선스 등록 (1구매 = 1도메인)

  1. 구매 시 발급받은 키 예: A1B2-C3D4-E5F6-G7H8-J9K2
  2. 테마설정 → 라이선스 탭 → 키 입력 → 저장
  3. "정상 인증된 라이선스입니다." 문구가 나오면 완료입니다.

알아두실 점 - 키는 도메인 1개 기준입니다. (www. 는 있어도 없어도 동일하게 인식) - localhost, 127.0.0.1, 192.168.x.x, *.test, *.local 등 개발 환경은 키 없이 사용할 수 있습니다. - 도메인을 바꾸면 판매처에 재발급을 요청하세요. - 인증 전에도 사이트는 정상 동작하지만 하단에 안내 문구가 표시됩니다.

8. 최신글을 다른 곳에 넣고 싶을 때

테마의 최신글 스킨은 2종입니다.

<?php
// 리스트형 (문의 현황 · 공지사항에 적합)
echo latest('theme/okclean_notice', 'inquiry', 5, 45);

// 카드형 (시공사례 · 사진 게시판에 적합)
echo latest('theme/okclean_card', 'gallery', 4, 40);
?>

9. 자주 묻는 질문

Q. 섹션 순서를 바꾸고 싶어요. /theme/okclean/index.php 의 $okc_sections 배열 순서를 바꾸면 됩니다.

Q. 필요 없는 섹션을 숨기고 싶어요. 테마설정의 각 탭 맨 위 "○○ 섹션 사용" 스위치를 끄면 사라집니다.

Q. 문의 폼이 "관리자 설정에서…" 안내만 나옵니다. 테마설정 → 문의·지도 탭에서 문의게시판을 선택하지 않았기 때문입니다. (4단계 참고)

Q. 문의 등록 시 "자동등록방지" 오류가 납니다. 비회원 글쓰기에는 캡차가 필요합니다. 폼에 표시된 문자를 정확히 입력하거나, 관리자 → 환경설정에서 캡차 설정을 확인하세요.

Q. 이미지가 안 올라갑니다. /data 폴더 권한을 707로 변경하세요. 호스팅사 파일관리자에서도 변경 가능합니다.

Q. 색상을 바꾸고 싶어요. 테마설정 → 기본정보 탭의 메인 색상 / 포인트 색상 을 바꾸면 사이트 전체에 반영됩니다.

Q. 다크모드를 기본으로 하고 싶어요. 기본정보 탭 → 기본 화면 모드 를 다크로 변경하세요. 방문자는 헤더의 달/해 버튼으로 언제든 바꿀 수 있습니다.

Q. 그누보드를 업데이트해도 되나요? 네. 테마는 /theme/okclean 폴더에만 있으므로 그누보드 업데이트와 충돌하지 않습니다.

모바일 화면이 다르게 나온다면

이 테마는 하나의 화면이 PC·모바일에 모두 대응하는 반응형입니다. 그누보드의 모바일 모드가 켜져 있으면 기본 모바일 화면이 뜰 수 있습니다.

10. 백업과 이전

다른 서버로 옮길 때는 위 두 폴더와 그누보드 DB를 함께 옮기면 설정이 그대로 유지됩니다. (도메인이 바뀌면 라이선스 키는 재발급이 필요합니다.)

11. 파일 구조 참고

theme/okclean/
├── theme.info.php           테마 정보
├── index.php                원페이지 메인 (섹션 순서 지정)
├── head.php / head.sub.php  헤더·공통 <head>
├── tail.php                 푸터·퀵메뉴
├── screenshot.png           테마 미리보기 이미지
├── inc/
│   ├── theme.lib.php        설정 불러오기/저장 함수
│   ├── default.config.php   기본값 (초기 문구)
│   └── license.php          라이선스 검증
├── sections/                8개 섹션 (hero·about·services·price·process·features·history·contact)
├── assets/
│   ├── css/theme.css        테마 스타일
│   ├── js/theme.js          슬라이드·다크모드·카운터 등
│   └── img/
├── adm/                     테마 전용 관리자 페이지
│   ├── theme_config.php     설정 화면
│   ├── theme_config_update.php  저장 처리
│   └── form.lib.php
├── skin/board/              게시판 스킨 3종
│   ├── okclean_basic/       일반형(공지·자료)
│   ├── okclean_gallery/     갤러리형(시공사례)
│   └── okclean_inquiry/     문의형(견적문의)
└── skin/latest/             최신글 스킨 2종
    ├── okclean_notice/      리스트형
    └── okclean_card/        카드형

12. 지원

즐거운 홈페이지 운영 되세요! 🧼