템플릿하우스 | 그누보드 소스 가이드

가이드 안내

그누보드 테마의 파일 구조와 커스터마이징 방법을 안내합니다.
페이지 연결, 게시판 비주얼, 문의폼 연동까지 필요한 내용을 순서대로 확인해 보세요.

그누보드 디렉토리 및 주요 파일 구조

그누보드에 추가된 파일 설명
- 아래의 디렉토리 구조는 그누보드 기본 파일을 템하 구조에 맞게 수정한 내용이며,
  개인적으로 커스텀 진행 시, 자주 만지게 되는 필요한 부분의 파일들만 요약한 구조입니다.
  그누보드의 원본 디렉토리 구조는 그누보드 공식 사이트, 또는 Github 저장소 에서 확인하실 수 있습니다. 🔗 참고사이트 : https://github.com/gnuboard/gnuboard5

📁 www(root)
├── 📄 page.php
├── 📄 temha_auto_page.php
├── 📁 extend
│    ├── 📄 temha.extend.php
│    ├── 📄 temha.form.extend.php
├── 📁 theme
│    ├── 📁 [테마명]
│    │    ├── 📁 temha
│    │    │    ├── 📁 resources
│    │    │    │    ├── 📁 js
│    │    │    │    ├── 📁 images
│    │    │    │    ├── 📁 icons
│    │    │    │    ├── 📁 css
│    │    │    ├── 📄 페이지명.html
│    │    ├── 📁 skin
│    │    │    ├── 📁 board
│    │    │    │    ├── 📁 basic_table
│    │    │    │    ├── 📁 gallery_modern
│    │    │    │    ├── 📁 gallery_grid
│    │    │    │    ├── 📁 gallery_full
│    │    │    │    ├── 📁 gallery_hor
│    │    │    │    ├── 📁 notice_card
│    │    │    ├── 📁 form
│    │    │    │    ├── 📁 contact
│    │    │    │    ├── 📄 form.skin.php
│    │    │    ├── 📁 latest
│    │    │    │    ├── 📁 temha_basic
│    │    │    │    ├── 📁 temha_swiper
│    │    │    ├── 📁 member
│    │    │    │    ├── 📁 temha_basic
│    │    │    ├── 📁 outlogin
│    │    │    │    ├── 📁 temha_basic
│    │    │    ├── 📁 pages
│    │    │    │    ├── 📁 basic
│    │    │    │    │    ├── 📄 페이지명.skin.php
│    │    │    │    │    ├── 📄 quick_admin_menu.php
├── 📁 adm
│    ├── 📁 form_admin
├── 📁 form
├── 📁 js
├── 📁 lib
├── 📁 shop

사용자 정의 : temha.extend.php

temha.extend.php
- temha.extend.php 는 테마에서 공통으로 사용하는 경로 설정과 함수들을 모아둔 파일입니다.
- 필요한 상수 (G5_URL 등) 가 없을 경우 오류를 막기 위해 실행을 중단하며, 페이지 경로 설정이나
  페이지네이션 함수 (get_paging_new()) 같은 기능이 이 안에 포함되어 있습니다.
temha.extend.php 코드 설명
NO.

Description

1
- 필수 상수(G5_THEME_URL, G5_URL)가 정의되지 않았을 경우, 실행을 중단하여 무한 로딩이나 오류,
  레이아웃 깨짐 방지하는 안정장치 역할
2
- temha 테마 리소스 폴더 경로를 URL로 정의
3
- theme/basic 경로에서 pages 스킨의 실제 경로와 URL 정의
4
- 페이지네이션 함수 정의
- get_paging_new($페이지수, $현재페이지, $전체페이지, $이동URL, $추가쿼리);
- 사용예시 get_paging_new(5, 2, 10, “list.php”,”&bo_table=board”);

사용자 정의 폼 : temha.form.extend.php

temha.form.extend.php
- temha.form.extend.php 는 폼을 화면에 표시하고 설정을 불러오는 역할을 하는 파일입니다.
- 이 파일에선 지정된 폼의 디자인(스킨)을 불러오고, 폼에 필요한 경로와 데이터(DB) 정보를 설정하여 폼 기능이 제대로 동작할 수 있도록 처리하는 파일입니다.

temha.form.extend.php 코드 설명
NO.

Description

1
- 경로 및 URL 상수 정의
2
- DB 테이블 이름 등록
3
- 폼 출력 함수 :
  form($skin, $id) 지정한 폼 ID 의 설정을 불러오고, 해당 스킨이 존재하면 스킨을 불러와 폼을 출력합니다.
- echo form(‘스킨 폴더 이름’, ‘폼 ID’);
- 사용예시 echo form(‘theme/contact’,’sample’)

페이지 연결 : page.php

page.php
- page.php 는 페이지 ID에 따라 원하는 스킨 파일을 불러오고,
  필요할 경우, 페이지마다 인터넷 브라우저 탭에 표시되는 타이틀을 설정할 수 있습니다.

page.php 코드 설명
NO.

Description

1
- ID 파라미터 가져오기 + 보안 처리 (경로조작, 스크립트 삽입 방지)
2
- 불러올 스킨 경로 설정 예시:
  id=’about’ 이면 → /skin/pages/about.skin.php
- id에 따라 원하는 페이지 스킨을 동적으로 불러올 수 있게 처리합니다.
3
- 타이틀 설정 (필요 시 사용)
  페이지마다 다르게 타이틀을 지정하고 싶을 때 쓰는 부분으로, ‘사용예시’와 같이 페이지별로 타이틀을 설정할 수 있습니다.

디자인 페이지 : page.skin.php

page.skin.php
- page.skin.php 는 지정된 HTML 파일을 불러와 <main> 태그 기준으로 내용을 출력하는 파일입니다.

page.skin.php 코드 설명
NO.

Description

1
- 해당 HTML 파일을 불러와 <main> 태그 기준으로 내용을 출력합니다.
- 주의사항 및 게시판 삽입 방식은 index.php 파일과 동일합니다.
- 접속 경로는 /page.php?id=about 형식이며, 자세한 동작 방식은 page.php 코드 설명을 참고해 주세요.
- 추가 페이지 생성을 할 경우엔 페이지 자동 생성기를 통해 생성해주세요.

페이지 자동 생성기 : temha_auto_page.php

temha_auto_page.php
- temha_auto_page.php 는 HTML로 작성된 디자인 파일을 기반으로, 해당 내용을 자동으로 페이지명.skin.php 파일로 변환해주는 도구입니다.
- 이 기능을 통해 별도의 수작업 없이 페이지 파일을 신속하게 생성할 수 있습니다.
페이지 자동 생성기 기능 설명
NO.

Description

1
- HTML 파일을 자동으로 페이지명.skin.php 형태로 생성할 수 있습니다.
- /theme/테마/temha/ 폴더 내의 모든 HTML 파일 목록/상태를 한눈에 확인할 수 있습니다.
2
- 생성할 HTML 파일을 선택한 후 ‘자동 생성 실행’ 버튼을 클릭하면, 해당 HTML이 페이지명.skin.php로 변환됩니다.
- 변환이 완료되면 하단에 페이지 URL이 표시되며, 해당 URL을 통해 생성된 페이지를 바로 확인할 수 있습니다.
3
- 게시판 페이지의 상단 비주얼 영역 역시 [페이지 자동 생성기]를 통해 설정할 수 있습니다.
- 게시판 상단에 표시할 내용을 HTML로 작성한 뒤, ‘게시판 비주얼 설정’ 버튼을 클릭합니다.
- /theme/테마/temha/ 폴더 내의 HTML 파일 목록과 현재 사용 가능한 게시판 목록을 함께 확인할 수 있습니다.
- 원하는 HTML 파일을 선택 후 ‘게시판 연결’을 통해 특정 게시판에 상단 비주얼을 적용할 수 있습니다.
- HTML 파일과 게시판은 1:1로만 연결할 수 있습니다. 하나의 게시판에 여러 HTML 파일을 연결하는 것은 지원하지 않습니다.
  
  📌 게시판 목록에 존재하지 않는 게시판은 연결할 수 없습니다. 게시판의 추가 및 설정은 관리자 페이지에서만 가능합니다.
4
- 실제 페이지를 연결할 수 있는 URL로, 우측의 [복사]버튼을 클릭한 뒤, 에디터 ‘링크’ 영역에 바로 삽입하여 사용할 수 있습니다.
5
- temha_auto_page.php 파일은 반드시 /www/ 경로에 업로드해야 합니다.
- 업로드 후 아래 폴더에 대한 쓰기 권한(777)을 부여해야 합니다. 권한이 설정되지 않으면 자동 생성기 기능을 사용할 수 없습니다.
- 자동 생성된 파일은 기존 구조와 동일한 경로에 저장되므로, 파일명이 중복되지 않도록 주의하세요.
- 변환된 .skin.php 파일은 <main> 영역만 포함하므로, 공통 레이아웃은 테마 내 PHP 구조를 따릅니다.
  
  📌 자동 생성된 페이지명.skin.php 파일과 게시판 비주얼로 설정된 HTML 파일은
  해당 HTML 파일의 <main> 태그 영역만 파싱(parsing)하여 출력하는 구조로 되어 있습니다.

메인 : index.php

index.php
- index.php 는 상단(헤더)•하단(푸터) 공통 영역을 포함하고, HTML 파일을 불러와
  <main> 태그 기준으로 화면에 출력하는 메인 페이지입니다.

index.php 코드 설명 1 : 레이아웃 구조와 사용방법
NO.

Description

1
- 공통 헤더 파일을 포함시켜 상단 구조, 스타일시트, 메타 정보 등을 출력합니다.
2
- 해당 HTML 파일을 불러와 <main> 태그 기준으로 내용을 출력합니다.
  템플릿하우스 에디터와의 연동을 위한 파싱으로, 연동이 필요없을 경우 해당 HTML코드를 .php에 바로 입력하셔도 무방합니다.
  
  📌 HTML 위치를 변경하면 ‘$file_path_main’ 경로도 함께 수정해야 합니다.
- 중간에 게시판을 넣고 싶을땐, 해당 페이지에서 게시판 데이터 및 구조를 먼저 세팅한 뒤,
  HTML내 원하는 위치에 주석마커(  ) 를 넣은 위치에 치환하는 방식으로 삽입합니다.
  
  📌 템플릿하우스 에디터 에서 기존 구조는 주석으로 교체해야 하며, CSS/JS 수정 시에는 FTP로 연동되니 주의하세요.
3
- 공통 푸터 파일을 포함시켜 하단 구조, 자바스크립트 등을 출력합니다.
index.php 코드 설명 2 : 게시판 연결과 썸네일
NO.

Description

1
- 썸네일 생성을 위한 라이브러리 로드
2
- 게시판 정보 가져오기 / 없으면 중단
- $bo_table : 가져올 DB테이블
3
- $rows : 최대로 불러올 게시글 설정
- $tmp_write_table : 테이블명 생성
- $sql, $result : 게시글 데이터 조회, 조건과 컬럼을 자유롭게 수정해 다양한 게시판 데이터를 불러올 수 있는 쿼리 구조입니다.
- (예: 댓글 제외, 최신순 정렬)
4
- $list : 게시글 목록 배열에 저장 (제목, 내용, 링크 등 가공)
5
- 출력 버퍼, HTML을 직접 출력하지 않고 변수로 저장
6
- 에디터에서 적용된 블록의 HTML 구조를 기준으로,
  게시판 데이터와 출력 구조를 세팅합니다.
7
- 저장된 HTML을 변수로 추출해서 파싱된 HTML 내 주석 위치(  ) 에 게시판 요소를 삽입하고
  최종적으로 완성된 HTML 콘텐츠를 출력합니다.
  
  📌 템플릿하우스 에디터에서 게시판이 적용될 블록 또는 주석 마커를 삭제한 상태로 FTP 전송 시,
  게시판이 출력되지 않으니 주의하세요.

헤더 : head.php

head.php
- head.php 는 상단에 보여지는 헤더 영역을 불러오는 파일입니다.

head.php 코드 설명
NO.

Description

1
- 해당 HTML 파일을 불러와 <header> 태그 기준으로 파싱하여 내용을 출력합니다.
  추출한 <header> HTML 코드를 페이지 상단에 출력합니다.
  
  📌 HTML 위치를 변경하면 ‘$file_path_main’ 경로도 함께 수정해야 합니다.
2
- 헤더에 로그인 영역을 추가하는 코드입니다.
- 관리자 페이지에서 회원 스킨을 temha_basic으로 지정한 뒤, <header> 영역에 제공된 주석 코드를 삽입합니다.
  주석이 삽입된 위치에 로그인 관련 UI가 자동으로 표시됩니다.
3
- 페이지 자동 생성기 및 관리자 페이지로 이동할 수 있는 메뉴를 노출하는 코드입니다.
4
- 페이지 자동 생성기의 ‘게시판 비주얼 설정’을 적용하는 코드입니다.
  해당 영역에서 게시판과, 게시판에 연결시킬 HTML 파일을 연동시키는 작업을 합니다.
- 코드를 변경하시거나, 삭제할 경우엔 페이지 자동 생성기를 통해 게시판 비주얼을 설정할 수 없으므로, 게시판 비주얼을 설정할 때에는
  페이지 자동 생성기를 통해 설정을 해주시고, 변경 및 삭제하지 마세요.

헤더 리소스 : head.sub.php

head.sub.php
- head.sub.php 는 리소스 경로가 정확히 작동하도록 기준 경로 <base href> 를 설정하고, 테마 전용 CSS와
  파비콘 등을 불러오는 파일입니다.
- 이 파일은 리소스가 정상적으로 보이도록 하는 데 꼭 필요하므로 삭제하거나 경로를 바꿀 때는 주의해야 합니다.

head.sub.php 코드 설명
NO.

Description

1
- <base href> 는 HTML 내 모든 상대경로의 기준이 되는 기준 경로 (Base URL) 를 임시로 지정합니다.
  브라우저는 스크립트(4번)보다 HTML 태그를 먼저 렌더링하기 때문에, 스크립트가 실행되기 전에 이미지 등을 찾지 못해 발생하는 404 오류를 방지하는 역할을 합니다.
- 추출한 src , href 등에서 사용되는 경로가 모두 이 값을 기준으로 처리됩니다.
- 이는 에디터 연동 시 발생할 수 있는 리소스 경로 오류를 방지하기 위해, 상대경로를 일괄 처리하는 목적으로 사용됩니다.
  
  📌 [유지권장] 해당 태그는 JavaScript가 이미지 경로를 처리하기 전까지,
  페이지 로딩 중에 발생하는 404 오류를 방지합니다. 삭제해도 사이트가 깨지지는 않지만, 로딩 및 개발자 도구(F12) 콘솔에 불필요한 오류가 표시될 수 있습니다.
2
- 웹 문서에 대한 <meta> 태그를 추가하거나, 제거할 수 있습니다.
- <meta> 태그란 웹페이지의 정보(제목, 설명, 문자 인코딩 등)를 검색엔진이나 브라우저에 알려주는 태그입니다.
3
- 테마 전용 파비콘(브라우저 탭에 표시되는 작은 아이콘), CSS파일들을 순서대로 로드합니다.
4
- 페이지 로드가 완료되면, 이 스크립트가 모든 src 경로를 올바른 절대 경로로 다시 설정합니다.
  경로 처리가 모두 끝나면, 임시로 사용했던 1번의 <base> 태그를 HTML에서 최종적으로 제거합니다.
  
  📌 [삭제금지]temha 내부 HTML 리소스 경로 처리를 위해 이 설정은 반드시 필요합니다.
  
  📌 지정된 리소스 위치가 바뀌는 경우에는
  ‘G5_TEMHA_RESOUCES’ 상수를 함께 수정해야 정상적으로 리소스가 표시됩니다.
5
- 헤더의 회원 메뉴 버튼을 클릭했을 때, 로그인 정보가 담긴 영역을 보여주거나 숨기는 토글 기능을 처리합니다.
  로그인 기능을 사용하지 않을 경우 제거하셔도 무방합니다.

푸터 : tail.php

tail.php
- tail.php 는 리소스 웹페이지 하단(푸터) 영역을 불러오는 파일입니다.
- <footer> 안의 내용을 읽어와 화면 아래에 보여주며, 테마에 필요한JS 파일들도 이곳에서 불러옵니다.

tail.php 코드 설명
NO.

Description

1
- 해당 HTML 파일을 불러와 <footer> 태그 기준으로 파싱하여 내용을 불러옵니다.
- 불러온 <footer> HTML 코드를 페이지 하단에 출력합니다.
2
- 테마 전용 JS파일들을 순서대로 로드합니다.
  
  📌 지정된 폴더 이름을 변경 시, 해당 경로도 함께 수정해야 하며, 리소스 위치가 바뀌는 경우에는
  ‘G5_TEMHA_RESOUCES’ 상수와 <base href> 경로를 모두 함께 수정해야 정상적으로 리소스가 표시됩니다.
  
  📌 HTML 위치를 변경하면 ‘$file_path_main’ 경로도 함께 수정해야 합니다.

게시판 : theme/board

theme/board
- theme/board 는 템하 게시판 전용 스킨이 위치한 폴더로, 게시글 목록과 상세 페이지 디자인을 포함합니다.
- 페이징 처리와 게시판 메뉴 등록 등의 기능은 temha.extend.php 와 관리자 페이지에서 설정합니다.

theme/board 설명
Title

Description

템플릿
하우스
게시판
스킨 안내
- 본 스킨은 템플릿하우스에서 제공하는 게시판 전용 스킨입니다.
- 게시글 목록과 상세 페이지가 스타일링되어 있으며, 페이징 처리는
  temha.extend.php 에 정의된 get_paging_new() 함수를 사용합니다.
비주얼 영역 및
<main>구조 안내
- head.php는 게시판 페이지일 때, temha_auto_page.php에서 연결한 HTML의 <main> 영역을 비주얼로 출력합니다.
- 이때 <main> 태그를 열어주기 때문에, 해당 게시판 스킨 내부에서
  </main> 태그를 닫아주어야 합니다.
- 비주얼 HTML을 바꾸려면 게시판 스킨이 아니라, 연결된 템하 HTML 파일을 수정하면 됩니다.
제공되는 게시판 스킨 목록
- basic_table : 리스트형 게시판으로, 날짜·제목·번호 등의 텍스트 정보가
  표 형식으로 나열된 가장 일반적인 형태의 게시판입니다.
- gallery_full : 하나의 게시물을 큰 이미지와 함께 전체 너비로 강조하여 보여주는 갤러리형 게시판 입니다.
  포트폴리오나 대표적인 단일 콘텐츠를 보여줄 때 유용합니다.
- gallery_grid : 이미지 썸네일과 제목이 포함된 카드를 바둑판(Grid) 형태로 깔끔하게 정렬한 갤러리형 게시판입니다.
- gallery_hor : 이미지와 텍스트 콘텐츠가 가로로 배치된 2단 목록 형태의 게시판 입니다.
  이미지와 함께 요약된 설명을 제공하기에 적합합니다.
- gallery_modern : 이미지와 제목, 내용 일부가 세련된 카드 형태로 정렬된 모던한 디자인의 갤러리형 게시판 입니다.
- notice_card : 타이틀, 텍스트, 날짜 등의 정보가 카드 형태로 나열된 게시판으로,
  이미지 없이 간결한 정보 제공에 적합합니다.
게시판 상세 :
모든 게시판 UI 동일
- 📌 게시판 상세 페이지는 모든 게시판에서 동일한 디자인(UI)을 사용하며, 글쓰기 디자인(UI)은
  기본 제공되지 않기 때문에 사용자가 직접 커스터마이징하여 사용해야 합니다.

게시판 접속 경로 : /bbs/board.php?bo_table=테이블 이름

문의폼 : form.skin.php

form.skin.php
- form.skin.php 는 관리자에서 설정한 문의폼 항목을 불러와 화면에 보여주는 스킨 파일로
  Ajax 전송과 유효성 검사를 지원하며, 구조는 게시판 스킨과 유사하게 동작합니다.

form.skin.php 설명 1 : 폼의 기능과 기본 구조
NO.

Description

1
- DB에서 해당 폼 ID($id) 에 맞는 항목들을 불러옵니다.
2
- 폼 제출 시 기본 동작(새로고침)을 막고 유효성 검사 + Ajax로 폼 데이터를 전송합니다.
3
- 문의폼에서 사용되는 폼 구조입니다.
- 해당 폼은 동적으로 ID가 지정되며, 상단의 스크립트에서 이 ID를 기준으로 동작을 제어합니다.
- 폼 요소는 라디오 버튼, 체크박스, 텍스트 입력, 날짜 선택, 셀렉트박스, 텍스트영역, 파일 업로드 등으로
  구성되어 있으며, 기본 스타일은 templatehouse.css 에 정의되어 있습니다.
- 문의 폼 전용 커스텀 스타일은 해당 블록 내에 포함되어 있습니다.
  
  📌 게시판 블록과 동일하게 CSS 및 JS는 자유롭게 수정 가능하지만, HTML 구조는 고정되어 있어 에디터에서 직접 수정이 불가능합니다.
form.skin.php 설명 2 : 폼 삽입
NO.

Description

1
- 해당 HTML 파일을 불러와 <main> 태그 기준으로 파싱하여 내용을 불러옵니다.
2
- form() 함수는 지정된 스킨 (theme/contact) 의 폼 (contact) 을 출력 합니다.
- 이때 theme/contact 는 form.skin.php 파일이 위치한 폴더명이며, 게시판 스킨 구조와 동일한 방식으로 동작합니다.
- 또한 게시판 스킨처럼 다양한 형태로 스킨 커스터마이징이 가능하며, form() 함수의 두 번째 인자인 폼 ID (contact) 는
  관리자 페이지에서 설정한 폼 ID 값을 입력해야 정상적으로 출력됩니다
- 자세한 동작 방식은 temha.form.extend.php , form.skin.php 코드를 참고해주세요.
- 관리자 페이지에서 추가한 폼 항목은 form.skin.php 에서 동적으로 관리됩니다.
- 해당 항목들을 기반으로 생성된 HTML은 버퍼를 통해 변수에 저장되며, 게시판 블록과 동일하게
  파싱된 HTML 내 주석 마커(  ) 위치에 삽입되어 출력됩니다.
  
  📌 템플릿하우스 에디터에서 기존 구조는 주석으로 교체해야 하며, CSS/JS 수정 시에는 FTP로 연동되니 주의하세요.