티스토리 반응형 스킨과 IE8, IE9 레이아웃

블로그 스킨을 반응형으로 교체하는 작업이 14년 1월 20일 시작되었으니 거의 한 달이 다 되었습니다. 무려 한 달이라는 시간이 지나서야 스킨 변경작업이 완료되었습니다.

 

스킨 변경작업 시 가장 신경 쓴 부분은 역시 티스토리 모바일 스킨을 사용하지 않고도 모바일기기에서 블로그 가독성이 떨어지지 않아야 한다는 것과 로딩 속도 역시 너무 늦으면 안 된다는 것이었습니다.

 

참고사항: 본문에 그림으로 설명된 부분이 많이 있었으나 약간의 문제가 있어서 그림은 모두 삭제한 점 양해부탁드립니다.

어디서 들었는데 모바일 사용자는 웹사이트가 멋있는지는 신경 쓰지 않는다고 합니다. 오직 걱정하는 것은 페이지 열리는 속도 뿐.

 

다행히 시간 날 때마다 열심히 삽질을 한 끝에 가독성 부분은 어느정도 만족할 수준이 된 것 같습니다. 문제는 역시 로딩 속도인데요, 이 부분은 절반만 만족한 상태입니다.

 

사실 로딩 속도 뿐만아니라 반응형 스킨 교체 작업시간이 이렇게 오래 걸린 것은 블로그에 설치된 애드센스 및 기타 배너 광고 때문입니다.

 

깔끔하게 다 떼어버리면 걱정할 것도 없고 사실 스킨 교체 작업도 하루면 끝났을 일입니다. 하지만, 용돈 벌이는 계속되어야 하기 때문에 ^^ ...

 

IE9 이상 버전과 크롬 최신 버전 등에서 전부 이 화면으로 열리고 있습니다. 블로그 상단 메뉴바가 보이고 바로 포스팅 제목 줄이 보이고 있습니다. 우측 사이드바는 그냥 평범하게 카테고리, 인기 글, 최신 글, 댓글 순으로 나열되어 있고요.

 

사실 최상단 메뉴바 바로 밑에 블로그 설명 칸이 한 개 더 있었는데 모바일 최적화(사실은 모바일용 애드센스 광고 자리 비우느라 없앴습니다.)를 위해 과감히 날리고 대신 블로그 이름은 메뉴바 맨 좌측 (홈) 버튼 이름을 바꿔서 넣었습니다.

 

 애드센스 광고는 IE9 이상 최신 버전에서는 본문 제목 줄 바로 밑에 큰 것으로 두 개가 배치되었습니다.

 

그리고 본문 중간에는 배치하지 않고 본문이 끝난 부분에 또 한 개 설치해서 전부 3개가 배치되어 있습니다. (참고로 제 블로그에 달린 애드센스 광고는 전부 베타버전의 애드센스 반응형 코드를 사용했기 때문에 화면 크기에 따라 광고 크기도 달라집니다.)

여기까지는 반응형 스킨이나 일반 스킨이나 크게 달라질 것도 없고 또 앞으로 구 버전의 브라우저 사용자가 적어지면 이런 고생도 할 일이 없겠습니다.

 

IE8 이하버전에서는 블로그가 모바일기기에서 접속한 것처럼 화면이 나타납니다.

 

최상단 메뉴바에도 블로그 이름만 남고 전부 사라졌습니다. (완전히 사라진 것은 아니고요, 우측에 드롭다운 메뉴로 접힌 상태입니다.) 그래도 사이드바는 아직 살아 있으니 그런대로 괜찮아 보입니다.

 

 IE8 버전에서 달라진 점은 최상단 메뉴바에 변화가 좀 있고 애드센스 상단 광고가 한 개 사라지면서 가운데 정렬로 바뀌었습니다. IE 8에서는 애드센스 광고가 상단 한 개, 본문 하단에 한 개 총 두 개가 배치되어 있습니다.

 

세 번째 그림은 IE 7을 사용하여 블로그에 접속한 화면입니다. IE 8과 비슷한데 사이드바가 사라졌습니다. 사이드바 공간은 남았고 알맹이는 본문 밑으로 내려가서 달립니다. 모바일기기에서 접속한 상태와 같습니다.

애드센스 광고는 IE 8처럼 상단 1개, 본문 하단에 1개 배치됩니다.

 

마지막으로 모바일기기에서 접속한 화면입니다.  역시 최상단 메뉴바는 블로그 이름과 메뉴모음? 거시기가 한 개 우측에 보이고 바로 본문 제목 줄, 그리고 애드센스 상단 광고 1개가 표시된 후 본문이 본격적으로 나타나고 있습니다.

 

 모바일에서 표시되는 애드센스 광고는 전부 세 개입니다. 물론, 전부 애드센스 반응형 코드를 사용했고요, 상단 1개, 본문 하단에 1개, 그리고 지금 맨 밑에 보이는 광고는 이 글을 쓰면서 조금 내렸는데 |모바일기기에서 광고가 2개 나란히 보이면 안 된다는 소문이 있어서| 댓글, 트랙백 바로 밑에 배치되었습니다.

 

그리고 모바일기기로 제 블로그에 접속하면 사이드바는 상단의 카테고리와 인기글 정도만 표시되도록 설정했습니다. 아무래도 로딩 속도에 부담이 크네요.

애드센스 배치나 설치 과정은 제 블로그 소스 (블로그가 우측 버튼이 막혀 있어도 브라우저 메뉴 - 보기 -소스를 선택하면 확인 가능합니다.)를 확인하시면 아실 것 같고요,

 

사실 애드센스가 아니라면 데스크톱에서는 반응형 스킨을 사용하고 모바일에서는 티스토리 모바일 스킨으로 설정하는 것이 가장 깔끔하고 로딩 속도도 좋아 보입니다.

물론, 저는 이제 반응형으로 계속 갈 생각입니다. 어짜피 그쪽으로 흘러갈 테니 말입니다.