블로그 20주년을 앞둔 사이트 개편

이번에 갱신한 즐겨찾기 아이콘

1996년에 처음으로 온라인 접속을 하게 되었는데, 당시 인기였지만 지금은 없어진 나우누리를 썼습니다. 그 해 말에 이르러서는 인터넷에도 접속할 수 있게 되었고 다른 PC통신 회사의 서버에 개인 웹 페이지를 올려보기도 했습니다. 인터넷 아카이브에 가보시면 1999년 당시의 모습을 보관해놓고 있습니다. 여기가 바로 이 웹사이트의 직계 조상에 해당되는 곳이었는데, 2001년까지 유지하고 있다가 Tool-Box.info 도메인을 등록한 것을 바탕으로 블로그 이름을 현재 쓰는 것으로 바꾸면서 디자인을 전면 개편하게 되었습니다.

그리고 2005년에는 집에 있는 맥미니 컴퓨터에 세렌디피티 웹로그(블로그) 시스템 (s9y)이라는 PHP 기반의 저작물 관리시스템(CMS)을 운영하게 된 것에 맞춰 또 다시 웹사이트를 뜯어고쳤습니다. 이런 구성으로 지금까지 제가 필요로 한 것을 다 충족시켜 주었기 때문에 기본적인 틀은 지난 11년 간 그대로 유지되어 왔습니다. 중간중간에 기반 소프트웨어와 하드웨어만 상위 버전으로 갱신되어 온 것입니다.

지금의 웹사이트를 처음 디자인할 당시에는 800x600 화면 해상도를 목표로 삼았습니다. 사용자들이 일반적으로 쓰던 컴퓨터에서 볼 수 있는 최저 해상도에 해당되는 것이었지요. 이런 모양새가 그 동안 그럭저럭 쓸만하기는 했지만 데스크톱 컴퓨터의 통상적인 가로 해상도는 2배 이상 늘어났고, 휴대용 기기는 사용량이 급증하고 있음에도 브라우저 상 기준 해상도가 대체로 목표 수치의 절반 이하입니다. 상황이 이렇다 보니 원래의 디자인으로는 두 플랫폼 모두 만족스럽게 대응할 수 없게 된 것입니다.

결국 웹사이트 디자인을 다시 해야 할 수 밖에 없었는데, 일단 휴대용 기기를 위해 별도의 디자인을 만들어볼까 생각했습니다. 하지만 기존에 나와 있는 해법들은 생각만큼 잘 작동하지 않았습니다. 그러다가 최근 세렌디피티 버전에 포함된 새로운 테마를 적용해보기로 했습니다. 이름은 "Next"인데, 이른바 "반응형 웹 디자인"이라는 기법을 적용했습니다. 이 테마는 화면 크기에 따라 사이트 구성을 자동으로 변형시켜주기 때문에 테마를 하나만 관리하면 되는데다 웹브라우저를 일일이 감지해서 대응해야 하는 수고도 생략됩니다. 이는 제가 딱 찾던 방식이었기에 냉큼 이것을 가지고 작업하기 시작했습니다.

작업은 주말 내내 이루어졌는데, 먼저 이 테마의 겉과 속을 꼼꼼하게 분석하고서 스타일시트와 템플릿 파일을 변형하여 원래의 Tool-Box.info 디자인을 충실히 계승하는 모양새를 만들어냈습니다. 그래픽 요소들은 다양한 해상도에 보다 잘 대응할 수 있도록 갱신을 하거나 다시 만들었습니다. 어제나 그저께 이 사이트를 방문하셨다면 계속되는 변화를 볼 수 있으셨을 것입니다. 지금은 작업이 모두 끝났습니다.

이제 기대컨대, 향후 10년 간 이렇게 만든 새 디자인이 방문객들의 필요를 잘 충족시켜 주었으면 합니다. 오늘부터 올라오는 사진이나 Toon-Box 웹툰 또한 새 디자인에 맞춰서 더 높은 해상도로 올리게 되므로 보기 좋을 것입니다. 요즘 데스크톱 및 휴대용 기기에 설치된 HTML5 지원 웹브라우저에서 사이트가 잘 열리는 것은 확인을 마쳤지만 혹시 이상하게 보이는 것을 발견하신다면 덧글로 저에게 알려주시기 바랍니다.
이 글에 대한 태그: , ,

트랙백

이 글에 대한 트랙백 전용 URI

이 링크는 클릭하기 위한 것이 아닙니다. 본문의 트랙백 URI을 담고 있습니다. 이 URI을 통해서 여러분의 블로그에서 이 블로그로 핑 및 트랙백을 보낼 수 있습니다. 링크를 복사하려면 오른쪽 클릭을 한 뒤 인터넷 익스플로러에서는 "바로가기 복사"를, 모질라에서는 "링크 위치 복사"를 선택하십시오.

웨슬리의 툴박스 작성일: : Optimizing the site further for mobile devices

"Optimizing the site further for mobile devices" 계속 읽기
Navigation is now titled and language selection is moved inside the menu For the past few days, you may have noticed that the website had received further updates in addition to some changes done earlier. Most notably, I modified some underlying code so

웨슬리의 툴박스 작성일: : The slow updating of Google's Mobile Usability Report

"The slow updating of Google's Mobile Usability Report" 계속 읽기
Pages with mobile usability issues as Google sees it, as of May 14, 2016 It's been more than a month since I revamped the site to be mobile friendly. Yet it takes quite a bit of time for Google to re-crawl all those pages and realize that they're have be

덧글

덧글 표시 방식: 나열 형태 | 엮은 형태

Robert Moon 작성일: :

Hi thanks fro the useful information it really helped me out a lot, the content was also very easy to understand if only you could upload a video of the content above then it will be a lot more easier to understand still good stuff though.

덧글 추가

전자우편 주소는 보여지지 않으며 전자우편으로 통보를 할 때만 사용됩니다.

자동화된 봇(bot)이 덧글을 도배하는 것을 방지하기 위해서 아래에 표시된 그림에 나타난 문자열을 입력상자에 입력해주십시오. 문자열이 일치할 경우에만 덧글이 달립니다. 브라우저가 쿠키를 허용해야 정상적으로 검사가 이루어집니다.
CAPTCHA

*단어* 식으로 단어를 별표로 둘러싸면 진하게 표시되며 밑줄을 치려면 _단어_ 식으로 적으면 됩니다.
:-) 이나 ;-) 와 같은 표준 이모티콘은 그림으로 바뀝니다.

(C) 1996-2024. 이 웹사이트의 저작권 및 권한은 정우덕에게 있습니다.