한빛출판네트워크

제공 : 한빛 네트워크
저자 : Lara Swanson
역자 : 신정호
원문 : Responsive Web design performance

최근 연구 조사에 따르면 전세계의 수많은 인터넷 사용자에게 모바일은 인터넷에 접근하는 주요 수단이 됐다. 아프리카와 아시아의 인터넷 사용자 중 50% 정도가 모바일을 통해서만 인터넷을 사용하는 반면, 미국은 25%의 사용자가 모바일로만 인터넷을 사용한다. 연구 보고서에서는 데스크톱 인터넷(이 연구에서 태블릿은 "desktop" 카테고리에 속함)을 거의 사용하지 않은 사용자를 "mobile-only"라고 정의했다. 결론적으로, 많은 사람이 데스크톱 기계보다 상당히 느림에도 불구하고 인터넷에 접근 가능한 핸드셋을 주로 이용한다.

모바일 디바이스가 데이터를 전송하거나 받을 수 있기 전에는 네트워크와 무선 채널을 연결해야 했다. 이 작업은 수초 정도 걸릴 수 있으며, 데이터의 송수신 없이 타임아웃 시간이 지나면 채널은 유휴(idle) 상태가 되기 때문에 새로운 채널을 설정해야 한다. 이러한 동작 방식은 웹 페이지 로드 시간을 지연시키게 된다.

WiFi를 이용하는 전형적인 미국의 데스크톱에서 요청에 대한 평균 응답 시간은 50 밀리 초(0.005초)가 걸리고, 모바일 네트워크 환경에서는 300 밀리 초(0.03초)가 넘게 걸린다. 전화 접속 연결만큼이나 느리다. 게다가 안테나 길이나 출력 전력 때문에 WiFi는 핸드셋에서 더 느리다. 이것이 바로 모바일 디바이스를 위해 사이트 디자인을 최적화할 때 성능을 우선적으로 고려해야 할 이유다.

하지만, 대부분의 웹 디자이너는 모바일 디바이스의 화면 크기 한계에 집중하고 이런 한계를 극복하는 방법으로 반응형 웹 디자인을 선택한다. 문제는 이런 반응형 웹 디자인 사이트의 대부분이 성능을 심각하게 고려하지 않는다는 점이다. 사실 반응형 웹 디자인은 본질적으로 성능이 나쁘지 않으며, 웹 사이트의 페이지 로딩 시간에 많은 영향을 미치는 요소는 반응형 웹 디자인을 구현하는 방식이다.

반응형 웹 설계 접근법

우선 모바일 관점에서 프로젝트를 생각하고 개발이나 설계 작업을 시작하면, 수많은 데스크톱 사이트가 직면하는 여러 가지 문제를 피할 수 있다. 불필요한 내용을 모두 거둬내고 페이지나 사이트를 통해서 제공하려는 핵심 목적과 같은 큰 문제에만 집중함으로써 모바일 설계 시간을 절약할 수 있다.

추천할 만한 다른 방법은 새로운 프로젝트를 시작할 때 총 페이지 무게 제한이나 총 페이지 로드 시간 목표와 같이 성능관련 목표를 설정하는 것이다. 이렇게 성능 목표를 설정하면, 설계와 개발을 할 때 참조하는 기준점이 되어 좋다. 만약 2초 내에 페이지가 로드 되어야 한다고 결정했다면, 미학과 성능의 균형을 유지하면서 목표를 달성하기 위한 최선의 방법을 찾게 된다.

반응형 웹 설계 구현

반응형 웹 설계를 구현할 때, 사용자에게 보여지는 콘텐츠의 크기를 결정하게 된다. 콘텐츠의 크기는 유동적이거나 고정됐다가 특정 시점에 변경될 수 있으며, 특정 화면 크기에서는 정해진 자산을 로드하지 않게 할 수도 있다. 이것이 바로 사용자에게 진짜로 필요한 자산을 로드하는 것이 중요한 이유다.

필요한 자산만 로드하기 위해 적용할 수 있는 한 가지 접근법은 조건부 로드(conditional loading)다. 최근에 새롭게 등장한 "RESS"라는 용어를 들어봤을 것이다. "RESS"는 서버 사이드 검출(server side detection)와 함께 반응형 웹 디자인을 사용한다. RESS는 사용자가 사용하는 디바이스, 즉 화면 크기, 터치 기능 등을 고려해서 사용자가 봐야만 하는 콘텐츠만 로드한다. 예를 들어, 적응형 이미지(Adaptive Images)와 같은 도구는 화면 크기를 감지해서 자동으로 웹 페이지에 내장된 HTML 이미지의 크기를 디바이스에 맞게 조정한 이미지를 생성하고 캐시에 저장하며 디바이스에 전달한다.

사용자가 요청할 때 이미지나 콘텐츠를 로드하는 로딩 지연(lazy loading)도 도움이 되는 기술이다. 사용자에게 필요한 콘텐츠를 접어서 보여주고 다른 콘텐츠는 사용자가 스크롤할 때 "늦게" 로드한다. 하지만, 이 방법은 화면 판독기와 검색 로봇, 자바스크립트가 비활성화된 사용자에게 정상적으로 동작하지 않는 문제가 발생할 수 있다는 점을 명심하라.

Picturefill은 사용자에게 적당한 크기의 이미지를 전달하는데 사용 가능한 또 다른 방법이다. Picturefill은 제한된 그림 요소처럼 동작하고, 작은 자바스크립트 파일을 필요로 하며, 모든 브라우저에서 동작한다. 성능 면에서 매우 훌륭한 방법이다. Picturefill은 캐시가 가능하도록 고유의 이미지 URL을 제공한다. 작은 이미지로 시작하며 사용자를 위해 이미지를 한번만 다운로드하면 되고, 인터넷 익스플로러의 오래 전 버전에서도 동작한다. 하지만, 이 태그를 너무 많이 사용하면 브라우저가 다른 보편적인 반응형 이미지 솔루션을 적용할 경우 교체하기 어려워진다. 이것이 미래에 변경하기 쉽도록 이미지 마크업을 템플릿이나 함수 호출로 추상화해야 하는 이유다.

써드 파티 스크립트(third party scripts)에 있어서 자산 로딩도 매우 중요한 부분이다. 써드 파티 스크립트가 로드되지 않으면 써드 파티 스크립트가 사이트의 단일 장애 요소(single point of failure)가 되고, 써드 파티 스크립트를 로드할 때 사이트의 성능을 떨어뜨리게 된다. 그러므로 써드 파티 스크립트를 동시에 로드할 이유가 없다면, 항상 비동기적으로 로드해야 한다. 만약 써드 파티 스크립트가 비동기 버전을 제공하지 않으면, 비동기 버전을 제공하도록 요구하라. 물론 반응형으로 설계된 사이트에서 이런 스크립트를 성능 최적화를 위해 부하가 없고 제어하기 쉬운 간단한 링크로 교체하는 방법도 고려해보라.

이 시리즈의 앞에서 다룬 이미지와 태그 최적화에 대한 모든 기법도 반응형 웹 디자인을 구현할 때 상당히 많은 도움이 된다. 접근성(accessibility)과 행위(behavior)와 같은 다른 요소를 고려하는 반응형 웹 디자인의 전체론적인 접근법은 사용자의 가장 좋은 경험을 구현하는데 도움이 된다.

다음 글에서는 사이트의 설계와 성능을 지속적으로 개선함으로써 페이지의 로드 시간을 벤치마킹해 볼 예정이다.