디바이스 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다.
반응형 웹 디자인은 다양한 디바이스, 창, 화면, 크기에서 원활하게 렌더링 되는 웹 페이지를 제작하는 것을 말한다.
웹 사이트를 반응형으로 설계하면, 어떤 디바이스에서 어떤 방식으로 접속하든지 웹 사이트의 일관성을 유지할 수 있다. 좋은 반응형 웹 디자인은 데스크탑과 모바일이 단순히 화면 크기만 다른 것이 아니라 둘을 이용하는 소비자의 태도도 다르다는 점을 인식하고 이를 반영한 디자인이다.
반응형 웹 디자인이 중요한 이유
웹 디자이너가 고객, 고객의 사고방식 및 플랫폼을 충분히 고려하지 않으면 웹 사이트의 사용성과 기능성이 떨어진다. 즉, 다양한 디바이스에서 접속했을 때 사이트가 느리거나, 둘러보기 불편하거나, 시각적으로 뛰어나지 않으면 소비자는 금세흥미를 잃을 것이다.
예를 들어 개발자가 큰 데스크탑 화면에서만 아름다운 경험을 디자인하면, 모바일 디바이스에서는 텍스트가 들쭉날쭉해지고 사진은 끝없이 스크롤해야 할 만큼 길어질 수 있다. 오늘날 사용자는 다양한 디바이스로 하루 종일 콘텐츠를 소비하고 때로는 여러 디바이스를 동시에 사용하기도 한다. 따라서 이러한 소비자 행동과 태도를 염두에 두고 웹 콘텐츠를 설계하지 않으면, 성공적인 웹 사이트를 만들 수 없다.
웹 사이트의 반응성을 높이는 방법
일부 웹 페이지나 특정한 마케팅 캠페인의 반응성을 높이기 위해 고민하는 것이 아니라, 디자인 프로세스와 시스템 전반에서 반응성을 강화해야 한다. 일회성으로 프로젝트를 하나 수행하여 반응성을 올릴 수 있을 것으로 생각한다면, 웹 디자이너, 엔지니어, 콘텐츠 제작자의 업무가 중복되는 상황이 빚어져 이들의 업무가 세 배로 늘어날 것이다. 과거에는 웹디자이너가 데스크탑용 웹 사이트를 먼저 디자인하고, 이후에 모바일 디바이스와 태블릿에서도 작동하도록 조정할 방법을 찾았다. 그러나 이러면 작업량이 너무 많아 지속적으로 민첩하게 대응하기가 어렵다.
따라서 웹 디자이너는 페이지의 구성 요소 단위로 반응성과 기능성을 증대해야 한다. 즉, 제품 페이지 전체의 반응성이 아니라, 제품 페이지에 있는 마퀴(Marquee), 카드형 디자인, 회전식 보기, 클릭 유도 문안(CTA) 각각의 반응성을 높일 방안을 생각해야 한다. 각각의 구성 요소가 다양한 뷰포트 너비와 화면 해상도에서 원활하게 작동하게끔 할 방안을 고민해야 한다. 그래서 디자인 팀에 페이지 개발 요청이 들어오면, 이미 잘 갖추어 둔 구성 요소를 활용해 순조롭게 작업할 수 있어야 한다. 특정 페이지의 특정 콘텐츠를 더 정교하게 다듬어 사용자 경험을 완성할 수 있어야 한다.
이렇게 콘텐츠 수준에서, 다양한 디바이스를 이용하는 고객의 성향을 고려해 콘텐츠 디자인을 최적화할 수 있다. 즉, 모바일 사용자의 구매를 유도하는 구매 CTA는 다운로드 가능한 자사의 앱으로 바로 연결하고, 데스크탑의 CTA는 데스크탑 앱을 다운로드할 수 있는 곳으로 연결하여 그곳에서 모바일이나 태블릿용 앱을 다운로드할 수 있는 CTA를 이차적으로 제시할 수 있다.
반응형 웹 디자인과 적응형 웹 디자인의 차이점
반응형 웹 디자인은 다양한 디바이스의 다양한 화면 크기에 유연하게 적응한다. 반응형 웹 디자인은 사용자가 뷰포트에서 선택한 모든 치수에 맞게 달라지고, CSS 미디어 쿼리를 사용하여 다양한 스타일에 맞춰 조정한다.
반면 적응형 디자인은 중단점을 바탕으로 정적 레이아웃을 사용한다. 중단점이란 최상의 경험을 제공하기 위해 웹 사이트 콘텐츠 및 디자인을 조정하는 지점으로서 일반적으로 창 또는 화면 치수에 따라 달라진다. 중단점은 사용자 디바이스의 현재 화면 크기를 감지하여 가장 일반적인 화면 너비에 맞게 미리 디자인된 레이아웃을 로드한다. 그러나 사용자가 브라우저 창 크기를 조정하는 등 화면 크기를 변경하면 적응하지 못한다.
반응형 웹 디자인은 적응형 웹 디자인이 고려하지 않는 모든 크기를 다양하게 고려한다. 그래서 더 유연하지만, 구현하기가 더 어렵다. 반면 적응형 디자인은 웹 사이트를 세 가지 버전으로 구축하는 것과 같고, 이들 버전은 사용자의 선택에 따라 부적절해지기도 한다.
반응형 웹 디자인의 주요 구성 요소
가장 먼저 고려해야 하는 요소는 우리가 염두에 둔 다양한 반응형 디자인이다. 그다음 어떤 기술을 사용하여 디자인을 구현할지 결정한다. Flexbox 컨테이너나 CSS 그리드 컨테이너와 같은 툴을 활용할 수 있다. 요새 온라인 사용자들은 업계의 표준 중단점에서 벗어나는 경향이 있으므로 디자이너는 이러한 새로운 흐름에 적응해야 한다.
두 번째 구성 요소는 데이터다. 정량 데이터와 정성 데이터를 모두 수집해야 한다. 정량 데이터는 사이트 방문자수, 방문자의 제품 및 서비스 구매 금액 등으로서 비즈니스 결정을 내릴 때 유용하고, 정성 데이터는 고객과의 대화를 통해 수집하는 데이터로서 고객의 행동과 기대를 파악하는 데 유용하다.
세 번째 구성 요소는 각 웹 페이지에 넣을 창의적인 콘텐츠다. 성숙도가 높은 많은 기업이 웹디자인에 반응형 콘텐츠를 넣고 있다. 예를 들어 모바일 디바이스에서 웹 페이지를 볼 때 페이지의 텍스트가 변한다거나 페이지를 편하게 스크롤할 수 있도록 텍스트가 적은 콘텐츠를 사용한다.
반응형 웹 디자인의 이점
반응형 웹 사이트는 고객 경험을 최적화하고 사이트 성능을 높이는 기회가 된다. 사이트의 반응성이 증가하면, 이탈률이 감소한다. 그리고 다양한 뷰포인트와 다양한 고객의 사용 패턴에 맞게 최적화할 수 있어 고객의 참여가 증가한다.
반응형 웹 디자인은 고객에게도 혜택을 가져다준다. 브랜드가 고객의 디바이스와 니즈를 고려하기 때문이다. 예를 들어 직장에서 데스크탑 컴퓨터로 풍부한 인터랙티브 경험을 즐기고, 이후 모바일 디바이스로 빠른 페이지 로드와 작은 화면에 최적화된 터치 인터페이스를 누릴 수 있다.