블로그 마크쿼리 v3 기반으로 변경



부트스트랩 기반 마크쿼리를 사용한지도 벌써 6개월정도 지난것 같다. 처음 부트스트랩기반의 블로그를 만들어 보려고 하다 개발자이지만, 웹개발에 많은 지식이 없는 관계로 찾아보다가 마크쿼리를 알게 되었다. 마크쿼리는 다양한 블로그에 부트스크랩을 아주 쉽게 적용 할 수 있도록 커스터마이징하여 레이아웃을 제공한다.

v3로 바꾸면서 고정레이아웃을 사용하자.

이전 마크쿼리 v2에서 레이아웃의 문제점: 풀 레이아웃

– v2에서는 레이아웃을 고정영역이 아닌 풀화면 사이즈로 잡다보니 컨텐츠 이미지를 어떻게 배치 할까 많은 고민이 들었으며, 작은 사이즈의 이미지 또한 문제였다. 어느정도 고정적인 레이아웃으로 잡아야 겠다고 계속 생각 해왔었다. 

가로 고정 1200px로 가로 고정영역을 주자.

– 티스토리 티에디션은 가로 1000px까지만 지원한다. 다음에서도 이정도 사이즈가 평균 사이즈다라는 통계를 바탕으로 최대 크기를 잡았을 거라 생각 한다. 국내 포털이 수많은 데이터를 기반으로 잡은 수치라 믿고 1000px에 사이드메뉴 배치를 한다고 생각해서 1200px로 잡으면 나름 평균적이지 않을까라는 생각을 했다.

 티스토리 티에디션 지원

– 마크쿼리 v2에서는 티에디션이 고정영역으로 지정되어 버려 쓰지 못했다. 대안으로 태터데스크를 사용할 수 있었는데, 뭔가 충돌이 일어나 몇몇 기능이 작동 되지 않는 문제점이 있었다. v3로 넘어 오면서 티에디션이 유연한 사이즈로 바뀌게 되었지만, 1단이 아닌 여러단을 쓰면 부자연스러운 레이아웃 배치가 문제가 있다. 그래도 메인화면을 구성하는게 방문자를 좀 많이 잡아 둘 수 있다는 점에서 만족 해야 겠다. v2에서는 메인페이지를 구성하지 않아 필요한 컨텐츠만 보고 나가버리는 사용자가 대부분이였다. 

 폰트설정기능의 보안점

– 본문에서 폰트 설정을 할수 있는 기능이 생겼으나, 1회성으로 페이지 이동시 다시 초기화 되어버린다. 결론적으로 설정을 저장하지 않는한 이런 기능의 사용빈도는 떨어 질것같다. 

든든한 지원

마크쿼리 커뮤니티 사이트를 통해 다양한 지원을 해준다. 

<

p style=”text-align: center; clear: none; float: none;”>




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

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

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