이미송.com 소소한 리뉴얼 – 반응형 웹(디자인)으로 레벨 업 한 이야기.

어쩌다 마주친 디바이스에서.
그대 원하는 사이트를 걍 띄워 본 적이 있던가.
글씨가 너무 작아 톡톡 두번 치고 또 창을 키워서 요래조래 손가락 움직여 가며 글 읽었던 적 다들 있는가.

아이폰에서 내 블로그 글이 너무나 잘게 보여 내뱉었다.
모바일에서 너무 작게 보이는 글씨가 거슬려서, 리미송닷컴도 반응형으로 해줘!
난 소소하다고 표현했지만 작업자는 아니었을 것 같기도.

그래서 PC에서는 이렇게

타블렛(아이패드, 갤탭 등) 에서는 이렇게

모바일에서는 어떻게 보일까요. 아하하하. 귀찮아서 이미지 없음.

딱히 요래저래 디자인을 바꾼 부분은 없지만
단순한 레이아웃 변경으로 어쩌다 마주친 각종 디바이스에서 보기 편하게 나온다는 사실.

지금 PC로 보고 있다면, 창 크기를 점점 줄여보면 알 수 있어요.

사실 이번 이미송닷컴 리뉴얼은 플렉서블에 가깝지, 완벽한 반응형디자인 이올시다 라고는 절대 못하겠음.
게으르고 욕심많은 내가 “걍 해줘.” 라고만 했지, 모바일에선 타블렛에선 이렇게 저렇게 고렇게 해줘! 등의 디자인 설계 흔적은 없기 때문이다. 그치만 참 알아서 잘 해 주셨네요 Hyla님.

모바일은 무조건 한줄로 떨어뜨리지 뭐, 타블렛? 그건 두 줄로 하던가.
요런 생각을 기반으로 하는 건 단순한 플렉서블이다. 줄 세워진 모양 그대로 자리만 바꾸는 격.

PC환경보다 작은 디바이스에서 같은 사이트를 보기 쉽고 편하게 보여지게 할 것인가의 고민이 서려 있는 반응형 웹 디자인 설계는, 모바일에서 터치할 수 있는 영역 크기와 컨텐츠 영역은 물론 로고, 버튼 등에 대한 가변적 요인을 모두 염두해 둔 디자인을 적용한 사이트이다.

반응형웹디자인의 다양한 사례는 http://mediaqueri.es/ 에서 맘껏 보시길.

국내 웹 에이전시 여기저기서 잘 구현하고 있는 것 같고, 해외에선 이미 활발하게들 적용하고 있는 듯 한데.
아직 css3 지원이 원활히 되지 않는 (꼭 집어 ie환경에 최적화 되지 않은) 부분이 없잖아 있기에 100% 모든 환경에 맞출 순 없다는 것이 아쉬운 점.

소소한 리뉴얼을 발판 삼아 글도 좀 바지런히 써야 할 텐데,
게을러 터져서 큰일이다.