적응형웹

적응형 웹(Adaptive Web Design AWD)이란 몇 개의 해상도를 정의하여 HTML 및 CSS코딩시 브라우저가 범위 사이즈에 속하면 그에 따라 정의된 스타일로 표현한다. 적응형 웹은 PX단위를 사용하여 각 디바이스마다 라기 보다는 정해진 해상도에 적응된 형태로 화면에 그려진다. 그래서 해상도가 달라지면 전혀 다른 레이아웃과 디자인을 보여주기도 한다.

'적응형 웹'이라는 용어는 Aaron Gustafson이 2011년 출간한 그의 책 Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement를 통해 처음 알려졌다. 그는반응형 웹 개념을 포함하는 포괄적인 개념으로 적응형 웹을 설명했으나, 국내에서는 두 개념의 기술적인 부분에 초점이 맞춰져 통용되고 있다.

특징

기존의 사이트를 재구출할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다. 화면을 조금씩 조절할 때, 디스플레이가 적절하게 배치되지 않는 경우가 있다. 정해진 기준을 벗어났기 때문에 계속 수정해 나가면서 다시 브라우저의 크기에 맞는 화면배치를 볼 수 있다. 이러한 단점에도 적응형을 쓰이는 이유 중에 하나는 콘텐츠의 양과 형식이다.

콘텐츠 양이 많을 경우

국내 시스템은 많은 정보를 압축해 한 화면에 표현하는 것을 선호한다. 단순한 웹페이지나 홈페이지의 경우는 그나마 콘텐츠가 단순하ㅏ지만 소셜커머스나 기업 업무시스템들은 콘텐츠 양이 많고 복잡한 화면들이 대부분이다. 따라서 미디어 쿼리 등을 이용한 단순한 레이아웃 변경 방식인 반응형 웹으로 콘텐츠의 배치와 배열을 정리하는 것은 쉽지 않는 반면, 적응형 웹은 기획 첫 단계부터 기기에 알맞는 해상도를 고려한다. 화면에 담길 콘텐츠의 양을 조절하고 기기에 최적화된 디자인을 함으로써 가독성을 높이는데 상대적으로 자유롭다.

그리드 형태의 데이터 표현이 비번한 경우

반응형 웹은 그리드(Grid)형태로 데이터를 표현하는 것이 쉽지 않다. 행(row)과 열(clumn)을 표현하는 그리드에서 행의 개수는 비교적 익숙하게 사용하는 상하 스크롤로 표현하지만, 해상도에 따라 열의 데이터가 안보이는 경우도 발생하고 가로축으로도 스크롤이 생겨서 정보를 확인하는데 불편함을 야기한다. 하지만 적응형 웹은 디바이스 화면 사이즈에 맞는 열의 개수를 감안한 디자인할 수 있으므로 상하좌우로 스크롤바가 생기는 불편함을 없앨 수 있다.

시스템 성능이 중요한 경우

반응형 웹은 기기별 CSS스타일과 개발 소스들을 전부 로딩하기 때문에 시스템 로딩 속도나 성능에 영향을 주는데 비해, 적응형 웹은 제작한 기기에 해당하는 CSS스타일과 개발 소스만 로드하기 때문에 상대적으로 성능 이슈가 적다. 이처럼 적응형 웹은 기기별 맞춤형 기획을 진행하고 및 개발하는 방식을 택해 반응형 웹의 아쉬운 부분들을 보완한다. 대형포털사이트 네이버나 다음 역시 PC와 모바일 페이지의 URL 주소를 별개로 두고 기기에 따라 높은 만족도의 사용자경험을 제공하고 있는 것이다.