수학방

오늘 신문에 [이슈분석] 윈도XP 지원 종료, 한 달 앞으로…제 2의 `y<sub>2</sub>K` 사태 오나라는 기사가 올라왔어요. 이제 XP 지원기간이 한 달밖에 남지 않았는데 준비가 부실하다는 거죠.

그래서 블로그 방문자 중에 XP 사용자가 얼마나 되는지 구글 애널리틱스로 살펴봤어요. 이런 거 볼 때 확실히 좋은 도구예요. 물론 네이버 애널리틱스로 확인할 수도 있는데 이건 항목을 바꾸면 지정한 날짜가 계속 바뀌는 문제가 있어서 잘 사용하지 않게 되더라고요.

반응형 스킨으로 바꾸기 전에 한 번 확인해 본 적이 있는데 그때는 운영체제보다는 IE 버전이 중요했던지라 대충 보고 넘어갔거든요. 이번에는 운영체제와 IE 버전을 조금 더 자세히 들여다봤어요.

Windows XP 사용자 비율

방문자들의 운영체제를 본 건데 안드로이드가 66%, iOS가 7%나 되네요. 모바일 유입이 70%가 넘어요. 이에 비해 Windows의 비율은 26%를 겨우 넘었어요.

Windos 사용자 비율을 조금 더 자세히 살펴보죠. Windows 7이 가장 많고 그다음이 바로 문제의(?) XP가 24%로 2위예요. 대부분의 데스크탑에서 Windows를 사용한다는 걸 고려해보면 컴퓨터 사용자의 24%가 Windows XP를 사용한다고 해석할 수 있어요. 상당히 높은 비율이죠.

모바일을 포함한 전체 사용자 중 Windows XP 사용자 비율을 따지면 6% 정도 되는군요.

이번에는 브라우저 버전이에요. 그런데 안드로이드 브라우저가 뭘 의미하는지 모르겠네요. 안드로이드 운영체제에 기본 설치된 브라우저를 말하는 것 같기는 해요. 그리고 크롬은 데스크탑에서 사용하는 크롬인지 모바일 앱 크롬인지 아니면 둘을 섞어놓은 건지 모르겠고요. 어차피 이번 보고서의 목적은 IE 사용자를 알아보는 거니까 별 의미가 없긴 하지만요. IE가 21% 예요.

IE를 조금 더 자세히 살펴봤어요. 8.0 사용자가 가장 많아요. 33%나 되죠. 7.0 사용자도 20%가 넘어요. 심지어 4.0 사용자도 있네요. 8.0은 전체 비율로 따지면 7%가 조금 넘어요. Windows XP에서 지원하는 가장 높은 버전이라고 치면 위에서 본 XP 사용자 6%보다 조금 높은 수치죠. 아마도 더 Windows 7, Windows 8 사용자 중 일부가 IE를 업데이트하지 않고 그냥 사용하는 가 봅니다.

그런데 IE 7.0이 높은 건 의외네요. 아마 본인이 사용해야 하는 어떤 프로그램이 7.0을 이용해야만 하는 경우가 있다던데 그런 경우일 것 같아요.

아직 Windows XP - IE 7, 8을 사용하는 분들이 많이 있다는 걸 직접 확인할 수 있어요.

지금 반응형스킨을 사용하고 있는데 IE 8 이하 버전에서는 원래 의도했던 대로 화면이 나오지 않죠. 이 때문에 반응형 스킨을 사용하기를 꺼리는 분들이 꽤 있어요. 저야 모바일 사용자가 많아서 반응형 스킨으로 바꿨지만 데스크탑 사용자를 고려한다면 XP - IE 7, 8 사용자가 많다는 사실을 봤을 때 반응형 스킨으로 바꾸는 건 무리가 있을 것 같아요.

사실 블로그를 운영하는 입장에서는 브라우저별로 지원하는 HTML 태그나 CSS 버전이 달라서 애를 먹는 경우도 많아요. 여러 가지를 모두 만족하는 블로그를 만든다는 게 엄청 어렵거든요.

꼭 필요한 경우가 아니라면 사용할 수 있는 가장 최신 버전의 운영체제와 브라우저를 이용해줬으면 하는 게 블로거로서의 입장이죠. 그럴 수 없다면 IE가 아닌 다른 브라우저의 최신 버전을 사용해줬으면 하는 바람도 있고요.

XP 사용자가 얼마나 줄어드는지 다음 달에 한 번 더 확인을 해봐야겠어요.

듀륏체리님께서 댓글에 tistory-spidersweb이라는 반응형 스킨이 있다는 내용을 적어주신 걸 보고 탐이 나서 몇 번 시도한 끝에 스킨을 바꿨습니다.

반응형 스킨을 사용하는 게 정말 어려울 거라고 생각했는데, 의외로 쉬웠어요. 그냥 그대로 쓰면 돼요. 안되는 건 그냥 포기하면 되니까요. 따지고 보면 굳이 필요한 게 아니거든요.  다음뷰 손가락같은 추천 위젯 넣기 어려워서 배경 그림 넣기 어려워서 반응형 스킨을 망설이던 분들에게는 바꿔보라고 적극 추천해드려요. 모바일이 대세가 된 지금에 별로 필요하지도 않은 것에 미련때문에 더 이상 미루지마세요. 그냥 가져다가 그대로 얻기만 하면 됩니다.

정 맘에 안들면 스킨 저장해뒀다가 클릭 한 번이면 바로 복구되니까 시험삼아 해보세요.

반응형 스킨

이번에 사용한 반응형 스킨은 Tistory skeleton이라는 스킨이에요. 다운로드도 받을 수 있고 사용법과 몇 가지 팁들이 다 모여 있어요.

지금까지 사용했던 스킨은 xhtml, css2로 된 스킨이라 수정을 하거나 추가하고 싶을 게 있을 때 별 어려움없이 바꿀 수 있었는데, 반응형 스킨은 css가 다르더라고요. 게다가 css 파일이 style.css와 bootstrap.css 두 군데로 나뉘어 있어서 더 복잡하고요.

반응형 스킨을 사용하되 바꾼지 얼마 안되는 현재 사용하는 스킨과 외형적으로는 똑같이 만들려고 했는데 실패했어요. 지금 사용하는 스킨은 본문의 넓이와 사이드바의 넓이, 그 간격 등을 px값으로 정확하게 지정해서 사용했는데 반응형 스킨은 그게 안되거든요. 얼추 됐다고 생각하고 테스트해보니 브라우저가 다르거나 해상도가 달라지면 레이아웃이 깨지는 문제가 있었어요.

사실은 지난 주에 계속 작업을 해도 이 문제가 해결되지 않는 바람에 그냥 포기하기로 했어요. 이거 하나 포기하니까 나머지는 술술 풀리더라고요.

본문 영역과 댓글 영역을 꾸미는 등의 내용은 기존의 것들을 복사, 붙여넣기해서 해결했습니다. class만 바꿨어요. 애드센스 광고도 화면의 가로 길이에 따라 변화하도록 반응형 광고로 새로 작성했고요. 되는 건 되게 하고 안되는 건 하지 말자라는 생각으로 하나씩 바꿔가니 지금의 모습이 되었네요.

반응형 스킨은 기존의 스킨에 비해 예쁘지 않아요. 하지만 꾸미던 것들이 사라지니 훨씬 더 깔끔해졌네요.

물론 아직도 해결하지 못한 것들이 있지요.

사이드바 왼쪽으로 옮기기
사이드바의 글 목록 앞에 bullet
사이드바 태그 목록을 가로로
하단의 페이지 영역 가운데 배치
기존에 본문에 직접 삽입했던 광고들

반응형 스킨 적용하고 가장 좋은 건 구글 웹분석도구의 통계를 모바일에서도 이용할 수 있다는 점이에요.

바꾼지 하루밖에 안되서 통계로서의 의미는 없지만 며칠 지나다 보면 쓸만한 통계가 될 거예요.

최근에 스킨과 애드센스 배치에 열중하면서 블로그에 수학 컨텐츠도 거의 올리지 못하고 있어요. 이번에 반응형 스킨으로 바꾼 다음에는 스킨에 대한 관심은 좀 꺼두고 자중해야 겠네요.

함께 보면 좋은 글

애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
블로그 왼쪽 사이드바의 효과
애드센스 최적화 배치 방법, 히트맵(headtmap)