웹마스터 팁

안녕하세요. 디망쉬입니다.

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

소스에 주석이나 그런 거 없습니다. 알아서 보시고 모르겠다~! 싶으시면 제 홈의 질문/답변란에 적으시면 답변드리겠습니다.


이외 의견 많이 부탁드립니다.~

제목 글쓴이 날짜
추천검색어,실시간인기순위 소스 file codlllle 2015.06.21
추천 웹 디자인, 모바일 디자인, CSS3, UI/UX 애니메이션을 확인할 수 있는 블로그 file 나도모름 2015.01.14
스케치북 추천+등록을 활용한 비추천+등록 버튼 만들기 [2] file oscarmike 2014.05.16
*LI-NA님의 큰 선물* SKETCHBOOK5 (최신버전)에서 특정 확장변수를 추천하는 사람에게만 공개하도록 하는 방법 [4] file 큰성565 2014.04.30
추천수로 제목에 효과주기 [15] こさき! 2014.04.29
관리자가 무제한 추천 가능하게 하는 방법 [2] sejin7940 2014.01.17
[10원팁] 스케치북 추천/비추천/신고를 눈에 들어오게 socialskyo 2014.01.17
추천/비추천/신고시 확인(메시지 창 띄우기)하기 [21] explode 2013.11.27
추천인 표시 [11] socialskyo 2013.10.17
게시글 추천 아이피 가져오기 file Stellar 2013.09.12
추천 취소 기능 만들기 [5] file Summer 2013.09.11
[주옥시리즈]댓글 작성, 추천후 다운로드 받을수 있게 하기. socialskyo 2013.09.09
[주옥시리즈]댓글 작성, 추천후 다운로드 받을수 있게 하기. socialskyo 2013.09.09
댓글 작성, 추천후 다운로드 받을수 있게 하기. [6] socialskyo 2013.09.06
새로고침없이 페이지 리로딩 간단하고 쉽게 서버한테는 미안하게 하는법 (서버단이 아니고 스킨에 ㅠ jquery load씀) 게시글,댓글,추천등 모든 부분다가능합니다. [2] 장포크 2013.08.08
XE 내가 작성한 글 모두 일괄 추천하기. [4] 엘카 2013.08.01
게시판 및 댓글 추천/비추천 카운트가 바로 적용되지 않는 경우 KS 2013.07.28
게시글에 댓글 부분 추천, 비추천 바로 노출하기 [5] file 똑디 2013.07.19
xe_default 게시판 추천/비추천 색상 변경하기 file 화랑529 2013.01.08
bodex 추천 & 댓글 버튼 만들기. [1] file meanie 2012.10.28