아... 개운해~ >_<
오랜 숙제를 끝낸 것 같이 가뿐하다. 티스토리 초기 버전 스킨을 수정해서 이용해오던 페이퍼온넷이 2014년 새해를 맞이해 새로운 옷으로 갈아입었다. 무려 RWD(Responsive Web Design : 반응형 웹 디자인)을 적용했다. 적용과 관련한 상세 내용은 신난제이유님의 가이드를 따랐다.

티스토리엔 왜 반응형 스킨이 없었을까?

티스토리가 처음 공개될 시점엔 티스토리 모바일 웹 스킨이 따로 존재하지 않았다. 모바일용 CSS를 추가하는 것만으로 모바일에 최적화해서 보여줄 수 있었다. 그런데 티스토리의 모바일 웹 스킨을 만들면서 개인적으로 2차 도메인까지 붙여 이용하던 블로그까지도 정말 갑갑해 보이는 티스토리 모바일 웹 스킨으로 포워딩 되도록 바뀌었다. 서비스 운영 주체인 Daum에서 티스토리 콘텐츠 아래에 Daum의 인기 콘텐츠 리스트를 삽입해 트래픽을 모아보려고 했던 게 아닌가 생각한다. 그래 당시엔 모바일 페이지를 따로 만드는 게 유행이었으니까 그럴 수 있다고 생각하자. 하지만 최근엔 하나의 페이지가 어떤 디바이스에서든 최적화해서 볼 수 있도록 하는 '반응형 웹 디자인'이 트렌드이다. 그런데 왜 Daum에선 티스토리의 반응형 웹 디자인을 공식적으로 만들어 주지 않았을까? 앞에 이야기한 티스토리 콘텐츠 아래쪽에 Daum 광고 영역을 놓치지 싫어서가 아닐까? 그래도 2013년 하반기부터는 모바일 웹 스킨을 적용하지 않은 옵션부터 다양한 개선 사항을 내놓고 있는 점에선 고맙게 생각한다.

최근 티스토리 모바일 웹 개선 사항
모바일 웹 스킨 ON/OFF 기능 안내 http://notice.tistory.com/2132
모바일 웹 댓글, 본문 하단 디자인 개선 http://notice.tistory.com/2134
모바일 웹 헤더 개선 http://notice.tistory.com/2142

Before - 티스토리 웹 스킨

Before - 티스토리 웹 스킨

After - 반응형 웹 스킨

After - 반응형 웹 스킨


티스토리에 반응형 스킨 필요할까?

티스토리 모바일 웹 스킨을 이용하면서 불편하고 개선을 요구하고 싶었던 점이 있다. 하나는 앞에서 말한 것처럼 트렌드에 뒤처진 UI / UX이다. 이 부분은 어쩔 수 없는 부분이라고 해도 티스토리 스킨(skin.html / style.css 파일 등)에 추가적으로 넣어놓은 기능들을 모바일 웹 스킨에선 이용할 수 없다는 건 큰 장애와 같았다. 특히, 최근 모바일 디바이스로부터 유입이 크게 증가하면서 이런 부분은 워드프레스로 이전을 고민하게 하는 가장 큰 이유이기도 했다. 예를 들어, 티스토리 스킨에 구글 로그 데이터 분석 코드를 추가하면 모든 페이지로 사용자들의 유입 로그 데이터를 분석할 수 있는데, 모바일 웹 스킨은 로그 데이터를 수집할 수 없게 했다. 그래서 모든 콘텐츠 하단에 구글 로그 데이터 분석 코드를 추가해서 이용하는 편법을 썼지만, 이 역시 모바일 웹 스킨에서 콘텐츠 영역은 잘 수집되지만, 콘텐츠 리스트 페이지의 로그 데이터는 수집할 수 없는 한계가 있었다. 이제 티스토리에 반응형 스킨을 적용하고 티스토리의 기분 모바일 웹 스킨을 비활성화하는 것만으로 PC에서와 똑같이 모바일 디바이스에서도 블로그를 이용할 수 있게 되었다.

티스토리 반응형 스킨 적용으로 워드프레스로 이전을 고민했던 페이퍼온넷은 티스토리 시스템으로 당분간 유지해도 될 것 같다고 생각했다. 티스토리에서 워드프레스로의 이전, 생각과는 달리 아주 복잡한 문제점들이 많이 있었거든. 0_o! 이제 페이퍼온넷에 새로운 로고만 적용하면 되는 건가? 오늘은 여기까지...

iPad에서 반응형 웹 스킨이 적용된 페이퍼온넷을 본 화면

iPad에서 반응형 웹 스킨이 적용된 페이퍼온넷을 본 화면