초기에 블로그를 오픈할때 사용하였던 Cognoscenti 스킨은 제가 직접 하드 코딩을 하긴 했지만 여러가지 삐걱거림과 알 수없는 문제들에 시달렸습니다. 속도면에서는 일반 티스토리 스킨에 비해서 이미지를 거의 쓰지 않았기 떄문에 빨랐지만 코딩능력의 부족으로 꽤 볼품 없는 스킨 인것은 부정할수 없습니다. 스킨 제작을 위해서 열심히 구글링과 공부를 하다보니 프레임웍이라는 것을 알게 되었습니다. 기본적으로 사이트에서 사용되는 요소들을 미리 만들어 놓고 이를 활용하여 편하게 웹페이지를 제작할수 있게 하는 도구 입니다. 그래서 무슨 프레임 웍을 쓸까 알아보던중 선택한 것이 부트스트랩 이었습니다. 물론 여러가지 프레임 웍이 웹상에 있지만 부트스트랩으로 만들어진 트위터와 GitHub를 보면서 "그래도 많이 쓰는게 좋은거지"라는 생각을 하고 적용 하게 되었습니다.
확실히 초창기 스킨을 만들때에 비해서 제작 속도는 많이 향상된 모습을 보여주었습니다. 하지만 부트스트랩의 구조에 티스토리를 억지로 끼워 맞추려다보니 기본검색이 작동하지 않는등(제 마크업 실력이 후진것도 한몫했습니다.) 웃지 못할 버그가 터져 나왔습니다. 어떻게든 해결하려고 발버둥을 쳤지만 밑바닥 부터 갈아 엎어야 하는 상황이 되어서 포기 했습니다. 7월 이후로 약 4개월간 잘 써왔긴 했지만 중간에 버그 픽스와 업그레이드 패치를 4번이나 하면서 초창기의 모습은 거의 남아 있지 않습니다. 애초에 반응형을 맛보기로만 시도하려고 만든 스킨이었기 때문에 100% 반응형을 염두해두고 만든 스킨이 아니었습니다. 초창기 사용기간인 7~8월 동안은 반응형이 아닌 일반웹에서만 구동되게 해놓았으니까요. 물론 티스토리 모바일 웹페이지를 해제하는 기능을 이때부터 제공했기에 본격적으로 반응형에 도전해야 겠다는 마음을 먹게 되었습니다. 사실 반응형을 목표로둔 이유는 영상을 모바일에서 보기 힘들었기 때문입니다. (티스토리 모바일 웹에서는 영상재생이 반쪽짜리입니다. ) 물론 컬럼으로 잘라서 만들었기 때문에 미디어 쿼리만 적용하니 간단하게 반응형이 되긴했지만 속도를 염두해두고 만들지는 않았습니다. 저 조차도 제가 만든 블로그에 접속하면서 한숨밖에 안 나왔으니까요... gZip 압축도 하고 CSS,JS 압축도 단행하고, 마크업 수정을 통해서 화면에 쓰이던 이미지 요소를 많이 제거 하기도 했지만 속도 향상은 크지 않았습니다. 게다가 블로그 내부 검색이 고장나는 바람에 통계 측정이 전혀 되지 않아 관리 페이지 조차도 반쪽 짜리였습니다.
그래서 톱기어 퍼팩트 로드 트립 자막제작을 끝내자마자 새 스킨 작업에 들어간다는 계획을 세웠습니다. 현재 자막 제작 이후로 약 20일이 경과 했지만 이제서야 스킨이 나오는 이유는 무작정 스킨을 제작하기 전에 알아야 할게 너무 많았습니다. 일단 부트스트랩이외의 다른 프레임웍을 써보기로 했습니다. 부트스트랩은 충분히 좋은 프레임웍이지만 모바일로 구동시에는 속도가 썩 좋지 못합니다. 특히 2.3.2 버전은 레거시 지원때문에 여러가지 꼼수들이 많이 들어가서 그런지 모바일 브라우저에서는 퍼포먼스가 좋지 못합니다. 구글 사이트 통계상 제 블로그 접속 브라우저 1순위는 크롬, 2순위가 IE입니다. IE중에서도 8버전의 비율이 많이 높은 편입니다. 사실 조금 걱정이 되는게 이번 스킨은 IE8이하 지원을 전혀 하지 못 합니다. 이 부분은 여러가지 꼼수를 써서 임시로 해결을 해놓긴 했는데, 최신 브라우저에서 돌리는 것 만큼의 퍼포먼스는 못 낼겁니다. IE8이하 쓰시는 분들은 제발 업그레이드 좀 해주세요 ㅠㅠ. 부트스트랩3도 IE7이하 지원을 버렸겠다 굳이 부트스트랩을 쓸이유는 없어진것 같아서 다른 프레임웍을 찾으러 다닙니다. 보일러플레이트, 파운데이션등등 여러가지 프레임웍을 시험으로 써보았지만 속도나 기능면에서 가장 만족스러웠던 프레임웍은 파운데이션이었습니다.
파운데이션이 가장 마음에 들었던 점은 모바일 퍼스트라는 점입니다. 모바일 퍼스트란, 모바일 페이지를 가장 우선으로 만들고 그 외의 스크린 사이즈로 확장하는 방식입니다. 이전의 반응형 웹페이지들이 기존의 PC페이지를 축소시켜 놓은것에 불과하다면, 모바일 퍼스트는 완전 180도 역발상으로 모바일 페이지 부터 만드는 방식입니다. 모바일 기기의 성장률이 기하급수적으로 성장하고 있는 작금의 시점에서 가장 각광받는 이론중 하나 입니다. 부트스트랩도 모바일 퍼스트로의 진행을 향후 로드맵으로 잡고있기는 하지만 현재 가장 최신버전인 3는 모바일 퍼스트가 아닙니다. 그에 비해서 파운데이션5는 모바일 퍼스트 입니다. 게다가 파운데이션으로 이루어진 사이트들 때문에 마음을 굳히게 되었습니다. 사실 부트스트랩은 소규모 사이트나 블로그에서 많이 활용되는 편입니다. 그에 비해서 파운데이션은 워싱턴 포스트, HTC, 모질라 재단 파이어폭스, 네셔널 지오그래픽 등 굵직굵직한 사이트의 코어 플렛폼으로 활용되고 있었습니다. 게다가 전부 공식 홈페이지와 마찬가지로 상당히 빠른 퍼포먼스를 보여주었습니다. 제가 부트스트랩2.3.2로 블로그 스킨을 만들고 나서 가장 아쉬웠던점은 퍼포먼스의 부재였습니다. 제가 이전에 만들었던 자작 스킨보다도 퍼포먼스가 떨어질때가 간혹 있었으니까요. 그래서 새로 만드는 스킨의 제작 목표 1순위는 속도였습니다. 속도를 위해서 하위지원까지 포기했습니다.
부트스트랩에 비해 파운데이션의 장점을 보자면 일단 가볍다고는 하지만 갖출것은 다 갖추었습니다. 특히 자체 슬라이더인 오르빗 같은 경우에는 제가 레이어슬라이더를 폐기 처분할수 있게 해주었습니다. 사실 부트스트랩의 기본 슬라이더인 카로셀은 가볍긴한데 기능이 너무 구려서 인터페이스 요소로 활용은 할지언정 메인에 걸어놓을수준은 되지 않았습니다. 하지만 파운데이션의 기본 슬라이더는 매우 미려하고 기능도 강력하여 메인에 걸어 놓았습니다. 게다가 또하나의 새로운 웹표준중 하나인 rem을 적극 도입했더군요. 기존 폰트 크기 측정방식인 em은 1em이 16px라는 방식을 사용하고 있지만 이것은 CSS2기준의 고정 브라우징 사이즈에나 걸맞는 것이었지 CSS3이후의 반응형 웹 환경에는 충분하지 않았습니다. 그 이유가 무엇이냐 하면 기존 em은 모바일 페이지로 전환시에 PC환경의 폰트사이즈가 고정되어 버려서 가독성을 해치게 됩니다. 물론 미디어쿼리를 이용하여 브레이크 포인트마다 폰트크기를 조절하면 되지만 그건 너무 귀찮은 일이죠. 그래서 새로 등장한 시스템이 Root em (rem)입니다. 기준점 em(Root em)을 잡은 뒤에 스크린 사이즈에 맞춰서 가변으로 크기를 조절하는것이 rem인데요, 최신형 브라우저 중에서도 최근 업데이트가 된 브라우저에서만 겨우 지원할정도로 따끈따끈한 신기능입니다. 그 다음 장점으로는 하드웨어 가속을 지원합니다. rem방식으로 그리드가 움직일 뿐만아니라 하드웨어 가속까지 더해져서 스크린 사이즈 전환시에 매우 부드러운 움직임을 보여줍니다.
사실 기본 그리드 구성만으로도 충분하여 상단 네비게이션 바를 제외하고는 미디어 쿼리를 전혀쓰지 않았습니다. 미디어 쿼리 없이도 반응형이 되는게 매우 신기했고, 게다가 기존의 미디어 쿼리 방식처럼 뚝- 뚝- 트랜스포머처럼 삐걱데지 않고 부드럽게 전환이 되어서 아주 마음에 듭니다. 비디오를 많이 올리는 블로그다 보니 반응형 웹에서 비디오 지원도 상당히 고민이었습니다. 페이지 사이즈에 따라서 영상의 크기가 전환되는것 뿐만 아니라 영상의 성질도 바뀌게 하려면 별도로 자바스크립트 플러그인을 설치해야 했지만 파운데이션은 플렉스비디오기능을 기본으로 지원합니다. 그래서 모바일 웹페이지에서는 모바일용 영상이, PC웹에서는 PC웹용 HD영상이 재생됩니다. 긴가 민가 했지만 실제로 작동되는 모습을 보니 정말 신기했습니다. 간단한 블로그 스킨이지만 이걸 만드려고 새로운 프레임웍인 파운데이션5의 사용법, 대체 CSS인 Sass의 코딩방법과 Compass 컴파일 방법을 새로 익혀야 했습니다. 말이 쉽지 새로운 언어를 익히는 것은 참 힘듭니다. 하지만 고생깨나 해서 스킨을 만들고 나니 만족도는 높습니다. 엄청난 양의 이미지를 사용하고도 이렇게 빠르게 페이지 로딩이 되는 것을 보니 꽤 놀랍습니다. 이 이후로는 당분간 스킨 제작 계획이 없기 때문에 상당히 신경을 써서 만들었습니다. 최적화가 되는데로 공개를 해볼까 하는 생각을 가지고 있다보니 코딩도 비교적 깔끔하게 하려고 노력을 많이 했습니다. ^^;
오늘부로 CSS와 자바스크립트 압축을 마쳐서 비교적 정상적인 로딩속도를 보이고 있습니다. 어제까지는 솔직히 너무 느렸죠...ㅠㅠ 지금은 파운데이션 프레임웍의 가장 기본적인 기능 밖에 사용하지 않았는데요, 사실 저도 계속 공부 중입니다. 정말 쓸만한 기능이 많은데, 능력이 안되서 못 보여드리고 있네요 ㅎㅎ 참고로 방금 오르빗 슬라이더의 프리로드 기능을 활성화 시켰습니다. Zurb 이것들은 기능을 넣어놓고 문서에도 첨부를 안해 놓았더군요 -_-; 포스팅시에 정말 절실하게 필요했던 블록 그리드 기능도 제공합니다. 티스토리 자체적인 블록그리드 기능이 있지만 이제는 아무도 쓰지 않는 테이블 기반이라는 점에서 호러블하기 그지 없었습니다. 다중 이미지를 첨부하기가 더 쉬워질듯하네요. 스킨을 새로만드는 것은 정말 중노동입니다. 지금 저만해도 코피를 몇번이나 쏟았는지 모르겠내요. 편도도 심하게 부었고 목감기도 얻었습니다. 몸 상태가 아주 개판이죠. 그런데도 이짓을 하고 앉아있는 이유는 '재밌어서'입니다. 사실 프로그래밍과는 거리가 좀 있는 편이었는데 막상해보니 재밌내요 ㅎㅎ 최적화작업은 짧게는 일주일 길게는 한달까지도 갈것으로 예상됩니다. 지속적인 개선을 통해서 더 나은 블로그의 모습을 보여드릴수 있도록 노력하겠습니다. ^^
