반응형 블로그 스킨으로 전환합니다

어제(4월 7일) 저녁 즈음부터 블로그 전체에 반응형 스킨을 적용하기 시작하였습니다. 기존 PC 블로그 스킨을 상당히 오래 사용하기도 했고, 어느 순간부터 모바일 환경에서 방문하는 분들이 일일 방문자의 대부분을 차지하게 되어 PC에서나 모바일에서나 동일한 형태의 컨텐츠를 제공하기 위해 반응형 블로그 스킨으로 전환하게 되었습니다. 블로그 포스팅은 PC에서 하는데, 대부분의 방문자분들이 PC에서 만든 형태의 컨텐츠를 보지 못하니 어쩔 수 없는 선택이 아닌가 생각합니다. 참고로, 현재 스킨은 티스토리 측에서 기본으로 제공하는 '#2 스킨'을 기반으로 하고 있습니다.

PC 환경 기준 전체 화면 모드(1920x1080 해상도)에서의 메인 화면입니다. 기존 PC 블로그 스킨에서 만들어진 메인 화면이 반응형 스킨에 전혀 대응하지 못하는 관계로 그냥 없애버렸습니다. 단순히 최근 작성된 글들만 보여줘서 뭔가 허전한 거 같긴 한데, 개선 방법을 찾아봐야 될듯합니다.

왼쪽은 전체 화면에서 가로의 폭을 좀 줄였을 때의 메인 화면입니다. 왼쪽에 있었던 헤더 이미지가 위쪽으로 이동했습니다. 가로세로 비율이 대략 6:5일 때 저렇게 변화화는 듯합니다. 그리고 가로의 폭을 좀 더 줄이면 메인 화면이 오른쪽과 같이 변화합니다. 스마트폰에서 제 블로그의 메인 화면에 진입할 때 오른쪽과 같은 모습을 보게 될 것입니다.

다음으로 본문 출력 화면입니다. 반응형 블로그 스킨으로 전환하면서 본문의 폭이 크게 늘어났는데(PC 환경 기준), 기존 스킨에서 포스팅했던 흔적이 남아 뭔가 어색해 보입니다. 본문의 폭이 늘어난 만큼 글자의 크기도 커져서 본문을 읽는데 불편함은 없을 거라 생각합니다. 그리고 헤더 이미지 좌측 상단의 합동 기호(≡)와 같이 생긴 것을 클릭하면...

이런 식으로 사이드바 메뉴가 펼쳐집니다. 반응형 스킨답게 본문 영역의 폭이 알아서 조정됩니다. 깨알같이 숨어 있던 헤더 이미지의 일부가 더 드러났습니다. 스킨이 깔끔한 게 상당히 마음에 듭니다.

마지막으로 스마트폰에서 제 블로그에 접속할 때의 화면입니다 (네이버 앱 기준). 좌측을 기준으로 첫 번째 스샷은 메인 화면, 두 번째 스샷은 본문 출력 화면, 세 번째 스샷은 (좌측 상단의 합동 기호(≡)를 터치했을 때의) 메뉴 화면입니다. 이번 포스팅은 여기서 마무리하고, 앞으로 새로 단장한 블로그에서 더욱 풍성하고 다양한 컨텐츠로 찾아뵙겠습니다. 감사합니다.