주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
홈페이지상식
반응형 웹사이트의 속도를 빠르게 하는 7가지 팁
입력 2015.06.05 오전 05:01 | 수정 2015.06.05 오전 05:01 | 조회 452
x-mind

1

주된 사용 목적을 결정하고, 반응형 디자인을  효율적으로 사용하라.

Determine Primary Use and Deploy Responsive Design
디자이너와 마케터 사이의 궁극적인 힘겨루기는 바로 이것입니다: 디자이너들은 디자인에 초점을 맞추고 마케터들은 웹사이트가 고객을 변화시키는 데에 도움이 되길 바랍니다. 이러한 상충되는 목적의 결과로, 웹사이트는 고통을 받게 됩니다.
웹사이트 디자인의 첫 번째 규칙은, 웹사이트는 마케터들의 요구를 충족시키기 위해 디자이너들에 의해 설계되어야 한다는 것입니다. 디자이너들이 그들의 도구와 테크닉 등을 투입하는 동안, 웹사이트의 목적은 마케터들이 세운 목적과 일치되어야 합니다.
만약 당신이 반응형 랜딩 페이지를 디자인하고 있다면, 그 페이지의 목적은 방문자들의 생각이나 의견을 변화시키는 것입니다. 만약 매거진이나 온라인 출판물을 디자인하고 있다면, 그것의 반응형 버전은 그래픽이나 이미지 없이 빠르게 로딩되어야 할 것입니다.
만약 당신이 마케터들 또는 사업가들과 함께 일하고 있다면, 그들을 당신의 배에 태우세요. 다른 사람들과 협력하여 일하고, 웹 페이지를 디자인하는 동안 참석자 모두가 동일한 페이지에 있는지 확인하세요.

2

모바일 우선의 디자인을 하라.

Go for Mobile-First Design
모바일-우선(모바일-퍼스트) 디자인은 단순하며 초점이 있어야 합니다. 그것은 당신의 작업을 간소화하고 모바일 전용 웹 사이트를 디자인하는 데 도움이 되는 디자인 방법입니다.
McKnight Kurland사의 Frank Kurland에 따르면, 모바일 사용 인구가 세계 인구의 87%에 달한다고 합니다. 그것이 모바일-우선 디자인이 선택이 아닌 필수인 이유입니다. Vincent Jordan은 모바일 우선 전략에 대해 이야기하며, 우선 순위의 관점에서 체험용 반응형 또는 모바일 웹사이트를 구축하는 것이 우선되어야 하며, 반응형 디자인은 그 다음이라고 주장합니다.

3

반응형 디자인은 단순함에 관한 것이다.

Responsive Design is All about Simplicity
제거하라. 제거하라. 제거하라. 로딩하는 데 시간이 걸리는 모든 것들은 화면 밖으로 치워 버리세요. 데스크탑 버전의 웹사이트들은 반응형 버전에 비해 훨씬 더 많은 디자인 요소를 가질 수 있습니다. 데스크탑 버전의 디자인 요소들 중 정확히 어떤 것들이 반응형 버전에 보여야 할 것인지 확인하는 것은 중요합니다.
 반응형 디자인은 반드시 데스크탑 버전의 디자인과 동일할 필요는 없습니다. 고객이 웹사이트에 접속하기 위해 사용하는 기기에 맞게 "적응"시키는 것이 "반응형" 디자인의 큰 부분을 차지합니다.  데스크탑 버전에 잘 맞는 것이 태블릿에도 잘 적응될 수 있지만, 반대로 스마트폰에서는 작동하지 않을 수도 있습니다.

4

압축하라.

Compress
웹사이트의 성능은 웹사이트가 요청할 때 로드해야 하는 요소들에 따라 달라집니다. 반응형 디자인에서 페이지 용량, 이미지, 텍스트, 그리고 그밖의 많은 요소들이 잘 실행되려면, 그것들의 품질을 최소화하고 잘 압축해야 합니다.
반응형 디자인에서, 당신은 오로지 대상이 되는 기기에 필요한 것만 보낼 것입니다. 일반적으로 사용되는 Compass라는 도구를 사용해 CSS와 JavaScript를 압축하세요.  만약 JavaScript 압축이 필요하다면, 당신은 UglifyJS와 같은 도구를 사용할 수도 있을 것입니다.
텍스트와 서체 역시 화면 표시 문제를 유발할 수 있습니다. FitText를 사용하여 서체 크기를 자동으로 업데이트하고  최대 및 최소 크기 옵션과 표시 옵션을 구성할 수 있습니다.
Note: FitText는 전체 문단에는 적용되지 않습니다. 이것은 헤드라인에 사용하기에 적합합니다.

5

로딩 시간을 줄여라.

Minimize Loading Time
Smashing Magazine의 Johan Johansson은 당신의 웹사이트를 모바일에서 더욱 빠르게 만드는 방법에 대해 유용한 포스트를 집필했습니다. 그가 언급하기를, 연구 결과에 따르면 80%가 넘는 수의 사람들이 그들의 모바일 폰으로 웹 브라우징을 하는 경험에 대해 실망하고 있다고 합니다. 적어도 64%의 스마트폰 사용자들이 웹사이트가 로드되는 데에 4초 미만이 걸리기를 기대합니다. 그것이 당신의 기회의 창입니다. 아마도 당신은 그것을 당신의 목표로 삼거나 더 빠르게 로딩되는 반응형 웹사이트를 만들기 위해 벤치마크할 수도 있을 것입니다.

6

종속성을 줄여라.

Reduce Dependencies
다음과 같은 방법을 통해 종속성을 감소시킴으로써 웹사이트가 더 빨리 로드되도록 만들 수 있습니다.
  • CSS를 통해 이미지를 로드한다.
  • 최소한의 외부 스타일 시트를 유지한다.
  • 이미지 대신 CSS3를 사용한다. 
  • 이미지 스프라이트를 사용한다.
  • 웹폰트 아이콘을 사용한다.
  • 인라인 프레임을 피한다.
  • 인라인 확장 가능한 벡터 그래픽(SVG)을 사용한다.
Get Elastic의 Linda Bustos 역시 'm.'으로 시작하는 모바일 사이트로의 리디렉션을 제거하고, 대신 빠르고 신뢰할 수 있는 CDN(Content Delivery Networks; 콘텐츠 전송 네트워크)을 사용할 것을 권장하고 있습니다.
그녀는 또한 반응형 이미지를 사용하고, 클라이언트 측의 프로세스를 최소화하기 위해 JavaScript를 줄이고, 위젯 사용을 피하고, RESS와 같은 특정한 서버 측 기술을 사용할 것을 권장합니다.

7

테스트하고, 테스트하고, 또 테스트하라.

Test, Test, Test
테스트는 마케팅 최적화를 위한 필수 요소입니다. 디자인은 작업 절차의 일부분으로써 테스트를 필요로 합니다. 만약 당신이 이미 디자인을 가지고 있다면, 테스트하세요. 만약 당신이 처음부터 디자인을 만들려고 하는 경우라면, 브라우저 테스트, OS(운영체제) 테스트, 기기 테스트, 속도, 유용성, 링크, 내비게이션, 미학, 그리고 편리함과 같은 다양한 변수들에 대해 테스트를 준비하세요.
테스트는 당신의 고객을 위해 충분히 가치 있는 반응형 웹사이트를 만들 수있도록 해 주는 실시간 피드백을 제공합니다.
오늘날의 수요는 고객이 어떤 종류의 컴퓨팅 장치를 사용하는지에 구애받지 않고 그들에게 다가가는 것입니다. 브라우저와 기기 종류에 걸쳐 디자인하고, 인터넷 연결 속도에 상관 없이 웹사이트에 접근할 수 있도록 합니다.
이것은 무척 어려운 일이지만, 분명히 가치가 있는 일입니다.
원문: 7 Tips to Speed Up Responsive Websites
[출처]http://cimple.postype.com/post/578/

목록수정삭제인쇄0


Copyrightⓒ x-mind.co.kr All rights reserved. 1