부트스트랩기반의 마크쿼리를 적용한 티스토리



반응형 웹을 오픈소스로 공개한 부트스트랩에 대한 많은 관심을 가지고 있었다. jQuery등 내가 모르는 부분이 많아서 티스토리에 적용 해볼까 하다가 여러번 포기 한적이 있었다. 그와중에 또 한번 적용을 시도 해볼려다가 우연히 마크쿼리를 찾게 되었다. 

부트스트랩 기반으로 티스토리, 워드프레스등 다양한 블로그에 스킨을 만들어서 오픈베타를 공개했다. 

마크쿼리 공식홈페이지: http://markquery.github.io

한국어 가이드: http://markquery.kr

스킨 다운로드 GitHub: https://github.com/markquery/tistory-spidersweb

반응형웹으로 바꾸다!

GitHub에서 파일을 다운받은뒤 티스토리에 새로운스킨 등록에서 파일을 등록을 해주면 쉽게 적용이 된다. 

나는 이전 컨텐츠에 코드를 쉽게 보기위해 SyntaxHighlighter를 써왔기 때문에 SyntaxHighlighter를 설치하고, 나눔고딕으로 폰트를 바꿨다. 

반응형 웹인 부트스트랩 기반이기 때문에 브라우저, 디바이스에서 최적화된 UI/UX를 제공 한다.

 – 데스크탑에서 브라우저

– iPad Mini


– 갤럭시 S3

티스토리의 경우 모바일 페이지를 따로 제공을 해주나 마크쿼리 스킨을 이용하게되면 모바일 페이지가 무의미 해진다. 브라우저의 창이나 디바이스의 해상도에 따라 최적의 UI/UX를 제공하기 때문이다. 이런것을 반응형 웹이라고 부른다. 

아직 오픈베타이기 때문에 몇몇 문제점이 나타난다. 물론 부트스크랩이나 마크쿼리 스킨의 문제점으로 보기는 힘들고, 티스토리와의 연동에 문제점들이다. 

1. 반응형 웹은 이미지또한 브라우저의 크기에 따라 줄었다 커졌다한다. 이렇게 반응을 하기위해 이미지 리소스삽입시 <img src=”url”> 태그를 써야되나 티스토리의 글쓰기시 이미지 삽입되는 부분이 태그가 아닌 치환자(?)로 되어 있기 때문에 이미지의 크기가 고정되어 버린다. 이것을 해결 하기위해 모두 img 테그로 변환해야 한다.(지금 이글은 모두 img태그로 변형 했다.) 기존에 이미 작성 해놓은 컨텐츠들을 마이그레이션 해줘야 한다.

2. 메인을 꾸미기위한 홈에디션을 사용시 위의 이미지와 같은 문제점이 발생한다. 홈에디션에서 사용자편집에서 html로 작성을 할 수있어서 이부분은 해결 될 수는 있지만 초보자가 사용하기에는 다소 힘들 수도 있다. 또한 홈에디션 사용시 우측 메뉴들의 구성이 깨지는 문제점이 발생한다.

3. 개발자 블로그이기에 SyntaxHighlighter를 사용이 빈번히 발생하는데 이또한 크기가 고정으로 되는 문제점이 발생한다. 

이런 문제점이 있는것은 당연한것이며, 이런것을 제외하고는 모든것에 만족스럽고 훌륭하다. 그리고 마크쿼리가 추구하는 누구나 쉽게 활용할수 있고 자유롭게 접근 할수 있다는 점이 목표를 이룬것 같다고 생각 한다. 웹디자이너, 개발자 없이도 더욱 멋지고 경쟁력 있는 콘텐츠를 제작가능할 것 같다.




“부트스트랩기반의 마크쿼리를 적용한 티스토리”에 대한 15개의 생각

  1. 안녕하세요. 아직 부족한게 많은데 좋은 이야기 남겨주셔서 감사합니다.

    bootstrap 3가 언제 발표될지 몰라서 고민을 오래 해왔었는데, 오늘 RC1 버전이 공개되었네요. 저도 bootstrap 3로 마크쿼리를 업데이트 할 예정입니다. 가장 큰 변화는 행의 셀렉터명이 span1~12에서 col-1~12로 변경된다는 점입니다. col-lg와 col-sm도 추가되어 mobile first의 기능도 추가됩니다. 물론 아시다시피 티스토리에서 강제 모바일페이지를 사용자에게 선택권을 주지 않는다면 무용지물일 수 있겠지만요 ^^;

    계속 발전하는 마크쿼리 만들어가겠습니다. 감사합니다.

    1. 안녕하세요.
      이렇게 직접 방문 해주셔서 댓글 달아 주시다니 영광입니다 🙂
      너무 잘 사용 하고 있구요 앞으로 좋은 마크쿼리 만들어 가주셨으면 좋겠습니다.
      감사합니다.

  2. 죄송한데 나눔고딕 어떻게 넣을수 있나요? ㅠㅠ

    기본폰트만 적용되고 나눔고딕으로 변경이 안되는데

    죄송하지만 style.css 소스좀 주실 수 있으신가요 ㅠㅠ;

  3. 문의할게 있어 댓글 남깁니다.

    구글 애드센스 광고를 pc에서 접속할때와
    모바일에서 접속할때 반응형웹 스킨에
    적용된 광고 유형이 다르게 표시되던데
    어떻게 해야하는건가요?

    방법 좀 부탁 드립니다. ^^

  4. 김민수님 안녕하세요.
    테스트 기간 동안에 많은 변화가 있엇습니다. bootstrap 3로 업데이트가 되었습니다. 참고바랍니다. 문의 게시판도 열어두고 있습니다. 그리고 한국어 페이지를 따로 운영하려고 계획했으나, markquery.com으로 통합 운영하는 중입니다. kr 도메인은 보류되었습니다. 트랙백도 보내주셨었는데, 링크를 깨트리게 되어 죄송합니다. 계속 지켜봐주시면 감사드리겠습니다.

    http://markquery.com

  5. 적용은 완료했는데 방문기록(카운터)가 없어서 궁금해서 여쭤봅니다
    직접적인 수정은 알겠지만 하단바를 가로로 놓는법을 잘 모르겠습니다
    (html은 처음이라..)

    혹시 방문기록 소스와 가로로 놓는법에 대해서 알수 있을까요?

    1. 안녕하세요.
      마크쿼리 v2를 쓰신다면 bootstrap.css에 본문에 대한 스타일이 모두 정의 되어 있어서 바꾸시면 될듯 하구요, v1이면 main.css에 있었던걸로 기억합니다. html과 css를 차근차근 공부하면서 이것저것 바꿔 보시길 권해드립니다.
      감사합니다.

  6. 죄송하지만.. 같은 부트스트랩 기반인데 모바일에서도 원활하게 뜨시길래
    어떻해 하셨길래 궁금해서 여쭤봅니다..
    (티에디션??)

댓글 남기기