티스토리 반응형 블로그 적용, 이제 그만 하고파

티스토리 반응형 스킨 #1

- 3일간의 삽질 -

요즘 웹 디자인 가이드라인이 가독성 높이고 감성을 둠북 담은 넒직한 반응형 디자인이 대세입니다. 전에 사용하던 완전 백색의 깨끗한 스킨에 너무 정을 주어 지금까지 옛 스타일을 고수하다 반응형 스킨에 손을대고 말았네요.

처음에는 왼쪽에 사이드바가 있는 2단형을 선택했습니다. 웬지 사이드바가 옆에 있어야 더 블로그답다는 고정 관념이 있나봅니다. 스킨 수정하기 하루쯤 될때 외부 댓글을 설치하고 나니 주소참조에 오류가 발생하는 것입니다. 댓글도 뒤죽박죽되고 구글에서 스마트폰으로 바로 링크 대량 손실도었다고 경고 메일 날라오고...

밤새도록 html 고치고 댓글 시스템 자료 읽어봐도 수정이 안되길래 사이드바가 없고 도메인에 게시글이 안보이는 스킨을 골라 테스트 해보았더니 오류가 사라졌습니다. 그것이 티스토리 #1 스킨. 하루 지나고 오류났던 스킨 다시한번 적용해봤더니 전날 있던 오류 사라졌네요. 스킨 오류가 아니었나 봅니다.

반응형 스킨은 수정이 너무 힘듭니다. 브라우저 크기마다 적용을 달리 해줘야 하니 폰트하나 바꿀라고 해도 여러군데 동시에 바꿔야 해요.

티스토리 반응형 스킨 #1은 구글 페이지 스피트 검사에서 웹표준  100%, 속도는 60% 전후나옵니다. 처음 적용하려던 스킨은 웹표준 99%, 속도 60% 전후, 반응형 스킨은 원래 속도 느린가요? 속도는 나중에 공부하고 수정해봐야겠습니다. 지금은 진이 빠져 한동안은 못하겠네요.

아무리 최근 웹 스타일 가이드라인이 좋다고 하지만 초기 스킨 디자인은 제 스타일하고 용도에 너무 동떨어져 수정할 것이 많았습니다.

여백, 폰트 색, 댓글, 관련글, 최신글, 도메인 첫페이지 디자인 등. 반응형 스킨에서 원하는 것을 다 적용하기에는 공개되지 않은 기능이 많고, 브라우저 크기에 따라 더 안좋은 결과가 나타나기도 했습니다. 무엇보다 수정하는데 시간도 더 드네요.

우여곡절 끝에 이런저런 꼼수 동원해서 이사갈 집 쓰레기 치워놓고 청소 해놓은 기분입니다.

게시글 페이지의 타이틀 여백

별것 아닌 건데 여기저기 위치 헤갈려서 거의 마지막 부분에 수정끝났네요. 엄청나게 컸던 여백이 많이 줄었습니다. 물론 최신 디자인 스타일로는 초기상태가 적합하긴 하겠지만 초기상태 여백으로 쓰려면 폰트를 바꿔야 하겠다는 생각이 들었네요. 폰트를 바꾸느니 여백을 메꾸자라는 자기 합리화.

관련글, 최신글 적용 불편성 꼼수는?

반응형 스킨에서 가장 크게 변한 부분은 관련글, 최신글입니다. 반응형 스킨 #2에는 섬네일로 제한적이나마 제공해주는데 그것 말고는 달리 적용할 방법이 없어보입니다. 제가 선택한 꼼수는 구글 애드센스의 '일치하는 콘텐츠'기능 입니다.

일치하는 콘텐츠란 구글이 애드센스 사용자에게 주는 보상 프로그램입니다. 게시글과 유사한 글, 접속자가 관심 가질 만한 글을 자동으로 보여줍니다. 접속자에 따라, 어떤 게시글을 보느냐에 따라 일치하는 콘텐츠에 나나타는 항목은 달라집니다. 더군다나 반응형입니다. 이것을 발견하고 완전 유레카를 외쳤다니깐요.

본문 바로 아래 최신글, 연관글 뿐만 아니라 광고 옵션을 켠다면 애드센스도 덤으로 표시되 아주 좋습니다. 섬네일도 제가 좋아하는 16:9 크기입니다.

허무함을 채워줄 꼼수

반응형 디자인은 현재 내용을 아주 중시하게 되어있습니다. wiz나 아도베 spark를 보아도 현재 컨텐츠에 조금더 집중하는 단순, 감성, 강조 형식을 많이 사용합니다. 하지만 지금은 블로그를 공사하고 있으므로 너무 큰 여백은 메꿔야지 않겠나 생각입니다. 이번에는 유투브와 트위터의 도움을 받았습니다. 제가 '최근에 올라온 글' 스타일만 좀 더 수정할 수 있었다면 최근글이 전체 공간을 다 사용하도록 했을 텐데요. 저는 방법을 모르겠습니다.

대문을 완성

티스토리 반응형 블로그 쓰는 분이라면 이 대문이 처음에 어떠했는지 알 것입니다. 대문좀 고치게 해달라는 많은 유저의 요구사항에도 딱히 수정 방법이 없네요. 플러그인을 적용해도 오류만 생기지 실제 적용은 안되구요. 카테고리가 대신 보이도록 하려해도 안되구요. 그래서 여백 수정만 겨우하고 구글의 힘들 빌렸습니다. 요약글과 섬네일 하나로는 아무리 어떤 컨셉을 주장한들 되겠어요? 애드센스의 일치된 컨텐츠가 만능입니다. 애매한 곳에 넣으면 끝.

---후기---

채팅창을 떼어 내고 '라이브리'를 달았는데 이것은 플러그인으로도 가능한 것이라 관련 내용은 작성하지 않았습니다. 반응형 블로그 수정 두번하라면 못할 것 같아요. 반응형을 얻고 속도를 잃었습니다. 이제 쉬엄쉬엄 속도부분만 개선해 봐야겠습니다.