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