레이아웃

1. 개요

레이아웃은 Rb를 브라우저로 출력할때 사용하는 틀 입니다.
화면상으로는 <html> 부터 </html> 를 담당하며 화면에 보이지는 않지만 <html> 이전과 </html> 이후까지도 컨트롤하는 역할을 합니다.

따라서 레이아웃은 모듈,위젯,플러그인과 같은 확장요소들을 포함하여 브라우저를 통해 사용자가 결과물을 볼 수 있도록 합니다.

2. 기본경로 및 공통변수

모듈의 위치 :
$g['path_layout'] (ex)   ./layouts/

경로변수 :
$d['layout']['dir'] 지정된 레이아웃의 폴더명
$g['dir_layout'] 지정된 레이아웃의 서버경로   (ex)  ./layouts/레이아웃폴더명/
$g['url_layout'] 지정된 레이아웃의 URL 경로   (ex)  ./layouts/레이아웃폴더명
$g['img_layout'] 지정된 레이아웃의 images 폴더경로   (ex)  ./layouts/레이아웃폴더명/_images
자세한 정보는 주요변수에 경로 데이터를 담는 배열 $g = array(); 항목 참고.

주의 경로의 끝에 슬래쉬 (/)에 주의하세요. 서버경로는 / 로 끝나고 URL 경로는 / 를 포함하지 않습니다.

3. 기본구조

아래 구조는 일반적인 레이아웃 폴더구성이며 폴더명과 파일명은 위의 구조를 따라야 합니다. 이외의 구조는 레이아웃 개발자에 의해서 결정되며 구조샘플은 Rb에 포함되어 있는 기본 레이아웃들을 참고하세요.

참고 폴더명이 언어바(_) 로 시작된 이유
레이아웃 폴더내의 폴더들이 언더바(_) 로 시작되고 있습니다. 이렇게 _ 로 폴더명이 시작되는 이유는 해당 폴더내의 파일들을 관리자모드에서 편집할 수 있도록 하기 위해서입니다. 관리자모드 - 레이아웃 관리자페이지에서는 레이아웃 폴더내의 파일들을 편집할 수 있는데 이때 언어바(_)로 시작되는 폴더에 대해서만 편집권한이 있습니다. 만약, 위의 구조외에 별도로 레이아웃에 필요한 폴더들을 추가한다고 할때 편집권한을 주지 않으려면 언더바로 시작하지 않으면 됩니다.

4. 기본레이아웃 만들기

이 과정은 어떤 샘플도 없는 상태에서 레이아웃을 개발해 가는 과정을 담고 있습니다. 레이아웃에 대한 구조파악이 된 후에는 레이아웃 샘플을 다운로드 받아 개발하면 더 빠르게 개발할 수 있을 것입니다.

4-1. 기본폴더 및 파일 만들기

레이아웃폴더는 영문 대소문자를 포함하여 폴더명으로 사용가능한 모든 문자(한글제외)를 사용할 수 있으나 가능하면 영문소문자를 권장합니다. 다음과 같이 폴더와 파일들을 생성합니다.(파일은 반드시 UTF-8로 생성)

아래에서 단계별 샘플 모듈을 다운로드 받을 수 있으나 샘플을 다운로드 받기 전에 가능한 수차례 레이아웃 폴더구조를 직접 만들어 보시길 권해드립니다. 몇차례 레이아웃 폴더와 파일들을 만들어보면 구조를 이해하는데 도움이 될 것입니다.

4-2. 주요파일의 이해

이 페이지 하단에서 샘플파일을 다운로드 받아 압축을 푼 후 다음의 파일들을 확인해 보세요. 각각의 파일들에 대한 역할을 자세히 숙지하시기 바랍니다.

/mylayout/name.txt - 레이아웃의 명칭을 입력합니다.

내 레이아웃

/mylayout/default.php - 기본 레이아웃 파일입니다.

위의 소스에서 반드시 포함되어야 하는 코드는 <?php include __KIMS_CONTENT__ ?> 이며 나머지는 전적으로 레이아웃 제작자에 의해서 결정됩니다.
<?php include $g['dir_layout'].'_includes/_import.head.php'?> 은 Rb의 기본 JS함수,부트스트랩,jQuery 등 플러그인들을 사용하기 위해 필요하며 <?php include $g['dir_layout'].'_includes/_import.foot.php'?> 은 Rb가 제공하는 기본 기능들(모달,알림등)을 사용하기 위해 필요합니다.
만약 둘다 필요없는 특수한 경우라면 레이아웃파일은 오로지 <?php include __KIMS_CONTENT__ ?> 으로 충분합니다.

이와같이 외부의 출력은 전적으로 레이아웃에 의해 결정되기 때문에 레이아웃은 Rb의 가장 중요한 확장요소중 하나라 할 수 있습니다. 특히 _import.control.php 은 화면출력전 가장 마지막 단계에서 해당 레이아웃은 몰론 Rb 코어를 제어할 수 있기 때문에 매우 중요합니다. 레이아웃 콘트롤 파일에 대해서는 다시 다루도록 하겠습니다.

기본 레이아웃의 코드를 보면 HTML문서의 처음부터 끝까지 작성되어 있는 것을 확인할 수 있습니다. 즉, 이것은 html문서를 헤더나 풋터 등으로 분리하지 않고 온전히 하나의 파일에서 다룬다는 것을 의미합니다.

/mylayout/_css/style.css - 레이아웃 파일에 대한 공통 css 파일입니다.

/mylayout/_css/custom.css - 레이아웃 파일에 대한 커스텀 css 파일입니다.

레이아웃 사용자 전용 CSS 파일 입니다. 레이아웃 제작자는 빈파일로 배포해 주세요.

/mylayout/_js/script.js - 레이아웃에 대한 스크립트 파일 입니다.

/mylayout/_includes/_import.control.php - 레이아웃에 대한 제어파일입니다.

_import.control.php 가 왜 중요하며 어떤 역할을 하는가?

우선, _import.control.php 파일의 기본값은 빈(empty)파일이며 레이아웃을 제어하는 역할을 하기 때문에 제어할 필요가 있는 경우에만 작성합니다. _import.control.php 파일의 실행위치는 index.php 의 마지막부분이며 레이아웃 파일을 출력하기 직전입니다. 따라서 코어에서 할당된 변수,함수등의 자원을 이용하여 레이아웃을 제어하거나 미리 선언된 값을 우회 또는 변형,수정,재정의가 가능하며 필요시 레이아웃에서 사용할 변수들을 셋팅할 수도 있습니다.

예를들면, 현재의 사이트 정보를 담고 있는 사이트 배열인 $_HS의 인자들중 $_HS['name'] 값을 임의로 변경할 필요가 있다면 다음과 같이 재정의 해 줄 수 있습니다. $_HS['name'] = '변경할 값';

나아가 필요한 경우 class,function 등을 정의하여 레이아웃에서 사용할 수도 있으며 이는 레이아웃이 단순히 UI만 담당하는 확장요소가 아니라는 것을 의미합니다. 경우에 따라서 하나의 자체 솔루션으로서 확장이 가능할 만큼 _import.control.php의 역할과 지휘는 매우 막강하다는 것을 레이아웃 제작시 항상 염두해야 합니다.

/mylayout/_includes/_import.head.php - 헤더 정의파일입니다. <head> 부터 </head> 사이의 코드를 정의합니다.

_import.head.php 는 <head> ... </head> 사이에 삽입되며 레이아웃에 필요한 플러그인들을 불러오는 역할을 합니다. 기본적으로 bootstrap과 jQuery 외에 필요한 플러그인들이 포함되나 필요없는 경우 제거할 수 있습니다.


getImport() 함수의 역할 및 사용법

getImport() 함수는 시스템도구 > 플러그인 에 등록되어 있는 플러그인들을 쉽게 import 해 주는 역할을 합니다. css 나 js 파일을 import 할 수 있으며 사용법은 다음과 같습니다.

<?php getImport('A','B',C,'D')?>
  • A 플러그인 폴더명
  • B 플러그인 버전폴더하위 부터 import 하려는 파일까지의 경로(확장자 제외)
  • C false : 플러그인 관리페이지에서 설정한 버전을 따름 (직접 버전을 지정하려면 '버전' 으로 대체)
  • D css 파일일 경우 css , js 파일일 경우 js
예시
<?php getImport('bootstrap','js/bootstrap.min',false,'js')?>
  • A bootstrap 플러그인 import
  • B bootstrap 버전폴더 밑의 js/bootstrap.min(.js) 를 import 함
  • C 플러그인 관리페이지에서 설정한 버전을 따름
  • D js 파일을 import
<?php getImport('bootstrap','js/bootstrap.min','3.0.2','js') ?>
  • A bootstrap 플러그인 import
  • B bootstrap 버전폴더 밑의 js/bootstrap.min(.js) 를 import 함
  • C bootstrap 3.0.2 버전을 import 함
  • D js 파일을 import

/mylayout/_includes/_import.foot.php - 풋터 정의파일입니다.

_import.foot.php 는 기본적으로 foot.enine.php 를 인클루드하는 역할을 합니다. 필요 시 추가내용을 작성할 수 있습니다.

4-3. 서브 레이아웃 활용

레이아웃 폴더안의 php 파일들 (default.php , home.php 등)을 서브-레이아웃 파일이라 합니다. 이 서브레이아웃 파일에서 사용할 전용 CSS 와 Javascript 를 따로 분리해서 작성할 수 있는데 다음과 같이 대응파일을 생성하면 됩니다.

보기
home.php 서브레이아웃에서 사용할 css 와 javascript 파일
결과
home.css , home.js
위와같은 css , javascript 대응파일은 옵션이므로 필요시 생성하여 사용할 수 있으며 필요없는 경우 생성하지 않아도 됩니다.

레이아웃에서 인클루드 처리하기

다수의 서브 레이아웃 활용시 반복되는 부분(헤더나 풋터 등)은 별도로 분리해 내어 _includes 폴더에 위치시킨 후 인클루드(include)방식을 사용합니다.

<?php include $g['dir_layout'].'_includes/header.php'?>

4-4. 레이아웃 변수설정 파일 작성방법

관리자로 로그인을 하면 관리패널이 출력되고 우측 관리패널중 Layout 탭에서 현재 사이트의 레이아웃 옵션을 셋팅할 수 있습니다. _var 폴더안에 _var.config.php 를 생성한 후 규격에 맞게 작성하면 자동으로 Layout 탭이 출력됩니다. 그리고 선택된 옵션들의 데이터는 레이아웃폴더/_var/_var.php 에 기록되며 이 변수를 해당 레이아웃에서 사용할 수 있게 됩니다. (주의) _includes/_import.contol.php 에서 include $g['dir_layout'].'/_var/_var.php'; 를 포함시켜야 변수값을 사용할 수 있습니다.

/mylayout/_var/_var.config.php

위의 var.config.php 를 포함시켜 레이아웃을 제작한 후 관리패널에서 실제로 저장하기 버튼을 클릭하면 다음과 같은 결과값을 얻게 됩니다. 레이아웃 배포시에는 변수중 필요한 것은 기본값으로 셋팅해 놓은 상태로 var.php 를 포함시켜야 합니다. (주의) select,checkbox,radio 3개의 속성에 대해서는 반드시 항목=VALUE 의 형식으로 지정해 주어야 하며 변수로 저장되는 값은 VALUE 입니다.

/mylayout/_var/_var.php

4-5. 다국어 지원

레이아웃의 경우 다국어 지원을 권장하지는 않습니다. 언어별 전용 레이아웃을 개발하는 것이 더 효율적이라 판단하기 때문입니다. 그러나 마켓 배포용으로 제작하거나 특수한 경우에 다국어 지원의 필요성이 있을 수 있습니다. 이 경우 다음과 같은 구조를 추가함으로서 다국어 처리가 가능합니다.

디폴트(DEFAULT)언어를 결정합니다. 기본이 되는 언어를 어떤 것으로 할지 정해야 합니다. 사이트 언어를 한국어로 설정했는데 지정된 레이아웃이 한국어를 지원하지 않는다면 해당 레이아웃은 정상적으로 출력되지 않을 것이기 때문입니다. 따라서 한국어든 영어든 일본어든 DEFAULT 언어셋을 지정한 후 타 언어셋을 추가해 주어야 합니다. 반드시 다음과 같이 언어폴더를 추가해야 합니다.

언어셋 파일구조

위와같이 _languages 폴더안에 반드시 lang.DEFAULT.php 가 있어야 하며 그외는 옵션입니다. 하나의 언어를 추가하려면 lang.LANGUAGE.php 와 _var.config.LANGUAGE.php 가 추가되어야 하는데 _var.config.LANGUAGE.php 는 레이아웃폴더/_var/_var.config.php 를 사용할 경우에만 해당됩니다.

주의 lang.DEFAULT.php 의 경우 대응하는 _var.config.DEFAULT.php 가 없는데 lang.DEFAULT.php 에 한해서는 레이아웃폴더/_var/_var.config.php 가 사용되기 때문입니다. 따라서 lang.DEFAULT.php 는 _var.config.php 가 작성된 언어로 작성되어야 합니다.

_var.config.php 를 사용하지 않는경우라면?

_var.config.php(레이아웃 전용 변수설정 파일)을 사용하지 않는 레이아웃의 경우에는 언어셋에서 _var.config.LANGUAGE.php 파일이 필요하지 않으므로 다음과 같은 구조를 가지게 됩니다.

언어셋 파일 작성방법

언어셋 파일은 중복을 피하기 위해 반드시 다음과 같은 방식으로 작성해야 합니다. 언어셋 변수는 반드시 $lang 을 사용해야 합니다. 인자 네이밍은 반드시 중복되지 않도록 영문 소문자 + 숫자 조합으로 가급적 2자리 이내에서 정의합니다.

언어셋 호출방법

언어셋을 실제로 사용하기 위해서는 반드시 _LANG() 함수를 사용해야 하며 특수한 경우 변수 자체를 사용할 수도 있습니다.

언어셋 인클루드 방법

위의 언어셋을 사용하려면 반드시 _includes/_import.control.php 에서 인클루드해 주어야 합니다. 이때 아래의 코드로 인클루드하면 자동으로 해당 언어셋이 인클루드 되며 없는 언어셋이 호출될 경우 DEFAULT 언어셋으로 자동 대체됩니다.

5. 예제

샘플 레이아웃
레이아웃의 기본구조를 파악한 후에는 다음의 샘플들을 다운로드 받아 직접 확인합니다.
단계별로 레이아웃의 구조를 확장해 나가는 방법을 확인할 수 있으며 모든 과정의 구조를 파악한 후에는 Rb 설치시에 포함되어 있는 기본 레이아웃들을 파악함으로서 Rb 레이아웃의 구조와 개발 방법을 마스터 하게 됩니다.

다시한번 강조하지만 레이아웃 구조는 모듈과 마찬가지로 정해진 것이 아닙니다.
기본 구조위에 필요에 따라 구조를 확장할 수 있으며 이는 전적으로 개발자의 역량과 개발할 레이아웃의 성격이나 목적에 따라 달라지게 됩니다.
  1. 1. 최소한의 레이아웃 코드보기 다운로드
  2. 2. 레이아웃 전용 메인페이지가 포함된 레이아웃 코드보기 다운로드
  3. 3. 글로벌 css,js 를 포함하는 레이아웃 코드보기 다운로드
  4. 4. home 전용 레이아웃과 레이아웃용 페이지들이 포함된 레이아웃 코드보기 다운로드
  5. 5. 변수셋팅 기능을 포함하는 레이아웃 코드보기 다운로드
  6. 6. 반응형 레이아웃 샘플 코드보기 다운로드
  7. 7. 언어셋(한국어,영어)이 포함된 반응형 레이아웃 코드보기 다운로드

6. 패키징 방법

레이아웃 설치파일은 반드시 rb_layout_레이아웃폴더명.zip 이어야 합니다. 개발한 레이아웃폴더가 mylayout 일 경우 우선 mylayout.zip 으로 압축한후 rb_layout_레이아웃폴더명.zip으로 파일명을 변경합니다.

주의 압축파일인 rb_layout_레이아웃폴더명.zip 의 압축을 풀었을때 mylayout 폴더가 생성되면 안되며 mylayout 폴더내의 파일들이 최상위에 풀려야 합니다. 레이아웃 폴더는 Rb에 설치되는 과정에서 자동으로 생성됩니다.

7. 활용 팁

어드민 사이드패널 출력여부 제어방법

사용자 영역에서 관리자 사이드 패널 출력여부를 제어할 수 있습니다. 레이아웃의 _var 폴더 내에 nopanel.txt를 포함하면 관리자 사이드 패널을 비활성 할 수 있습니다. 고급 레이아웃 개발자의 경우 관리자 사이드패널을 비활성 처리한후 , 레이아웃 자체의 사이드 패널을 구성할 수 있습니다. /layouts/*/_var/nopanel.txt 는 빈(empty) 파일로 구성하시면 됩니다. Rb 2.1.0 이상에서 작동

Rb의 레이아웃은 반드시 부트스트랩(bootstrap)과 제이쿼리(jQuery)만을 이용해야 하는 것은 아니며 DTD 도 HTML5로 고정된 것이 아닙니다. 레이아웃은 전적으로 레이아웃을 만드는 제작자에 의해서 결정되는 요소인 만큼 상황에 따라 적절히 대응하셨으면 합니다.

위로