적응형 디자인

반응형(Responsive) vs. 적응형(Adaptive)

모바일 환경을 지원하는 웹 디자인은 크게 반응형(RWD, Responsive Web Design)과 적응형(AWD, Adaptive Web Design)으로 구분됩니다. 아래 표에서 볼 수 있듯이 적응형은 반응형에 비해 훨씬 더 많은 장점을 제공하지만 구현이 복잡하며 개발 기간이 긴 단점이 있습니다. WebSquare5는 간단한 속성 설정을 통해 적응형 웹 디자인을 쉽게 구현할 수 있습니다.

반응형(Responsive) 웹 vs. 적응형(Adaptive) 웹


Responsive

Adaptive

정의

  • CSS 미디어 쿼리를 이용하여 화면 크기, 창 크기, 해상도에 따라 전체 레이아웃을 변경

  • 웹 요소의 폭 및 열의 개수를 조정

  • 모든 장치에서 동일한 디자인을 제공

  • Breakpoint에 따라 웹 디자인을 사전에 정의

  • 장치 및 OS 종류에 따라 웹 디자인을 변경

  • 개발자가 각 장치 종류 별로 표시할 웹 요소 및 배치 형태를 결정

  • 장치 타입 별로 서로 상이한 최적의 디자인을 제공

적용 방법

  • 실시간으로 디자인을 변경

  • 장치 종류 및 OS 종류를 파악한 후 화면에 표시할 디자인을 결정

장점

  • 초기 디자인 작업이 용이

  • 유지보수가 용이

  • RWD보다 모바일에 더욱 최적화된 디자인 제공

  • 페이지 로딩 속도가 빠름 (즉각적으로 디자인 변경)

  • 장치 종류에 따라 디자인이 결정되기 때문에 최신 CSS를 지원하지 않는 저가형 구형 스마트 폰 지원 가능

  • 초기 로딩 시간이 짧음

  • 웹 페이지 반응 시간이 빠름

단점

  • 디자인이 복잡할 경우 모바일 환경에서 가독성이 떨어질 수 있음 (모든 크기의 화면에서 의미있는 디자인이 필요)

  • 제한적인 모바일 사용자 경험을 제공

  • 웹 사이트의 서비스 속도에 영향을 줄 수 있음

  • 초기 로딩에 시간 소요

  • 웹 페이지 반응 시간이 긴 편

  • 초기 디자인에 시간이 소요. (비용 증가)

  • 각 디자인 별로 별도의 HTML 및 CSS 코드를 생성해야 함

  • 유지보수가 복잡

권장 대상

  • 비교적 간단한 웹 디자인에 적합

  • 복잡한 웹 디자인에 적합

  • 기존의 웹 사이트를 모바일에 적합한 형태로 바꿀 때 유리

  • 사용자에 보여줄 화면 형태를 제어할 수 있음

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/TableLayout/adaptive_adaptiveThreshold_TableLayout.xml)

YouTube 동영상 (https://youtu.be/q8tQ06AF3G8)

관련 속성

adaptive

Property View

crosstab

layout

adaptiveThreshold

적응형 웹 디자인의 적용 width를 지정합니다. 기본값은 480(px) 으로 구성되어 있으며, width의 값을 변경하여 적응형 웹 디자인 시작 시점을 변경할 수 있습니다.

adaptiveThreshold

적용

GridView

Property 뷰에서 adaptive="crosstab" 으로 변경하십시오.

GridView Property View

GridView adaptive="crosstab"

모바일 속도 개선

fixAdaptive="true" 설정을 사용할 경우, adaptive와 hideThreshold 속성을 GridView를 처음 그릴 때 적용한 후, 이후 처음 설정한 상태를 적용할 수 있습니다. 이 경우, 모바일 환경에서 GridView의 속도를 개선하는 효과를 기대할 수 있습니다.

TabControl

TabControl 컴포넌트에 적응형 웹 디자인을 적용하려면 Property 뷰에서 adaptive 속성을 "layout"으로 변경하십시오.

Tab 부분이 아코디언(Accordion) 형태로 변경됩니다.

TabControl adaptive="layout"

TableLayout

TableLayout 컴포넌트에 적응형 웹 디자인을 적용하려면 Property 뷰에서 adaptive 속성을 "crosstab" 또는 "layout"으로 지정하십시오.

TableLayout Property View

TableLayout adaptive="layout"