Fragments of Memories

이번 스킨의 이름은 '아리아'

새 블로그를 시작하면서 스킨도 새롭게 만들어 보고 싶었다. 기능적으로 완벽하면서도 깔끔하며 독창적으로 디자인 된 블로그 스킨. 이런 '나만의 스킨'은 블로그를 시작한 이후로 항상 마음에 품고 있었던 조그만 로망같은 것이었으니까. 하지만 아주 오래전 호스팅 계정에 'Pury BBS'이나 'iris NX'를 처음 설치했을 때부터, 블로그의 시대로 넘어와 'tattertools'를 거쳐 'textcube'에 이르기까지 내가 할 수 있는 것은 기존의 디자인을 장난 삼아 적당히 수정해보는 것 뿐이었다. 그나마 '그저 얼핏 주워들은 정도로' CSS를 배웠던 나로서는 태터툴즈부터는 적당히 손질하는 것도 상당히 벅찬일이었다. 치환자는 갈수록 어찌나 많아졌는지..

태터툴즈가 0.1버전씩 업데이트 될 때마다, 웹표준이 블로고스피어의 화제가 될 때마다, 감탄할 만한 스킨을 가진 블로그를 만날 때마다 스킨을 만들고 싶다는 충동에 시달렸다. 그럴때마다 '실용예제로 배우는 웹 표준' 같은 책을 사서 읽어보기도 했고, 몇번은 실제로 작업에 착수하기도 했다. 하지만 나에게는 전혀 직관적이지 않은 XHTML과 CSS는 머릿속에 잘 들어오지 않았고, 그간 쌓인 깜냥에도 불구하고 스킨을 수정하는 작업은 고역이었다. 거기에 일상에 늘 그렇듯이 귀찮음이 끼어들게 되면... 게임오버. 그렇게 '나만의 스킨 제작'은 항상 마음 속에 두고는 있지만 결코 실행되는 법 없는, 수많은 '숙원사업' 중 하나가 되어갔던 것 같다. 그런데.

6년만에 웹호스팅 계정도 새로 만들고, 4년만에 블로그를 옮기는 이번 기회가 아니면 언제 스킨에 손대는 것이 가능할까- 하는 생각이 이번에도 어김없이 찾아왔고, 다시 한번 도전해 보기로 했다. 스킨의 구조에 대해서는 스킨제작 메뉴얼을 보면서도 감이 잡히지 않아서 결국 예전에 하던 방식인 '리버스 엔지니어링-뜯어보며 배우기-'를 선택했다. 맨처음 계획은 다른 스킨들은 참고만 하고 아예 새로운 스킨을 작성하려는 것이었는데, skin.html을 처음부터 끝까지 다 훑어보고 나서는, 완전히 새롭게 만들어 것은 역시 나로서는 힘들겠다는 생각이 들었다. 결국 이미 공개되어있는 텍스트큐브 스킨 중에서 마음에 들었던 limeglow 스킨의 레이아웃을 가져와 아주 조금 고치고 CSS만을 수정하여 새 스킨을 만들게 되었다.

원래 계획했던 'Aria'의 디자인 초안은 낡은 느낌을 주는 갈색 바탕 위에 빛바랜 악보가 올라와있는 형태였다. 하지만 그걸 구현하는 건 힘에 부치는 일이었고, 결국 예전 블로그에서 쓰던 music 스킨과 비슷한 컬러셋을 가지고 limeglow의 레이아웃과 연결시켜 만들어보기로 했다. limeglow는 기본적으로 텍스트큐브 최신버전에서도 쓰기에 큰 불편함이 없었지만, 텍스트큐브 1.5.4 버전에 새롭게 추가된 기능이나 변경점들은 coolant (textcube Ver.) 스킨을 참고해서 아주 조금, 추가했다. 사실은 CSS 수정도 그저 새로 만든 이미지들을 배경에 집어넣고 컬러셋을 바꾸는 정도에서 마무리지었을 뿐이다.

HTML, CSS 편집에는 국산 프리웨어 텍스트 에디터인 DesyEdit을 사용했다. 예전엔 HTML을 수정하기엔 그리 적합하다는 생각이 들지 않는 프로그램이었는데 몇번 버전업을 한 지금은 상당히 괜찮은 편집기가 된 것 같다. 스킨 제작 전반과 CSS를 수정하는 데에는 (아래에도 따로 언급하겠지만) 한국 소프트웨어 진흥원에서 2005년에 내놓은 '실전 웹 표준 가이드'의 도움을 많이 받았다. 2001년도 즈음 다른 홈페이지들에 훈장처럼 달려있었던 CSS 버튼이 예쁘다는 이유로 CSS를 깨작거리기 시작했었는데, 사실 그때 기본기는 전혀 배우지 못했었다는 것을 다시한번 깨달았다.

이번 스킨 디자인 컨셉의 핵심은 '악보', 그 속에 담긴 '음악'이었다. 그걸 강조하려다 보니 타이틀이 있는 위쪽 헤더 부분이 조금 커지긴 했는데.. 이대로도 나쁘지 않은 것 같아서 그대로 쓰기로 했다. 위에 사용된 악보는 국제 모차르테움 재단이 모차르트 탄생 250주년을 맞아 온라인 상에 공개한 '새 모차르트 디지털판'에서 일부분을 가져왔다. 단지 이것만 보고 어떤 작품의 어떤 아리아인지 맞출 수 있는 사람이 있을까 모르겠다. 혹시나 짐작가는 게 있으신 분은 댓글로.. :)

어찌되었거나 이렇게 스킨 Aria가 탄생하게 되었다. 궁상스럽게 고작 스킨 하나 가지고 이런저런 말이 많았는데, 이 스킨을 수정해보겠답시고 보낸 시간이 약 2주 정도가 되니(일때문에 매일매일 매달리진 못했지만) 그 시간이 억울해서라도 이렇게 적어놓아야겠다는 생각에. 이번 스킨을 만들면서 가장 큰 수확은 텍스트큐브의 스킨 구조를 완전히 파악했다는 점이고, XHTML과 CSS 구조에 대해서도 전보다는 확실히 많은 것을 알게 되었다는 점일 거다. 지금은 언제가 될지 장담할 수 없지만 다음 번 스킨을 만들게 된다면, 그때는 아마 이번보다는 훨씬 더 편하게 잘 만들 수 있을 것 같다.

마지막으로 웹표준 이야기 조금만 더.
기왕 만드는 김에 웹표준을 완벽하게 준수하고 당당하게 W3C Markup Validation 딱지를 달고 싶었으나, 나로서는 도저히 이해할 수 없는 문제로 XHTML 1.0 Transitional을 통과하지 못했고(그래서 개인적으로는 통과했다고 생각하기로 했다.) CSS는 색지정 문제에 부딪혀서 결국 포기했다. 처음엔 통과하기 위해 머리를 감싸쥐고 괴로워했었는데, Strict도 아닌 바에야- 하며 포기하고 나니까 확실히 마음이 편해지더라. 완성된 스킨은 윈도우 플랫폼 상의 모질라 파이어폭스 2.0, 인터넷 익스플로러 6.0 SP2, 애플 사파리 3.0.4, 오페라 브라우저 9.26 에서 테스트했지만, 사파리와 오페라에서 레이아웃이 일부 깨지는 문제는 결국 해결책을 찾지 못했다. IE 7.0에서도 잘 보일런지는 잘 모르겠다. 혹시 기능적인 결함을 발견하면 즉시 연락해주길 바란다.

참고 스킨
- limeglow by 1UP(tiskin)
- coolant (textcube Ver.) by tiskin
- music by Ritz

참고 문서
실전 웹 표준 가이드 (2005), via 웹 개발자 가이드

참고 사이트
- 스킨 제작 전반 :
태터툴즈 스킨커뮤니티 - 스킨제작 메뉴얼
텍스트큐브 공식사이트 - 메뉴얼 - 스킨체크리스트
- 스킨 치환자 참고 :
텍스트큐브 개발센터 - 스킨 태그 정리 문서

사용 소재 출처 :
- 타이틀 배경 소재 :
Neue Mozart-Ausgabe: Digitalisierte Version, Internationale Stiftung Mozarteum. Online Publications (2006)

사용 환경
- TnC 텍스트큐브 1.5.4. Fermata

테스트 환경 (Windows)
- Mozilla Firefox 2.0.0.12
- Apple Safari 3.0.4
- Opera 9.26
- MS Internet Explorer 6.0 SP2