반응형 웹 (RWD) 이란?
반응형 웹(Responsive Web Design)은 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 보여지는 웹사이트의 화면을 그에 맞게 변화 시켜주는 웹 사이트입니다. 단순하게 말해서 하나의 웹 사이트가 스마트폰, PC 등의 디스플레이에 맞게 자동으로 최적화 되서 보여지는 웹 사이트를 말합니다.
※ CSS3 미디어쿼리(Media Queries) : CSS2 미디어 타입에 미디어 상태(Media Feature)를 추가하여 다양한 단말기에서 표현을 제어할 수 있게 고안된 기능이다. (반응형 웹의 경우 단말기의 화면 폭에 따라서 서로다른 스타일을 선언하고 현재의 조건을 확인하여 선언된 스타일을 적용한다고 보면 된다.)
반응형 웹의 기법
CSS3 미디어 쿼리 (media query)
CSS3 이전에서 ‘print’, ‘screen’ 등 미디어 타입등을 사용하던 것을, CSS3에서는 스크린 폭/높이 등 (예: min-width: 320px) 디바이스관련 여러 정보를 이용하여 스타일을 바꿀 수 있게 되었습니다. 사실상 반응형 웹이 가능하게 된 큰 이유이기도 합니다.
유동형 그리드 (fluid grids)
반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리, EM등이 제안하는 유동형 그리드는, 고정된 px이 아닌 em이나 %를 사용하는 것 입니다. 또한, 반응형 유동형 그리드라고 제안되는 경우, CSS3 미디어쿼리를 이용하여 특정 스크린에 따라서 그리드 시스템을 바꿀 수 있습니다.
유동형 이미지 (fluid/flexible images)
유동형 그리드와 마찬가지로, 고정된 px이 아닌 em과 %를 이용하는 접근방법으로, 특히 이 경우, max-width를 사용하고, 이를 처리하지 못하는 IE7-의 경우 적절한 javascript를 사용하는 것을 의미합니다.
반응형 레이아웃 (responsive layouts)
아직 통용되는 단어는 아니지만, 결국 반응형 웹을 완성하기 위해서는 반응형 레이아웃을 구현해야 합니다. 그렇지 않다면, 스크린별 레이아웃을, 수많은 if-and-else로 나누어서 브라우져에 보내줘야 하는 일이 발생합니다.
반응형 네이게이션/메뉴
모바일에서 메뉴를 어떻게 (줄여서) 보여줄것인지도 고민해야 합니다. 많은 경우, 내림버턴 등을 이용해서 필요할 때만 보이게 합니다. 이에 관해서 Brad Frost가 반응형 네이게이션 패턴들을 정리했습니다.
반응형 웹의 장/단점
장점
- 사용자 친화적 : 데스크탑, 노트북, 넷북, 스마트폰 등 사용자가 이용하는 모든 디바이스와 브라우저에 친화적인 화면을 제공합니다.
- 관리의 편의성 : 단일 콘텐츠 관리 및 사이트 유입 트래픽에 대한 통합 관리를 할 수 있습니다.
- 검색인진 최적화 : 단일 URL 로 운영되기 때문에 검색엔진 및 키워드 광고를 할 때 통합적으로 할 수 있습니다.
- 트렌드 선도 : 트렌드에 맞는 기술을 사용하여..에... 그냥 일단 좀 있어보이죠..
단점
- 제작기간 및 높은 단가 : 다양한 디바이스에 대한 기획이 필요하여 보통의 웹사이트보다 1.5배의 시간을 필요로 하며 개발 단가 또한 높습니다.
- 유지보수의 한계 : 초기에 잡았던 레이아웃과 컨셉을 바꾸는게 상당히 어려워 사이트 오픈 이후 변경이 불가능 하다고 생각하시면 됩니다. (제발.. 나중에 이상하다가 바꾸지 말아주세요..ㅠ_ㅠ)
- 문화적 차이? : 심플한 형태의 외국 사이트와 다르게 국내 사이트는 메인화면에서 많은 데이터를 보여주는 것을 좋아합니다. 이러한 페이지에는 반응형 웹이 어울리는 않죠!!
- 성능저하 : 사용자는 하나의 디바이스를 사용하고 있지만 모든 디바이스를 위한 페이지가 모두 로드 될때까지 기다려야 하는 단점이 있습니다.
- 구버전 브라우저 호환성 : IE8 이하 버전의 구 버전 브라우저에 대해서는 지원을 하지 않고 있습니다.
반응형 웹 기획
- 반응형 웹을 기획할 때는 우선 다음과 같은 5개의 단계로 이루어 집니다. (사이트의 특성에 따라 기획의 단계가 변경되기도 합니다.)
- 정보설계 (IA)
- 우선순위 관점 정의
- 가변 단계 정의
- 가변 정의에 따른 레이아웃 정의
- UI 구성 요소 정의
이 내용에 대해서 조금 더 자세히 알아보겠습니다.
1. 정보설계 (IA)
PC, Mobile, laptop 등 다양한 디바이스에서 하나의 사이트를 보여주는 것이기 때문에 고려해야딜 항목이 많습니다. 웹 사이트에 있는 다양한 정보들을 각 디바이스에 맞게 사용자가 손쉽게 찾을 수 있도록 정보 콘텐츠를 구조화 하는 것이 중요한 요소 입니다.
- 정보를 구성하는데 필요한 뎁스 구분 체계 정립
- 정보 콘텐츠 접근이 용이하게 네이밍 구성
- 유사한 정보들 끼리 유기적으로 연결될 수 있게 그룹화 구성
- 정보 탐색 시간의 최소화를 위해 효과적인 정보 접근 구성
IA 설계시 무엇보다 고려할 점은 사용자가 원하는 콘텐츠를 정확하게 판단하고, 이를 정적, 동적으로 제공하는 방법을 설계하는 것이라고 보시면 될듯합니다.
2. 우선순위 관점 정의
이렇게 설계된 IA를 통해서 노출될 콘텐츠와 필요한 정보들을 나열합니다. 그리고 그러한 정보를 바탕으로 현재 사이트에서 노출되어야 될 항목을 결정하고 방문하는 사용자와 클라이언트의 요구를 들어 우선순위 관점 (제가 임의적으로 만든 단어 입니다.)에 대한 정의를 합니다.
기본적으로 우선순위 관점에 대한정의는 콘텐츠의 양과 방문하는 사용자의 디바이스에 따라서 다르며 아래 2가지 경우로 나눠 집니다.
- Mobile-First : 콘텐츠의 양이 적으며 방문하는 사용자가 대체적으로 모바일 위주의 디바이스를 사용한다.
- PC-First : 콘텐츠의 양이 많으며 방문하는 사용자가 PC 위주의 디바이스를 사용한다.
위 상황에 따라서 큰화면부터 기획(PC-First)을 할 것인지, 작은 화면부터 기획(Mobile-First) 할 것인지에 대한 정의를 해야합니다.
※ 다양한 곳 에서 Mobile-First 에 대한 중요성(참고자료)을 강조하고 있지만, Mobile-First로 기획한 경우 콘텐츠에 대한 부족 현상을 가지고 올 수도 있습니다. 따라서 기획하는 사이트를 정확히 분석하여 해당 사이트에 맞는 전략이 필요한듯합니다.
3. 가변 단계 정의
다음으로는 우선 지원할 디바이스 사이즈의 범위를 정하고 그에 따른 가변 단계를 정의를 하는 것입니다. 이러한 가변 단계를 정의할 때는 형태 출시되어 있는 디바이스 뿐 아니라 향 후 출시 될 디바이스에 대해서도 고려를 하는 것이 좋습니다.
이 단계에서는 반응형 화면 경계치(Responsive Breakpoints)를 위주로 가변의 단계를 정의하시면 됩니다. 대표적으로 많이 사용되고 있는 경계치를 아래 정리해 보았습니다.
| 구분 | 경계치 정의 |
| mediaquri.es | 320px : 스마트폰 768px : 테블릿 1024px : 넷북 1600px : 데스크탑 |
| 트위터 Bootstrap | 480px 이하 : 스마트폰 481px ~ 767px : 스마트폰 부터 테블릿 768px ~ 979px : 테블릿 세로 980px ~ 1199px : 기본 1200px 이상 : 큰 화면 |
이러한 경계치는 현재 나와 있는 디바이스에만 맞춰져 있었기 때문에 앞으로 나올 모바일 기기들 까지 고려하여 보다 자연스러운 경계(Natural Breakpoints)를 사용하자는 주장도 있습니다.
기존 Responsive Breakpoints
주장하는 Natural Breakpoints
기존의 특정 수치(320, 768.. 등)에 딱 맞춰진 경계치가 아닌 다양한 크기를 넉넉하게 포함 시킨 경계치(500, 650, 1020.. 등)를 사용하여 기존의 경계치가 중간으로 들어가도록 경계치를 잡아야 된다는 주장입니다.
이러한 경계치를 통해서 가변 단계를 정의 할때는 IA를 통해서 얻게된 화면에서 표현해야될 콘텐츠와 사이트에서 주로 이용하는 사용자 층을 고려한 후 사용할 스크린의 경계치와 그 수를 정의 하시면 될듯 합니다.
4. 가변 정의에 따른 레이아웃 정의
이렇게 정해진 가변 정의에 따라서 콘텐츠를 구성하고 그에 따른 IA 상에서 중요한 항목들을 도출하여 화면에 대한 레이아웃을 정의 하시면 됩니다. 전체적으로 레이아웃이 확대, 축소, 이동되는 거는 관계 없지만 구성 레이아웃이 크게 위치가 변하는 것은 좋지 않습니다.
레이아웃은 다양한 레이아웃이 있으나 참고할 만한 몇가지 레이아웃 패턴을 첨부합니다.
5. UI 구성 요소 정의
전체적은 레이아웃을 잡으셨으면 이제 영역 별로 UI 구성에 대한 요소들의 정의하시면 됩니다. 이부분을 고려하지 않고 무턱대고 전체 화면 시나리오 위주로 기획을 했을 경우 레이아웃 설계시 개발자분과 싸우실 수도 있습니다...
대체적으로 UI 구성에 대한 정의를 하실때 디스크립션 부분에 정의 하셔야되는 항목은 아래와 같습니다.
- 이미지 사이즈 규정 : 확대/축소, 행/열 조정 (참고자료)
- 폰트 사이즈 규정 : em (참고자료)
- 그리드 규정 : em (참고자료)
- 링크규정 : 일반적으로 PC에서는 사용자에게 새창을 통한 페이지 이동이 편리하지만 모바일에서 그렇지 않을 수 있습니다.
- 터치 행위 고려 : 모든 디바이스가 해당된다는 것을 생각하고 항상 터치 영역에 대한 고려가 필요합니다.
반응형 웹 속도 개선 방안
1. Determine Primary Use and Deploy Responsive Design
주된 사용 목적을 결정하고, 반응형 디자인을 효율적으로 사용하라.
웹사이트 디자인의 첫 번째 규칙은, 웹사이트는 기획자 및 클라이언트의 요구를 받아들여 디자이너들에 의해 설계되어야 한다는 것입니다.
디자이너들이 반응형 웹을 만드는 동안 웹사이트의 목적은 기획자와 클라이언트의 목적과 일치 되어야합니다.
2. Go for Mobile-First Design
모바일 우선의 디자인을 하라.
Mobile-First Design 은 단순하며 초점이 있어야 합니다.
McKnight Kurland사의 Frank Kurland에 따르면, 모바일 사용 인구가 세계 인구의 87%에 달한다고 합니다. 이러한 점이 Mobile-First Design 을 선택한 이유입니다. Vincent Jordan은 모바일 우선 전략에 대해 이야기하며, 우선 순위의 관점에서 체험용 반응형 또는 모바일 웹사이트를 구축하는 것이 우선되어야 하며, 반응형 디자인은 그 다음이라고 합니다.
(국내 같은경우는 네트워크가 빠르며 콘텐츠 사용에 따른 트렌드가 첫화면에서 많은 콘텐츠를 보여주는 것을 지향하는 경우가 많아서 PC-First 도 괘찮다고 보여집니다..)
3. Responsive Design is All about Simplicity
반응형 디자인은 단순함에 관한 것이다.
제거하라. 제거하라. 제거하라. 로딩하는 데 시간이 걸리는 모든 것들은 화면 밖으로 치워 버리세요. 데스크탑 버전의 웹사이트들은 반응형 버전에 비해 훨씬 더 많은 디자인 요소를 가질 수 있습니다. 데스크탑 버전의 디자인 요소들 중 정확히 어떤 것들이 반응형 버전에 보여야 할 것인지 확인하는 것은 중요합니다.
4. Compress
압축하라.
웹사이트의 성능은 웹사이트가 요청할 때 로드해야 하는 요소들에 따라 달라집니다. 반응형 디자인에서 페이지 용량, 이미지, 텍스트, 그리고 그밖의 많은 요소들이 잘 실행되려면, 그것들의 품질을 최소화하고 잘 압축해야 합니다.
(일반적으로 사용되는 Compass라는 도구를 사용해 CSS와 JavaScript를 압축하면 좋습니다. JavaScript 압축이 필요하다면UglifyJS와 같은 유틸을 이용하시는 것도 좋은 방법입니다.)
5. Minimize Loading Time
로딩 시간을 줄여라.
Smashing Magazine의 Johan Johansson은 당신의 웹사이트를 모바일에서 더욱 빠르게 만드는 방법에 대해 유용한 포스트를 집필했습니다. 그가 언급하기를, 연구 결과에 따르면 80%가 넘는 수의 사람들이 그들의 모바일 폰으로 웹 브라우징을 하는 경험에 대해 실망하고 있다고 합니다. 적어도 64%의 스마트폰 사용자들이 웹사이트가 로드되는 데에 4초 미만이 걸리기를 기대합니다.
6. Reduce Dependencies
종속성을 줄여라.
다음과 같은 방법을 통해 종속성을 감소시킴으로써 웹사이트가 더 빨리 로드되도록 만들 수 있습니다.
- CSS를 통해 이미지를 로드한다.
- 최소한의 외부 스타일 시트를 유지한다.
- 이미지 대신 CSS3를 사용한다.
- 이미지 스프라이트를 사용한다.
- 웹폰트 아이콘을 사용한다.
- 인라인 프레임을 피한다.
- 인라인 확장 가능한 벡터 그래픽(SVG)을 사용한다.
반응형 이미지를 사용하고, 클라이언트 측의 프로세스를 최소화하기 위해 JavaScript를 줄이고, 위젯 사용을 피하고, RESS와 같은 특정한 서버 측 기술을 사용할 것을 권장합니다.
7. Test, Test, Test
테스트하고, 테스트하고, 또 테스트하라.
테스트는 마케팅 최적화를 위한 필수 요소입니다. 디자인은 작업 절차의 일부분으로써 테스트를 필요로 합니다. 만약 당신이 이미 디자인을 가지고 있다면, 테스트하세요. 만약 당신이 처음부터 디자인을 만들려고 하는 경우라면, 브라우저 테스트, OS(운영체제) 테스트, 기기 테스트, 속도, 유용성, 링크, 내비게이션, 미학, 그리고 편리함과 같은 다양한 변수들에 대해 테스트를 준비하세요.
테스트는 당신의 고객을 위해 충분히 가치 있는 반응형 웹사이트를 만들 수있도록 해 주는 실시간 피드백을 제공합니다.
참고하면 유용한 사이트
'기획·PM' 카테고리의 다른 글
| 애플리케이션 벤치마킹 하기 (0) | 2014.07.02 |
|---|---|
| 잘 만들어진 웹사이트 Wireframe 10 (0) | 2014.06.30 |
| WBS (Work Breakdown Structures) (0) | 2014.06.15 |
| 웹사이트 분석 평가표 (0) | 2014.06.12 |
| 시장 세분화의 법칙 (0) | 2012.10.09 |