FACEBOOK
블로그 리뉴얼 과정에서 메뉴(사이트맵)를 모조리 뜯어고치고 20여개에 달하던 게시판의 갯수를 절반으로 줄였습니다.
기존에 이용하던 Board DX에서 기본 게시판(Board XE)로 갈아타는 노가다와 삭제할 게시판의 글들을 적절한 곳으로 이동하는 작업이 끝나고, XE 공홈에서 쓸만한 게시판 스킨을 찾아다녔습니다.
"오, 바로 저거다!"
눈에 확 들어온것이 바로 깔끔한 디자인에 Social XE 연동 기능까지 내장된 Sketchbook 스킨이었습니다. 스킨 설치를 완료하고, 이제 다음은 각 게시판의 설정을 바꿀 차례였습니다.
여느때처럼 게시판 관리 메뉴에 들어가서는 [게시판정보] -> [분류 관리] -> [확장 변수] ... 순으로 설정을 완료해 나갔습니다.
그런데, (약간의 과장을 섞어서) 제가 까무러친게 바로 [스킨 관리] 탭이었습니다. 스킨관리 탭으로 들어가니 길고 긴 스크롤바가 저를 맞이했습니다.
진정한 스압이란 이런 것을 지칭하는 말인 듯 합니다.
게시판을 처음부터 설계하듯이 아주 세세하게 옵션을 지정할 수 있었는데, 그 옵션이 너무 많다보니 저렇게 비인간적인 관리자 페이지가 생성되어 버린 것입니다.
아직 각각 항목을 바꾸면 구체적으로 무엇이 어떻게 바뀌는지 잘 모르므로 중간중간 저장하며 확인을 해야 하는데, 저장 버튼은 저 스압감 넘치는 스크롤바 맨 아래에 딱 하나 있었습니다. 게다가, 저장 버튼을 누르면 페이지가 도로 맨 위로 올라가버리니 설정하고 있던 부분이 어디인지 또다시 열심히 스크롤바를 내리며 찾아야 했습니다.
이런 비인간적인(?) 관리 페이지를 개선해보고자 FTP를 열고 XE 디렉토리를 뒤지기 시작했습니다. 수정 목표는 다음 두 가지였습니다.
- 각 설정 그룹 아래에 [저장] 버튼을 만들고 싶다.
- 설정 그룹을 쉽게 찾아갈 수 있는 목차(Index)를 만들고 싶다.
삽질 대장정
그렇게 해서 시작된 삽질 대장정.
우선, 관리자 페이지를 만들어내는 스크립트 파일을 찾아야 하는데, 여기서부터가 난관이었습니다.
스킨 관리 페이지는 스킨 제작자분이 만들었을거라 생각하고 게시판 스킨 디렉토리부터 뒤졌습니다. 거기서 발견한 것은 다름 아닌, 이런 설정 페이지의 각 항목을 기술한 템플릿 XML 파일뿐이었습니다.
다음으로 그 상위 항목인 게시판 디렉토리(/modules/board)를 뒤졌습니다. 하지만 그 디렉토리 안의 어떤 파일에서도 '스킨 관리' 라는 문구는 찾을 수 없었습니다.
이후에도 계속되는 삽질... 혼란스럽고 의문스러워지기 시작했습니다. 게시판 관리 페이지가 게시판 디렉토리 안에 없으면 도대체 어디에 있는거지.
index.php도 뒤져보고 class 디렉토리도 뒤져봤지만 그 어디에도 없었습니다. 그러다가 다른 모듈의 디렉토리를 뒤지기 시작했습니다.
그러다가 우연히 눈에 들어온 모듈 모듈(/modules/module)
- 모듈을 관리하는 모듈이니깐 저기에 뭔가 있을것 같다...!
라고 생각하고 그 디렉토리를 뒤지기 시작한 게 이 삽질을 시작한 지 4시간만이었습니다. 정답은 그 안에 있었습니다. 각 모듈의 관리 페이지를 '모듈' 모듈이 통합하여 관리하는 시스템이었던 것입니다. (ㅁㄴㅇㄹ)
저장 버튼과 목차 추가하기
관리 페이지의 '스킨 관리' 템플릿은 /modules/module/tpl 디렉토리의 skin_config.html에 정의되어 있습니다.
이걸 열어서 바로 편집...! 하기 전에 우선 백업파일을 하나 만들어 줍니다.
우선 저장(등록) 버튼부터 추가하도록 하겠습니다.
skin_config.html을 열어서 스크롤바를 맨 아래로 내리면 다음과 같은 구문이 있습니다. 스킨 관리 페이지의 맨 아래에 붙어 있던 버튼을 만들어내는 태그입니다.
이 부분을 78번째 줄 부근에 다음과 같이 복붙해줍니다.
다음으로 인덱스 만들기입니다. 위에서 붙여넣은 부분 바로 아랫줄을 다음과 같이 고쳐줍니다. 책갈피(Anchor)를 지정하는 태그입니다.
각 메뉴 위치에 책갈피를 꽃았으니, 이제 목차를 만들어서 링크만 걸어주면 됩니다. 50번째 줄 부근에 다음과 같이 입력합니다.
<li>
<p class="q"><a name="index">INDEX</a></p>
<p class="a">
{@$nGroup=1}
<block loop="$skin_info->extra_vars => $key, $val" cond="$val->group && ((!$group) || $group != $val->group)">
{@$group = $val->group}
<a href="#anchor_{$key}">{$nGroup++}. {$group}</a>
<br />
</block>
</p>
</li>
그리고 저장하면 - Mission Complete!
위와 같이 각 설정 그룹 아래쪽에 각각 등록 버튼이 추가되고, 설정 페이지 상단에 목차가 생긴 것을 확인할 수 있습니다.
※ 혹시 이 과정이 귀찮다면, 다음 파일을 다운받아서 사용하시면 됩니다. ^-^
- skin_config.html -> /modules/module/tpl 디렉토리에 덮어씌웁니다.
덤. Sketchbook5 게시판 스킨설정의 큰 제목들을 좀 더 알아보기 쉽게 바꿔 보았습니다. (Optional)
- skin.xml -> modules/board/skins/sketchbook5/ 디렉토리에 덮어씌웁니다.
(업로드 후 파일 권한을 644로 꼭!! 바꿔 주셔야 합니다.)
