적응형 웹 설계

Adaptive web design
트위터의 원래 모바일 프런트 엔드인 "M2 Mobile Web"은 나중에 JavaScript 및/또는 웹 브라우징 기능이 제한된 게임 콘솔과 같은 호환되지 않는 브라우저가 없는 클라이언트에 대한 폴백 레거시 버전 역할을 했다.그것은 [1]2020년 12월에 폐쇄되었다.

Adaptive Web Design(AWD; 적응형 웹 디자인)은 모든 디바이스에 동일한 로딩(및 외관)을 하는 단일 정적 페이지나 사용자의 디바이스/화면 크기/브라우저에 따라 응답하여 콘텐츠를 정렬 및 크기 조정하는 단일 페이지가 아니라 사용자의 디바이스에 더 잘 맞도록 여러 버전의 웹 페이지만들도록 촉진합니다.

이는 대부분의 경우 모바일데스크톱 버전의 페이지(또는 대부분의 경우 사이트 전체)를 사용하는 방법에 대해 설명합니다.이 중 하나는 HTTP GET 요구에서 정의된 사용자 에이전트에 기반하여 취득됩니다.이것은 다이내믹서빙이라고 불립니다.적응형 웹 디자인은 모바일 가독성을 위해 사이트를 최적화하기 위한 첫 번째 전략 중 하나이며, 모바일과 데스크톱에 완전히 다른 웹사이트를 사용하는 가장 일반적인 관행입니다. 모바일 장치는 종종 하위 도메인(종종 "m"로 표시됨)에서 제공되는 사이트의 모바일 버전으로 리디렉션됩니다.http://m.website.com/; 및/또는 다음과 같은 URL 파라미터&app=m&persist_app=1 (유튜브에서 사용)모바일 및 데스크톱용 독립된 사이트 사용은 현재도 자주 볼 수 있지만 서버스크립트는 동적으로 생성된 페이지를 처리하거나 어떤 버전의 정적 페이지를 처리할지 결정하는 데 사용됩니다.많은 웹 사이트가 응답성 또는 적응성 웹 설계 기술을 사용하고 있지만, 이 두 기술상호 배타적이지 않으며, 가장 보편적으로 읽을 수 있는 설계 콘텐츠의 베스트 프랙티스는 하드웨어와 소프트웨어[2]완전한 스펙트럼을 지원하기 위해 두 기술의 조합을 사용합니다.

프런트 엔드가 분리되어 있기 때문에, 어느쪽에서 기술적인 문제가 발생하고 있는 클라이언트는, 문제가 발생하지 않을 가능성이 있기 때문에, 다른 클라이언트로 폴백 할 수 있습니다.

기술적 정의

적응형 웹 디자인은 표시할 설계 레이아웃과 크기를 선택하는 서버 측 탐지 프로세스입니다.응답형 레이아웃을 포함하여 모든 유형의 웹 디자인 레이아웃을 사용할 수 있습니다(일반적으로 업데이트 시 여러 페이지를 편집할 필요 없이 응답형 웹 설계를 모두 제어할 수 있습니다).적응형 설계에서는, 공통의 화면 사이즈와 해상도에 근거해, 다른 버전의 사이트(또는 페이지)를 다른 디바이스에 제공합니다.유일한 차이점은 설계를 배치에 [3]대한 RWD(응답성설계)의 일률적인 접근 방식이 아니라 부수적 또는 디바이스적 관점에서 바라보는 방법입니다.이 용어는 Aaron Gustafson에 의해 [2]2011년 5월 Adaptive Web Design: Crafting Rich Experience with Progressive Enhancement에서 처음 만들어졌습니다.

기술 용어

적응형 웹 설계에서는 단일 웹 페이지에 대해 여러 페이지 레이아웃을 사용하며 경우에 따라서는 PE(Progressive Enhancement)를 사용할 수 있습니다.적응형 모델은 "모바일 최초" JavaScript 대조적으로 "모바일 분리" 레이아웃이며 응답성 웹 설계의 [3]점진적 향상입니다."모바일 분리"는 "모바일 우선"과 동일한 개념이지만, AWD의 설계 레이아웃은 반응성이 뛰어난 웹 디자인의 단일 설계 레이아웃에 비해 별도의 기본 모바일 레이아웃을 갖는다는 점을 제외한다.

기본적인 휴대폰 브라우저는 JavaScript나 미디어 쿼리를 이해하지 못하기 때문에 복잡한 이미지를 많이 사용하는 사이트를 정상적인 성능 [4][5]저하에 의존하지 말고 기본적인 모바일 레이아웃을 만들고 스마트폰용 점진적인 확장을 사용하는 것이 좋습니다.

테크놀로지의 진보가 필수로 이어지다

적응형 설계는 데스크톱 디스플레이용 포맷에 국한되지 않고 다양한 인터페이스에 대한 적합성에 초점을 맞춘 광범위한 웹 디자인 접근법입니다.는 스마트폰 [6]검색량이 데스크톱 검색량을 10개국에서 앞지른 2018년에 특히 중요합니다. 데스크톱 카테고리에 포함된 태블릿 검색량에서도 마찬가지입니다.웹 디자인 전반에 변화를 가져오고 역동적인 그래픽 웹 디자인에 새로운 활력을 불어넣는 새로운 기술이 등장했습니다.동적 웹 관행은 20년 이상 지속되었지만, 그래픽 레이아웃, 특히 모바일 장치 보기와 관련된 동적 설계는 훨씬 더 최근의 개념입니다.또한, RWD(응답형 웹 설계)와 AWD(적응형 웹 설계)의 차이를 정의할 때, 새로운 기술(CSS3 Media Query, AJAX, HTML5, 거의 범용 JS 통합 등)이 AWD가 아닌 RWD를 중심으로 이루어졌다는 것이 중요하다.AWD는 브라우저가 RWD 기술을 제대로 해석할 수 없는 경우에만 새로운 디자인으로 존재합니다('스마트하지 않은' 모바일 장치 브라우저와 구식 스마트폰의 경우).이러한 최근의 변화(데스크탑에서 모바일로의 전환)로 인해 유동성 모바일 디자인은 그래픽 웹 개발에서 가장 중요한 개념 중 하나가 되었으며 AWD에서 벗어나 RWD로 크게 전환되었습니다.

역사, 적응 및 진화

적응형 웹 디자인은 페이지가 서비스되기 전에 HTTP GET 요청 중에 화면 크기를 감지하고 사용자 에이전트 고유의 적절하게 설계된 페이지를 로드합니다.적응형 표준 레이아웃을 사용하면 일반적으로 6개의 공통 화면 폭(320, 480, 760, 960, 1200, 1600)[7][8]에 적응형 사이트를 설계할 수 있습니다.이는 모바일 최적화의 일반적인 관행일 뿐만 아니라 4:3저해상도 CRT 모니터와 16:9의 고해상도 LCD 모니터 사이의 전환 기간입니다.이용 [7]가능한 다양한 모니터의 유체 레이아웃을 작성하려면 표준 적응형 웹 설계가 필요했습니다.

2000년대 중후반 블랙베리와 같은 스마트폰 초기 화면 치수는 매우 다양했고, 또한 이러한 기기의 모바일 브라우저는 데스크톱 브라우저의 풍부한 환경을 만드는 데 사용되는 고급 기능과 플러그인이 부족했다.게다가 데이터는 고가의 상품으로 매우 느리기 때문에, 특별한 「스트립 다운」모바일 페이지를 설계할 필요가 있었습니다.이미지(또는 품질이 낮은 페이지)는 적고, 텍스트는 선명하게 정리되어 읽기 쉬웠기 때문에, 광고도 큰폭으로 축소할 필요가 있었습니다.당시 HTML은 고정된 좌표만 허용하고 스케일링은 허용하지 않았습니다(그 때문에 웹 사이트가 거의 항상 왼쪽 상단 또는 특정 지역에서는 오른쪽 상단에만 바인딩되어 있었습니다. 즉, 응답성 있는 웹 설계가 중심화 및 상대 좌표를 허용하여 컨텐츠 페이지가 중심화되었습니다).따라서 모바일로 로드되는 페이지를 얻기 위해 개발자들은 모바일 뷰잉을 위한 완전히 새로운 페이지를 설계해야 했습니다. 이러한 브라우저는 종종 탐색이 어려웠기 때문에 크고 쉽게 볼 수 있는 링크를 만들어야 했습니다.[3]적응형 표준 웹 설계의 다음 큰 변화는 특히 아이폰의 증가와 2년 후 3G 가용성의 확산으로 연결 속도와 사용 가능한 대역폭이 크게 향상됨에 따라 모바일 레이아웃(일반적으로 서브 도메인 접두사 "m" 옵션을 사용하는 2가지 설계 동적 시스템이 가장 많이 활용되었습니다.iPhone 및 데스크톱 레이아웃용으로 이미징되어 있습니다.모바일 버전은 일반적으로 낮은 화질의 이미지를 사용하여 "스케일 다운"되었으며 로드 시간을 단축하기 위해 비디오 등의 컨텐츠가 삭제되기도 했습니다.웹 개발자들이 터치 스크린을 염두에 두고 디자인한 것은 이번이 처음이었고, 클릭 가능한 더 큰 링크와 버튼을 사용하여 손가락을 [3]포인터로 사용할 수 있도록 했다.구글의 안드로이드 OS가 인기를 끌면서 스마트폰 시장 점유율에서 더 많은 변화를 가져오면서, 4G LTE의 초고속 모바일 광대역의 광범위한 구현과 함께, 느린 연결 속도에 대처하기 위해 더 이상 모바일 미디어 품질을 낮추거나 콘텐츠를 다듬을 필요가 없어졌고, 기기의 변화가 너무 심하여, 모바일 미디어 품질과 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 미디어, 모바일 네트워크, 모바일 미디어, 모바일 미디어, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 네트워크, 모바일 미디어, 모바일 네트워크, 모바일 미디어Standard Dynamic디자인의 궁극적인 페이지 패러다임은 개발자들로부터 널리 지지를 받지 못했습니다.터치스크린 콘텐츠 설계와 데스크톱 설계를 완전히 분리하기 위해 이 개념을 사용하는 사람도 있지만 응답성이 뛰어난 웹 설계에는 다양한 요소에 대응하여 거의 모든 조작을 수행하는 데 필요한 거의 모든 도구가 포함되어 있어 한 페이지가 모든 목적에 대응할 수 있습니다.재료 디자인이나 디바이스 고유의 레이아웃 및 색상표와 통합할 때 일부 개발자는 미디어 쿼리를 사용하여 레이아웃을 결정하면서 각각 아이콘과 색상을 변경하는 세 페이지 템플릿(Android, iPhone/iOS, 데스크톱)을 쉽게 만들 수 있습니다.이 방법을 사용하면 페이지 설계와 코드가 훨씬 간단해지지만, 업데이트하려면 3개의 템플릿을 모두 편집해야 합니다.이 컨셉에는 장고의 "뷰"[3][8][9][2]와 같이 AWD와 RWD의 경계를 모호하게 하는 변형이 있다.

응답성이 뛰어난 웹 설계와 적응성이 뛰어난 웹 설계

적응형 설계와 응답형 설계 모두 동일한 동작을 나타내기 위해 사용될 수 있기 때문에 이름 짓기에 대한 합의는 없지만, 일반적으로 응답형 설계라고 불리는 것은 표준 적응형 설계보다 적은 페이지 레이아웃을 사용합니다(거의 모든 경우).적응형 디자인은 반응성이 뛰어난 디자인보다 미래 대비성이 낮고 효율성이 훨씬 떨어지는 디자인 모델로 간주됩니다. 일반적인 디바이스의 화면 크기는 끊임없이 변화하고 매우 다양하기 때문입니다.스마트폰이 대량으로 채택된 초기 심플한2 사이트 모델(데스크탑용 미디어 리치 와이드스크린 페이지, 작은 크기(로드된 자산의 품질/파일 크기-데이터 저장용)의 페이지)는, 작은 화면 표시용으로 포맷되어 있어, 모바일 뷰에서는 보다 큰 폰트, 보다 엄격한 텍스트 래핑 제약이 있었습니다.ng) 또한 스마트폰 붐이 시작된 첫 몇 년 동안은 일부 모델만이 시장 점유율을 차지했기 때문에 모바일 페이지는 이러한 기기에서 가장 잘 볼 수 있도록 설계되었으며, 그다지 인기가 많지 않은 기기에 페이지가 로드될 때의 사소한 결함은 무시했습니다.아이폰의 등장으로 많은 개발자들이 아이폰과 터치스크린 전용 모바일 사이트를 만들기 시작했다.반응형 설계는 유체 그리드와 적응형 설계의 고정 [3]그리드를 기반으로 구축됩니다.하이브리드 Adaptive/Responseive 디자인 모델에는 응답성디자인 레이아웃으로 포맷된 여러 페이지가 포함되어 있으며, 가장 가까운 적절한 레이아웃이 제공되면 해당 페이지가 사용자의 [7]장치에 응답합니다.

표준 적응형 레이아웃(화면 의존형 멀티 페이지)도 페이지 뷰포트 대응 스케일링을 (응답형 웹 디자인과 마찬가지로) 병용하여 사용할 수 있지만, 새로운 응답형 웹 디자인 전략과 테크놀로지에 의해 사이트가 스마트하지 않은 인터넷 카페의 사용자를 대상으로 하는 경우를 제외하고는 별도의 멀티 스크린 페이지가 필요 없게 되었습니다.모바일 디바이스와 오래된 스마트폰이 새로운 응답성 설계 [7]스크립트에 반응하지 않습니다.앞에서 설명한 바와 같이, Django의 "뷰" 개념이나 AJAX의 일부 측면은 여러 가지 이유로 다른 버전의 페이지를 제공하기 때문에 선을 흐리게 만들 수 있지만, 어떤 것은 다른 디바이스에서 페이지가 동적으로 생성되며 정적인 것이 아니라 동적으로 생성된다(단, "뷰"가 채워져야 하는 템플릿이라고 주장할 수 있다).내용.결국, 컨텐츠가 가장 유동적이고 깔끔하고 통합된 방식으로 표시되는 디바이스를 대상으로 하는 가장 적절한 방법은 개발자에게 달려 있습니다.동적인 웹 [3][8][9][2]개발의 고비를 넘기는 방법은 확실히 여러 가지가 있습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "Legacy Twitter Shutdown Means You Can't Tweet From The 3DS Anymore". ScreenRant. 2020-11-28.
  2. ^ a b c d 구스타프슨, 애런적응형디자인: 진보적인 확장 기능으로 풍부한 경험을 쌓습니다.Easy Readers, LLC; 초판, 2011.
  3. ^ a b c d e f g "Understanding and Comparing Responsive, Adaptive and Fluid Design ICO Web Solutions". ICO Web Solutions. 16 January 2014. Retrieved 17 April 2017.
  4. ^ "Graceful degradation versus progressive enhancement". February 3, 2009. Archived from the original on 2014-11-13. Retrieved 2016-12-21.
  5. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). Designing with Progressive Enhancement. p. 456. ISBN 978-0-321-65888-3. Retrieved March 1, 2010.
  6. ^ Sterling, Greg (5 May 2015). "It's Official: Google Says More Searches Now On Mobile Than On Desktop". SearchEngineLand.com. Retrieved 27 January 2017.
  7. ^ a b c d Adiseshiah, Emily Grace (Mar 1, 2016). "Choosing a web design: Responsive Vs Adaptive".
  8. ^ a b c VenturePact, VenturePact. "Designing for 10000 screens 4 layout tips for responsive web design".
  9. ^ a b Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. pp. 512. ISBN 978-0-596-80778-8.