티스토리 반응형 블로그 스킨 마크쿼리 적용 방법

기존에 PC 웹 버전과 모바일 전용 스킨을 사용하다가 좀 불만족 스러운 부분이 있어서 스킨을 변경했습니다.

찾아보다보니 화면 사이즈에 따라 변화하는 반응형 스킨 중에 마크쿼리(markquery)라는 스킨이 있는데 꽤 깔끔하더라고요.

 

일단 간단하게 적용해 보았는데 생각보다 더 괜찮은 결과라서 계속 사용해 보기로 했습니다.

제 기준으로 기존 스킨을 비교해서 봤을 때

 

장점

1. 속도가 빠르다 - 기존 사용 스킨이 오래된건지 스크립트등 문제가있어 딜레이가 심했습니다.
2. 가독성이 좋다 - 큰 화면에서는 폰트 사이즈 조정도 되고 디자인 자체가 깔끔합니다.
3. 본문 영역이 넓다 - 기존 스킨은 본문이 가로폭이 짧아서 제약이 좀 있었는데 마크쿼리는 시원합니다.
4. 호환성이 좋다 - 설정 부분 등 티스토리에 잘 맞춰진 스킨인 것 같습니다. 

 

단점

1. 모바일, 웹 각각 독립적인 애드센스 적용이 어렵다

 

사용한지 얼마 되지 않았지만 개별적인 애드센스 적용만 해결하고 나면 아주 좋은 스킨이 되겠다는 생각입니다.

이 문제 때문에 처음에는 PC웹 버전에만 마크쿼리를 적용하고 모바일버전에는 기존 스킨을 별도로 사용하고 있었는데요.

현재 제 블로그에는 보시다 시피 각각 다른 레이아웃의 애드센스가 적용되어 있습니다.

 

우선, 마크쿼리를 다운로드 받아야겠죠?

아래 URL로 가셔서 다운로드 받으시면 됩니다.

http://markquery.github.io/download/

 

마크쿼리 사이트에도 설명이 나와있지만, 간단히 순서를 살펴보겠습니다.

1. 스킨 다운로드
2. 다운로드 받은 스킨 압축 풀기
3. 티스토리 관리자 화면 > 꾸미기 하위 '스킨' 메뉴 > 우측 상단 '스킨등록' 
4. 마크쿼리 스킨 파일 업로드
5. 저장 > 마크쿼리 적용

* 유의 사항 : 마크쿼리를 적용한 이후에 티에디션이 좀 이상해 졌는데요. HTML/CSS를 수정하거나 하면 티에디션 설정이 계속 초기화가 되버립니다. 음.. 반응형 웹이라서 그런건지 모르겠지만, 티에디션의 폭이 좁게 설정되는 경우인데요. 간단히 티에디션 우/상단의 가로폭 조정을 해주면 해결은 됩니다. 다만 다시 HTML/CSS 수정하면 반복 적용해줘야 한다는..

 

1,2번은 누구나 다 할 수 있기 때문에 패스합니다.

그렇다고 3,4,5번이 아무나 못하게 어렵거나 그런건 절대 아닙니다.

3번의 압축을 푼 후에 위의 파일들(images 폴더 포함)을 업로드 시켜줍니다.

 

그리고 우측 상단의 스킨저장명에 이름을 넣고 저장해 주면 끝! 입니다.

 

그러고 나면 이렇게 스킨 메뉴에 마크쿼리가 나타나게 됩니다.

기존 스킨은 꼭 저장해 놓으시고요. 

 

마크쿼리 스킨을 적용하면 바로 반응형 웹 사이트를 보실 수 있습니다.

기존에 애드센스를 하시던 분들은 우선 기존 애드센스 코드와 중복해서 노출 안되도록 조심해 주시고요.

모바일웹용 전용 스킨을 쓰시던 분들은 일단 모바일은 놔두고 웹에만 먼저 적용해 보시면 되겠습니다.

 

그러면 이렇게 깔끔한 화면이 나타납니다. ㅎㅎ 

화면 사이즈를 줄였다 늘였다 해보면 사이즈에 맞춰서 레이아웃도 변화되게 되고요.

 

애드센스 광고 설정은 예전에는 주소에 /m/이 들어간 경우 모바일로 체크해서 모바일 사이즈의 애드센스를 뿌려주고 그 이외에는 pc 버전의 애드센스를 뿌려주도록 js 스크립트를 만들었는데요.

 

반응형 웹은 pc와 모바일의 구분이 없기 때문에 브라우저 사이즈를 기준으로 구분하도록 했습니다.

반응형 웹 자체도 브라우저 사이즈를 기준으로 레이아웃을 바꾸게 되어 있더라고요.

 

애드센스 광고 적용에 대해서는 별도로 좀 자세히 포스팅할 예정이고요.

 

기존 좀 구리구리한 스킨에서 마크쿼리 반응형 웹으로 적용한 이후 CTR은 2배 , RPM도 2배 이상 증가하였습니다.

단순 비교는 어렵지만 일단 디자인(?)의 힘을 확인한 것 같네요.

 

현재 가장 큰 문제점은... 마크쿼리 때문인지 다른 부분 때문인지 모르겠지만 네이버 검색에서 제 블로그가 전부 사라졌습니다.

기존에 검색되던 것들까지도요. 일단 시점 상으로는 마크쿼리 적용 시점부터 검색 누락이 시작된 것 같습니다. 쩝..