디자이너와 협업을 위한 스킨 시스템

 
글쓴이:이 은규  디자이너와 협업을 위한 스킨 시스템 조회수:15888


이 은규
http://unkyulee.net
 /bbs2/down2/php_skin_system.doc
 http://unkyulee.net/lecture/skin.htm



######################################################
강좌 : http://unkyulee.net/lecture/skin.htm
제목 : 디자이너와 협업을 위한 스킨 시스템
홈페이지 : http://unkyulee.net
######################################################


개발자와 디자이너의 협업을 위한 PHP 스킨 시스템

이번 강좌에서는 스킨 시스템에 대한 여러 가지 의문에 대한 해답을 찾게 될 것이
다. PHP 코드와 HTML 코드가 서로 뒤죽박죽 섞이지 않고, 체계적으로 분리 하는
시스템을 스킨이라고 한다.

자 그럼 스킨 시스템이 무엇이며, 어떻게 구현되는지 알아보자. 스킨 시스템의
응용에서는 이 스킨 시스템을 적용해서 생길 수 있는 문제점과 의문점들을 다룰
것이다.

- 스킨 시스템은 무엇인가?
- 스킨 시스템을 사용하는 이유는 무엇인가?
- 스킨 시스템을 구현하는 방법
- 이렇게 구현 스킨 시스템의 장점
- 스킨 시스템의 응용

스킨 시스템은 무엇인가?

스킨 시스템이란? PHP코드와 HTML코드가 분리되어 있는 것이다. 이러한 구조를
구현하기 위해서 작업을 3가지로 구분한다. 스킨, 모듈, 인터페이스가 바로 그 것
이다. 각각의 요소들은 필자 나름대로 이름을 붙인 것으로 전혀 어려운 개념이 아
니다. 하나하나씩 설명해 보도록 하겠다.

스킨이란 HTML 코드를 의미한다. 이는 스킨 시스템에서 디자인적인 요소를 지칭
한다. 보통 디자이너가 개발한 HTML 코드를 보내주고 프로그래머가 웹 프로그램에
맞도록 HTML 코드를 잘라서 사용하는데 여기서 스킨은 프로그래머가 웹 프로그램
에 맞도록 HTML 코드를 가공한 결과물이다.

모듈이란 로직을 의미한다. 일반적으로 함수들의 집합이나, 클래스들을 모듈이라
고 지칭한다. 예를 들어 게시판 모듈이라고 하면 게시판을 생성하고, 게시물을 삽
입, 삭제, 수정하는 함수들의 집합이라고 하겠다. 이러한 모듈은 함수단위로 구성
하기도 하고 기능 단위로 구성하기도 한다.



인터페이스란 스킨과 모듈을 조합하여서 화면을 구성하는 역할을 한다. 이 부분
에서는 사용자의 입력을 받고 입력을 분석한 후 해당 입력에 적절한 스킨과 모듈
을 입혀서 화면에서 뿌리게 된다.




스킨 시스템을 사용하는 이유는 무엇인가?
스킨 시스템을 사용함으로 인해서 디자이너와 프로그래머의 역할을 확실하게 분
리 시킨다. 디자이너의 역할이란 HTML 코드를 작성하는 일이다. 그리고 프로그래
머는 사이트에 필요한 로직을 구현하는 일을 한다. 또 프로그래머는 디자이너가
넘겨준 HTML 코드를 PHP 코드에 적용시켜서 완성된 결과를 화면에 표현할 수 있는
상태로 만들어 준다.
이러한 작업을 진행하면 어쩔 수 없이 PHP 코드 내부에 HTML 코드가 삽입되게 된
다. 혹은 반대로 HTML 코드 내부에 PHP 코드가 들어가게 된다. 로직과 디자인이
섞어진 코드가 만들어진 다는 말이다. 이는 웹 프로그래밍을 하는 경우에는 피할
수 없다. 또한 웹 프로그램에서 디자인 요소(HTML코드)는 많은 부분을 차지한다.
그렇기 때문에 체계적인 구조를 가지지 않고 디자인 요소들을 처리한다면, 그 결
과물은 굉장히 알아보기 힘든 형태를 하고 있을 것이다. 예를 들어 10000줄 짜리
코드를 작성하였다고 하자. 이 코드에는 로직과 디자인 요소가 서로 섞어져 있다
. 이 코드에서 그림 하나를 바꾸거나 혹은 로직에 약간의 변화를 주려고 한다면
10000줄이 되는 코드 안에서 HTML 출력 부분과 로직 부분을 찾아 헤매면서 숱한
밤을 지새우며 수정을 해야 할 것이다. 하나가 바뀌면 또 다른 부분도 찾아서 수
정해줘야 되고 디자인 하나가 바뀌면 모든 코드를 수정해야 되고... 이런 고초는
다들 겪어 봤을 것이고 또 충분히 겪을 수 있는 상황이다.
스킨 시스템은 이러한 고초를 덜어준다. 디자인 요소와 로직을 분리하고 각자의
역할 범위 내에서 최고의 기량을 표현 할 수 있게 해준다. 디자이너는 디자인만
하면 되고, 프로그래머는 로직만 개발 하면 되고 각자 개발한 내역을 나중에 스킨
시스템을 사용하여 서로 합치는 과정만 거치게 되면 원하는 결과를 얻어 낼 수
있는 것이다. 또한 유지 보수도 굉장히 수월해 진다. 디자인 요소를 수정하고 싶
다면 전에 작업 했던 내용이 거의 비슷하게 유지 되므로 디자이너가 프로그래밍에
대한 이해가 없어도 간편하게 수정이 가능 하다. 프로그래머도 마찬가지 이다.
자신의 로직을 더욱 개량하려고 하거나 새로운 기능을 추가한다고 했을때 최소한
의 수정으로 원하는 결과를 얻을 수 있을 것이다. 스킨 시스템은 코드와 디자인을
분리했다는 측면에서 굉장히 직관적이 된다. 때문에 자신이 수정한 코드가 어디
에 영향을 끼치는 지 확실히 알 수 있고 정확히 해당 부분만을 수정해주면 되기
때문이다.

스킨이 구현되는 방법

자 이제 실질적으로 스킨이 구현되는 모습을 볼 때가 왔다. 구현이 되는 모습을
보기 위해 간단한 예를 들어 시작해 보겠다.

예) 사용자가 이름을 입력하면 "[이름]님 안녕하세요"를 출력한다. 만약 이름이
없으면 "Hello World"를 출력한다.

위의 예에서 모듈과 스킨을 구분해 보자.

먼저 스킨 부분을 구분해 보면
- 사용자의 입력을 받기 위해서는 이름을 입력하는 페이지가 필요하다.
- 또한 입력된 이름이 출력되는 페이지가 필요하다.
이들은 HTML 페이지 따라서 이들은 스킨으로 분류가 된다.

자 그럼 스킨을 하나하나 씩 만들어 보자.

- 입력 폼 HTML
<form method=post action=test.php?mode=process_input>
이름 : <input type=text name=name>
<input type=submit>
</form>

- 출력 페이지
<title>xxx님 안녕하세요</title>
<font size=5>xxx님 안녕하세요</font>

여기까지는 HTML 페이지의 제작과정이다. 이제 이 것들을 PHP 파일로 옮겨서 스
킨으로서 역할을 하도록 만들어 보자.
- 스킨 파일은 한 페이지당 한 개씩 존재한다.
- 스킨 파일 내부에서는 HTML 페이지의 내용을 변수에 저장을 한다.
- 파일의 마지막에서 HTML 페이지를 저장하나 변수를 리턴한다.

- 입력 폼 스킨
<?
$string = <<<INPUTFORMSKIN
<form method=post action=test.php?mode=process_input>
이름 : <input type=text name=name>
<input type=submit>
</form>
INPUTFORMSKIN;

return $string ;
?>

- 출력 폼 스킨
<?
$string = <<<OUTPUTSKIN
<title>{$name}</title>
<font size=5>{$name}</font>
OUTPUTSKIN;

return $string ;
?>

이렇게 작성하고 각각 input_form.php, output.php 파일로 skin 폴더에 저장한다
. 여기까지 했다면 스킨의 제작은 끝이다.

그럼 스킨에서 중요한 내용을 알아보도록 하자. HTML 코드를 변수에 저장하였다
. 이때 Perl 스타일로 문자열을 저장하였다. 이 방식은 내부에 있는 문자열을 그
대로 저장하기 때문에 HTML 코드를 그대로 옮기기가 쉬워진다. 일반적으로 문자열
을 저장할때는 " 를 사용하는데 이는 중간에 " 문자가 들어간다면 \\" 로 Escape
시켜 줘야 하는 번거로움이 있다. 하지만 <<<시작문자 [문자열] 시작문자; 이런
스타일로 문자열을 저장하면 기존의 HTML 코드를 별다는 Escape의 과정 없이 그대
로 붙여넣기 할 수 있어서 굉장히 효율적인 방식이다. 하지만 주의 할 점이 있는
데 문자열을 종료할 때 시작문자와 ; 사이에는 공백이 허용되지 않는다. 꼭 주의
하도록 하자. 가끔씩 실수로 공백 문자를 넣어서 변수값이 제대로 저장되지 않는
경우도 있다.

return 문의 쓰임새를 알아보자. 스킨 안에는 마지막 줄에 return 문이 있는데
이는 어떻게 쓰이는 것일까? 이 것은 인터페이스 파일에서 include 문에서 사용이
된다. PHP 에서는 include 가 함수처럼 사용이 된다. 따라서 include 는 함수처
럼 리턴값이 존재하고 이를 변수에서 받아서 저장 할 수 있다. include 함수는 외
부파일을 내부에 포함 시키는 함수인데 외부파일이 성공적으로 삽입이 되면 1 실
패하면 0 을 리턴하는 함수이다. 그리고 PHP 4 부터는 외부파일에 return 문이 존
재하면 해당 return 값을 리턴한다. 스킨 파일에서 return 은 이러한 include 함
수의 속성을 이용하기 위하여 존재한다.

그럼 이제 모듈을 작성해 보자.
아까의 예에서 모듈 부분을 살펴보면
- 사용자가 입력한 값을 검사하여 "[이름]님 안녕하세요" 혹은 "Hello World" 를
생성하는 함수가 필요하다.
<?
// 입력을 처리하는 함수
// 문자열을 리턴한다.
function ProcessInput( $name )
{
if ( $name )
$string = $name."님 안녕하세요" ;
else
$string = "Hello Word" ;

return $string ;
}
?>
파일이름을 ProcessInput.php 라고 하고 module 폴더에 저장한다. 그럼 모듈 제
작도 끝이 났다. 이 함수는 $name 을 분석해서 결과물을 $string 에 저장하여 리
턴하는 함수이다.

그럼 마지막으로 인터페이스 파일을 만들어 보자.

<?
switch( $mode )
{
case "input_form" :
{
$content = include "./skin/input_form.php" ;
} break ;
case "process_input" :
{
include "./module/ProcessInput.php" ;
$name = ProcessInput( $_POST['name'] ) ;
$content = include "./skin/output.php" ;
} break ;
}
echo $content ;
?>

인터페이스 파일은 test.php 라고 하고 루트 폴더에 저장한다.

test.php 파일은 $mode 라는 변수에 의해서 수행하는 역할이 달라진다.
- input_form : 이 모드에서는 사용자의 입력을 받는 폼을 출력한다.
- process_input : 이 모드에서는 사용자가 입력한 변수를 처리하고 출력한다.

중간에 화면에 뿌려진 결과물은 $content 라는 변수에 저장하고 인터페이스 파일
의 마지막에서 echo 라는 함수로 화면에 뿌려준다.

이제 실행 결과를 확인해 보자.
./test.php?mode=input_form 이라고 주소창에 쓴다.









스킨 시스템 구현시 지켜야 하는 규칙

이번 장에서는 스킨 시스템 구현시 지켜야 할 사항들을 알아보자. 스킨 시스템을
구현하기 전에 기본적으로 알아야 할 사항들이라고 생각하면 되겠다.

우선 디렉토리 구조를 살펴보자. 여기에서 제시하는 디렉토리 구조는 필자가 사
용하는 모델이며 굳이 따를 필요는 없다. 얼마든지 구미에 맞게 수정이 가능하다
.

-> ./module/모듈기능/함수명.php
-> ./skin/스킨명/스킨이름.php
-> ./인터페이스 명

위의 예가 가장 일반적인 디렉토리 구조와 이름 짓는 방법이다.
예를 들어 보자. 게시판을 작성한다고 하면 ./module/board/ 라는 디렉토리를 생
성한다. 그리고 이 디렉토리 안에 게시판과 관련된 모듈을 저장한다. 이렇게 하면
많은 종류의 모듈을 제작했을대 서로 섞이지 않으며 잘 분류되어 있는 모습을 볼
수 있다. 또한 이렇게 분류가 되어 있으면 다음 프로젝트 때 쉽게 재사용 할 수
있다는 장점이 있다.

스킨은 화면에 보여지는 부분이다. 따라서 여러 버전이 존재 할 수 있다. 하나의
게시판 모듈에 여러개의 스킨이 존재 할 수 있는 것처럼 말이다. 이런 경우 스킨
폴더를 만들고 그 안에 스킨이름으로 폴더를 하나 더 만든다. 게시판 갤러리 스
킨 이라면 ./skin/board/gallery/ 같은 식으로 만들면 되겠다. 그리고 해당 폴더
내에 스킨 파일을 저장하면 되겠다. 나중에 스킨을 변경하기 위해서는 스킨 폴더
를 변경 시켜주기만 하면 되기 때문에 간단하게 스킨을 바꿀 수가 있다.

인터페이스 파일을 생성 할때의 규칙을 알아보자. 인터페이스 파일의 이름을 그
파일의 속성을 잘 알 수 있는 것으로 하자. 예를 들어 게시판의 인터페이스 파일
이라 하면 board.php 라고 이름 짓는 것이 좋을 것 이다.

인터페이스 파일은 일반적으로 switch 문을 사용하여 실행 모드를 결정한다. 이
때 switch 문에 모드 결정 변수가 들어가는데 이 변수의 이름은 무조건 $mode 라
고 하지 말고 $board_mode 나 $bd_mode 등과 같이 구분이 될 수 있는 변수 이름으
로 하는 것이 좋다. 이렇게 하면 나중에 인터페이스 파일을 확장해서 사용할 때
충돌이 일어나지 않는다.