웹마스터 팁
[추천 팁] 디망쉬식 스킨 시스템
2001.12.11 20:56
안녕하세요. 디망쉬입니다.
Tip 글 치고는 상당히 긴 글입니다. ^^ http://wwwphpschool.com 에도 쓴 글 그대로 퍼옵니다. 스륵.
--- 서론
웹 프로그래밍을 하시다보시면 코드와 디자인을 분리의 필요성을 뼈저리게 느끼게 됩니다. 저도 그것을 매우 뼈저리게 느꼈고 여러 시도를 해보았습니다. 그러나 php 속도의 한계로 인해 어설픈 스킨 시스템은 엄청난 속도 저하를 불러온다는 것을 깨달았습니다.
그리하여 스킨을 지원하는 php 게시판을 받아다 분석을 하였습니다. 분석 결과 스킨 시스템은 보통 두 가지 형태더군요.
1. design 영역 단위로 파일 분할
2. 스킨 파일 변수를 str_replace 로 내용 변환
1번은 유명한 제로보드를 비롯하여 여러 게시판에서 사용하더군요. 예를 들어 글 목록 모드일 경우 list.html, list_main.html .. 뭐 이런 식이죠. 장점은 누구나 쉽게 스킨 제작이 가능하다는 것입니다. 단점은 서버 과부하가 꽤 크다는 것이지요. 그리고 스킨 기능 추가시 변경해야될 사항이 상당히 많다는 것입니다.
2번은 최근에 나온 웹 게시판일수록 사용하더군요. 장점은 잘 구성만 하면 모드별로 하나의 파일로 스킨을 만들 수 있다는 것이지요. 예를 들어 list.html 하나면 list 모드와 관련된 모든 것을 처리할 수 있다는 것입니다. 단점은 문자열 변환을 거쳐야하기 때문에 스킨 변수를 많이 사용하면 할수록 느려진다는 것입니다.
저는 php 웹 게시판의 스킨 시스템을 CrazyWWWBoard 나 ezboard 처럼 script 언어 형태를 지향하고, 과부하 및 속도에 큰 영향력이 있는 것을 만들고 싶었습니다. 물론 가능은 했지만 2번 방식을 벗어나기 힘들었고 결국 속도 저하가 발생되었습니다.
그러다 저는 한가지 방법을 찾아내었습니다. 스킨 파일이 모드별로 하나로 구성이 가능하며, 속도 저하 및 과부하 역시 매우 적은 형태입니다. 제대로만 구성이 된다면 역대 php 스킨 시스템 중 가장 최상이라 생각되었습니다.
그 알고리즘을 공개합니다. 물론 제대로 사용은 안해보았습니다. 그러나 간단히 살펴본 결과 안정성 및 활용도, 과부하, 속도 모두 매우 만족스러웠습니다.
이 알고리즘을 아직 다른 곳에서는 보지 못했습니다. 물론 제가 게으른 탓에 더 많은 조사를 해보지 않아서 못본 이유일 가능성도 있습니다. 하지만 일단 보지 못했으니 간단하게 '디망쉬 스킨 알고리즘'이라 건방진 작명을 하였습니다. :p 딴지 및 어퍼컷 환영합니다. (그래도 무시할겨~)
이 방식의 장점은 다음과 같습니다.
1. 스킨 파일을 한번만 로딩한다. 고로 빠르고 과부하가 매우 적음.
2. php 문법을 몰라도 된다.
3. 전문적인 스킨 작성이 가능하다.
4. html 로 페이지를 만들듯이 손쉽게 제작이 가능하다.
5. 스킨에 허튼짓 못하게 막을 수 있다.
6. 스킨 관련 파일의 갯수가 매우 적다.
7. 기획만 잘하면 게시판 스킨이 아닌 매우 빠른 웹 스킨 가능.
-- 디망쉬 스킨 알고리즘
그 방식은 간단합니다. 사전 변환이 그 핵심입니다. 즉 현재의 스킨 시스템은 페이지 출력때마다 스킨을 변환하여 출력합니다. 그러나 제가 생각한 방식은 미리 변환해버리고 출력해줍니다. 사전에 변환을 해버렸기 때문에 출력때마다 변환할 필요가 없어 매우 빠릅니다.
스킨 파일 : list.pwsk
변환된 스킨 파일 : list.pwsk.php
자. 여기서 답이 다 나와버렸습니다. 이제 그 원리를 자세히 공개합니다.
일단 원스킨 파일(pwsk)는 스킨 문법대로 만듭니다. 그리고 이걸 스킨 등록 센터같은 곳에 등록하면, 이 센터는 이것을 php 파일로 변환합니다. 이걸 변환 스킨(pwsk.php)이라 하지요. 그런 뒤 이 스킨을 사용할 파일(list.php 라던가)은 이 변환 스킨을 include 시킵니다.
어때요. 간단하죠? 억수로 간단합니다.
-- 영역 나누기
화면은 각 각의 영역으로 나눌 수 있습니다. 예를 들어 list 모드일 경우 헤더, 본문, 꼬리 정도로 나눌 수 있겠지요. 본문의 경우 글 갯수만큼 반복되는 곳이겠구요. 이것을 저는 [:영역이름Area:] 로 했습니다. 만일 헤더 부근일 경우
[:StartArea:]
주절 주절
[:EndArea:]
로 해주는 것이지요. 즉 [:영역이름Area:] 과 [:EndArea;] 로 묶어줌으로서 영역을 구분시켜줍니다.
-- 디망쉬 스킨 알고리즘의 스킨 예제
list.pwsk
[:HeadStart:]
<html>
<head>
<title>Test</title>
</head>
[:EndArea:]
[:BodyHeadStart:]
<body bgcolor="white" text="black">
<font size="2">PWB 의 스킨 테스트임돠.<br>
<div align="right">Powered by Dimanche<br>
<a href="http://dimanche.coco.st/ex/skin/test.php?skinname=default">Default Skin</a> |
<a href="http://dimanche.coco.st/ex/skin/test.php?skinname=delthia">Delthia Skin</a> |
<a href="http://dimanche.coco.st/ex/skin/test.php?skinname=guestbook">Guestbook Skin</a>
</div><p></font>
<table border="1" width="600">
<tr>
<td width="200" align="left"><font size="2"><b><a href="[#link.admin#]">Admin</a></b></font></td>
<td width="400" align="right"><font size="2">Total articles : [#db.totalnum#] / Total pages : [#db.totalpage#] / Current page : [#db.currentpage#]</font></td>
</tr>
</table>
<table border="1" width="600">
<tr>
<th width="25" align="center">no</td>
<th width="455" align="center">T i t l e</td>
<th width="80" align="center">Name</td>
<th width="30" align="center">Hits</td>
<th width="30" align="center">size</td>
<th width="60" align="center">Date</td>
</tr>
[:EndArea:]
[:BodyStart:]
<tr>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.no#]</font></td>
<td valign="middle" align="left"><font size="2">[#db.titledepth#] <a href="[#link.title#]">[#db.title#]</a><font size="2" style="font-family:Tahoma;font-size:9px;">[#db.memocnt#]</font></font></td>
<td valign="middle" align="right"><font size="2"><a href="javascript:void(window.open('http://www.delthia.com/infor.php?pf=[#db.pf#]','editbox','width=350,height=180,statusbar=no,scrollbars=yes,toolbar=no'))">[#db.nick#]</a></font></td>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.hit#]</font></td>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.textbyte#][#db.textbytetype#]</font></td>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.filluptime#]</font></td>
</tr>
<tr>
<td colspan="6" height="1"></td>
</tr>
[:EndArea:]
[:TailStart:]
</table>
<table border="1" width="600">
<tr>
<td width="400" align="center"><font size="2" style="font-family:Tahoma;font-size:11px;">[#link.movepage#]</font></td>
<td width="200" align="right"><font size="2"><b><a href="[#link.write#]">Write</a> |
<a href="[#link.login#]">Login</a> |
<a href="[#link.reload#]">Reload</a>
</b></font></td>
</tr>
<tr>
<td colspan="2" align="center"><b>[#link.copyright#]</b></td>
</tr>
</table>
<a href="viewskin.php?type=list&file=default" target="fffff">스킨 파일 보기</a>
</body>
</html>
[:EndArea:]
이것은 뼈다귀 스킨입니다. 이것을 등록한 뒤 스킨을 적용하면 다음과 같이 됩니다.
http://dimanche.coco.st/ex/skin/test.php?skinname=default
어떻습니까. php 를 몰라도 스킨을 만들 수 있습니다. 이 list.pwsk 를 list.pwsk.php 로 변환시켜준 뒤 test.php 는 list.pwsk.php 를 읽어들이는 것 뿐입니다.
-- 예제
주절 주절 말이 많은데 직접 해보시면 쉽게 이해가 가실 것입니다.
스킨 등록 센터 : http://dimanche.coco.st/ex/skin/
스킨 작동 화면 : http://dimanche.coco.st/ex/skin/test.php
스킨 문법 문서 : http://dimanche.coco.st/ex/skin/manual.txt
스킨 알고리즘 관련 소스 : http://dimanche.coco.st/contents/source/?type=list&o[dir]=:ex:skin
소스에 주석이나 그런 거 없습니다. 알아서 보시고 모르겠다~! 싶으시면 제 홈의 질문/답변란에 적으시면 답변드리겠습니다.
이외 의견 많이 부탁드립니다.~
Tip 글 치고는 상당히 긴 글입니다. ^^ http://wwwphpschool.com 에도 쓴 글 그대로 퍼옵니다. 스륵.
--- 서론
웹 프로그래밍을 하시다보시면 코드와 디자인을 분리의 필요성을 뼈저리게 느끼게 됩니다. 저도 그것을 매우 뼈저리게 느꼈고 여러 시도를 해보았습니다. 그러나 php 속도의 한계로 인해 어설픈 스킨 시스템은 엄청난 속도 저하를 불러온다는 것을 깨달았습니다.
그리하여 스킨을 지원하는 php 게시판을 받아다 분석을 하였습니다. 분석 결과 스킨 시스템은 보통 두 가지 형태더군요.
1. design 영역 단위로 파일 분할
2. 스킨 파일 변수를 str_replace 로 내용 변환
1번은 유명한 제로보드를 비롯하여 여러 게시판에서 사용하더군요. 예를 들어 글 목록 모드일 경우 list.html, list_main.html .. 뭐 이런 식이죠. 장점은 누구나 쉽게 스킨 제작이 가능하다는 것입니다. 단점은 서버 과부하가 꽤 크다는 것이지요. 그리고 스킨 기능 추가시 변경해야될 사항이 상당히 많다는 것입니다.
2번은 최근에 나온 웹 게시판일수록 사용하더군요. 장점은 잘 구성만 하면 모드별로 하나의 파일로 스킨을 만들 수 있다는 것이지요. 예를 들어 list.html 하나면 list 모드와 관련된 모든 것을 처리할 수 있다는 것입니다. 단점은 문자열 변환을 거쳐야하기 때문에 스킨 변수를 많이 사용하면 할수록 느려진다는 것입니다.
저는 php 웹 게시판의 스킨 시스템을 CrazyWWWBoard 나 ezboard 처럼 script 언어 형태를 지향하고, 과부하 및 속도에 큰 영향력이 있는 것을 만들고 싶었습니다. 물론 가능은 했지만 2번 방식을 벗어나기 힘들었고 결국 속도 저하가 발생되었습니다.
그러다 저는 한가지 방법을 찾아내었습니다. 스킨 파일이 모드별로 하나로 구성이 가능하며, 속도 저하 및 과부하 역시 매우 적은 형태입니다. 제대로만 구성이 된다면 역대 php 스킨 시스템 중 가장 최상이라 생각되었습니다.
그 알고리즘을 공개합니다. 물론 제대로 사용은 안해보았습니다. 그러나 간단히 살펴본 결과 안정성 및 활용도, 과부하, 속도 모두 매우 만족스러웠습니다.
이 알고리즘을 아직 다른 곳에서는 보지 못했습니다. 물론 제가 게으른 탓에 더 많은 조사를 해보지 않아서 못본 이유일 가능성도 있습니다. 하지만 일단 보지 못했으니 간단하게 '디망쉬 스킨 알고리즘'이라 건방진 작명을 하였습니다. :p 딴지 및 어퍼컷 환영합니다. (그래도 무시할겨~)
이 방식의 장점은 다음과 같습니다.
1. 스킨 파일을 한번만 로딩한다. 고로 빠르고 과부하가 매우 적음.
2. php 문법을 몰라도 된다.
3. 전문적인 스킨 작성이 가능하다.
4. html 로 페이지를 만들듯이 손쉽게 제작이 가능하다.
5. 스킨에 허튼짓 못하게 막을 수 있다.
6. 스킨 관련 파일의 갯수가 매우 적다.
7. 기획만 잘하면 게시판 스킨이 아닌 매우 빠른 웹 스킨 가능.
-- 디망쉬 스킨 알고리즘
그 방식은 간단합니다. 사전 변환이 그 핵심입니다. 즉 현재의 스킨 시스템은 페이지 출력때마다 스킨을 변환하여 출력합니다. 그러나 제가 생각한 방식은 미리 변환해버리고 출력해줍니다. 사전에 변환을 해버렸기 때문에 출력때마다 변환할 필요가 없어 매우 빠릅니다.
스킨 파일 : list.pwsk
변환된 스킨 파일 : list.pwsk.php
자. 여기서 답이 다 나와버렸습니다. 이제 그 원리를 자세히 공개합니다.
일단 원스킨 파일(pwsk)는 스킨 문법대로 만듭니다. 그리고 이걸 스킨 등록 센터같은 곳에 등록하면, 이 센터는 이것을 php 파일로 변환합니다. 이걸 변환 스킨(pwsk.php)이라 하지요. 그런 뒤 이 스킨을 사용할 파일(list.php 라던가)은 이 변환 스킨을 include 시킵니다.
어때요. 간단하죠? 억수로 간단합니다.
-- 영역 나누기
화면은 각 각의 영역으로 나눌 수 있습니다. 예를 들어 list 모드일 경우 헤더, 본문, 꼬리 정도로 나눌 수 있겠지요. 본문의 경우 글 갯수만큼 반복되는 곳이겠구요. 이것을 저는 [:영역이름Area:] 로 했습니다. 만일 헤더 부근일 경우
[:StartArea:]
주절 주절
[:EndArea:]
로 해주는 것이지요. 즉 [:영역이름Area:] 과 [:EndArea;] 로 묶어줌으로서 영역을 구분시켜줍니다.
-- 디망쉬 스킨 알고리즘의 스킨 예제
list.pwsk
[:HeadStart:]
<html>
<head>
<title>Test</title>
</head>
[:EndArea:]
[:BodyHeadStart:]
<body bgcolor="white" text="black">
<font size="2">PWB 의 스킨 테스트임돠.<br>
<div align="right">Powered by Dimanche<br>
<a href="http://dimanche.coco.st/ex/skin/test.php?skinname=default">Default Skin</a> |
<a href="http://dimanche.coco.st/ex/skin/test.php?skinname=delthia">Delthia Skin</a> |
<a href="http://dimanche.coco.st/ex/skin/test.php?skinname=guestbook">Guestbook Skin</a>
</div><p></font>
<table border="1" width="600">
<tr>
<td width="200" align="left"><font size="2"><b><a href="[#link.admin#]">Admin</a></b></font></td>
<td width="400" align="right"><font size="2">Total articles : [#db.totalnum#] / Total pages : [#db.totalpage#] / Current page : [#db.currentpage#]</font></td>
</tr>
</table>
<table border="1" width="600">
<tr>
<th width="25" align="center">no</td>
<th width="455" align="center">T i t l e</td>
<th width="80" align="center">Name</td>
<th width="30" align="center">Hits</td>
<th width="30" align="center">size</td>
<th width="60" align="center">Date</td>
</tr>
[:EndArea:]
[:BodyStart:]
<tr>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.no#]</font></td>
<td valign="middle" align="left"><font size="2">[#db.titledepth#] <a href="[#link.title#]">[#db.title#]</a><font size="2" style="font-family:Tahoma;font-size:9px;">[#db.memocnt#]</font></font></td>
<td valign="middle" align="right"><font size="2"><a href="javascript:void(window.open('http://www.delthia.com/infor.php?pf=[#db.pf#]','editbox','width=350,height=180,statusbar=no,scrollbars=yes,toolbar=no'))">[#db.nick#]</a></font></td>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.hit#]</font></td>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.textbyte#][#db.textbytetype#]</font></td>
<td valign="middle" align="right"><font size="2" style="font-family:Tahoma;font-size:10px;">[#db.filluptime#]</font></td>
</tr>
<tr>
<td colspan="6" height="1"></td>
</tr>
[:EndArea:]
[:TailStart:]
</table>
<table border="1" width="600">
<tr>
<td width="400" align="center"><font size="2" style="font-family:Tahoma;font-size:11px;">[#link.movepage#]</font></td>
<td width="200" align="right"><font size="2"><b><a href="[#link.write#]">Write</a> |
<a href="[#link.login#]">Login</a> |
<a href="[#link.reload#]">Reload</a>
</b></font></td>
</tr>
<tr>
<td colspan="2" align="center"><b>[#link.copyright#]</b></td>
</tr>
</table>
<a href="viewskin.php?type=list&file=default" target="fffff">스킨 파일 보기</a>
</body>
</html>
[:EndArea:]
이것은 뼈다귀 스킨입니다. 이것을 등록한 뒤 스킨을 적용하면 다음과 같이 됩니다.
http://dimanche.coco.st/ex/skin/test.php?skinname=default
어떻습니까. php 를 몰라도 스킨을 만들 수 있습니다. 이 list.pwsk 를 list.pwsk.php 로 변환시켜준 뒤 test.php 는 list.pwsk.php 를 읽어들이는 것 뿐입니다.
-- 예제
주절 주절 말이 많은데 직접 해보시면 쉽게 이해가 가실 것입니다.
스킨 등록 센터 : http://dimanche.coco.st/ex/skin/
스킨 작동 화면 : http://dimanche.coco.st/ex/skin/test.php
스킨 문법 문서 : http://dimanche.coco.st/ex/skin/manual.txt
스킨 알고리즘 관련 소스 : http://dimanche.coco.st/contents/source/?type=list&o[dir]=:ex:skin
소스에 주석이나 그런 거 없습니다. 알아서 보시고 모르겠다~! 싶으시면 제 홈의 질문/답변란에 적으시면 답변드리겠습니다.
이외 의견 많이 부탁드립니다.~
댓글 4
-
바다처럼
2001.12.11 21:45
디망쉬님이다 ^-^/ -
새벽바람
2001.12.12 07:47
딜디아 체험판좀 뿌려주세욧>_<// -
Webme
2001.12.15 21:13
아주 좋은팁이예요^^;; PHPSCHOOL에서 봤는뎅^^;; 여기도 올려주셨내용? -
뮤하하
2002.11.16 18:44
와;; 이거 저두 이렇게 만들었었는데 =.=; 멋져멋져 =.=;;
