반응형 웹과 적응형 웹

posted on2016.01.05 16:14:44 posted indesign, ozlog

반응형 웹이란 하나의 페이지가 유동적인 레이아웃으로 PC, 모바일, 태블릿 등 다양한 기기의 디스플레이 해상도에 맞추어 구성되는 웹 기술로서  % 단위를 사용하여 각 디자인의 폭에 유동적으로 반응하여 컨텐츠의 크기가 커지거나 줄어드는 것을 말합니다.
적응형 웹이란 정해진 해상도에 맞춰서 제작한 내용에 따라 화면이 구성되는 기술로서 브라우저가 미리 정해놓은 범위 사이즈에 속하여 그에 따라 레이아웃이 맞춰져서 보이는 것을 말합니다. 적응형 웹은 PX 단위를 사용하여 정해진 해상도에 적응한 형태로 화면에 표현되는 것이지요.

반응형 웹은 어떤 기기에서든 큰 불편 없이 브라우저를 볼 수 있지만 신상품을 수시로 업데이트 해야 하는 쇼핑몰처럼 방대한 정보를 보여주어야 하는 웹사이트는 오히려 불편할 수 있습니다. 반면에 적응형 웹은 레이아웃과 디자인에 있어서 비교적 자유롭지만 모든 기기의 화면에 맞추기는 어렵다는 단점이 있습니다.  %단위를 사용하여 디바이스의 해상도에 유동적으로 반응하여 컨텐츠가 달라지는 반응형 웹의 단점을 보완하여 나온 것이 적응형 웹입니다. 적응형 웹은 미리 정해놓은 해상도가 되면 정해진 레이아웃으로 변경됩니다. % 단위를 사용하여 유동적으로 변경되는 반응형 웹과는 달리 PX단위를 사용하므로 유동적으로 변하지 않고 정해진 해상도에 적응된 형태로 레이아웃이 나타납니다. 즉, 반응형 웹은 모든 레이아웃이 서로 영향을 주며 유동적으로 바뀌는 반면 적응형 웹은 해상도가 달라지면 각각의 해상도에 적응시켜놓은 전혀 다른 레이아웃과 디자인을 보여줄 수 있게 됩니다. 반응형 웹은 브라우저의 크기를 줄일 때마다 반응이 일어나 레이아웃의 변화가 생기지만 적응형 웹의 경우 특정 해상도까지 줄어들기 전에는 반응이 없다가 특정 해상도가 되면 레이아웃의 변화가 생깁니다.
반응형 웹의 경우에는 레이아웃의 위치나 디자인/크기가 어느 정도 일정하게 유지되면서 변경되어야하는 반면 적응형 웹은 각각의 해상도에 적응시키므로 레이아웃이나 디자인이 비교적 자유롭습니다.  하지만 수많은 모바일기기 해상도를 모두 적응시키기는 현실적으로 어렵기 때문에 디바이스마다 스크롤이 생기거나 레이아웃 변화에 역동적이지 않을 수 있다는 단점이 있습니다.