메아리 저널

아는 사람은 알겠지만 저는 올해로 8년째 홈페이지나 비슷한 걸 만들어 오고 있습니다. 질리지도 않고 계속 만들어 온 덕분에 이런 류의 홈페이지를 만드는 기술은 이제 장인 급(?)에 가깝지요. 그래서 한 번 메아리가 어떻게 구성되어 있는지 소개해 보려고 합니다.

클라이언트단

클라이언트(웹 브라우저) 입장에서 메아리는 여러 개의 HTML 문서와 CSS 파일과 자바스크립트 등으로 구성된 일반 웹사이트입니다. 디자인이 워낙 간단하다 보니까 CSS가 간단할 거라 생각할 수 있는데, 실제로는 엄청나게 복잡합니다. 몇 가지 특이한 사항이 있다면,

• em과 strong은 기울여(oblique) 쓰지 않습니다. 이건 나중에 말할 기회가 있을 지도 모르겠지만 한국어 타이포그라피에서 기울임은 거의 쓰이지 않기 때문입니다. (글꼴 지원도 참 안습입니다.)
• 링크에 걸리는 밑줄은 text-decoration: underline;이 아니라 border-bottom: 1px solid ...;로 구현됩니다. 이렇게 한 이유는 abbr이나 acronym, ins 등의 다른 엘리먼트와 함께 사용될 때 밑줄이 겹치는 일을 막기 위해서입니다.
• 표에서 홀수째 줄과 짝수째 줄의 배경을 다르게 표시하기 위해서 삽질스러운 코드를 하나 썼습니다...
• 자바스크립트는 인터넷 익스플로러 같이 CSS를 제대로 지원하지 않는 브라우저를 위해 보조하는 역할을 합니다. 대표적으로 max-width가 있군요.

메아리 저널같이 일부 영역에서는 다른 CSS가 추가적으로 필요할 때도 있습니다. 그 경우에는 @import 규칙으로 global.css를 받도록 하고 있습니다.

서버단

모든 글은 올바른(valid) HTML 문서로 쓰여집니다. 심지어 지금 쓰고 있는 이 글도 일반 HTML 문서와 같은 과정을 거쳐서 출력됩니다. 다만 CSS 상으로 필요한 몇 가지 속성을 위해서 생짜로 HTML을 써서는 안 되는 부분도 있고, pre 같이 & 식으로 쓰기 참 곤란한 경우도 있고 해서 후처리를 거치는데 이 부분은 PHP의 도움을 받습니다.

후처리를 거친 HTML 문서는 앞부분과 끝부분을 붙여서 최종 출력됩니다. 이 과정에서는 아파치 웹 서버의 php_value 설정으로 모든 PHP 문서의 앞뒤에 같은 코드가 실행되도록 했습니다. 물론 앞뒤에서 아무 것도 실행되지 말아야 하는 경우를 위해 파일 이름을 함께 체크합니다. (확장자가 html이면 후처리를 거치고, php이면 거치지 않음)

메아리의 다국어 지원은 mod_negotiation과 MultiViews 기능을 사용하며, 파일 이름에 들어 있는 언어 코드를 사용합니다. 설정을 거의 하지 않아도 알아서 잘 돌아 가기 때문에 개인적으로 대만족하고 있습니다.

마지막으로 지금 보고 있는 이 블로그는 SQLite와 PHP를 사용해서 간단하게 짠 것입니다. 설정 화면 같은 게 필요 없으니 200줄에서 300줄 정도로 무난하게 짰습니다.

앞으로는

일단 트랙백과 댓글 모듈을 간단하게 만들어야 할 것 같고, 메뉴를 어떻게 보여 줄 지도 좀 고민해야 할 것 같습니다. 그리고 블로그에는 태그 기능을 넣어야 하겠고요. 좀 더 여력이 남으면 웹 브라우저 상에서 페이지를 편집할 수 있게 해 볼 수도 있을 것 같은데 웹서버 권한 문제가 있어서 어렵지 않을까 싶습니다.