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



반응형 웹을 오픈소스로 공개한 부트스트랩에 대한 많은 관심을 가지고 있었다. 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를 사용이 빈번히 발생하는데 이또한 크기가 고정으로 되는 문제점이 발생한다. 

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