블로그 리뉴얼 – 마법 나무 테마

이 블로그의 첫 번째 글은 2009년 6월 26일에 썼다. z-index에 관한 한 줄짜리 메모였는데, 지금은 비공개 처리돼 있다. 내용의 정확성에 자신이 없어서 더 정확한 글을 번역할 요량으로 내렸다. 여튼, 그래서 오늘로 대략 4년 3개월 동안 블로그를 운영한 것이다.

블로그는 처음에 텍스트큐브닷컴에서 시작했다가 그게 구글 블로거로 통합되면서 설치형 워드프레스로 옮겼다. 처음 사용한 테마는 하이브리드라는 심플한 테마였다. 다음으로는 기본 테마인 TwentyEleven을 사용했고, 그 다음엔 TwentyTwelve를 사용했다. 물론 내가 다소간 손을 봐서 사용했다. 그냥 쓰지는 않았다. 글을 찾아 보니 TwentyEleven 테마를 손본 건 기록이 남아 있다.

이번 블로그 개편을 좀 야심차게 시작했다. 디자인을 스스로 하기로 했다. 테마는 개조하는 게 아니라 처음부터 끝까지 내가 만들기로 했다. 대략 10일쯤 여가시간 틈틈히 작업을 해서 만들었다.

디자인 컨셉

사상 최초로 웹사이트 디자인을 해 봤다. 결과는 만족스럽다. 트렌드를 따라 플랫 스타일로 디자인했으며, 주제 컨셉은 ‘마법의 나무’다. 원래는 마법진 컨셉으로 하려고 했다. 내가 닉네임을 ‘녹풍(綠風)’으로 사용하므로 초록색을 테마색으로 사용하려고 생각은 하고 있었다.

그런데 마법진으로 검색하다가 마법 나무가 나오길래 ‘magic tree’로도 한 번 검색을 해 봤다. 그랬다가 그만 그림 하나에 반해 버렸다. 지금 로고로 사용하고 있는 마법 나무다. 유료였다. 대략 1만 2천 원을 주고 구매했다. 구입한 이미지에서 색깔만 살짝 바꾼 게 지금 사이트의 로고다.

지금 당장은 사이트 헤더 캡쳐해서 뭐하나 하겠지만 나중에 디자인 변경하면 자료가 될 거다.

테마에 약간 변화를 줄 수 있게 만들었다. 클래스 하나만 바꾸면 헤더가 어두운 테마로 변경되도록 만들어 뒀다. 나중에 사용할 계획인데, 그 테마 컨셉을 바탕으로 파비콘과 아이폰 터치 아이콘을 만들었다. 아래 이미지다.

화투 같다는 평을 들었지만 만족스럽다.

마법진, 마법 나무 모두 마법과 관련된 것이다. 맞다. 마법을 컨셉으로 디자인을 한 거다.

마법을 컨셉으로 잡으려고 했던 이유는, 내가 문과 출신으로 처음 프로그래밍으로 데이터베이스 작업을 했을 때 느낀 것이 바로 그것이었기 때문이다.

<레프트21>에서 일할 때였다. 중간의 간행물 50여개에 실린 모든 기사의 발행일 정보가 잘못돼 있었다. 그러니까 대략 기사 2천~3천 개쯤 되는 양이다. 2주쯤 빡쎄게 일을 해서 날짜를 바로잡아야지 하고 생각하고 있었다. 그 때 마침 나는 PHP를 처음 공부하고 있었고, 책 중반이 넘어가자 MySQL 설명이 나왔다. SQL문을 잘 이용하면 한 방에 되겠다는 생각이 들었다. PHP for문을 돌려서 SQL문을 뽑고 그걸 다시 정성스럽게 에디트플러스에 갖다 붙인 후 오류는 없는지 한참을 검사한 뒤, 로컬 DB의 PhpMyAdmin에서 실행해 봤다. 만세! 한 방에 모든 오류가 바로잡혔다. 그 때 느꼈던 것이다.

“이건 마법이야”

생각해 보면 마법사와 프로그래머는 유사한 직종인 것 같다. 여튼 각설하고…

사용한 기술과 기법, 신경쓴 점들

최신 기술과 기법을 사용해 적은 노력으로 최대의 효율을 내고자 노력했다. 다양한 스크린 사이즈에 대응할 수 있도록 했다. 그러면서도 유지보수하기 쉽도록 하려 노력했다. 또한 무엇보다 사용성을 최우선으로 고려했다. 디테일도 놓치지 않으려고 했다. 그래서 아래와 같은 기술과 기법을 사용했다.

CSS 프레임워크인 inuit.css를 사용했다.
CSS 전처리기인 sass를 사용했다.
style.sass에는 @import 선언만 해두고, 파일들을 잘게 나눠서 작업했다.
마진과 패딩은 일부 예외를 제외하고는 모두 sass 변수로 처리했다. 변수 사용을 통해 inuit.css가 제공하는 리듬감 있는 간격을 그대로 살리려고 노력했다.
색상도 일부 예외를 제외하고는 모두 sass 변수로 처리했다. 이를 통해 일관된 색상을 지키려고 노력했다.
Flat UI – Free Web User Interface Kit이 제공하는 Color Swatches의 색상을 따와서 사용했다. 전문가가 아니니 접고 들어갔다.
margin-top은 사용하지 않고 margin-bottom만 사용했다. (Single-direction margin declarations)
객체지향 CSS의 원칙을 따르려고 노력했다.
CSS 명명규칙은 BEM을 따랐다.
레티나 디스플레이 대응은 SVG로 했다. SVG를 인식하지 못하는 브라우저는 png를 제공했다. php로 브라우저 탐지를 우선한 뒤, modernizr가 클라이언트단에서 다시 검사하도록 했다.
SVG에 CSS도 적용했다.
js로 모양을 바꾸는 것은 하지 않았다. CSS3 애니메이션에는 트랜지션과 키프레임을 사용하고, js는 클래스를 뗐다 붙였다 하기만 한다. (SMACSS:Changing State)
미디어쿼리를 이용해서 반응형으로 작업했다.
반응형 작업시 브레이크포인트는 특정값으로 하지 않았다. 그냥 필요한 곳에서 적절히 나눴다.(《반응형 웹디자인》을 추천한다.)
모바일 우선주의를 적용하지는 않았다. 한국의 모바일 브라우저는 99.6% 이상이 미디어쿼리를 지원한다. (RWD #3. 모바일 퍼스트(모바일 우선주의))
SNS 공유에도 js나 SNS 서비스에서 제공하는 버튼을 하나도 사용하지 않았고, 모두 단순 링크로 처리했다. 불가피하게 다음뷰 위젯만 다음에서 제공하는 것을 사용했다.
트위터나 페이스북의 로고는 그 회사에서 제공하는 로고 디자인을 사용했다.
인쇄 버튼을 누르면 body에 클래스만 하나 붙여서, 인쇄될 모양을 사용자가 볼 수 있는 상태에서 인쇄에 들어가도록 만들었다. @media print는 “돌아가기” 버튼을 인쇄하지 않는 용도로만 사용했다. 오래 전부터 해 보고 싶었던 건데 이번에 해 봤다. 인쇄할 때 굳이 바탕체로 만들지는 않았는데, 맑은 고딕은 충분히 예쁘다고 생각하기 때문이다.
다양한 사이즈와 포맷의 파비콘을 제공했다. 페이스북용 공유 이미지와 펌링크를 제공했다. 캐노니컬 태그를 제공했다. 즉, 다양한 메타 정보 제공을 위해 노력했다.
테마 종속적이지 않은 기능은 플러그인으로 처리했다. 이미 있는 것은 다운받아 썼고(wp-pagenavi, minify 등), 없는 것은 만들었다.
이미지에 max-width를 100%로 줬으므로, 실제보다 사이즈가 작아지는 경우가 있다. 80% 이하로 작아진 경우엔 원본 보기 링크를 제공하도록 했다. 브라우저 사이즈가 달라져 이미지가 리사이즈되면 다시 탐지한다. 원본 이미지가 보이는 이미지의 몇 배인지도 알려 준다.
좁은 스크린에서 가로로 긴 코드를 보는 불편함을 개선하기 위해서, 새 창에서 코드 보기 기능을 만들었다. 뷰포트 없는 하이라이팅된 코드만 보면 좀 낫다. 역시 가로 스크롤이 생기는 경우에만 새 창에서 보기 옵션이 나오도록 했으며, 브라우저가 리사이즈되면 다시 탐지한다.
워드프레스의 번역 함수를 이용해서 일본어와 영어로 테마 메시지를 모두 번역해 놨다.
접근성을 지키려고 노력했다. 성공적인지는 확인할 길은 없지만.
font smoothing을 지원하지 않는 경우엔 글꼴을 굴림으로 만들어 버린다. (내가 사용하는 font-family. 그리고 XP에서 맑은 고딕 뿌옇게 나오는 문제 회피하는 팁, How to Detect Font-Smoothing Using JavaScript) 그리고 이 경우엔 인쇄할 때 바탕체도 추가해 준다. (이런 컴퓨터의 경우엔 맑은 고딕이 설치돼 있지 않은 XP일 수 있기 때문에.)

따로 글을 써서 설명할 예정인 것

써 놓고 보니 신경 많이 썼다. 내가 뭘 했는지 정리도 좀 된다. 이 중 새로 배운 것에 대해서는 좀 공유를 하는 게 좋을 것 같다.

하위 브라우저를 지원하면서 SVG 활용하기
CSS3 애니메이션 – 트랜지션과 키프레임 활용하기
js와 iframe 없는 SNS 공유 버튼
URL을 바꾸지 않고, 인쇄될 모양을 보여주며 인쇄 시키기
이미지가 많이 작아진 경우에만 원본 보기 링크를 넣어 주기
pre 블럭에 가로 스크롤이 생기는 경우 새 창에서 띄워 보기 버튼을 넣어 주기
OOCSS, inuit.css, BEM 경험 공유

개인 프로젝트는 시간에 쫓기지 않고 기획을 스스로 하기 때문에 한땀한땀 공들여 만들 수 있다는 장점이 있다. 만족스런 블로그 리뉴얼이었다.