블로그 20주년을 앞둔 사이트 개편
작성자: Wesley 작성일:이번에 갱신한 즐겨찾기 아이콘
1996년에 처음으로 온라인 접속을 하게 되었는데, 당시 인기였지만 지금은 없어진 나우누리를 썼습니다. 그 해 말에 이르러서는 인터넷에도 접속할 수 있게 되었고 다른 PC통신 회사의 서버에 개인 웹 페이지를 올려보기도 했습니다. 인터넷 아카이브에 가보시면 1999년 당시의 모습을 보관해놓고 있습니다. 여기가 바로 이 웹사이트의 직계 조상에 해당되는 곳이었는데, 2001년까지 유지하고 있다가 Tool-Box.info 도메인을 등록한 것을 바탕으로 블로그 이름을 현재 쓰는 것으로 바꾸면서 디자인을 전면 개편하게 되었습니다.
그리고 2005년에는 집에 있는 맥미니 컴퓨터에 세렌디피티 웹로그(블로그) 시스템 (s9y)이라는 PHP 기반의 저작물 관리시스템(CMS)을 운영하게 된 것에 맞춰 또 다시 웹사이트를 뜯어고쳤습니다. 이런 구성으로 지금까지 제가 필요로 한 것을 다 충족시켜 주었기 때문에 기본적인 틀은 지난 11년 간 그대로 유지되어 왔습니다. 중간중간에 기반 소프트웨어와 하드웨어만 상위 버전으로 갱신되어 온 것입니다.
지금의 웹사이트를 처음 디자인할 당시에는 800x600 화면 해상도를 목표로 삼았습니다. 사용자들이 일반적으로 쓰던 컴퓨터에서 볼 수 있는 최저 해상도에 해당되는 것이었지요. 이런 모양새가 그 동안 그럭저럭 쓸만하기는 했지만 데스크톱 컴퓨터의 통상적인 가로 해상도는 2배 이상 늘어났고, 휴대용 기기는 사용량이 급증하고 있음에도 브라우저 상 기준 해상도가 대체로 목표 수치의 절반 이하입니다. 상황이 이렇다 보니 원래의 디자인으로는 두 플랫폼 모두 만족스럽게 대응할 수 없게 된 것입니다.
결국 웹사이트 디자인을 다시 해야 할 수 밖에 없었는데, 일단 휴대용 기기를 위해 별도의 디자인을 만들어볼까 생각했습니다. 하지만 기존에 나와 있는 해법들은 생각만큼 잘 작동하지 않았습니다. 그러다가 최근 세렌디피티 버전에 포함된 새로운 테마를 적용해보기로 했습니다. 이름은 "Next"인데, 이른바 "반응형 웹 디자인"이라는 기법을 적용했습니다. 이 테마는 화면 크기에 따라 사이트 구성을 자동으로 변형시켜주기 때문에 테마를 하나만 관리하면 되는데다 웹브라우저를 일일이 감지해서 대응해야 하는 수고도 생략됩니다. 이는 제가 딱 찾던 방식이었기에 냉큼 이것을 가지고 작업하기 시작했습니다.
작업은 주말 내내 이루어졌는데, 먼저 이 테마의 겉과 속을 꼼꼼하게 분석하고서 스타일시트와 템플릿 파일을 변형하여 원래의 Tool-Box.info 디자인을 충실히 계승하는 모양새를 만들어냈습니다. 그래픽 요소들은 다양한 해상도에 보다 잘 대응할 수 있도록 갱신을 하거나 다시 만들었습니다. 어제나 그저께 이 사이트를 방문하셨다면 계속되는 변화를 볼 수 있으셨을 것입니다. 지금은 작업이 모두 끝났습니다.
이제 기대컨대, 향후 10년 간 이렇게 만든 새 디자인이 방문객들의 필요를 잘 충족시켜 주었으면 합니다. 오늘부터 올라오는 사진이나 Toon-Box 웹툰 또한 새 디자인에 맞춰서 더 높은 해상도로 올리게 되므로 보기 좋을 것입니다. 요즘 데스크톱 및 휴대용 기기에 설치된 HTML5 지원 웹브라우저에서 사이트가 잘 열리는 것은 확인을 마쳤지만 혹시 이상하게 보이는 것을 발견하신다면 덧글로 저에게 알려주시기 바랍니다.