반응형 웹디자인(responsive web design) 이란 용어에 대하여

반응형 웹디자인(responsive web design)이란 것이 웹쪽에 최근 화두(?)인 것 같습니다.
요지를 보면, 웹사이트를 보는 디바이스에 따라 웹사이트가 “반응하여” 그에 적합한 디자인을 보여 준다는 개념입니다. 그리고 기술적으로는 이것이 CSS3의 미디어쿼리(Media Queries)가 생겨서 가능해졌다고 이야기들을 하는 것 같습니다.

음….
뭔가 수상하다…

그럼 HTML5나 CSS3이전까지 기술적으로 저런 것이 불가능했단 말인가?

이전에도 분명히 브라우저별로 대응하는 웹사이트 및 화면크기 또는 플러그인등의 기능을 검출하여 브라우저 환경에 대응하는 웹사이트는 수도 없이 많았습니다.
그리고 기본적으로 이는 미디어별로 CSS를 분리하는 방법을 사용하는데 이는 CSS3만의 새로운 개념도 아니고 애시당초 CSS(Cascading Style Sheets)란 것이 생길 때, “컨텐츠와 디자인적 요소를 분리”한다는 철학이 있었고 그에따라 미디어별로 CSS를 교체한다는 개념/적용은 이미 십수년전부터 있어왔던 사실이죠. 고로 “브라우저에 반응”한다는 것은 예전부터 해왔던 작업입니다.

기술적으로도 HTML5이나 CSS3를 사용하지 않고도 충분히 “반응형” 웹사이트는 제작 가능합니다. 단지 JavaScript나 서버기술도 필요할 경우가 있으므로 조금 불편할 따름이죠. 전세계의 수많은 HTML Coder나 고수 웹디자이너들은 이미 훨씬 이전부터 “반응형” 웹사이트에 머리 아파하며 만들어 왔던 것입니다.

또하나 “반응형 웹사이트”가 새로운 개념이라 이야기하시는 분들을 보면, “유동적 레이아웃(fluid layout)”을 신개념으로 말씀하시는데 이것도 틀린 말입니다. 이 것 역시 상당히 오래된 개념입니다. 윈도우 어플리케이션에서도 창크기에 따라 유동적으로 변하는 레이아웃이 있으며, 어느새 “공공의 적”이 되어버린 Flash기술의 Flex나 안드로이드의 기본 UI등등 모두 절대 레이아웃이 아닌 상대적/유동적인 레이아웃이 기본입니다. 거슬러 올라가면 DTP나 e-Book의 “Reflow”도 동일한 개념입니다. 조금 비꼬아 이야기하면 그동안 테이블로 코딩하셨던 분이 상대적 레이아웃으로 변경하시며 그 유연함에 놀라시는 과정에서 생겨난 “낡은 신선함”뿐이 아닐까 생각됩니다. (이 역시 제가 만나본 고수 디자이너 분들은 예전부터 자유자재로 사용 해왔습니다)

browserhacks.com

브라우저핵 닷컴, 이런 류의 팁은 이미 1990년대부터 공유되어 왔고 그 이유를 거꾸로 생각하면,
HTML코드는 유지하며 스타일만을 수정하여 각각의 브라우저에 대응하려는 “반응형”웹페이지를 만들기 위함이었죠.

 

그러면, 이제와서 굳이 “반응형(responsive)”이라는 그럴듯한 수식어를 붙이는 이유는 무엇일까요?

제 생각에는 “웹2.0” 버블열풍처럼 관련 업계의 영업적 수식여구가 아닌가 합니다.
웹페이지를 거대한 바둑판으로 생각하여 테이블태그로 채워왔던 것도, 웹화면을 커다란 캔버스로 생각하여 그래픽적인 요소만 부각시키고, 불필요한 Flash 이펙트로 도배하던 하던 것도 한국의 그쪽 업계였기에 이제와서 “반응형..”이라하며 트랜드화 하는 것을 저는 그리 탐탁치 않게 보고 있습니다.

정리하면 기본에 충실해야 하는 것이 중요하지 않을까 싶습니다.
애시당초 HTML(HyperText Markup Language)은 HyperText라고 규정한 컨텐츠를 표시하기 위한 것 입니다. 사이트에 따라 예외도 있습니다만, 기본적으로 웹사이트는 텍스트를 중심으로 하는 정보가 최우선 항목이며, 최근 다시 등장하는 “의미론적 웹(Semantic Web)”이나 “검색엔진 최적화(SEO)”등의 개념도 HTML을 그 원래 용도(정보를 담는)에 충실하게끔 구성하는 것이 기본이 됩니다.
엄청난 시각 미디어가 난무하는 세상에서 디자인적 요소를 무시하자는 것은 아닙니다. 단지, 사이트를 만들때는 표현하고자 하는 컨텐츠를 충분히 고민하고 그 구조를 생각하고 생각한 컨텐츠(문서) 구조에 따라 정확하고 적절하게 HTML을 만들어야만, 그 디스플레이를 담당하는 CSS도 훨씬 기능하기 쉬워지고 “N-Screen” 등 각종 확장된 개념에도 유연하게 대응 가능 하리란 생각입니다. 더군다나 HTML5는 문서구조를 이전보다 훨씬 더 세밀하게 구조화 할수 있는 “의미적인” 태그가 많이 생겼습니다.

Canvas/WebGL이나 WebSocket등의 진짜 새 기술이 아닌 바에야, 코딩상에서 느껴지는 새로움은 대부분 잘못된 HTML+CSS코딩 관행으로부터 이제서야 원칙적/정상적 코딩으로 돌아오고 있기에 느껴지는 것이지, HTML5나 CSS3가 가져다주는 새로운 선물이 아니란 것입니다. (물론 HTML5의 코딩상의 장점이나 개선점도 많습니다)
모바일웹의 급격한 부상에 급격한 변화가 진행형이 되었지만, 이전에도 있어왔고 앞으로도 당연히 해야할 새로운 미디어에 대한 대응작업과 기술에, “반응형(responsive)”이란 그럴싸한 이름으로 트랜드화하기 이전에, 기본에 충실하며 대응하면 좋겠습니다.


QR Code