반응형 웹

반응형 웹 디자인

웹 디자인 기법 중 하나이다.

디바이스 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다.

 

반응형 웹 디자인은 다양한 디바이스, 창, 화면, 크기에서 원활하게 렌더링 되는 웹 페이지를 제작하는 것을 말한다.

웹 사이트를 반응형으로 설계하면, 어떤 디바이스에서 어떤 방식으로 접속하든지 웹 사이트의 일관성을 유지할 수 있다. 좋은 반응형 웹 디자인은 데스크탑과 모바일이 단순히 화면 크기만 다른 것이 아니라 둘을 이용하는 소비자의 태도도 다르다는 점을 인식하고 이를 반영한 디자인이다.

반응형 웹 디자인이 중요한 이유

웹 디자이너가 고객, 고객의 사고방식 및 플랫폼을 충분히 고려하지 않으면 웹 사이트의 사용성과 기능성이 떨어진다. 즉, 다양한 디바이스에서 접속했을 때 사이트가 느리거나, 둘러보기 불편하거나, 시각적으로 뛰어나지 않으면 소비자는 금세흥미를 잃을 것이다.

 

예를 들어 개발자가 큰 데스크탑 화면에서만 아름다운 경험을 디자인하면, 모바일 디바이스에서는 텍스트가 들쭉날쭉해지고 사진은 끝없이 스크롤해야 할 만큼 길어질 수 있다. 오늘날 사용자는 다양한 디바이스로 하루 종일 콘텐츠를 소비하고 때로는 여러 디바이스를 동시에 사용하기도 한다. 따라서 이러한 소비자 행동과 태도를 염두에 두고 웹 콘텐츠를 설계하지 않으면, 성공적인 웹 사이트를 만들 수 없다.

웹 사이트의 반응성을 높이는 방법

일부 웹 페이지나 특정한 마케팅 캠페인의 반응성을 높이기 위해 고민하는 것이 아니라, 디자인 프로세스와 시스템 전반에서 반응성을 강화해야 한다. 일회성으로 프로젝트를 하나 수행하여 반응성을 올릴 수 있을 것으로 생각한다면, 웹 디자이너, 엔지니어, 콘텐츠 제작자의 업무가 중복되는 상황이 빚어져 이들의 업무가 세 배로 늘어날 것이다. 과거에는 웹디자이너가 데스크탑용 웹 사이트를 먼저 디자인하고, 이후에 모바일 디바이스와 태블릿에서도 작동하도록 조정할 방법을 찾았다. 그러나 이러면 작업량이 너무 많아 지속적으로 민첩하게 대응하기가 어렵다.

 

따라서 웹 디자이너는 페이지의 구성 요소 단위로 반응성과 기능성을 증대해야 한다. 즉, 제품 페이지 전체의 반응성이 아니라, 제품 페이지에 있는 마퀴(Marquee), 카드형 디자인, 회전식 보기, 클릭 유도 문안(CTA) 각각의 반응성을 높일 방안을 생각해야 한다. 각각의 구성 요소가 다양한 뷰포트 너비와 화면 해상도에서 원활하게 작동하게끔 할 방안을 고민해야 한다. 그래서 디자인 팀에 페이지 개발 요청이 들어오면, 이미 잘 갖추어 둔 구성 요소를 활용해 순조롭게 작업할 수 있어야 한다. 특정 페이지의 특정 콘텐츠를 더 정교하게 다듬어 사용자 경험을 완성할 수 있어야 한다.

 

이렇게 콘텐츠 수준에서, 다양한 디바이스를 이용하는 고객의 성향을 고려해 콘텐츠 디자인을 최적화할 수 있다. 즉, 모바일 사용자의 구매를 유도하는 구매 CTA는 다운로드 가능한 자사의 앱으로 바로 연결하고, 데스크탑의 CTA는 데스크탑 앱을 다운로드할 수 있는 곳으로 연결하여 그곳에서 모바일이나 태블릿용 앱을 다운로드할 수 있는 CTA를 이차적으로 제시할 수 있다.

반응형 웹 디자인과 적응형 웹 디자인의 차이점

반응형 웹 디자인은 다양한 디바이스의 다양한 화면 크기에 유연하게 적응한다. 반응형 웹 디자인은 사용자가 뷰포트에서 선택한 모든 치수에 맞게 달라지고, CSS 미디어 쿼리를 사용하여 다양한 스타일에 맞춰 조정한다.

 

반면 적응형 디자인은 중단점을 바탕으로 정적 레이아웃을 사용한다. 중단점이란 최상의 경험을 제공하기 위해 웹 사이트 콘텐츠 및 디자인을 조정하는 지점으로서 일반적으로 창 또는 화면 치수에 따라 달라진다. 중단점은 사용자 디바이스의 현재 화면 크기를 감지하여 가장 일반적인 화면 너비에 맞게 미리 디자인된 레이아웃을 로드한다. 그러나 사용자가 브라우저 창 크기를 조정하는 등 화면 크기를 변경하면 적응하지 못한다.

 

반응형 웹 디자인은 적응형 웹 디자인이 고려하지 않는 모든 크기를 다양하게 고려한다. 그래서 더 유연하지만, 구현하기가 더 어렵다. 반면 적응형 디자인은 웹 사이트를 세 가지 버전으로 구축하는 것과 같고, 이들 버전은 사용자의 선택에 따라 부적절해지기도 한다.

반응형 웹 디자인의 주요 구성 요소

가장 먼저 고려해야 하는 요소는 우리가 염두에 둔 다양한 반응형 디자인이다. 그다음 어떤 기술을 사용하여 디자인을 구현할지 결정한다. Flexbox 컨테이너나 CSS 그리드 컨테이너와 같은 툴을 활용할 수 있다. 요새 온라인 사용자들은 업계의 표준 중단점에서 벗어나는 경향이 있으므로 디자이너는 이러한 새로운 흐름에 적응해야 한다.

 

두 번째 구성 요소는 데이터다. 정량 데이터와 정성 데이터를 모두 수집해야 한다. 정량 데이터는 사이트 방문자수, 방문자의 제품 및 서비스 구매 금액 등으로서 비즈니스 결정을 내릴 때 유용하고, 정성 데이터는 고객과의 대화를 통해 수집하는 데이터로서 고객의 행동과 기대를 파악하는 데 유용하다.

 

세 번째 구성 요소는 각 웹 페이지에 넣을 창의적인 콘텐츠다. 성숙도가 높은 많은 기업이 웹디자인에 반응형 콘텐츠를 넣고 있다. 예를 들어 모바일 디바이스에서 웹 페이지를 볼 때 페이지의 텍스트가 변한다거나 페이지를 편하게 스크롤할 수 있도록 텍스트가 적은 콘텐츠를 사용한다.

반응형 웹 디자인의 이점

반응형 웹 사이트는 고객 경험을 최적화하고 사이트 성능을 높이는 기회가 된다. 사이트의 반응성이 증가하면, 이탈률이 감소한다. 그리고 다양한 뷰포인트와 다양한 고객의 사용 패턴에 맞게 최적화할 수 있어 고객의 참여가 증가한다.

 

반응형 웹 디자인은 고객에게도 혜택을 가져다준다. 브랜드가 고객의 디바이스와 니즈를 고려하기 때문이다. 예를 들어 직장에서 데스크탑 컴퓨터로 풍부한 인터랙티브 경험을 즐기고, 이후 모바일 디바이스로 빠른 페이지 로드와 작은 화면에 최적화된 터치 인터페이스를 누릴 수 있다.

반응형 웹 디자인을 위한 도구

https://www.thismanslife.co.uk/projects/responsiveillustration/

Responsive Design, Responsively Illustrated

https://getbootstrap.com/

Bootstrap

https://search.google.com/test/mobile-friendly

모바일 친화성 테스트 - Google Search Console

https://www.justinmind.com/

Free prototyping tool for web & mobile apps - Justinmind

http://adaptive-images.com/

Adaptive Images in HTML

http://fittextjs.com/

FitText - A plugin for inflating web type

https://ui.dev/amiresponsive

Am I Responsive?

https://developer.chrome.com/docs/devtools/

Chrome DevTools - Chrome Developers

https://www.browserstack.com/

Most Reliable App & Cross Browser Testing Platform

https://smartbear.com/product/bitbar/

App Testing Solution | CrossBrowserTesting + BitBar | SmartBear

무료인것도 있고 유료인것도 있다.

반응형 웹 사이트 제작시 도움되는 사이트

반응형 디자인 패턴 알기

https://web.dev/learn/design/

Learn Responsive Design

반응형 웹디자인은 몇가지 패턴이 있다. 구글 디벨로퍼에서는 유동형, 콜룸 드롭, 레이아웃 시프터 등 다양한 패턴에 대한 설명과 실제 구현 가능한 코드까지  제공하고 있다.

국내 어워즈, 웹 사이트

https://www.gdweb.co.kr/main/

(웹 사이트 평가, 에이전시 검색 등)

http://www.gdweb.co.kr

해외 어워즈, 웹 사이트

https://mediaqueri.es/

(반응형 웹 사이트 모음)

Media Queries

https://www.webdesign-inspiration.com/

(유형별 산업별 웹 사이트 모음)

Web Design Inspiration : The Best Website Design Ideas

https://www.csswinner.com/

(웹 디자인 어워즈)

CSS Winner - Web Design Awards - CSS Award Gallery for Website Design Inspiration - Website Awards

https://allcoolwebsites.com/

(웹 사이트 영감)

Website Inspiration - All Cool Websites

웹 디자인 아이디어

http://www.csszengarden.com/

(아름다운 CSS 디자인)

CSS Zen Garden: The Beauty of CSS Design

https://www.lapa.ninja/

(랜딩 페이지 아이디어)

5104 Landing Page Design Inspiration - Lapa Ninja

반응형 템플릿

반응형 웹 사이트 템플릿을 제공하는 사이트는 다양하게 있다. 대부분 유료 템플릿을 판매하는 사이트다.

무료로 제공하는 템플릿도 있다.

https://webflow.com/templates

(각종 반응형 템플릿)

HTML5 responsive website templates | Webflow

https://www.graphicdesignresources.net/mockups/520-best-responsive-website-mockup-templates.html

(반응형 목업 템플릿)

520+ Best Responsive Website Mockup Templates | Free & Premium

국내 에이전시 홈페이지

에이전시 홈페이지와 포트폴리오는 현업에서 활약하시는 분들의 작품이다. 구현 참고

http://www.gdweb.co.kr/sub/recommend.asp

(웹 에이전시 포트폴리오 통합 검색)

http://www.gdweb.co.kr

https://www.vinylc.com/ko/works

(메뉴 깔끔)

Works | Practical UX VinylC

https://www.reconers.com/

(포트폴리오 카테고리)

반응형 홈페이지, 리커너스

http://www.pixdine-waymaker.com/works

(포트폴리오 태깅)

픽스다인 웨이메이커 :: PIXDINE WAYMAKER

 

http://theglim.co.kr/

(폰트)

The Glim inc

https://www.plus-ex.com/experience#emart

(프로세스 뷰)

Plus X Creative Partner

https://www.bdot.co.kr/home_new/work/work_view.html?idx=106&num=84&SearchGubun=&SearchPage=1&search_page=1 

(디테일 뷰)

B.CREATIVE

https://www.designpixel.co.kr/portfolio.php

(카드 자동 more)

디자인픽셀 | DESIGN PIXEL

http://www.candcomm.com/asp/work.asp

(로고, 메뉴 호버했을 때)

캔디커뮤니케이션

https://soroweb.co.kr/v3/work.php

(하나씩 페이드하며 올라오기)

(주)서로커뮤니케이션 - 반응형홈페이지 전문 웹에이전시

http://www.v-w.co.kr/main.do

(페이지 이동)

VW

http://www.visualstory.co.kr/portfolio/portfolio_list.asp?Txt_bcode=030110001 

(동그랗게 나열)

비쥬얼스토리

http://theuber.co.kr/works/works.php

(자세히 보기가 팝업으로)

The Uber Creative

https://www.masstige.biz/portfolio/portfolio_010100.html

(카드에 링크랑 자세히 보기 아이콘)

대한민국 최고의 주문제작 홈페이지제작업체 - 매스티지

http://www.ucomp.co.kr/list_thumb

(포인터, 카드 호버 회전)

유컴패니온 PROJECT

https://www.fuz.co.kr/

(왼쪽 메뉴 있는 상태로 페이지 열기)

퓨즈

https://presscat.co.kr/portfolio/

(노트북 패드 폰에 담아 놓음)

프레스캣 포트폴리오 | 워드프레스로 구현한 남다른 작품

모바일 UI, UX

반응형은 아니지만, 모바일 화면을 디자인할 때 참고하면 좋은 사이트

https://www.uxdatabase.io/product-database

(UX, 각종 툴 모음)

Product Design Tools | UX Database

https://wwit.design/

(국내 모바일 UX 모음)

What Was IT

https://mobbin.com/browse/ios/apps

(모바일 UX 정리 사이트)

Mobbin - The world’s largest mobile app design reference library