본문 바로가기

마크쿼리를 이용한 반응형 웹 스타일의 스킨으로 변신!

반응형



마크쿼리를 이용한 반응형웹 스타일의 스킨으로 변신!
스킨 수정은 함부로 하는 게 아니에요. 엉엉.


이게 무슨 소리인가. 어디서 온 말들인가. 정말 처음에 듣고서는 물음표가 머릿속을 둥둥 떠다니기 바빴다.
반응형 웹이니, 마크쿼리니, 부트스트랩이니. 
문제는 나도 아직 저것에 대해서 확실한 건 모르겠단 것. 어렵다.
그래도 스킨을 뜯어고치면서 조금씩 배워나가고 그렇게 하나씩 알아가고 있는 중이라 언젠간 좀 더 잘 알게 되겠지.

오늘의 이야기는 평소 이 블로그에서 보기 힘든(?) 이야기니까, 
더 자세한 내용이나 관심이 있는 분들은 참고 사이트를 들여다보는 것이 더 이해가 빠를지도 모르겠다.


사실 웹표준 관련 수업을 듣게 되면서 반응형 웹을 알게 된 것인데, 이런저런 이유로 블로그 플랫폼을
네이버로 바꾸어야 하느냐는 고민 끝에 그래도 티스토리가 그냥 좋아요, 란 이유 하나로 리뉴얼에 돌입한 것. 
그렇게 보이진 않아도 이 스킨 하나 고치는데 3일은 끙끙거렸다. 
어쨌든 완성했다. 그래도 어떤 사이트도 절대 한 번에 완벽하게 되는 법은 없기에 
고쳐야 하는 부분이 계속 나오고 이런저런 편의성을 고려한 부분의 추가도 필요하게 될 듯하다.

※ 이 블로그를 보다가 발견하는 '버그'가 있다면 꼭꼭 신고해 주시길!



1. 반응형 웹으로 어떤 디바이스에서도 내 스타일대로!


▲ 변신 전과 변신 후


이번 스킨 리뉴얼의 가장 큰 특징은 바로 '반응형 웹'이다. 
반응형 웹은 PC를 포함한 태블릿과 스마트폰에서도 최적화된 UI와 디자인을 제공하는 것이 특징인데 
이 말이 무슨 의미인지 이해가 되지 않는다면 당장에 보고 있는 윈도우 창의 크기를 줄여보는 것으로 알 수 있다.
브라우저 및 디바이스 환경에 따라서 블로그 스킨이 자연스럽게 반응하면서 스킨이 바뀌는데
그동안 모바일 티스토리의 디자인이 마음에 들지 않아 그냥 내버려뒀는데 이 스킨으로 깔끔해졌다.

이 스킨의 뼈대는  Markquery님이 만드신 skeleton - Spider's Web을 뜯어고쳐서 만든 것으로
반응형 웹으로 블로그를 운영해보고 싶은 분들에겐 추천하지만, 사실 조금 어렵단 것도 참고. 
(저..한테 물어도 제가 알면 대답을 해드리지만, 거의 모릅니다.....)


[반응형 웹과 마크쿼리님의 스킨]

1. 반응형웹은 무엇인가? 스킨에 대한 설명은 정재복님 블로그에서 : http://jaebok.tistory.com/79
2.  Markquery님이 만드신 skeleton - Spider's Web : http://markquery.github.io/
3. 스킨을 수정하다가 궁금한 것은 마크쿼리 커뮤니티를 참고 : http://markquery.com/community/



2. 공유버튼의 추가



공유버튼을 통해서 조금이라도 더 많은 분이 글을 나눌 수 있지 않을까란 생각에 좌측에 공유버튼을 달았다.
Add This가 제공하는 스마트 레이어인데 디자인을 손을 보고 싶지만, 방법을 못 찾겠더라는.
어쨌든 요걸로 조금 더 많은 분이랑 공유할 수 있으면 좋을 것 같단 생각이.

후에 본문에 조금 더 다양한 공유버튼을 넣는 방법도 생각해 보는 걸로. 
다음뷰 추천 버튼도 더 잘 보이게 하려면 어떤 방법이 좋을까 등도 고민하고 있다.


[AddThis 스마트 레이어]

코드 하나를 넣는걸로 공유버튼이 손쉽게 생긴다 : https://www.addthis.com/get/smart-layers



3. 자잘한 의견들의 반영


▲ 네이버 이웃추가 기능과 활동하고 있는 곳의 엠블럼


친한 블로거인 그*데*님이 이렇게 해보는 건 어떠냐고 말씀해 주신 이야기를 참고해서 현재 활동하고 있는
겟어바웃과 CJ 소셜보드 앰블럼을 달아 보았지만, 2009년에 받은 티스토리 우수 블로거(였지요;;) 앰블럼은 도저히
자리배치가 안 된다는 이유로 일단 뺐.. 나중에 하나 더 받으면 달아 보는 걸로 ㅋ


거기에 네이버 블로거들과 오고 가는 것이 조금 더 편해지기 위해서 네이버 이웃 추가 기능도 소심하게 달았다.
개인적으론 이웃기능을 안 쓰고 피들리를 이용해서 보고 있기 때문에 필요성을 잘 몰랐는데
네이버 블로거 분들은 요걸 이용한다고 친한 먹방 멤버인 오*님께서 친히 알려주셨다. 

리뉴얼에 도움을 준 두 분께도 감사를..!




사실 스킨을 고치기 시작하면 한도 끝도 없고 생각보다 뺏기는 시간이 어마어마해서 거의 1-2년을 버려두었던 것 같은데
큰마음 먹고 리뉴얼을 해 보았다. 역시 생각보다 더 많은 시간이 걸린다.
아직도 남은 과제는 많으나 이렇게 하나씩 해 나간다는 기분으로도 무언가 정리되고 있어서 만족감이 든다.

앞으로도 신난제이유를 잘 부탁드리며 또 오세요~ 오세요~
여백의 미가 가득한 허여멀건 한 이 블로그에 놀러 오세요! (꾸벅)



참, 블로그 이름은 기존의 신난제이유로 돌아갔다는 걸 알아차리는 사람이 있으려나.
일퍼센트 매거진은 카테고리로 들어가고. 이것도 꽤 고민을 했는데 검색을 하니
2009년에 우수 블로거가 되었던 그 타이틀로 다음에 등록되어 있더라는. 쩝.
그나저나 도메인 아이디어 받..아..요.


+ 2013년 12월 8일 마지막 스킨 업데이트 (후에 추가할지도)

반응형