적응형 웹 디자인

[섬네일|[X (소셜 네트워크)|트위터의 독자적인 모바일 웹 프런트엔드였던 "M2 모바일 웹". 이후 자바스크립트를 지원하지 않는 클라이언트나 웹 브라우징 기능이 제한된 게임기와 같이 호환되지 않는 브라우저를 위한 폴백 레거시 버전으로 제공되었다. 2020년 12월에 서비스를 종료했다.]]

**적응형 웹 디자인**(adaptive web design, **AWD**)은 모든 장치에서 동일하게 로드되고 보이는 단일 정적 웹 페이지나, 사용자의 장치/화면 크기/웹 브라우저에 따라 반응형으로 콘텐츠의 순서를 재배치하고 크기를 조정(리사이즈)하는 단일 페이지와는 반대로, 사용자의 장치에 더 잘 맞도록 여러 버전의 웹 페이지를 제작하는 것을 장려한다.

이는 대개 하나의 페이지(또는 대부분의 경우 전체 웹사이트)를 데스크톱 버전과 모바일 버전으로 나누어 사용하는 것을 의미하며, HTTP GET 요청에 정의된 유저 에이전트(user-agent)를 기반으로 둘 중 하나를 가져오는데 이를 동적 서빙(dynamic serving)이라고 한다. 적응형 웹 디자인은 모바일 가독성을 위해 사이트를 최적화하는 초기 전략 중 하나였다. 가장 일반적인 방식은 모바일과 데스크톱용 웹사이트를 완전히 분리하여 운영하는 것이었으며, 모바일 장치는 흔히 서브도메인(주로 "m"으로 표시되는 3차 도메인, 예: http://**m**.website.com/)이나 유튜브에서 사용되는 `&app=m&persist_app=1`과 같은 URL 매개변수를 통해 HTTP 서버에서 제공되는 모바일 버전 사이트로 리다이렉트되었다. 오늘날 모바일과 데스크톱 보기를 위해 두 개의 분리된 정적 사이트를 사용하는 방식은 대체로 단계적으로 폐지되고 있으며, 대신 서버 사이드 스크립트 언어를 활용하여 동적 웹페이지를 생성하거나 정적 페이지의 어떤 버전을 제공할지 동적으로 결정한다. 다만 모바일과 데스크톱을 위한 독립적인 사이트 운영은 여전히 자주 관찰된다. 많은 웹사이트가 반응형 **또는** 적응형 웹 디자인 기법 중 하나를 채택하고 있지만, 이 두 가지는 **상호 배제적이지 않으며**, 가장 보편적으로 가독성 있는 디자인 콘텐츠를 위한 모범 사례는 전체 스펙트럼의 하드웨어와 소프트웨어를 지원하기 위해 두 기법을 조합하여 사용한다.

별도의 프런트엔드가 존재하면 어느 한 쪽에서 기술적 문제가 발생한 클라이언트가 다른 쪽으로 후퇴(fallback)하여 문제를 피할 수 있는 기회를 제공한다.

## 기술적 정의
적응형 웹 디자인은 표시할 디자인 레이아웃과 크기를 선택하는 서버 측 감지 프로세스다. 반응형 레이아웃을 포함한 모든 유형의 웹 디자인 레이아웃을 사용할 수 있다. 적응형 디자인은 일반적인 화면 크기와 해상도를 기준으로 서로 다른 장치에 서로 다른 버전의 페이지를 제공한다. 이 용어는 에런 구스타프슨(Aaron Gustafson)이 2011년 저서 《적응형 웹 디자인: 점진적 향상을 통한 풍부한 경험 제작》(Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement)에서 처음으로 만들었다.

## 기법 용어
적응형 웹 디자인은 단일 웹사이트를 위해 여러 페이지 레이아웃을 사용하며 때로는 점진적 향상(PE) 기법을 고용한다. 적응형 모델은 반응형 웹 디자인의 "모바일 퍼스트", 자바스크립트, 점진적 향상과 대조되는 "모바일 분리" 레이아웃이다. "모바일 분리"는 적응형 웹 디자인의 디자인 레이아웃이 반응형 웹 디자인의 단일 디자인 레이아웃과 달리 별도의 기본 모바일 레이아웃을 갖는다는 점을 제외하면 "모바일 퍼스트"와 동일한 개념이다.

기본적인 모바일 전화의 웹 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못하므로, 복잡하고 이미지가 많은 사이트를 작동시키기 위해 우아한 성능 저하(graceful degradation)에 의존하기보다는 기본적인 모바일 레이아웃을 만들고 스마트폰을 위해 점진적 향상 기법을 사용하는 것이 권장되는 관행이다.

## 필요성을 초래한 기술 발전
적응형 디자인은 데스크톱 디스플레이용으로 의도된 형식에 국한되지 않고 다양한 인터페이스에 대한 적합성에 초점을 맞춘 웹 디자인의 광범위한 접근 방식이다. 이는 특히 모바일 장치가 이제 데스크톱보다 더 큰 시장 점유율을 차지하고 있기 때문에 중요하다. 동적 웹 관행은 20년 이상 존재해 왔지만, 그래픽 레이아웃, 특히 모바일 장치 보기에 관한 동적 디자인은 비교적 최근의 개념이다. CSS3 미디어 쿼리, AJAX, HTML5, 자바스크립트와 같은 새로운 기술들은 일반적으로 적응형 디자인보다 더 효율적이고 효과적인 반응형 디자인을 중심으로 발전해 왔다. 데스크톱에서 모바일로의 전환은 적응형 웹 디자인에서 반응형 웹 디자인으로의 이동을 이끌었다.

### 역사, 적응 및 진화
적응형 웹 디자인은 HTTP GET 요청 중에 화면 크기를 감지하고 유저 에이전트(user-agent)에 맞춤화된 페이지를 제공한다. 일반적으로 적응형 사이트는 320, 480, 760, 960, 1200, 1600의 6가지 화면 너비로 설계된다. 이는 모바일 최적화를 위한 일반적인 관행이었을 뿐만 아니라, 4:3 저해상도 CRT 모니터에서 고해상도 16:9 LCD 모니터로 넘어가는 전환기에도 흔했다. 사용 가능한 다양한 모니터에 맞는 유동적인 레이아웃을 만들기 위해 표준 적응형 웹 디자인이 필요했다.

스마트폰 초기에는 화면 크기가 매우 다양했고, 모바일 브라우저에는 데스크톱 브라우저에서 사용할 수 있는 고급 기능과 플러그인이 부족했다. 모바일 인터넷은 또한 비싸고 느렸기 때문에, 가독성을 위해 이미지 수를 줄이거나 품질을 낮추고 텍스트 서식을 단순화한 "축소된" 모바일 페이지를 디자인하는 것이 필요했다. 아이폰의 도입과 3G 네트워크의 확산으로 연결 속도와 대역폭이 크게 증가하면서 큰 변화가 일어났다. 웹사이트가 모바일 레이아웃(흔히 "m" 서브도메인 사용)과 데스크톱 레이아웃의 두 가지 버전을 갖는 것이 일반화되었다. 모바일 버전은 로드 시간을 개선하기 위해 여전히 이미지 품질을 낮추고 비디오와 같은 콘텐츠를 제한하는 등 축소된 형태인 경우가 많았다. 터치스크린의 보급은 디자인에도 영향을 미쳐 손가락 내비게이션을 수용하기 위해 더 큰 버튼과 링크를 만들게 되었다. 이후 4G LTE의 광범위한 채택으로 미디어 품질이나 콘텐츠를 타협할 필요성이 줄어들었다. 구글의 안드로이드 OS가 인기를 얻고 스마트폰 시장에 더 많은 다양성을 가져오면서, 표준 동적 웹 디자인의 다중 페이지 패러다임은 덜 보편화되었지만, 터치스크린 콘텐츠 디자인을 데스크톱 디자인과 완전히 분리하기 위해 여전히 일부 사용되고 있다. 머티리얼 디자인이나 장치별 레이아웃 및 색상 체계와 통합할 때 일부 개발자는 각 장치에 맞게 아이콘과 색상을 조정하고 레이아웃에 미디어 쿼리를 사용하여 3페이지 템플릿(안드로이드, iOS, 데스크톱)을 만든다. 이는 디자인과 코드를 단순화하지만, 업데이트는 세 가지 템플릿 모두에 적용해야 한다.

#### 반응형 웹 디자인 vs. 적응형 웹 디자인
명칭에 대한 합의는 없으며 적응형과 반응형 모두 동일한 동작을 지칭하는 데 사용되기도 하지만, 흔히 반응형 디자인이라 불리는 것은 표준 적응형 디자인보다 적은 페이지 레이아웃(대개 하나만)을 사용한다. 적응형 디자인은 일반적인 장치의 화면 크기가 끊임없이 변하고 가변성이 높기 때문에 반응형 디자인보다 미래 경쟁력이 떨어지고 덜 효율적인 것으로 간주된다. 혼합형 적응/반응형 디자인 모델은 반응형 레이아웃을 가진 여러 버전의 페이지를 포함한다.

표준 적응형 레이아웃은 (반응형 웹 디자인에서와 같이) 페이지의 뷰포트 반응형 스케일링을 사용할 수도 있지만, 장치나 해상도마다 다른 레이아웃을 만드는 접근 방식은 이제 드물며, 주로 새로운 반응형 디자인이 요구하는 기술을 사용할 수 없는 구형 스마트폰이나 인터넷 사용이 가능한 비스마트 모바일 장치 사용자를 대상으로 하려는 사이트에서 볼 수 있다.

장고의 "뷰(views)"나 AJAX의 일부 측면과 같이 적응형과 반응형 웹 디자인 사이의 경계를 흐리는 변형된 개념들이 존재한다. 이들은 서로 다른 버전의 페이지를 제공하며(장치 간의 유동성을 위한 목적 포함), 다만 페이지는 정적이 아니라 동적으로 생성된다.

## 각주

분류:웹 디자인