티스토리 반응형웹 skeleton 스킨 소개 및 활용

Tip!/티스토리

티스토리 스킨 반응형웹으로 바꾸다.

마크다운(Markdown) 문법으로 티스토리 포스트를 하면서 마크다운 문법으로 작성된 html 을 티스토리 복사해서 붙여넣기 하면 제대로 표현이 되지 않는 문제가 있습니다. 이를 해결하기 위해서 마크다운으로 티스토리 블러그 작성하기 포스트에서 Markquery 님의 티스토리 스킨을 소개한적이 있습니다.


Markquery 님께서 배포하시는 skeleton - Spider's Webskeleton - doobedo 티스토리 스킨은 부트스트랩 v3 기반으로 만들어진 반응형웹 스킨 입니다. 무엇보다도 마크다운을 이용하여 가독성에 중점을 두고 작성한 포스트의 html 코드를 그대로 잘 표현한다는 것과 사용자의 설정에 따라서 무한한 확정성을 제공 합니다.



skeleton - SposersWeb


skeleton - Spider's Web skin 적용화면 보기 



skeleton - doobedo


skeleton - doobedo skin 적용화면 보기


NOTE
적용화면 보기를 클릭하시면 티스토리 블러그에 적용된 화면을 보실 수 있습니다.


Spider's Web 은 글쓴이의 블러그에 적용된 스킨 입니다. 사이드가 우측에 위치하고 있는 티스토리 2단형의 스킨 입니다. doobedo 은 사이드가 본문 하단에 위치하는 티스토리 1단형의 스킨 입니다.


현재 부트스트랩 v3 기반으로 티스토리, 워드프레스 등 다양한 블러그에 스킨을 만들어서 공개 했습니다.




반응형웹 이란…

기기가 가지고 있는 해상도에 따라서 최적화된 UI 를 제공하는 것이 가장 큰 특징 입니다. 티스토리 블러그는 PC화면 과 모바일 화면 으로 두가지의 UI 를 제공 하고 있지만, 현재 모바일 스킨은 사용자가 임의로 수정을 하지 못해 사용에 불편함이 따릅니다.


테블릿에서 블러그 화면


무엇보다도 테블릿이 보편화된 시기에 테블릿에서 접속하는 것도 위의 그림과 같이 모바일로 인식하여 넓은 크기의 액정과 높은 해상도를 가지고 있지만 사용에 불편함이 있습니다. 물론, PC화면보기 를 이용하여 PC화면으로 볼 수는 있지만 그럴 경우에는 가독성이 떨어진다는 단점이 있습니다.


NOTE
티스토리 모바일 스킨을 ON/OFF 기능을 사용하면 강제로 PC화면 보기 설정이 가능 합니다.



해상도에 따른 반응형웹 skeleton 스킨의 UI

하지만, 반응형웹 스킨을 활용할 경우에는 하나의 스킨 디자인으로 PC, 테블릿, 모바일 등 다양한 해상도를 지닌 기기에서 최적화된 디자인과 UI 를 제공하여 글을 읽는 분들에게 편리한 환경을 제공 합니다.


PC화면


PC화면에서 글쓴이의 블러그에 접속 했을때의 화면 입니다. 일반적인 티스토리 스킨과 비교해서 깔끔한거 외에는 별반 차이가 없습니다. 


테블릿화면


넥서스7 2013 에서 글쓴이의 블러그에 접속 했을때의 화면 입니다. 사이드바 메뉴는 포스트 하단으로 자동으로 내려가서 본문의 내용을 읽기 편한 UI 로 자동으로 변경 되었습니다.


테블릿 가로 화면


하지만, 테블릿을 가로 모드로 화면을 돌리게 되면 해상도에 맞추어 아래로 내려갔던 사이드바 메뉴가 다시 화면 우측에 표시 됩니다.


모바일 화면


아이폰5 에서 글쓴이의 블러그에 접속 했을때의 화면 입니다. 테블릿의 세로 화면과 마찬가지로 사이드바 메뉴는 포스트 하단으로 자동으로 내려가서 모바일 화면에 최적화된 환경의 UI 를 제공 합니다.


아직 이해가 잘가지 않으신가요? 그럼 지금 보시고 있는 웹 브라우져의 가로폭을 마우스로 조절해 보시면 쉽게 이해가 갑니다. ^^ 웹 브라우저의 가록폭을 줄이고 늘림에 따라서 스킨의 UI 가 자동으로 변경되는 것을 확인하실 수 있을 겁니다.


부트스트랩 v3 기반의 skeleton 스킨은 기본적으로 4가지 화면의 UI 를 제공 합니다. PC 화면과 같은 큰 해상도의 화면, 테블릿이나 노트북 정도의 조금 낮은 해상도를 가진 화면, 모바일 화면 그리고 매우 낮은 해상도를 가진 모바일 화면 정도로 나누어져 최적화된 UI 를 제공 합니다. 무엇보다 사용자가 어떻게 설정하는지에 따라서 각각의 화면에 표시하는 컨텐츠를 조정 가능 합니다. 예를 든다면 본문 상단에 PC화면에서는 구글 애드센스의 큰 사이지의 광고를 표시하고, 모바일 화면에서는 작은 사이즈의 광고를 표시하는 식의 자유로운 광고 표시가 가능 합니다. 컨텐츠도 마찬가지로 PC화면에서는 동영상이나 지도, 특정 사진이 나타나지만, 모바일 화면에서는 보이지 않게끔 설정하여 페이지 로딩 속도를 줄이고 글을 읽기 편하게 만들 수도 있습니다.


그리고, Maekquery 님의 skeleton 스킨은 상단의 메뉴바를 제공하여, 화면이 위/아래로 움직여도 항상 화면위에 표시되어 쉽게 사용이 가능한 편리성을 제공하는 것과 다양한 폰트를 스킨 자체에서 지원하고 있어 더 이상 폰트를 변경하기 위해 html 을 수정하는 불편함을 없애고 어떠한 웹 브라우저에서도 가독성 높은 글을 볼 수 있는 것이 특징 입니다.




반응형웹 스킨 적용하기에 앞서

Markquery 님께서 제공하는 티스토리 스킨은 이름(skeleton) 에서도 알 수 있듯이 뼈대만을 제공 합니다. 이후 과정은 사용자가 자신의 블러그 환경에 따라서 수정을 하셔서 사용을 하셔야 합니다. 메뉴바를 구성하고, 사이드바를 꾸미고, 구글 광고 및 다양한 광고 코드를 넣고, 본문의 폰트 및 태그의 사이즈 높이, 좌/우 여백등을 조절하는 등 처음에는 복잡할 수도 있지만 한번 수정을 해두면 앞으로 포스트 작성시 일일이 글자 크기를 조절하고 문단간격을 조정하고, 색을 바꾸는 등의 불편함 없이 글을 작성하는 것에만 집중을 할 수가 있어 매우 편리 합니다.


글쓴이도 처음 Markquery 님의 skeleton 스킨을 적용하고 이쁘게 꾸미기 위해 밤잠 못자가면서 고생을 했습니다. 무엇보다도 글쓴이의 얕은 지식으로 기초적인 질문에도 성심성의껏 답변해주신 Markquery 님께 감사의 말씀을 드리며, 글쓴이도 아직 초보자 정도로 부족한점이 많지만, skeleton 스킨을 처음 접하고, 티스토리 블러그를 처음 꾸미시는  초보자 분들이 조금이나마 쉽게 skeleton 스킨을 적용하고 이쁘게 꾸밀 수 있도록 포스트 내용을 작성 하겠습니다.



오늘은 간단히 반응형웹과 Markquery 님의 skeleton 스킨에 대해서 소개해 드렸습니다. 앞으로 skeleton 을 적용하고, 활용하기 위한 좋은 내용의 포스트를 작성하기 위해 노력 하겠습니다. ^^



글쓴이의 다른 포스트 보기