참고 : (1) 티스토리 반응형 스킨을 왜 만들어야 하는가?






1. 주요 기법


(1) xhtml1.0에 css3 입히기


여기에 대한 내용은 이미 이전 글에서 밝혔습니다.

http://zoahaza.tistory.com/321 참고.




(2) Fluid Layout


반응형 레이아웃 명칭의 일종으로, 레이아웃을 결정하는 div의 넓이에 pixel값이 아닌 %값을 주는 형식을 말합니다. 2단 레이아웃의 경우 본문이 들어가는 부분만 %값을 주고 위젯 등이 들어가는 사이드바는 pixel로 고정시키는 경우가 일반적이지만, 제 블로그 스킨의 레이아웃의 경우 둘다 %값을 주어 가변적으로 변하게 만들어져 있습니다.




(3) Column Drop


블로그의 2단 레이아웃의 경우 Fluid Layout 기법만으로는 작은 모바일기기에 대응하는데 어려움이 있기 때문에, Column Drop 기법을 혼용하여 사용하는 것이 일반적이며, 제 블로그에도 이 기법이 적용되어 있습니다. 일반적으로 720px 정도에 Column Drop을 쓰는데, 제 블로그 스킨의 경우 800px이 기준입니다.

(800px이 기준인 이유는 스킨 디자인의 특성상 여백이 많이 들어가기 때문입니다.)






2. 부수적으로 사용한 기법


(1) 웹폰트


웹폰트를 블로그에 삽입하는 방법은 꽤 여러가지입니다만, 저는 이 블로그에 소개된 방법을 사용했습니다.

http://xinsound.tistory.com/192


웹폰트의 장점은 사용자의 시스템에 깔려 있지 않은 폰트를 보이게 만들 수 있다는 것입니다. 사실 모든 컴퓨터에 공통적으로 깔려있는 시스템폰트의 종류는 극히 제한적입니다. 돋움, 바탕, 굴림, 궁서 ... 그나마 몇몇 폰트는 웹상에서 가독성이 많이 떨어지기 때문에 거의 쓰이지 않습니다. 그래서 선택할 수 있는 폰트의 수는 아주 제한적이라고 할 수 있겠습니다.

일반적으로 디자인업계에서 폰트가 상당히 중요한 역할을 차지함에도, 웹디자인 업계에서 폰트디자인(타이포그래피)이 주목받지 못한 것은 웹기술의 한계 때문인 것이 큽니다. css3가 등장하기 전에는 웹폰트를 사용할 수 없었기 때문에, 시스템에 설치된 폰트가 아니면 폰트를 이미지나 플래시로 만들어서 써야만 했는데, 이렇게 만들 경우 웹페이지의 수정과 유지보수가 쉽지 않기 때문에 제약이 굉장히 컸습니다.


이제 css3로 웹폰트를 사용해서 그런 제약을 벗어날 수 있게 되었습니다. 그러나 우리나라에서는 익스플로러 구버전 사용자가 많기 때문에 이들 브라우저에서 웹폰트가 제대로 보이지 않는다는 것은 큰 제약사항이긴 합니다. 그러나 특정 폰트로 볼 수 없다고 글자가 깨져 보인다거나 웹페이지의 내용을 제대로 식별할 수 없는 것은 아니기에, 웹폰트 정도는 그냥 써도 됩니다. 단지 익스플로러 구버전에서는 디자인이 좀 안예뻐 보일 뿐이죠.




(2) Font-Awesome


Font-Awesome은 아이콘을 폰트 형태로 제공합니다. 이 것의 장점은 벡터 형식으로 만들어졌기 때문에 글자를 확대해도 아이콘이 깨지지 않는다는 점입니다. 레티나 디스플레이를 포함한 다양한 해상도에서 웹페이지를 보여줘야 하는 현재 모바일 시장의 상황에서 Font-Awesome은 이미지로 만들어진 아이콘의 아주 좋은 대안입니다.


이 것도 css3에 속합니다. 따라서 css3를 사용할 수 없는 익스플로러 구형 사용자들을 위해 아이콘을 대체할 수 있는 텍스트를 명시해야 합니다.






3. 플러그인


jquery는 썼고 거의 모든 javascript 코드가 별도 플러그인이 아니라 제가 직접 코딩한 것들입니다.


부트스트랩은 안썼습니다.







저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. ㄴㅂ허 2015.01.04 22:20 신고  댓글주소  수정/삭제  댓글쓰기

    반응형 스킨으로 바꿀지 심하게 고민중...

  2. 빌노트 2015.01.05 10:42 신고  댓글주소  수정/삭제  댓글쓰기

    저는 조금 더 지켜보고 반응형으로의 전환을 해야할 것 같습니다.
    솔직히 바꾸기 귀찮은 것도 있고...
    왠지 티스토리에서 자체적으로 제공할 것 같은 불길한 예감이 들어서요 ㅎㅎ

  3. 이바구™ 2015.01.08 15:00 신고  댓글주소  수정/삭제  댓글쓰기

    스킨 만드는 분들에게 많은 도움이 될 것 같아요.

티스토리 툴바