XE버젼으로 거의 세달에 걸친 사이트 제작이 거의 마무리 되어 간다..
레이아웃을 디자인하고 필요한 모듈, 위젯 스킨들을 거의 다 만든 것 같고..
남은 작업은 알바트로스 버전이 정식 배포되면 기존에 만든 스킨들을 알바트로스에 맞춰 컨버젼하기만 하면 될 것 같다..

1. 제로보드XE에 이르기까지...
내가 만든 사이트를 전체적으로 보면 20세기 분위기다.
포털들에서 계정을 주면 거기에 html 편집해서 올리던 시절의 레이아웃을 크게 벗어나지 못하는 듯한 느낌..
그때는 계정들이 5MB 10MB정도 제공받았던 것 같다..
보드는 무료 게시판을 할당해주는 서비스를 받아서 링크를 시키던 방식으로 사용했던 듯..
첫 사이트는 아마 지금은 서비스 중지된 netian에 개설했던 듯..
그 사이트로 무슨 상인가 받았는데 서비스 중지되서 안타깝다.
그 다음에 인티즌인가 인티시티인가... 하는 데 잠깐 개설한 듯..
그러다가 21세기에 들어서 학교 서버를 사용할 수 있게 되어, 설치형 보드를 사용할 수 있게 되었다..
이지보드, 테크노트 보드를 사용했던 것..
제로보드4를 본격적으로 사용한 것은 2003년 쯤 부턴가...
제로보드와 자체 코딩한 php파일을 연동시켜서 도서관 홈페이지를 만들어서 운영했다.
그런데 그 무렵이 싸이월드가 대박나던 시절이었던 듯 하다..
미니홈피를 개설은 해놨지만.. 성격상 틀에 맞춘 곳에 몸담기는 구미에 안맞아 개점 휴업..
눈을 돌린 곳은 다음이나 네이버의 카페, 블로그 들..
역시 개설은 해놨지만, 거의 개점 휴업..
그래도 다음과 네이버 블로그는 스크랩용으로 잘 써먹고 있다..

다시 올 해들어 홈피를 한 번 만들어서 사용해봐야 겠다는 욕구가 강렬히 들었다..
어떤 툴들이 좋을까.. 태터툴즈와 제로보드5가 눈에 들어왔다.
태터툴즈는 강력하고 예쁜 스킨들이 많았다.. 그러나.. 사이트보다는 블로그 지향적이었다..
제로보드5로 작업에 들어갔다.. 그런데 제로보드5를 접한 시점이 이미 제로보드XE가 개발되기 시작할 무렵이었다..
3,4년 전에 제로보드4로 사이트 제작한 이후 손을 놓고 있었기 때문에
웹프로그래밍이 다시 낯설어져 있어서 제로보드5로 감을 잡아 나갔다...

제로보드XE 클로즈 베타가 시작되면서 본격적으로 메달렸다..
주먹구구식으로 해나가려니 괜한 시행착오를 해야만 했다..
왜 안되는 것일까를 연발하며.. 며칠 씩 골머리를 앓다고 코드를 찬찬히 보면 아주 사소한 오탈자 때문에 구현이 안되었다는 것을 발견하기도 하고..

이런 과정을 거쳐 21세기 툴로 20세기 디자인의, 그보다 먼 과거의 내용르로 채워질 사이트가 만들어지고 있다.

2. 레이아웃
기본틀은 제로보드5베타 때 만들었다..
한지를 기본 개념으로 하면서 좀 푸근하고 안정되면서도 산뜻한 느낌을 주고 싶었는데,
만들고 보니 좀 칙칙하다. 한지 선택의 감각이 무딘 모양이다.
그 틀을 유지하면서 만들어 가는데
contentbody 부분에도 배경을 주니 좀 답답한 느낌이 들었다.
그래서 contentbody 부분은 left와 right를 나누어 테두리만 주게 되었다.
대체로 contentbody 부분은 아웃라인 없이 내용들을 보여 주는게
갈끔하고 가독성도 높아지는 듯 하지만, 구시대적 발상에 메여 있어서 그런지 테두리를 만들게 된다.

제로보드5에서는 메인 메뉴마다 다른 레이아웃을 만들었는데 관리하기도 힘들고...,
그렇지만 메인메뉴가 달라짐에 따라 화면에 뭔가 변화가 주고 싶어서
메인메뉴 바로 밑에 메뉴별 이미지를 달리 주는 방식으로 해결했다.

3. 메뉴
레이아웃 디자인에서 중요한 부분 가운데 하나가 메인메뉴 디자인인 듯 하다..
로고 이미지와 메뉴 디자인이 잘 어울려야 레이아웃의 특성이 잘 살아나는데,
아이디어의 빈곤으로 결국 나란히 배열하는 것으로 낙점됐다.
로고 이미지는 로고 영역의 div 높이 보다 크게 하니 아랫쪽에 겹쳐서 보이는 것이 오히려 맘에 들었다.
그리고 메인메뉴 마우스 오버 시에 서브메뉴가 폴다운되도록 만들었다.
이런 방식을 적용한 것이 편리하면서도 메인메뉴 디자인에 약간 제약요소가 되기도 한다.

메뉴 디자인을 어떻게 할 것인가.. 이미지 버튼을 지원하지 않는 상태에서 롤이미지 효과를 보이고 싶었다.
이미지 버튼을 지원하지 않는 것은 롤이미지 효과를 css에서 해결하려는 xe개발 의도 때문인 듯 하다.
5베타 버젼 부터 css에서 처리하고 이미지 버튼에 의해 롤이미지 효과를 내는 부분은 주석처리로 숨겼던 것이다.
css에서 default, hover, focus, on 등에서 효과를 주게 된다..
레이아웃과 잘 어울리면서도 산뜬한 메뉴 이미지를 만들고 싶은 마음은 굴뚝깥지만,
미적 감각이 일천한 관계로 이 모양이다.

서브메뉴는 예전에 제로보드4로 만든 페이지에서 만들어 쓰던 플래쉬 메뉴를 사용했다.
그때는 프레임 방식으로 사이트를 구성하고 메인메뉴에 따라 다른 html을 불러오는 방식으로
메인 메뉴에 따라 서브메뉴를 위한 플래쉬 파일을 별도로 만들어 사용했었다.
한 플래쉬 파일에 서브메뉴 몇 개를 같이 넣는 방식
이것을 플래쉬 파일에는 하나의 버튼만 두고 서브메뉴마다 불러들이는 방식으로 바꿨다.
서브메뉴가 여러 개이지만 하나의 플래쉬 파일을 불러들이면서 변수만 넘겨주는 방식이다.
foreach문에서 자동으로 넘겨주게 되니 서브 메뉴 구성이 오히려 수월해졌다. 
서브메뉴용 플래쉬 파일을 메인메뉴 마다 별도로 제작하지 않고 하나면 해결되기 때문이다.
플래쉬 파일 하나만 있으면 메뉴마다 menu text와 url을 달리 설정해서 사용할 수 있게 되는 것이
내가 만들고 적용하면서도 신기하게 느껴졌다.

메인메뉴도 플래쉬로 만들고 싶은 마음이 굴뚝같지만.
다시 시간을 투자하며 골머리 앓기가 싫어서 접은 상태다.  별다른 디자인이 나올 것도 아니고.. 쩝...

4. 모듈 스킨
일반적 게시판에는 기본 모듈을 그대로 쓴다.
ㄱ. 방명록 : 에디터가 무겁고 답글을 쓸 때 화면전환하는 것도 그렇고 텍스트에어리어가 항상 보이는 것도 귀찮다.
그래서 한 화면에서 처리되도록 토글 옵션 스킨을 만들었다.
ㄴ. 한줄메모장 : 간단한 메모만 하는 게시판을 위해 방명록 스킨을 더 단순화 해서 한줄 메모장으로 만들었다.
이것을 메인 화면에서도 사용하기 위해서 페이지에서 iframe 으로 불러들였다.
ㄷ. 천자문, 고사성어 등 한문 고전을 기록하기 위한 게시판
리스트 화면에서 원문, 독음, 풀이가 보이도록 하기 위해 확장변수를 사용하고 목록 파일을 수정했다.
또한 정렬 순서를 내림차순 역순을 선택할 수 있게 고쳤다. 정렬 순서는 이제 XE에서 기본 옵션으로 채택한다고 한다.
ㄹ. 사이트 링크 게시판 : 기본 웹진형 게시판을 수정하여 만들었다. 이건 좀 더 손 본 필요가 있을 듯 하다.

5.위젯스킨
ㄱ. marqee 위젯 : 공지글을 가로형 마퀴로 볼 수 있게 만들었다.
ㄴ. 랜덤 최근글 위젯 : 천자문, 고사성어 등을 랜덤으로 보여 주기 위해 가로형과 세로형 두 가지로 만들었다. 

대략  이렇게 해서 사이트가 만들어졌다.
기본 레이아웃은 큰 변화가 없겠지만
운영해 나가면서 모듈과 위젯은 아마 몇 개 더 만들어질 듯 하다.

6. 기타
ㄱ. 버튼: 왠지 버튼도 바꾸고 싶었다. 버튼 이미지를 레이아웃과 비슷한 색감으로 바꿨다. 그래디에이션을 좀 넓게 잡아줘야 할 것 같다.
ㄴ. 로그인 위젯 : 디폴트 위젯을 그대로 쓰되, 테두리 업에고 몇 마디 수정했다. 위젯이 위치한 레이아웃의 div에 배경을 주었다. 로그인 버튼을 通자 이미지로 대체했다. 저작권이 있는 이미지라  저작자에게 양해를 구해야 하는데 이메일 보내는 걸 차일피일 미루고 있다.

이제 내용을 채워 나가야 할텐데 이게 더 어려운 일일 듯 하다.
대부분 다른 사이트에서 스크랩한 게 채워지지 않을까 싶다.
유용한 사이트가 되게 하고 싶은데, 분발해야 겠다.