본문 바로가기

Blog/Thoughts

스킨 업데이트 v2.5 - 반응형 레이아웃을 도입했습니다.

반응형(Responsive) 레이아웃.... 제가 처음 티스토리로 이주하면서 가장해보고 싶던 것중 하나였죠.


반응형 레이아웃이란? N스크린 시대가 도래하면서 각 기기에 맞게 모바일 사이트 PC용 사이트등을 만들 필요없이 사이트 하나만으로 모든 기기를 커버하는 개념이 반응형 레이아웃 입니다. 반응형 스킨의 장점은 모바일과 PC간의 웹페이지를 공유함으로서 운용에 편리함과 디자인의 일관성을 가질 수 있습니다. 게다가 해상도가 천차만별인 PC도 해상도에 맞는 화면을 제공하여 특정부분이 잘린다던가 하는 문제를 해소할 수 있죠. 요즘 대부분의 유명 "해외" 웹사이트들은 모두 반응형 웹을 지원합니다. 국내야 워낙 웹표준 준수도 느리고 하여 실생활에서는 별로 찾아볼 곳이 없긴합니다.



블로그는 초창기에는 html5기반이었고 현재 스킨으로 넘어 오면서 Bootstrap을 사용했습니다. 반응형 레이아웃을 적용할 수 있지만 내공이 부족해서 일단 보류 해두고 치일피일 미뤄오고 있었습니다. 그러다가 다른 티스토리 블로거분들의 스킨을 참고하고 구글링을 하고 돌아다니다보니 반응형 스킨을 적용한 티스토리 블로거 분들을 많이 만나 뵐 수 있었습니다. 이것에 용기 (어찌 말하면 뽐뿌)를 얻어 요번에 큰 맘먹고 반응형 스킨 작업에 착수했고 약 4일만에 반응형 스킨으로의 변경을 완료 하였습니다. 특히 마크쿼리님의 스킨을 참고하였는데 제가 반응형 스킨을 만드는데 많은 도움이 되었습니다. 이 자리를 빌어 감사의 말씀 드립니다. :D


기존의 타임라인 티에디션이 전혀 호환이 안되어 새로 만들게 되었습니다. 일단 메거진 테마 랍시고 만든건데 이틀만에 만들다보니 조잡하기 짝이 없네요.. 반응형 칼럼에 맞춰서 만들다보니 이래 저래 제약이 많아서 한동안은 저 상태로 지내야 될듯합니다.... 딱히 좋은 메인 화면 아이디어도 없고 고민만 열심히 하는 중입니다. 타임라인 같은 경우 만드는데 약 2주가량 걸린 작품인데... 크흐흐흐흑.... 아까워 죽겠내요.... GitHub에 소스라도 올려서 혹시 쓰실 분은 가져 갈수 있도록 해야 겠습니다.


주요 업데이트내역은 전체 사이트 반응형 웹, 반응형 티에디션입니다. 티스토리 모바일 웹페이지는 해제 되었으며 모바일에서도 PC와 동일한 화면을 보실 수 있습니다. 게다가 모바일 최적화를 위해서 html,css,js를 압축하여 로딩속도가 소폭 상승하였습니다. 구글 웹사이트 도구 권고 사항인데 이것 역시 계속미루다가 이제서야 적용해봅니다 ^^;

반응형 웹은 베타버전입니다. 계획상 모바일에서 페이스북 같은 형식의 폴딩 메뉴를 넣으려 하였지만 자바스크립트가 꼬여서 번번히 실패만 하고 있습니다. 기회가 되면 이마저도 구현하려 합니다. 모바일에서는 현재 블로그 메뉴를 접근할수 있는 여력이 안되기 때문에 어찌보면 반쪽짜리라고도 할 수 있겠습니다...


아직 코딩이 서툴러서 버그도 많지만 차차 수정해 나갈 계획이며, 심각한 버그 발견시에는 Q&A 게시판으로 알려 주시면 됩니다. ^^