XE 확장변수...

제로보드 XE.. 아직 나는 제로보드 XE라고 부르고 있지만 정식 명칭은 Xpress Engine이다..
제로보드4 시절의 유져들이나 타보드 유져들은  XE를 못마땅하게 여기는 분들도 많으나 내 생각으론 사실 전세계 어디를 내놔도 XE만한 PHP 고급 웹페이지 저작 솔루션만한건 없다고 생각한다.

단순히 게시판뿐만 아니라 쇼핑몰을 구현하는 XESHOP, 트위터기능, 블로그기능, 다국어기능등이 훌륭하게 기능하고 있고, 또한 위젯의 붙이기나 최근글 가져오기, 갤러리, 포럼, 웹진등의 구현등이 단순히 두세번 클릭에 이루어진다니 이보다 더 좋은 웹페이지 저작 솔루션은 없다고 본다.

솔직히 PHP코드나 CSS스타일을 아무것도 모르는 초보자들도 XE사이트에서 제공되는 몇개의 다운로드만으로 훌륭한 웹사이트를 금방 구현할 수 있다.

다시금 훌륭한 점은 XE의 레이아웃과 모듈이다. XE안에서 레이아웃을 작성하고 등록하고 나면 그 사이트 안에서는 언제든지 레이아웃을 불러들여와 쓸수 있다. 또한 레이아웃은 또다시 타 사이트를 제작할때 똑같이 불러들여와 쓸수 있는 장점이 있다. 

또한 모듈... 여러 개발자들이 개발하는 XE용 유틸리티나 저작도구들을 모듈디렉토리아래에 설치만 하면, 금방 XE안에서 모듈로서 작동한다. 확장성과 개방성은 단연 세계 탑이다.

그러나 이러한 XE에서도 단점이 여럿 존재한다.

레이아웃의 사용은 일부 사용자들에게 자신만의 웹사이트 디자인을 제한을 거는듯한 느낌을 준다. 이 문제는 약간의 사고의 변환만으로 쉽게 해결할수 있다. 

동적인 레이아웃을 개발하여 사용할수도 있고 정적인 메뉴를 가지는 레이아웃을 타 보드처럼 작성해서 사용하는 방법도 있다. 결국엔 나중에 보면 아무런 제약이 없다.

또한 가장 안타까웠던것은 확장변수의 사용이었다.

확장변수라함은 XE에서 제공되는 폼만들기 기능이다.

견적폼등을 만들떄 HTML코드와 자바스크립트를 써가면서 많은 시간을 할애한다. 그렇게 만든 견적폼들은 메일함수를 통해서 관리자의 메일에 보내지는 정도로 끝난다. (대개의 우리나라 중소 사이트 제작자들은 이 방법을 사용하고 권유한다.)

메일을 쓰는것도 나쁘지 않으나, XE를 사용하면 자체 데이타베이스에 저장되고 후에 데이타베이스 기능으로서 훌륭히 작업할수 있다..

하지만 제공되는 XE의 확장변수는 완벽한 기능을 제공하지만, 장난치는듯한 느낌을 줄정도로 모양새가 안이쁘다.

각 th마다 세로크기가 틀려져 중구난방처럼 보인다던지....
한줄 입력값은 가로크기의 조절이 없는것...

색지정이 없어 단조로워 보인다든지... 일부러 둘러싸는 border를 주지 않았으면 허전하면서도 오와 열이 안맞는 인상의 폼이 되었을것이다.

XE의 확장변수 기능은 매우 훌륭하다. 하지만, 돈을 주고 사이트를 구입하는 사람들에게 기술적인 우의를 설명하는것보다도.. 그들의 눈에는 오와 열이 정리되고 보다 그럴싸한 색으로 백그라운드 칼라를 준 폼형식을 원한다..

그래서 이번 사이트 제작에선 확장변수를 구성하는 확장변수용의 스타일들을 원본 파일에서 수정을 하였다.

   
보드의 solid 처리를 dotted로 주어 텍스트보다 라인이 강조되는듯한 느낌을 지웠고..th의 크기를 40px로 주어 텍스트가 늘어나도 표의 세로크기가 변하지 않게 만들어주었다. 타이틀의 배경색깔을 변경하고 필수항목의 *표시는 빨간색으로 처리토록 하였다.

또한 게시글 작성도 보드를 dotted로 주어 보다 눈이 편하게 약하게 디스플레이 되도록 하였고...

중간 중간 푸른색의 도움말을 올려서 툴을 이용하지 않고 직접 작성한것 같은 느낌을 주도록 하였다. 물론 한줄 입력칸도 수정을 해서 미련하게 넓어보이는것을 알맞은 크기로 변경시켰다.

하지만 이렇게 만들려면 원본소스를 수정을 가해야 한다. 수정을 가하고 나면 다른 XE용 게시판에서 동일한 현상이 일어나므로 약간의 주의가 필요하다.

xe는 최근에 일반게시판과 확장된 bodex를 동시에 제공한다.
그러므로 bodex의 스킨중 하나를 수정토록 했고.. bodex > xe_default스킨의 write_form.html과 write.css,common.css에 수정을 가했다.

CSS를 조금만 아는 사람은 쉽게 수정할 수 있다.

.bodexWrite .extraVarsList { width:98%;border-top:1px solid; border-bottom:none; margin:10px 0 0 0; }
.bodexWrite .extraVarsList th { font-weight:normal; text-align:left; padding:4px 0 4px 10px; border-bottom:1px dotted; border-right:1px dotted; height: 60px; background-color: #f2f2f2; border-left:1px dotted;}
.bodexWrite .extraVarsList td {border-bottom:1px dotted; padding:4px 0 4px 10px; border-right:1px dotted; }

write.css의 이 부분을 수정하면 확장변수용 표의 모습을 수정할수 있게 된다..배경색이라든가... 폰트라든가.. 심지어는 배경그림도 넣을수 있게 되니 좀 더 자유로운 모습의 폼이 될수 있다..

.extraVarsList tr td .text { margin-right:10px; width:30%;  }
.extraVarsList tr td .email_address { margin-right:10px; width:200px;  }
.extraVarsList tr td .homepage { margin-right:10px; width:300px; }
.extraVarsList tr td .tel {margin-right:10px; width:40px; margin-right:10px; }
.extraVarsList tr td .textarea { margin-right:10px; width:90%; height:80px; font-size:12px; }
.extraVarsList tr td ul { margin:0; padding:0; list-style:none; }
.extraVarsList tr td ul li { display:inline-block; margin-right:10px; }
.extraVarsList tr td ul li input[type="text"] { margin-right:5px; vertical-align:middle;}
.extraVarsList tr td .date { margin-right:10px; width:100px;  }
.extraVarsList tr td .address { margin-right:10px; width:300px;  }

이 부분을 수정하면..입력칸이나 입력칸의 색등을 제어할수 있다...

또한 폼의 윗부분 위와 같이 간략하게 바꾸어 버렸다. 이것은 write_form.html을 약간 수정하면 고칠수 있다...
다른 부분.. 본문글이 들어가는 곳을 수정하거나 파일첨부란을 수정하고 싶은면 module > editor > skin > 아무스킨 > editor.html을 수정하면 된다.. 

하지만 이럴 경우 다른 보드에도 영향을 미치니... 게시판 속성 설정에서 추가설정에서 그냥 깨끗하게 처리하는 정도로 끝내버리도록 하자....