블로그에 Responsive CSS Framework를 적용하다

Edited by Leun Kim

codevisually_sept_07_small

최근에 다양한 스크린 사이즈를 가지고 있는 모바일 기기들을 위해서 CSS를 좀 수정해 보았습니다. 이 전에 3일간은 WPTouch 라는 플러그인을 이용한 반응형(responsive) 웹페이지였습니다만, 꽤나 많은 문제들이 있었기 때문에, 또 mathskykite님의 blog의 영향을 크게 받아 결국 이렇게 되었군요. 아직 완벽하게 완성하진 못했지만, 대충 노가다로 아래와 같이 가로 폭에 따라서 디자인과 글자 크기 등이 변하는 모습을 볼 수 있습니다. 먼저 어느정도의 가로폭까지는 되도록 전체를 보여주고 싶기 때문에 변화를 주지 않다가, 꽤 많이 좁아졌다 싶을 때 사이드바와 하단 Footer를 없앴습니다. 그 후에는 점차적으로 글자 사이즈와 디자인, 댓글창이 변하게 됩니다.

그런데 녹화 화질은 왜 이렇게 구려진거지..흑흑



소스는 본래 twenty eleven 스킨에서 제공했었던 것을 수정하여 사용했습니다. 처음 4스텝의 코드는 다음과 같습니다.

Responsive CSS framework

제가 반응형 웹(모바일 기기를 탐지하여 전체적인 웹 디자인이 변하는)을 버리고 CSS Framework를 통한 대응을 선택한 이유 몇 가지는 다음의 것이었습니다.

1. CSS Framework는 별 다른 설정 없이 자신의 웹페이지의 디자인, 기능들을 수정하지 않고, 그것을 그대로 유지하면서 다양한 스크린 사이즈를 가진 모바일 기기들에게 제공할 수 있습니다.

2. 반응형 웹이 현재 70종이 넘는 다양한 스크린 사이즈를 가진 다양한 모바일 user-agent들을 모두 정확히 탐지해 낼 수 없습니다. 가령 아이폰 시리즈의 경우 user-agent로 “iPhone”이라고만 인식시켜주면 되지만, 삼성의 갤럭시 폰의 경우 워낙 모델명이 많은데다 국가마다 모델 넘버가 다르기 때문에 약 50여종의 모델명을 전부 인식시켜 주어야 합니다. 거기다 더 문제는 휴대폰 회사가 이 둘 뿐만 있는게 아니라는 것이죠.

3. 스마트폰과 PC 중간의 수많은 “애매한” 스크린 사이즈에 대응하기 곤란합니다. 예를 들면 iPad 같은 사이즈가 있겠지요. 뭐 PC, iPad, 휴대폰 3종류의 스크린 사이즈밖에 없다면야 3개를 따로 만들면 그만이지만, 미래에는 스크린 사이즈의 종류가 더욱 급증할 것이기 때문에, CSS Framework야말로 최적이라 할 수 있겠네요.

4. 반응형 웹의 경우 새로운 스크린 사이즈와 새로운 기기들이 출시될 때 마다 웹을 손봐주어야 하는 번거로움이 있습니다.

그런데 아직 CSS에 미숙한지라 플러그인 등 세부적으로 손봐줘야 될 것이 아직 많이 남아 있군요 OTL.

 

 
I was born and raised in Daegu, S. Korea. I majored in electronics and math in Seoul from 2007 to 2012. I've had a great interest in math since freshman year, and I studied PDE in Osaka, Japan from 2012-2014. I worked at a science museum and HUFS from 2014 in Seoul. Now I'm studying PDE in Tokyo, Japan. I also developed an interest in music, as I met a great piano teacher Oh in 2001, and joined an indie metal band in 2008. In my spare time, I enjoy various things, such as listening music, blogging, traveling, taking photos, and playing Go and Holdem. Please do not hesitate to contact me with comments, email, guestbook, and social medias.



3 comments

  • 헤헤헤, 이렇게 점점 웹프로그래밍(?)의 세계에 발을 들이시는군요. 좋은 일입니다. 저도 요즘 이런 걸 배워보고 싶어서 종종 웹을 뒤져보고 있지요.

    … 물론 제 제1 목표는 자바스크립트로 구현되고 근대적인 풀이법이 탑재된 스도쿠 풀이 검색 알고리즘이지만요 -ㅁ-;; (파이썬으로 옮겨볼까 하다가 그냥 익숙한 언어로 회귀…)

    • sos440님 오랜만입니다! 이곳까지 먼 길(?) 와 주셔서 감사하네요. 요즘 이것저것 건드리는 맛으로 시간가는 줄 모르겠네요. 그러다 보면 어느새 날은 밝아있고.. 하..공부해야 되는데 OTL 그나저나 스도쿠 알고리즘 기대하고 있겠습니다!