오랫만에 블로그 스킨 변경, 반응형 웹 스킨으로 바꾸다
제 블로그를 자주 들어왔던 분이라면 뭔가 달라졌다는 것을 느꼈는지 모르겠습니다.
수년간 사용하던 블로그 스킨을 바꾸기로 마음먹고 1주일 정도의 시간을 투자하여 스킨을 바꿨습니다.
이번 스킨 변경의 가장 큰 이유는 '반응형웹, 반응형 스킨'입니다.
반응형 스킨은 각기 다른 기기, 다른 해상도 사용자들에게 비슷한 화면을 제공하기 위해 고안된 것으로 최근 스마트폰이나 태블릿 등의 기기 보급이 늘면서 주목받고 있는 기술입니다.
즉, 넓은 바탕화면의 PC에서 제 블로그를 접속하면 이러한 형태의 레이아웃으로 보이지만,
화면이 좁은 PC에서 접속할 경우, 혹은 마우스로 브라우저의 넓이를 줄이게 되면, 브라우저의 넓이에 따라 블로그의 텍스트나 이미지 배열이 바뀌게 됩니다.
브라우저의 넓이를 더 줄일 경우, 텍스트의 줄넘김이 바뀔 뿐 아니라 왼쪽에 있던 사이드바가 화면 하단으로 붙게 됩니다.
대부분의 스마트폰에서는 아마 이런 형태로 보이게 될텐데요, 기존 티스토리 스킨이 모바일 접속자를 위한 별도의 주소를 갖는 모바일 스킨이 제공되는 반면, 반응형 스킨에서는 같은 주소로 화면 형태만 바뀌어 접속됩니다.
사실 제 블로그의 접속 기록을 살펴보면 아직 95%이상이 PC를 이용하여 접속하며 스마트폰이나 태블릿을 이용해 접속한 경우는 3~4%에 불과하지만 스마트 기기를 이용한 사용자의 비율이 점차 높아지고 있으며 앞으로 그 추세는 계속 될 것이란 생각에 반응형 스킨으로 바꾸어 봤습니다.
물론 제 블로그의 모바일 페이지 중 상당수가 네이버나 다음과 같은 포털의 모바일 검색 결과에 등록이 되어 있고 반응형 스킨을 적용할 경우 모바일 웹 페이지의 URL이 바뀌게 되어 고민을 하기도 했지만, 언젠가는 바꿔야할 것, 하루라도 빨리 작업하는게 낫겠다는 결론을 내렸습니다.
제 블로그에 사용한 반응형 스킨은 최근 티스토리 사용자들 사이에서 각광받고 있는 마크쿼리님의 스킨 중 Spider's Web을 적용했습니다.
아울러 기존 사용하던 스킨의 상단이미지나 화면 구성과 최대한 비슷하게 맞춰보려 애썼는데, 아직 구석구석 다듬어야 할 부분이 많지만 큰 틀만 보면 꽤 만족스러운 결과물을 얻었습니다.
스마트 기기마다, 화면 설정따라 달라지는 화면 구성
반응형 웹을 적용한 제 블로그는 접속하는 기기의 가로 너비에 따라 레이아웃이 바뀌게 됩니다.
그런데, 스마트폰의 해상도 역시 제각각이다보니 스마트폰의 종류나 태블릿의 종류에 따라 화면 구성이 조금씩 바뀌게 되는데요, 심지어 제 갤럭시S3의 브라우저 설정만 바꿔도 다음과 같이 화면 구성이 달라지게 됩니다.
왼쪽은 갤럭시S3의 기본 브라우저의 화면 확대 옵션을 '작게'로 설정한 것이고 오른쪽은 화면 확대 옵션을 '보통'으로 설정한 화면입니다.
화면의 글꼴 크기가 달라지고 더불어 화면의 전체적인 느낌이 다르죠?
갤럭시S3 브라우저의 기본 값은 '보통' 화면인데, 한 화면에 많은 양의 정보를 보고 싶은 저는 화면 설정을 '작게'로 설정해 사용중입니다.
갤럭시S3의 브라우저 화면 설정을 바꾸려면 브라우저를 실행한 상태에서 갤럭시S3 왼쪽 하단의 메뉴 버튼을 누르고 '설정' 항목을 클릭합니다.
설정 메뉴에서 다시 '고급설정'-'화면 확대/축소' 메뉴를 들어가면 화면의 확대, 축소를 설정할 수 있습니다.
작게/보통/크게 의 세 가지로 나뉘는데 한 화면에 보다 많은 정보를 보고 싶다면 '작게'로, 큼직큼직한 글씨를 선호한다면 '보통', 혹은 '크게'로 설정하면 되겠습니다.
다음의 반응형 웹 테스트 서비스 - 다음 트로이
사실 마크쿼리님의 반응형 웹 스킨이 워낙 잘 만들어져 있어 생각보다는 어렵지 않게 스킨 변경 작업을 진행할 수 있었습니다.
생각같아서는 마크쿼리 반응형 스킨을 티스토리에 적용한 과정을 다루고 싶지만 저는 웹디자인이나 HTML 코딩에 문외한이라 짜집기, 주먹구구식으로 부분부분 입맛에 맞게 고치는 수준이다보니 따로 언급하기는 어렵습니다.
다만, 티스토리 블로그 스킨을 반응형으로 여러차례 삽질을 하던 중, 그 와중에 반응형 웹에 관심있는 사람이면 흥미있을 만한 서비스를 발견하여 잠깐 언급하려고 합니다.
접속자의 PC나 스마트 기기의 해상도에 따라, 혹은 브라우저의 확대/축소 설정에 따라 화면 레이아웃이 달라진다는 것은 사이트, 혹은 블로그를 운영하는 입장에서 꽤 중요한 문제입니다.
때문에 내가 주로 보는 해상도, 혹은 스마트폰에 맞춰 블로그 스킨을 설정할 경우 다른 기기에서 의도하지 않게 화면이 깨지는 등의 문제가 발생할 수 있습니다.
때문에 되도록 다양한 해상도, 다양한 스마트 기기에서 블로그의 레이아웃에 문제가 없는지 확인해야 하는데, 가장 좋은 방법은 여러가지 기기에서 브라우저를 띄우고 직접 확인해보는 것이겠지만 현실적으로 모든 기기에서 직접 확인하기는 어렵습니다.
하지만 다음에서 제공하는 반응형 웹 테스트 서비스인 다음 트로이를 이용하면 다양한 모바일 기기에서 내 블로그, 혹은 웹사이트가 어떻게 보이는지 확인할 수 있습니다.
브라우저를 열고 다음 트로이에 접속하면, 커다란 트로이 목마가 화면에 뜨고 옆에는
'기기별 기본브라우저의 실제크기 화면을 제공합니다. 기기 또는 운영체제별 특성, 버그는 실제 기기를 통해 확인하세요'라는 안내 문구가 뜹니다.
다음 트로이의 첫 화면에는 모바일 다음이 떠 있는 상태로 표시되는데 다음 트로이 상단 주소창에 확인할 웹페이지 주소를 입력하고 [Go] 버튼을 클릭합니다.
제 블로그 주소를 입력했더니 이러한 화면 레이아웃이 뜹니다.
다음 트로이의 기본 해상도는 가로 850 픽셀의 화면으로 보여지는데, 생각보다 컨텐츠의 비율이 적은 느낌이 듭니다.
다음 트로이의 오른쪽 세로 목록에는 삼성 갤럭시 시리즈를 비롯한 다양한 스마트폰들의 목록이 있습니다.
블로그, 혹은 웹사이트를 띄운 상태에서 스마트폰 이름을 클릭하면 해당 기기의 해상도에 맞춰 화면이 어떻게 보이는지 쉽게 확인할 수 있습니다.
다음 트로이의 왼쪽 목록을 더 내려보면 아이폰 시리즈도 나타납니다.
아이폰5, 5s를 클릭하면 화면 레이아웃이 또 다른 것을 알 수 있습니다
스마트 기기들의 특징 중 하나인, 액정을 가로, 세로로 돌렸을 때 바뀌는 화면도 하단의 [Change Orientation] 버튼을 누르면 쉽게 확인할 수 있습니다.
제 경우 여러 종류의 기기에서 어떻게 화면이 보이는지 확인하는 중요한 이유 중 하나가 애드센스 광고입니다.
애드센스를 운영중인 블로그, 특히 모바일 페이지에서 애드센스 광고가 어떻게 보이는지 신경써야 합니다.
애드센스 정책 위반 규정 중 '스크롤해야 볼 수 있는 부분에 콘텐츠를 표시하는 사이트 레이아웃'이란 항목이 있습니다.
내가 평소 보는 화면에서는 애드센스 광고가 컨텐츠와 적절한 비율을 이루며 표시되더라도 해상도가 낮은 PC, 혹은 스마트기기에서 보게 되면 첫 화면 전체에 애드센스 광고가 뜨고 사용자의 컨텐츠는 스크롤 해서 내려야 볼 수 있는 경우, 애드센스 정책 위반에 해당합니다.
최근 모바일 페이지에 애드센스 광고를 넣을 수 있게 되면서 컨텐츠가 시작되는 부분에 넣어둔 애드센스 광고 코드가 화면 전체에 표시되면서 정책 위반으로 지적받는 경우가 종종 있다고 합니다.
애드센스 운영자라면 내가 이용하는 PC의 해상도나 모바일 기기에서만 화면을 확인하지말고 되도록 여러 종류의 해상도와 기기에서 내 블로그를 확인하여 첫 화면에 애드센스 광고만으로 채워지지 않는지 꼼꼼히 확인할 필요가 있습니다.
다음 트로이 서비스, 실제 기기와 100% 일치하지는 않아
개인적으로 내 블로그, 혹은 웹사이트가 운영체제나 브라우저, 해상도에 따라 다르게 보일 수 있고 이를 확인하는 것은 무척 중요한 일이라 생각합니다.
가장 자주 언급되는 애드센스에 대한 예를 들었지만, 애드센스 때문이 아니더라도 내가 사용중인 브라우저에서는 별 문제가 없는데 다른 브라우저로 열어보면 화면이 깨지는 문제가 발생하기도 합니다.
내가 의도한 화면 디자인을 다른 기기, 다른 운영체제, 브라우저에서도 그대로 보여주는 것을 중요하게 생각하는터라 되도록 웹표준에 맞는 코드를 이용하고, 웹폰트를 적용하고, 다른 브라우저에서 내 블로그를 확인할 수 있는 서비스 등을 이용하여 나름 꼼꼼히 확인해 왔는데, 다음 트로이는 반응형 웹으로 디자인을 바꾸고자 하는 사람에게 많은 도움이 될만한 서비스입니다.
2012/06/25 - 어도비가 내 블로그를 체크해준다 - Adobe BrowserLab
2012/06/22 - 깔끔한 내 블로그, 다른 브라우저에선 깨질 수 있다?
하지만, 다음 트로이 접속시 첫 화면에 뜨는 안내문구, '기기별 기본브라우저의 실제크기 화면을 제공합니다. 기기 또는 운영체제별 특성, 버그는 실제 기기를 통해 확인하세요'와 같이 100% 일치하는 화면을 보여주지는 못하는 군요.
일례로 다음 트로이에서 갤럭시S3를 선택해 본 블로그 레이아웃과 실제 갤럭시S3에서 열어본 블로그는 차이가 있습니다.
평소 브라우저의 해상도를 '작게'로 설정해서 그런가 싶어 브라우저의 설정을 기본값인 '보통'으로 설정했는데도 다음 트로이에서 보여주는 화면과 갤럭시S3에서 보는 화면은 차이가 있습니다.
꽤 큰 차이가 있다 싶어 갤럭시S3의 여러 가지를 살펴보다가 갤럭시S3의 글꼴을 '기본' 대신 '애플 민트' 글꼴로 바꿔 쓰는 중이란 사실을 떠올리고 갤럭시S3의 글꼴을 '기본'으로 되돌리니 본문 화면 구성은 거의 비슷졌습니다.
하지만 제목의 레이아웃은 여전히 조금 차이가 있네요.
실제와는 약간의 차이가 있을지라도 다양한 스마트기기에서 내 페이지가 어떻게 보이는지 확인할 수 있는 다음 트로이는 무척 유용한 서비스임에 틀림없습니다.
'컴퓨터 활용, 최적화 > 티스토리' 카테고리의 다른 글
| view 서비스 종료. 다음 뷰와 함께 시작했던 티스토리 블로그를 돌아보니 (6) | 2014.06.29 |
|---|---|
| 티스토리 블로그 포스팅의 네이버 검색누락 확인 방법과 네이버 검색반영 요청 방법 (20) | 2014.03.26 |
| 애드센스 은행 계좌 송금 이용 후기, 편리하지만 늘어난 송금 수수료 (14) | 2014.03.01 |
| 애드센스 수익금 웨스턴 유니온 지급 불가, 애드센스 수익금의 계좌 설정 방법 (24) | 2014.02.16 |
| 애드센스 수익금 지급용 웨스턴 유니언 계좌 수취인 이름 수정 방법은? (16) | 2013.12.01 |
- 컴퓨터 활용, 최적화/티스토리
- 2014. 3. 3. 16:06
댓글 :: 질문 댓글은 공개글로 달아주세요. 특별한 이유없는 비밀 댓글에는 답변하지 않습니다