반응형 티스토리 블로그 스킨 Responsive 를 소개합니다.
- 티스토리/스킨변경제작이력
- 2013. 1. 4. 16:14
이번에 부트스트랩을 사용하지 않고 반응형으로 티스토리 블로그 스킨을 만드는데는 상당이 많은 문제점이 있었습니다.
반응형 Responsive 스킨을 만들면서 어떤 신기술이 들어가고 티스토리에서 지원하지 않는 사항들은 무엇인지 알아봅니다.
웹폰트 아이콘 : 폰트를 이용해서 이미지대신 아이콘을 표시하는 것을 말합니다.
웹폰트 아이콘을 사용하면 이미지보다 가볍게 사용할 수 있다는것이 큰 장점입니다.
웹폰트 아이콘은 이전에 부트스트랩을 사용하면서도 있었습니다. 부트스트랩 공식? 웹폰트 아이콘은 Font Awesome 입니다.
부트스트랩 홈페이지에도 나와 있습니다.
문제는 이것이 로컬에서는 문제없이 되는데 티스토리에서 사용하면 안된다는 점입니다.
특이 문제를 일으키는 브라우져는 파이어폭스 입니다.
여타 다른 웹폰트 아이콘도 같은 문제가 있었습니다.
반응형 스킨인 Responsive 스킨에 사용한 웹폰트 아이콘은 IcoMoon 입니다.
이 웹폰트도 문제점이 있었습니다.
다른곳에서 사용하면 문제가 없는것을 티스토리에 업로드후 사용하면 안되는 부분이 있어 티스토리에 문의를 했습니다. 스킨파일까지주면서 해결점을 찾아달라고 했는데....아직까지 깜깜 무소식.....
문제는 파이어폭스와 IE9에서만 표시되지 않는 것입니다.
네이버 카페나 클리어보스 등등 여러군데에 자문을 구했습니다.
현재는 반쪽짜리 해결을 보긴했습니다만 완전 해결책은 아닙니다.
아마도 여러분은 현재 블로그에 표시된 아이콘을 보실수 있을겁니다. 차후 이것에 관련해서 포스팅 하겠습니다.
현재까지 티스토리에서 이 웹폰트 아이콘을 표시하는 곳은 없을겁니다.
글꼴.
나눔고딕 웹폰트를 이용해서 컴퓨터에 나눔고딕이 없어도 나눔고딕으로 보여지며, 나눔고딕이 있는 컴퓨터는 웹폰트를 다운로드 하지않고 바로 나눔고딕으로 보여집니다.
유동형 레이아웃을 현재 제 블로그 스킨을 보시면 아시겠지만 전체폭을 사용합니다.
어떤 모니터 해상도를 사용하건간에 꽉찬 스타일로 보여지며 해상도를 줄일때, 즉 브라우져창을 줄이거나 작은 해상도 980px 같은 모니터에서 보아도 폭이 자동으로 줄어드는 레이아웃입니다.
현재 제 모니터 해상도가 1680*1050 인데 잘 보입니다. 좀더크게 보아도 무리없이 보여집니다.
적당한 사이드바의 크기를 유지하기 위함이 이번 레이아웃의 특징이기도 합니다.
유동형 레이아웃이라 큰 해상도에서 볼때는 너무 커지고 작은 해상도에서 볼때는 너무 작아지는 그런 문제점을 해결하도록 했습니다.
작은 해상도 특히 980이하에서는 현재 3단 레이아웃이 2단 레이아웃으로 변합니다.
그래서 비슷한 사이드바의 크기와 본문 폭을 사용했습니다.
큰 데스크탑 화면에서는 3단 레이아웃의 광고까지 잘 보여지도록 작업 되었습니다.
테블릿 이상의 해상도이면 2단 레이아웃으로 보여지며 맨 우측의 사이드바는 안보여지도록 만들었습니다.
그 공간을 사용하도록 한 조치입니다.
물론 테블릿이나 모바일에서 보면 더 작아지기때문에 모든 사이드바가 보여지도록 다시 작업이 되었습니다.
제일 큰 해상도에서 작은 해상도로 가면....3단 -> 2단 -> 3단(1단.2단)으로 보여집니다.
작은 해상도에서는 본문이 전체폭(1단)을 사용하고 그 아래로 각각 사이드바가 1단씩(2단) 차지합니다.
모바일에서는 각각 1단씩 차지하게 배치가 되었습니다.
그리드 시스템.
이전에는 부트스트랩의 그리드 시스템을 사용했지만 장단점이 있었습니다.
반응형으로 작동하면서 less 를 지원하고 ie까지 지원하는 그리드 시스템을 찾아...찾아 모든것을 테스트 해봤습니다.
적당한것을 찾았는데 이 스킨에 적용된것은 semanticv.gs 입니다. 이것에 관련해서더 나중에 포스팅하겠습니다.
반응형 시스템에서 기본적으로 익스플로러는 작동하지 않아도 됩니다. 반응형은 데스크탑에서만 IE로 접속할 수 있고, 모바일이나 테블릿을 IE 를 사용하지 않으니까요...
그런데 완벽을 추구하려면 IE에서 미디어쿼리를 지원해주는 자바스크립트가 있습니다. 바로 css3-mediaqueries 또는 respond 입니다.
티스토리 문제점.
이것도 티스토리에 업로드하거나 cdn을 사용해서 작업하면 안되는 것입니다.
로컬에서 하면 되고, 다른것에서 하면 되는데...티스토리에서만 말을 안듣습니다.
티스토리쪽에 문의해 놓은 상태입니다......역시 답변은 기다려야 하는 상황....
이걸 일단 jquery 로 반응하게 만들어서 사용했습니다.
IE는 CSS3를 지원하지 않습니다. 아니 정확하게 말하면 IE9는 둥근 테두리인 border-radius 는 지원하나 그 이하는 지원하지 않습니다.
크로스 브라우징 환경을 위해서는 이를 해결해야 했습니다.
그 해결책은 css3pie 입니다.
기본적으로 IE9까지 지원되는것을 살려 제작이 되어서 원래는 IE9까지 자바스크립트를 로드해야하지만 IE8까지만 로드하게 했습니다.
즉 IE9 또는 웹표준 브라우져는 무척 경량화된 스킨으로 제작되어서 가볍지만 IE8이하는 자바스크립트를 로드해야 합니다.
버젼별로 분기해서 작동됩니다.
모두 정상적으로 둥근 테두리가 적용이 된것을 볼 수 있습니다.
몇군데 CSS3 다 들어갔습니다.
나중에 관리하기 편하게 하기위해 작성할때 CSS3만 분기해서 작업했습니다.
각각의 hover 에 transition 이 들어가고 블로그메뉴에는 transform 이 들어갔습니다.
참고로 블로그 제목에도 들어갔는데 여러분이 마우스를 갖다대어보세요. 어떻게 변하는지....
처음 단계부터 모바일을 염두해두고 반응형으로 제작된 스킨입니다.
그래서 가볍게 제작을 했습니다.
폰트.
나눔고딕 웹폰트를 이용하지만 모바일에서는 나눔고딕 웹폰트를 로드하지 않습니다.
가볍게 하기 위함이죠.
이미지.
이 스킨에 투입된 이미지는 총 5개이며 이미지 크기중 제일 큰것이 15px 10px 짜리입니다.
되도록 이미지를 사용하지 않고 제작되었으며 IE9까지 자바스크립트를 로드하지 않게 하기위해 그라디언트를 사용하지 않았습니다.
즉 IE8까지만 자바스크립트 1개를 더 로드 합니다.
코드 압축
제작된 파일과 발행하는 파일을 분기해서 사용할때는 압축된 형태로 사용합니다.
처음에는 html5BoilerPlate 에서 지원하고 있는 빌드 시스템인 ant build 를 이용했습니다.
제가 이용해보니 압축은 잘 되고 좋은데 한글이 깨지는 현상이 있었습니다.
그래서 Sublime Text 2에서 지원하는 빌드시스템을 사용하여 압축하였습니다.
서브라임 텍스트의 압축 플러그인들은 제가 이전에 작성한 글을 참고하세요.
http://demun.tistory.com/search/sublime
css.
익스플로러를 위한 css 파일을 분기해서 제작하곤 합니다.
버젼별로 할때도 있지요. ie9, ie8, ie7 등등....
허나 html5BoilerPlate 에서 지원하는 템플릿 형태를 이용하면 각각의 클래스에 맞게 사용이 가능합니다.
CSS파일을 따로 만들어서 사용하는 불편이 없지요.
다음에 이것에 관련해서도 포스팅 할 생각입니다.
반응형으로 스킨을 제작한다는 것은 정말 힘듭니다.
워낙 다양한 이슈가 있어 그것마다 대응을 해야 한다는 점입니다.
여기에 더 추가되는것은 티스토리에서 지원하지 않는 문제점들입니다.
유동폭을 지원하지 않은 고정 픽셀의 스타일들.....이것은 티스토리에 있는 모든 플러그인들에 해당이 됩니다.
티에디션도 그리드 시스템을 사용하곤 있지만 고정픽셀을 사용하고 반응형을 지원하지 않아서 사용하지 못합니다.
또한 플러그인들 모두가 관리자화면에서 플러그인을 사용한다고 체크를 하면, 자바스크립트를 추가적으로 로드하고 어떨때는 CSS 파일도 같이 로드합니다.
이런것들이 고정적으로 정해져있는 패턴들로 제작이 된것이여서 스킨마다 맞을수 없고, 더군다나 반응형이나 유동폭에는 맞지가 않습니다.
더욱이 문제점은 이것이 수정이 안된느다는 점입니다.
스킨에서 아무리 스타일을 설정하거나 인라인으로 자바스크립트로 설정을 해도 안되는것은 안되더군요.
티스토리 고객센터의 반응.
문제점이 잇으면 이의를 제기하고, 티스토리쪽에서는 해결점을 찾아줘야 합니다.
그래야 좀더 발전하는 티스토리가 될것입니다.
개발자랑 연결을 해달라는등 목맨 소리를 해봣지만 해결도 안해주고, 시간만 걸리는등 고객센터에 문제점이 고쳐지질 않고 있습니다.
티스토리의 모바일에 관련한 자료요구와 플러그인등에 관련한 자료가 전무한 상황이고 수정이나 편집등이 안되는 단점이 있습니다.
좀더 다양한 유저의 요구사항을 들어줘야하고 이런한 발자취가 좀더 향상된 티스토리의 경쟁력이라 생각됩니다.
아직 많은 사용량을 보이고 있는 익스플로러의 버젼에도 문제점이 있습니다.
좀더좋은 향상된 기능과 코드등이 있음에도 불구하고 구버젼때문에 사용하지 못하는 어려움.....
그나마 저는 그걸 좀 깨고 있습니다. 홈페이지도 아니고 블로그라......
모든 분들이 HTML5, CSS3 를 지원하는 브라우져를 사용하는 날이 오기를 빨리 기대합니다.