다중 장치 웹 디자인에 대한 두 가지 다른 접근 방식 비교
반응 형 및 적응 형 웹 디자인은 다양한 화면 크기에서 잘 작동하는 여러 기기 친화적 인 웹 사이트 를 만드는 두 가지 방법입니다. 반응 형 웹 디자인은 Google에서 권장 하며 두 가지 접근 방식 중 더 널리 사용 되는 반면 다중 장치 웹 디자인을위한 이러한 두 가지 방법은 장점과 약점이 있습니다.
다음과 같은 주요 영역에 중점을 둔 반응 형 및 적응 형 웹 디자인의 차이점을 살펴 보겠습니다.
- 용이 한 개발
- 디자인에 대한 제어 수준
- 장치 / 화면 지원의 폭
- 솔루션이 미래에 얼마나 우호적인지
- 전체 다운로드 속도 및 사이트 성능
일부 정의
반응 형 및 적응 형 웹 디자인을 나란히 비교하기 전에이 두 가지 접근 방식에 대한 높은 수준의 정의를 살펴 보겠습니다.
반응이 많은 웹 사이트는 사용중인 화면 크기에 관계없이 변경되고 적용되는 유연한 레이아웃을 가지고 있습니다. 미디어 쿼리를 통해 반응 형 사이트는 브라우저의 크기가 변경되는 경우 "즉시"변경할 수 있습니다.
적응 형 디자인은 미리 정의 된 중단 점을 기반으로 고정 된 크기를 사용하여 페이지가 처음로드 될 때 감지되는 화면 크기에 가장 적합한 레이아웃 버전을 제공합니다.
이러한 광범위한 정의가 갖추어져 있으므로 우리의 주요 관심 영역을 살펴 보겠습니다.
개발 용이성
반응 형 및 적응 형 웹 디자인 간의 가장 중요한 차이점은 이러한 솔루션이 웹 사이트에 적용되는 방식에 있습니다. 반응 형 디자인은 완전히 유동적 인 레이아웃을 만들기 때문에 사이트를 처음부터 다시 디자인하는 프로젝트에 가장 적합 합니다 . 기존 웹 사이트의 코드를 신속하게 개조하는 것은 어려운 일입니다. 코드를 처음부터 개발하고 해당 프로세스의 가장 초기 단계를 고려한 반응 형 디자인을 고려할 때 가질 수있는 수준의 통제력이 없기 때문입니다 . 즉, 사이트를 개조 할 때 반응 형이 될 때 기존 코드베이스 내에 머무르기 위해서는 타협을해야합니다.
기존 고정 폭 웹 사이트로 작업하는 경우 적응 형 접근 방식을 사용하면 사이트가 그대로 유지되도록 크기를 유지하고 필요에 따라 추가 적응 중단 점을 추가 할 수 있습니다. 경우에 따라 프로젝트 예산이 작고 소량의 개발 작업 만 수용하는 경우 더 작은 화면 / 모바일 중심 크기에 대해 새로운 적응 형 중단 점을 추가하도록 선택할 수 있습니다. 즉, 더 큰 화면 모두 동일한 레이아웃을 사용할 수 있습니다 (예 : 사이트가 원래 의도했던 것 같은 960 개의 중단 점 버전).
적응 형 접근법의 장점은 기존 사이트의 코드를 잘 활용할 수 있다는 점이지만, 단점 중 하나는 지원하려는 각 중단 점에 대해 서로 다른 레이아웃 템플릿을 작성한다는 것입니다. 이는 장기적으로이 솔루션을 개발하고 유지하는 데 필요한 작업량에 영향을 미칩니다.
디자인 관리
반응 형 웹 사이트의 강점 중 하나는 적응 형 접근 방식에서 결정된 사전 설정된 중단 점만이 아니라 모든 화면 크기를 적응하고 지원할 수 있다는 것입니다. 그러나 반응 형 사이트는 특정 주요 화면 크기 (일반적으로 시장에서 판매되는 인기있는 장치에 해당하는 크기)에서 크게 보일 수 있지만 시각적 디자인은 자주 사용되는 해상도 사이에서 중단되는 경우가 많습니다.
예를 들어 사이트는 1400 픽셀의 와이드 스크린 레이아웃, 960 픽셀의 중간 화면 크기 및 480 픽셀의 작은 화면을 멋지게 보일 수 있지만 이러한 크기의 중간 상태는 어떻습니까? 디자이너는 이러한 중간 크기를 거의 제어 할 수 없으며 이러한 크기로 페이지의 시각적 모양이 종종 이상적이지 않습니다.
적응 형 웹 사이트에서는 설정된 중단 점을 기반으로 고정 된 크기이기 때문에 사용중인 다양한 레이아웃에 대해 훨씬 더 많은 디자인 제어 기능을 사용할 수 있습니다. 방문자들에게 전달 될 각각의 "모양"(각 중단 점의 표시를 의미 함)을 신중하게 설계했기 때문에 그 사이의 어색한 중간 상태는 더 이상 문제가되지 않습니다.
이 수준의 디자인 컨트롤이 들리면 매력적인 가격으로 제공된다는 사실을 알고 있어야합니다. 예, 모든 중단 점의 모양을 완벽하게 제어 할 수는 있지만 이러한 고유 한 레이아웃 각각에 대해 디자인하는 데 필요한 디자인 시간을 투자해야한다는 것을 의미합니다. 디자인 할 브레이크 포인트가 많을수록 그 프로세스에 더 많은 시간을 소비해야합니다.
지원의 폭
반응 형 및 적응 형 웹 디자인은 특히 최신 브라우저에서 상당히 견고한 지원을 제공합니다.
적응 형 웹 사이트에는 화면 크기 감지를 위해 서버 측 구성 요소 또는 Javascript가 필요합니다. 물론 적응 형 사이트에 Javascript가 필요한 경우 브라우저가 해당 사이트가 올바르게 작동하도록 활성화해야합니다. 대부분의 사람들은 브라우저에 Javascript를 갖게 될 것이기 때문에 큰 관심사는 아니지만 사이트에 중요한 의존성이있을 때마다주의해야합니다.
응답 성있는 웹 사이트와이를 지원하는 미디어 쿼리는 모든 최신 브라우저에서 잘 작동합니다. 버전 8 이하는 미디어 쿼리를 지원하지 않으므로 Internet Explorer의 가장 오래된 버전에서만 문제가 발생 합니다 . 이 문제를 해결하기 위해 Javascript polyfill이 종종 사용됩니다 . 즉, 적어도 구식 버전의 IE에는 Javascript에 대한 종속성이 있습니다. 다시 말하지만, 특히 사이트 분석에서 이전 버전의 브라우저를 사용하는 방문객이 많지 않다는 사실이 드러나는 경우에는 걱정할 필요가 없습니다.
미래 우정
반응 형 웹 사이트의 유동성은 미래 친화적 인면에서 적응 형 사이트를 능가하는 이점을 제공합니다. 이러한 응답 사이트는 이전에 설정 한 중단 점 집합 만 수용 할 수 있도록 구축되지 않았기 때문입니다. 그들은 오늘날 시장에 실제로 없을 수도있는 것을 포함하여 모든 스크린 에 적합하도록 적응합니다. 즉, 갑자기 새로운 화면 해상도가 인기를 얻으면 반응 형 사이트를 "고정"할 필요가 없습니다.
기기 화면의 놀라운 다양성 (2015 년 8 월 현재 시장에 24,000 가지 이상의 Android 기기가 있음)을 살펴보면이 다양한 화면을 수용 할 수있는 최적의 사이트는 미래의 편리함에 매우 중요합니다. 이것은 풍경이 미래에 덜 다양해질 가능성이 낮기 때문입니다. 즉, 특정 화면이나 크기에 대한 디자인이 아직 실현되지 않았다면 불가능해질 것입니다.
이 비교 시나리오의 반대편에서, 사이트가 적응력이 있고 시장에서 중요해질 수있는 새로운 해결 방법을 수용하지 못하면 사용자가 만든 사이트에 중단 점을 추가해야 할 수 있습니다. 이는 프로젝트에 설계 및 개발 시간을 추가하기 때문에 사이트에 추가해야하는 새로운 중단 점이 시장에 도입되지 않도록 해당 적응 형 사이트를 지속적으로 모니터링해야합니다. 다시 말하면, 장치의 다양성을 그대로 유지하면서 새로운 크기를 지속적으로 확인하고 새로운 중단 점을 수용 할 수있는 지속적인 과제는 사이트를 지원해야하는 작업에 영향을 미치고 해당 유지 관리 비용을 사이트가있는 회사 또는 조직.
공연
반응 형 웹 디자인은 오랫동안 (많은 경우 부당하게) 다운로드 속도 / 성능의 관점에서 부적절한 해결책으로 고발되었습니다. 이것은 초기에이 접근법의 초기에 많은 웹 디자이너가 작은 화면의 미디어 쿼리를 사이트의 기존 CSS에 붙여 놓았 기 때문입니다. 이로 인해 작은 화면에서 최종 레이아웃에서 사용하지 않더라도 큰 화면을위한 이미지와 리소스가 모든 장치로 전달되도록했습니다. 그 당시부터 반응 형 디자인은 먼 길을 가졌지 만 오늘날의 품질이 우수한 반응 형 사이트는 성능 문제로 고통받지 않습니다.
느린 다운로드 속도와 비 대한 웹 사이트는 반응이없는 웹 사이트 문제가 아닙니다. 모든 웹 사이트에서 발견 할 수있는 문제입니다. 너무 무거 우며 소셜 미디어, 과도한 스크립트 등으로 가득 찬 이미지를 측정하고 사이트의 무게를 재기십시오. 그러나 반응이 빠른 웹 사이트와 적응력이 뛰어난 웹 사이트 모두 빠른로드가 가능하도록 제작할 수 있습니다. 물론 성능을 최우선 순위로 삼지 않는 방식으로 구축 할 수도 있지만 이는 솔루션 자체의 특성이 아니라 사이트 자체의 개발과 관련된 팀의 반영입니다.
레이아웃 너머
적응 형 웹 디자인의 가장 강력한 측면 중 하나는 설정된 중단 점에 대한 사이트 디자인뿐만 아니라 해당 사이트 버전에 제공되는 리소스도 제어 할 수 있다는 것입니다. 예를 들어, 이는 망막 이미지가 망막 장치에만 전송 될 수 있음을 의미하지만 망막이 아닌 화면은 파일 크기가 더 작은 이미지 를 보다 적절하게 생성 합니다. 다른 사이트 자원 (Javascript 파일, CSS 스타일 등)은 필요할 때만 현명하게 전달할 수 있습니다.
이러한 적응 형 웹 디자인의 사용은 "웹 사이트를 개조하는 경우 적응 형을 사용하는 것이 더 쉬운 방법 일 수 있습니다."라는 단순한 방정식을 훨씬 뛰어 넘습니다. 모든 사이트는 완전한 재 설계를 포함하여보다 지능적인 방식으로 더 똑똑한 접근 방식을 이용할 수 있습니다.
이 시나리오는이 "반응 형 대 적응 형"논쟁의 미묘한 특성을 보여줍니다. 사이트 개조에 대한 적응 형 접근 방식보다 적응 형 접근 방식이 더 적합 할 수 있지만 전체 재 설계를위한 훌륭한 솔루션이 될 수도 있습니다. 마찬가지로 어떤 경우에는 반응 형 접근법을 기존 사이트의 코드 기반에 추가하여 해당 사이트에 완전히 대응하는 접근 방식의 모든 이점을 제공 할 수 있습니다.
어느 접근법이 더 나은가요?
반응 형 웹 디자인과 적응 형 웹 디자인은 명확한 "승자"가 아닙니다. 사실 "더 나은"접근 방식은 특정 프로젝트의 요구에 달려 있습니다. 또한, 이것은 "어느 한 가지 / 또는"상황 일 필요는 없습니다. 반응 형 웹 디자인 (유체 너비, 미래 지원)과 적응 형 디자인 (더 나은 디자인 제어, 사이트 자원의 스마트로드)의 강점을 결합한 사이트를 구축하는 많은 웹 전문가가 있습니다.
일반적으로 RESS (서버 측 구성 요소가 포함 된 반응 형 웹 디자인)로 알려진이 접근법은 실제로 "모든 솔루션에 맞는 하나의 솔루션"이 없음을 보여줍니다. 응답 형 웹 디자인과 적응 형 모두 강점과 과제를 가지고 있으므로 어느 것이 특정 프로젝트에 가장 적합하거나 하이브리드 솔루션이 실제로 가장 적합 할 수 있습니다.