티스토리 뷰


(Image Source : http://todaymade.com/blog/responsive-content-management/)


 인터넷이 데스크탑만의 전유물이 아닌 모바일로 영역을 넓혀가면서 발생한 일이 있습니다. 기존의 웹 페이지는 모바일 디바이스에서 제대로 표현이 안된다는 점이죠.

 물론 이에 대한 대책으로 따로 모바일 페이지를 만들거나 하는 식으로 최근엔 많은 변화가 이루어졌습니다만 개인 홈페이지 관리자에게는 따로 모바일 페이지를 제공하는 것 뿐만 아니라 이걸 유지보수 한다는 점이 상당한 부담으로 다가왔습니다. 이를 해결하기 위해 반응형 웹이 등장했습니다.


반응형 웹 디자인(Responsive Web Design)이란 무엇인가?

 반응형 웹 디자인(RWD)이란 디스플레이의 크기에 따라 웹 페이지의 사이즈가 가변하도록 디자인 한 것입니다. 개인 홈페이지를 한번쯤 만들어 본 분이시면 본인 홈페이지에 어울리는 최적의 해상도가 있을 겁니다. 본인이 생각한 최적 해상도를 고려하고 제작하는데, 문제는 모바일 디바이스에 따라 디스플레이의 크기가 다르기 때문에 정상적으로 출력이 안되며, 된다 하더라도 가독성에 심각한 문제가 생깁니다. 이에 각 디스플레이의 사이즈에 맞춰 유동적으로 변하는 웹 페이지의 구축이 절실해짐에 따라 대두된 것이 반응형 웹입니다.

 현재 보고 계시는 이 블로그도 반응형 웹 디자인에 기반한 Fastboot 이라는 스킨을 사용중입니다. 부트스트랩 기반인데, 인터넷 창의 가로 길이를 줄여보시면 모바일 페이지로 전환됩니다. W3C 권고안인 CSS 내에 @media(미디어 쿼리)를 이용하는 방식으로 디바이스 디스플레이의 사이즈에 따라 스타일을 따로 지정해 줄 수 있습니다.

 최근 떠오른 웹 디자인 프레임워크인 Bootstrap(사실 떠오른지는 꽤 되었습니다만)도 특징으로 반응형 웹 디자인을 내세우고 있습니다.


반응형 웹 디자인(RWD)의 간단한 특징

1. 유동형 그리드 레이아웃 (Fluid Grid Layout)

 반응형 웹 디자인의 최고로 중요한 특징입니다. 고정형 수치인 px 단위가 아닌 em, % 즉 fluid한 수치를 사용합니다. 말 그대로 반응하기 위해서입니다. 고정폭을 준다고 가정하면 디스플레이의 크기가 변할 시 물론 반응형 웹 디자인이 되지 않는 것은 아니지만 굉장히 번거로워 집니다. 일일히 상황에 맞는 디자인을 세팅해줘야 합니다. 그러나 모바일 디바이스의 디스플레이 크기가 매우 작아 유동형 그리드 레이아웃을 적용하기 곤란할때는 고정형 수치를 써주어야 할 경우도 있습니다.


2. 미디어 쿼리 (Media Query)

 CSS3에서 지원하는 강력한 기능입니다. @media를 사용하여 스타일시트를 각각 다르게 적용할 수 있습니다.

@media screen and (max-width: 300px) {
    #container { width: 200px; }
}

@media screen and (max-width: 1000px) {
    #container { width: 800px; }
}

이런 식입니다. 이 것은 위의 유동형 그리드 레이아웃 항목에서 후술한 고정형 수치를 사용한 부분입니다. 자세한 예제는 이 곳(http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)에서 테스트 하실 수 있습니다.


뷰포트는 사파리 브라우저에서 지원하는 기능인데, 최근 다른 모바일 브라우저도 지원하기 시작했습니다. 허나 W3C에서는 CSS 내에서 뷰포트를 명시하는 것을 권하며, meta로 뷰포트를 정의하는 것은 표준화에 어긋납니다. 정확히 말하자면 아직 표준화가 되지 않았지만요.


웹 추세에 따라가려면 반응형 웹 디자인(RWD)에 대한 숙지는 필수라고 보여집니다. 이젠 본인의 홈페이지나 블로그에 모바일 디바이스 사용자가 분명 접속할 것이기 때문이죠. 어려움을 느끼시는 분들은 부트스트랩(Bootstrap)이나 워드프레스(Wordpress)를 사용하면 한결 편하게 디자인할 수 있습니다.

댓글
  • 프로필사진 BlogIcon 바다야크 반응형 웹디자인은 매우 부럽지만, 문제는 IE6 같은 오래된 웹브라우저에서 제대로 작동이 될까 염려 스럽습니다. 웹브라우저 버전에 따라 이전 방식과 반응형이 융통성있게 사용될 수 있으면 더욱 좋겠습니다. 2015.01.13 20:31 신고
  • 프로필사진 BlogIcon 천유하 네 맞습니다^^; 하위 브라우저의 지원, 특히 CSS3을 지원조차 안하는 구 브라우저에서는 반응형 웹 디자인이 전혀 소용이 없게 되어버리죠. 티스토리의 한계로 유연성 있는 페이지의 구현이 되질 않는다는게 참으로 아쉽습니다.

    최신 브라우저를 모두가 쓰게되는 그 날이 오면 이런 걱정이 없어질텐데 말입니다 ㅎㅎ
    2015.01.14 00:36 신고
댓글쓰기 폼