니드 오브 아워는 반응형 디자인이 아니라 반응형 성능이다

반응형 디자인은 최근 몇 가지 성능 문제를 보여 왔습니다. 아이러니하게도 반응형 디자인은 최신 스마트폰 범위에서 꽤 잘 작동하지만 그 이상은 아닙니다.

대부분의 웹 사용자가 고급형 스마트폰을 사용하기 때문에 혼란스러울 수 있습니다. 그러나 많은 사람들이 여전히 이전 버전의 Android 또는 iOS에서 실행되는 작은 화면 크기의 휴대기기를 사용하고 있으며 기능이 거의 없는 피처폰일 수도 있습니다. 결과적으로 반응형 디자인은 예상대로 더 많은 청중에게 서비스를 제공하지 않습니다.

반응형 디자인이 모든 화면 크기의 모바일 장치를 위한 것이라는 오랜 믿음은 이 문제와 많은 관련이 있습니다. 성능이 떨어지고 불만이 높아지면서 반응형 디자인 그 이상을 바라볼 필요가 있다. 대신 응답 성능을 보장하는 데 중점을 두어야 합니다. 이 게시물은 거의 같습니다.

그래서, 가장 큰 질문은 무엇을 할 것인가입니다.

데스크탑 우선 설계 개념을 버리십시오.

이 지속적인 문제의 주요 원인은 여전히 ​​초점이 데스크탑 우선 설계 접근 방식에 있다는 것입니다. 데스크톱용 웹사이트를 디자인한 다음 스마트폰 및 태블릿과 같은 다른 장치용으로 디자인하는 데 중점을 둡니다. 누락된 기능에 대해 개발자는 심과 폴리필을 아낌없이 사용합니다. 물론 빠른 개발을 보장하기 위해 방대한 라이브러리가 있습니다. 그러나 이것은 브라우저 비호환성 문제를 해결하지 못합니다. 원하는 결과를 얻지 못하는 디자인 컨셉에 참여하는 것이 정당합니까?

장치를 죽이는 모든 것이 아니라 화면에서 의도한 정보만 모바일 사용자에게 제공하는 것을 목표로 하는 모바일 우선 설계 접근 방식을 구현하는 것은 그리 어렵지 않습니다. Luke Wroblewski는 2011년 처음으로 이 디자인 접근 방식을 개념화했으며 그 이후로 많은 업계 전문가들이 그의 획기적인 디자인 접근 방식을 칭찬했습니다.

더 많은 데이터는 1초 미만이더라도 전체 로딩 시간에 상당한 영향을 미칠 수 있습니다. 그러나 웹사이트가 그래픽이 풍부한 콘텐츠로 점점 더 무거워지고 더 많은 사람들이 모바일 장치를 사용하여 동일한 콘텐츠에 액세스하는 것도 사실입니다. 사용자가 저해상도 화면의 모바일에서 웹사이트의 URL을 입력할 때 그의 목표는 항상 웹사이트 콘텐츠에 액세스하는 것이지만 그가 경험하는 것은 악몽입니다. 끝없이 이어지는 불필요한 광고로 인해 탐색이 어렵기 때문이다. 사용자가 기본 콘텐츠에 액세스할 수 있도록 이러한 회피 가능한 콘텐츠 요소를 제거합니다. 고급 스마트폰을 사용하는 사용자를 제외하고 많은 사람들이 저해상도 모바일 장치를 통해 웹사이트에 액세스하므로 사이트 트래픽이 증가합니다. 모바일에 제한된 기능이 있는 경우 텍스트 전용 버전을 제공하는 것이 완벽하지만 사용자 경험이 손상된다고 말할 수 있습니다. 글쎄요, 하지만 콘텐츠를 전혀 받지 않는 것보다는 여전히 낫습니다. 최소한 이러한 경우 사용자는 사이트에 대한 기본 정보에 액세스합니다. 잠재적인 도달 범위를 줄이는 방식으로 웹사이트를 디자인하는 것이 의미가 있습니까?

웹 사이트를 확인하기 위해 끝없이 기다리는 것이 다른 사람을 흥분시키지 않는다는 사실을 분명히 받아 들일 것입니다. Akamai와 Gomez.com의 일부 설문조사에 따르면 웹 사용자의 약 50%는 웹사이트가 2초 이내로 로드될 것으로 기대합니다. 웹사이트가 단 3초 이내에 브라우저에 로드되지 않으면 사이트 이탈 가능성이 더 높아집니다! 게다가 오늘날 대부분의 전자 상거래 웹사이트에는 Facebook, Google Plus, Twitter, LinkedIn 등과 같은 많은 소셜 공유 버튼이 있습니다. 이 버튼이 반응형 사이트에 500KB 이상을 추가하고 성능에 영향을 미친다는 것을 알고 계십니까? 페이스북 좋아요 버튼 하나만으로 270KB의 압축 코드가 필요합니다! 또한 여러 HTTP 요청이 필요합니다. 대신 URL 기반의 소셜 공유 버튼을 사용하면 모바일 연결이 빨라도 반응형 웹사이트의 로딩 시간에 불가피하게 영향을 미칠 수 있습니다.

웹사이트의 성능은 비즈니스의 성능에 직접적인 영향을 미치며 반응이 느린 웹사이트는 비즈니스에 아무런 도움이 되지 않습니다. 믿거나 말거나 대부분의 모바일 사용자는 조사를 하거나 긴 기사를 읽는 데 관심이 없습니다. 그들 대부분은 Facebook, WhatsApp, Twitter에 쉽게 액세스하고 온라인 쇼핑의 즐거움을 즐기기 위해 모바일 장치를 사용합니다. 또한 모바일은 더 이상 트렌드가 아니라 미래입니다.

컴스코어(Comscore)의 작년 통계에 따르면 미국의 모바일 전용 인터넷 사용자 수는 급격히 증가한 반면 데스크톱 전용 사용자는 10.6%로 감소했다.

설득하기 위해 더 말할 필요가 있습니까?

단계적 저하 보장

지난 몇 년 동안 반응형 디자인의 세계에서 새로운 유행어인 '우아한 저하'를 접했을 수 있습니다. 예, 단계적 저하란 기능이 성공적으로 작동하지 않더라도 수용 가능한 사용성을 용이하게 하는 방식으로 실패해야 함을 의미합니다. 즉, 데스크탑용 웹 사이트 디자인을 만든 다음 점차적으로 태블릿, 스마트폰 및 피처폰으로 이동합니다. 웹 사이트가 우아하게 저하되는 반응형 디자인의 성능은 사용자 경험이 항상 최고 수준이기 때문에 높을 수밖에 없습니다. 웹사이트는 어떤 결점에도 불구하고 기능을 유지하며 방문자는 전반적인 품질에 확실히 깊은 인상을 받을 것입니다.

이제, 우아한 저하에 대해 그토록 매혹적인 것이 무엇인지에 대해 마음속에 이 질문이 있을 수 있습니다. 답은 간단합니다. 이는 브라우저에 관계없이 콘텐츠를 표시하고 읽을 수 있도록 하기 때문입니다. 이는 놀라운 위업입니다! 다행스럽게도 CSS3를 사용하는 경우 CSS3의 속성 대부분이 자동으로 저하되기 때문에 우아한 저하가 쉬운 작업이 됩니다. 즉, 둥근 모서리가 정사각형이 되고, 텍스트가 한 줄로 실행되는 대신 줄 바꿈되고, 그라디언트가 단색이 되는 등의 작업이 수행됩니다.

우아한 저하의 예를 들어 보겠습니다. JavaScript 기능이 있는 반응형 웹사이트를 설계했는데 이러한 기능이 브라우저에서 지원되지 않거나 클라이언트 측에서 비활성화될 수 있다고 가정합니다. 콘텐츠를 얻기 위해 무엇을 할 수 있습니까? 글쎄요, 그런 경우에 정상적인 성능 저하를 통해 브라우저는 "noscript" 태그 내에 콘텐츠를 표시할 수 있습니다.

이것은 아래 주어진 코딩으로 더 잘 이해할 수 있습니다.

[xhtml]
<노스크립트>
<h1>John에게 문제가 발생했습니다!</h1>
<p>귀하의 브라우저는 JavaScript를 지원하지 않거나 일시적으로 비활성화되어 있습니다.
도움이 필요하면 <a href="/support/browsers/">브라우저 지원</a>을 방문하세요.</p>
</noscript>
[/xhtml]

공유하고 싶은 우아한 저하의 예가 하나 더 있습니다. YouTube에서 동영상 재생을 위해 HTML5를 사용하는 경우입니다. 브라우저가 HTML5를 지원하지 않는 경우 Flash를 사용하여 동영상을 표시하고 Flash가 설치되어 있지 않은 경우에도 모바일 장치에 HTML5를 설치하라는 메시지가 표시됩니다. 두 경우 모두 비디오를 볼 수 있습니다. 그러나 이러한 점진적인 저하의 한 가지 단점은 성능은 좋지만 오래된 브라우저를 사용하는 경우 특정 디자인 요소와 타협해야 한다는 것입니다. 웹 사이트의 필수 시각적 요소를 미리 결정하면 트릭을 수행할 수 있습니다.

사용하지 않는 라이브러리를 보관할 필요가 없습니다.

한 가지 모범 사례는 사용하지 않는 라이브러리를 보관하지 않는 것입니다. 예, 사용된 라이브러리와 사용하지 않은 라이브러리를 추적하는 것은 매우 시간이 많이 걸리지만 실제로 가치가 있는 것은 사실입니다. 때로는 라이브러리를 포함시킨 후 단일 기능만 사용하고 있음을 알아차렸을 수 있습니다. 때로는 2~3개까지도 가능합니다. 반응형 디자인을 만들 때 가장 자주 사용하는 도구는 jQuery입니다. 실제로 개발자가 반응형 웹 사이트를 만드는 데 도움이 되는 jQuery 라이브러리가 많이 있습니다. 일부 위젯이 마음에 든다는 이유만으로 JavaScript 라이브러리와 같은 여러 라이브러리를 포함하면 페이지 로딩 시간이 상당히 늘어납니다. 그러나 어떤 라이브러리가 어느 정도 사용 중인지 분석하는 것은 좋은 습관이 될 것입니다.

기능 사용 가능 여부 확인

장치가 특정 기능을 지원하는지 여부를 활성화하기 전에 확인할 수 있습니다. 예를 들어 오래된 Android 휴대전화에 최신 버전의 Chrome을 설치했는데도 웹사이트가 표시되지 않는 경우가 있습니다. 때때로 그러한 웹사이트를 로드하려는 시도에서 브라우저가 너무 심하게 충돌하여 전체 모바일 장치가 응답하지 않게 됩니다. 당신은 장치를 재부팅해야합니다, 그리고 이것이 당신이 원했던 마지막 것입니다. 특정 웹 응용 프로그램의 많은 사용자는 이미 이 문제로 인해 어려움을 겪고 있습니다.

기기에서 기능을 사용할 수 없지만 웹사이트나 애플리케이션을 디자인하면 브라우저 유형에 관계없이 전 세계 Android 기기에서 Google 행아웃 앱이 즉시 충돌하는 것과 같은 몇 가지 눈에 띄는 문제가 발생했습니다. 앱이 가벼운 앱이라는 사실에도 불구하고 이것은. 사용자가 이전 버전의 Android 스마트폰을 사용하고 있다고 주장할 수 있지만 이러한 장치는 모바일 상점에서 새 제품으로 여전히 판매되고 있는 것도 사실입니다. 많은 모바일 사용자는 YouTube 및 Twitter 앱에서도 동일한 성능 문제에 직면합니다. 구글 플레이를 통해 구글 안드로이드 시스템 웹뷰 서비스를 업데이트해도 많은 스마트폰이 얼어붙어 일종의 악몽이 된다.

이미지 최적화

시각적으로 매력적인 큰 이미지를 포함하는 것은 항상 디자이너를 유혹합니다. 문제는 이러한 이미지를 CMS에 업로드하기 전에 압축하지 않을 때 발생합니다. 이것은 특히 웹상의 여러 전자 상거래 웹사이트에 해당됩니다. Radware의 최근 연구에 따르면 페이지가 점점 더 커지고 있으며 상위 100개 소매 사이트 중 약 45%가 이미지 압축에 참여하지 않습니다. 이것은 그러한 사이트를 더 크게 만들고 결과적으로 로딩 시간을 증가시키지만 디자이너로서 당신은 문제를 피할 수 있습니다.

적절한 이미지 최적화 도구를 사용하여 이미지를 더 작은 크기로 만듭니다. 실제로 웹에는 그러한 도구가 부족하지 않습니다. 사용할 수 있는 주목할만한 것들 중 일부는 Dynamic Drive, Smush it 및 Riot입니다. Photoshop의 전문가라면 이미지 크기를 스스로 최적화할 수도 있습니다. 스마트 압축 기술을 사용하여 중복된 메타데이터에서 제거합니다. 그래픽을 PNG로, 색상이 풍부한 이미지를 JPEG로, 애니메이션 이미지를 GIF로 변환하는 것도 트릭을 수행합니다.

극단적인 경우에 대비

디자인을 시작할 때 더 쉬운 페이지를 디자인하고 싶은 유혹을 느꼈을 것입니다. 적어도 이를 통해 이해 관계자에게 무언가를 보여줄 수 있습니다. 언뜻 보기에는 좋아 보일 수 있지만 가장 어려운 시나리오에 집중하면 초반에 좋은 결과를 얻을 수 있습니다.

예를 들어 일부 기사, 블로그 및 보도 자료가 포함된 웹 페이지가 있습니다. 제목도 있어야 합니다. 이제 "반응형 웹 디자인 팁"을 표시하려고 생각했던 제목 공간에 "성공적인 반응형 웹 사이트 디자인을 위한 10가지 필수 팁 및 기술"이라는 제목이 표시되어야 한다면 어떻게 될까요? 자, 이것은 극단적인 경우입니다.

반응형 웹사이트의 성능을 최적화하기 위한 위와 같은 노력은 보이지 않습니다. 그러나 이러한 노력은 행복하고 만족스러운 사용자에게 좋은 결과를 가져옵니다. 반응형 웹 사이트의 로드 시간을 손쉽게 모니터링할 수 있는 Pingdom 도구와 같은 다양한 도구를 사용할 수 있습니다. 반응형 웹사이트가 의도한 대로 작동하는지 확인하기 위해 테스트의 중요한 측면을 건너뛰지 마십시오. 가능한 한 많은 실제 장치에서 테스트하십시오.

또한 Screenfly와 같은 리소스를 사용하여 여러 화면 해상도에서 웹사이트를 테스트할 수 있습니다. 이러한 모든 전략에는 상당한 시간이 필요하다고 주장할 수 있지만, 다시 한 번 말씀드리지만 이점을 얻으려면 열심히 땀을 흘려야 합니다. 요즘에는 구글이 사이트의 성능을 기준으로 평가하기 때문에 반응형 성능을 갖춘 반응형 웹사이트를 만드는 것이 필수적입니다. 디자이너 또는 개발자라면 위의 모범 사례 중 하나로 자신을 제한하지 마십시오. 더 많은 솔루션을 찾아야 하며 반응형 성능을 나타내는 웹 사이트를 제공하기 위해 열심히 노력해야 할 수도 있습니다.