티스토리 뷰



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


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

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


사실 웹표준 관련 수업을 듣게 되면서 반응형 웹을 알게 된 것인데, 이런저런 이유로 블로그 플랫폼을
네이버로 바꾸어야 하느냐는 고민 끝에 그래도 티스토리가 그냥 좋아요, 란 이유 하나로 리뉴얼에 돌입한 것. 
그렇게 보이진 않아도 이 스킨 하나 고치는데 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일 마지막 스킨 업데이트 (후에 추가할지도)

소셜댓글
댓글
  • 프로필사진 BlogIcon 토종감자 와우! 제가 일주일 넘게 눈밑에 다크써클 무릎까지 내려가며 끙끙거린 내용을 이렇게 깔끔하게 정리를 해주시다니요. 링크도 잘봤습니다. 가끔 질문도 좀 드릴께요! ^^;; 2013.12.08 17:47 신고
  • 프로필사진 BlogIcon 신난제이유 핫핫핫... 저도 모르는 게 많은데 이 글로 도움이 되셨다니 다행입니다.
    링크에 '정재복'님 블로그가 훨씬 깔끔하게 정리가 잘 되어 있으니 꼭 참고하세요. 캬캬.

    확실히 반응형웹은 멋져요. 푸하.
    다만 하나 고칠때마다 확인을 일일이 하면서 뽀사지는 곳이 없나 잘 찾아내야해요.
    2013.12.09 01:15 신고
  • 프로필사진 BlogIcon 그린 데이 도메인은 당근 제이유닷컴. :)
    블로그, 닉네임 연관성 떨어지면 어렵더라구요.
    와. 너무 멋진 블로그~!
    단 3일만에 해냈다는게 넘 놀랍고 대견합니다.
    짝짝짝!!
    2013.12.09 01:14 신고
  • 프로필사진 BlogIcon 신난제이유 신난제이유닷컴으로 꼭 구매하기로 하겠습니다.
    (넷....이나 씨오쩜케이알도 생각해 보는 걸로 ㅋ)
    블로그, 닉네임 연관성이 정말.. 그린데이님은 블로그명에도 닉네임이 들어가서 좋드라구요. 흐..-ㅠ-

    말이 3일이지 생각보다 더 오래 걸렸어요 ㅋ
    아주 집중하면서 머리 쥐어 뜯는 것이 3일이란 시간...그리고 남은 건 버그 찾아내서 수정하는 것.
    오늘은 검색 기능이 안되는 걸 찾아내서 바로 또 수정모드였어요.
    2013.12.09 01:19 신고
  • 프로필사진 BlogIcon 열매맺는나무 오! 제이유님도 반응형웹으로 바꾸셨군요!
    도저히 한 번에 짜잔~하고 시도할 자신이 없어 저도 기존 블로그에서 미술쪽만 따로 떼어 실험하다 이제 겨우 적용해봤어요. ㅎㅎ
    까막눈이 더듬더듬 만진거라 이상한 것 많을 텐데.. 제이유님이 많이 도와주세요. ^^
    2013.12.09 01:57 신고
  • 프로필사진 BlogIcon 신난제이유 반응형웹으로 블로그가 가능할까 고민했었는데 이런 멋진 스킨이 있더라구요.
    근데 생각보다 훨씬 수정하는 것이 어려웠던지라 시간이 많이 걸렸어요.
    정말 색깔 하나 바꾸는데도 어찌나 복잡했는지.. 개발언어를 모르니까 더 복잡했던 것 같기도 하고. 하핫.
    제가 아는 범위내에서는 최대한 설명을 드릴게요.
    근데 저도 몰라서 ㅋㅋ 커뮤니티에 막 글 남기고 그랬어요. 히힛.

    그나저나 올려놓으신 블로그 보니까 잘 반영이 되었는걸요+ㅁ+
    2013.12.09 01:14 신고
  • 프로필사진 BlogIcon 열매맺는나무 아, 이제 원래 블로그에도 적용했다고 댓글 수정했는데 벌써 다녀가셨네요~^^ 2013.12.09 01:59 신고
  • 프로필사진 BlogIcon capella 우와 신기하네요! 완전 좋네요~ 능력자세요~
    저도 해봐야겠어요 ㅎㅎ 시험끝나고 방학하면 ㅎㅎㅎ
    2013.12.09 05:27 신고
  • 프로필사진 BlogIcon 신난제이유 능력자는 아니고 약간의 삽질과 시간 노가다(!!)만 있으면 할 수 있어요.
    이 스킨을 그냥 깔면 바로 할 수 있으니 카펠라님도 시간 있을 때 한번.. 흐흐..-ㅠ-

    이제 시험을 앞두고 계신가보네요. 어머나.
    스트레스 많이 받으시겠지만, 단 거 보충 잘하면서 파이팅이예요!!
    2013.12.10 11:32 신고
  • 프로필사진 BlogIcon 샘쟁이 와! 이런 거 저런 걸 다 떠나서 일단 깔끔해서 좋다 :D
    마냥 미루고만 있었는데 조만간 날 잡어서 저도 일 좀 치뤄야겠단 ㅎㅎ
    2013.12.09 09:05 신고
  • 프로필사진 BlogIcon 신난제이유 흐-ㅠ- 깔끔하게 제일이지요.
    저도 정말 미루고 미루다가 했는데 아직도 끝나지가 않았네요..
    이래서 스킨 고치는 건 함부로 하는 일이 아닌 것 같아요. 시간이 너무 걸려요. 엉엉.

    그나저나 샘쟁이님 스킨은 늘 언제나 깔끔하고 예쁜 것을!
    2013.12.10 11:33 신고
  • 프로필사진 BlogIcon Pug 도메인 구입은 많이 알아보시고 구매하세요~ 티스토리 유저들이 댓글 달 때, 다시 로그인해야하는점이나 그 동안 쓴 글들이 주소가 바뀜으로인해 전부 누락당하는 경우도 있어요. 블로그의 경우는 도메인이 양날의 검이에요ㅎ 2013.12.10 03:16 신고
  • 프로필사진 BlogIcon 신난제이유 안그래도 블로그를 한번 갈아 엎은 전력(?)이 있어서
    좀 위험하다 싶어 걱정이긴 합니다.
    pug님이 그렇게 말씀하시니 달지 말고 그냥 살아갈까 이런 생각도...
    글이 적고 유저 유입이 적을 때 바꿀까 했었는데..-_-a
    그렇게 말씀하시니까 괜히 또 긴장하게 되고 걱정하게 되면서..음음..

    그동안 쓴 글들이 전부 누락된다는 것이 가장 무섭...;ㅁ;
    2013.12.10 11:34 신고
  • 프로필사진 BlogIcon 우뎅 뭐가 참 큼직큼직해졌네. 모바일로 접속하면 저렇게 된다니!!
    근데 글로만 봐서는 너무 어렵다. 끙. 반응형웹이라니.
    뭔소리여..ㅠㅠㅠ
    2013.12.10 13:58 신고
  • 프로필사진 BlogIcon 신난제이유 반응형웹이 요즘 트랜드이긴 한데 굳이 안 따라도 괜찮아요.
    모바일 페이지를 따로 만들어서 사용하는 경우도 많으니까.
    어쨌든 간에 브라우저에 따라서 디자인이 변신로봇처럼 바뀌어요.
    PC에서 이 블로그 보는 거랑 선배 아이폰으로 봤을 때 디자인이 다를꺼예요. 홍홍.
    기본적인 디자인 통일감은 그대로 가구요 :-)
    2013.12.11 01:18 신고
  • 프로필사진 BlogIcon 치얼리 워프에대해 검색하다 여기 까지 왔는데...오늘 정말 소중한 정보를 찾았습니다.네이버에서 티스토리 와 워드프레스 고민중인데 티스토리로 결정...좋은정보 감사 합니다. 2013.12.22 23:39 신고
  • 프로필사진 BlogIcon 신난제이유 아이고 여기까지 와 주셔서 감사합니다. ^^ 결정에 도움이 되었다니 다행이구요.
    저도 워드프레스와 네이버도 생각해 본 입장에서 몇가지 사족을 달자면..

    네이버는 확실히 검색 유입이 월등히 좋기 때문에 방문자수를 생각하시면 네이버를 사용하심이 옳구요~ 그러나 스킨을 수정하는데 있어서 상당히 한계가 있다는 점과 (제가 네이버를 제대로 사용해 보진 않았지만,) 몇가지 지켜야 할 사항이 있는 것 같드라구요.

    티스토리는 디자인과 스킨 수정이 가능하다면 원하는 구미대로 뜯어 고치는 맛이 있다는 재미가 있습니다. 게다가 무한정으로 사진을 이용할 수 있는 점도 좋지요. 그러나 유입이 그렇게 좋지 못하는 점과 플랫폼의 업데이트가 네이버만큼 좋진 않답니다. 다음이 조금 더 신경을 써줘야 하는 것 같아요.

    워드프레스는 검색최적화라든가 아시는대로 몇가지 장점이 있지만, 계정을 가지고 있어야 한다는 점과 그러므로 용량이 제한적이란 점, 그리고 한국에서 블로그를 함에 있어서 워드프레스의 몇몇 장점들을 제대로 활용할 수 있나에 대한 의문도 있습니다. 물론 스킨이나 요런 면에서는 월등히 좋지요.

    여튼 좋은 티스토리 이웃 블로거가 생기길 기대해 보아용 :)
    2013.12.23 00:44 신고
  • 프로필사진 BlogIcon 나울었쪄 마크쿼리 스킨 본문 폭 어떻게 조정하는건가요 ㅠㅠ?
    3일째 해매고 있는데..스타일 부분 어디가 본문 넓이인지 감도 못잡겠네요 ㅠ

    그리고 혹시 마크쿼리 구형 버전 받을 수 있는 곳 모르시죵 ㅠㅠ?
    2014.01.26 17:49 신고
  • 프로필사진 BlogIcon 신난제이유 전 폭을 넓히는 쪽이 아니라 줄이는 쪽일라서 보폭의 %만 조절을 했어요.
    정확한 부분을 알고 싶으실 때는 마크쿼리 커뮤니티에 가면 설명서(?)가 있으니 참조하셔도 좋을 것 같아요. http://markquery.com/community/

    구형 버전은 어떤 것인지 잘 모르겠네요. 그것도 커뮤니티에 물어보시면 답을 얻을 수 있지 않을까 생각해 봅니다.
    2014.01.26 17:53 신고
  • 프로필사진 BlogIcon 나울었쪄 드디어 해낸거 같습니다....ㅎ 근데 f12 누러서 html 스타일 편집한걸 어떻게 적용시키나요?? 2014.01.26 19:05 신고
  • 프로필사진 BlogIcon 신난제이유 f12를 눌러서 스타일 편집했다는 것이 어떤 말씀인지 정확히 모르겠네요.
    혹시 사이트에서 바꾸어서 적용하셨다는 것을 의미하시는 거라면..
    부트스트랩.css는 파일을 고치신 후에 스킨수정쪽에 가서 파일을 엎어 씌워야 한답니다.
    제가 제대로 이해한게 맞나 모르겠네요. ^^;;
    2014.01.27 03:29 신고
  • 프로필사진 BlogIcon 장대군 저도 이제 알게 되어서 도전해 봐야겠습니다. ^^

    종종 질문 드릴테니...답변 미리 부탁드립니다. ㅎㅎ
    2014.02.14 01:17 신고
  • 프로필사진 BlogIcon 신난제이유 안녕하세요. 반응형스킨으로 고치고나면 상당히 뿌듯해지실꺼예요. ^^
    그나저나 제가 드릴 수 있는 답변은 사실 굉장히 한정적인데 ㅋㅋ
    커뮤니티 사이트가 개발자님이 직접 운영하는 공간이니 정확한 답변은 그쪽에서 얻는 게 좋을 거예요. ^^
    제가 드릴 수 있는 답변이 있다면 꼭 드리도록 하겠습니다.
    그럼 파이팅입니다!!
    2014.02.14 12:36 신고
  • 프로필사진 BlogIcon Daisy 안녕하세요 ^^
    오랜만에 스킨을 좀 만져볼까 해서요,,, 집짱님(http://www.paperon.net/447) 집에 들렀다가 건너왔습니다.
    저도 참조 좀 할께요.. 고맙고 감사합니다. ^^
    2014.05.02 09:29 신고
  • 프로필사진 BlogIcon 신난제이유 안녕하세용^ㅁ^/ 여기까지 오셨네요 헤헷.
    좋은 스킨이니까 잘 뜯어 고쳐서 사용하시면 분명 만족하실 것이여요.
    저도 굉장히 잘 사용하고 있답니다. ^^
    2014.05.07 19:57 신고
  • 프로필사진 BlogIcon 신난제이유 안녕하세요!!! 여기까지 와 주셨네요. 헤헷.
    저도 이 스킨 굉장히 만족스럽게 잘 사용하고 있으니!
    분명 마음에 드실겁니다. 암요암요. ^^ 저도 구경갈게용!
    2014.05.07 19:59 신고
댓글쓰기 폼