반응형웹 이란 무엇 입니까?

반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다.

2016년 기준, 스마트폰 사용자 수가 전 세계적으로 20억 명을 돌파한 것을 알고 계신가요? 이제 온라인 검색의 60 % 이상이 모바일 기기에서 발생한다는 것은 통계적 팩트 입니다. 반응형웹은 이제 선택적 옵션이 아닌, 필수 요구사항으로 자리 잡았습니다. (업데이트 : 2023년 현재 기준, 전세계 스마트폰 사용자 수는 55억명을 돌파했으며 온라인 검색 70% 이상이 모바일 기기에서 발생)

반응형의 장점은 검색엔진에 친화적이라는 것 외에도 여러가지가 존재 합니다. 앞서 언급한 바와 같이 단 하나의 웹사이트로 다양한 디바이스에 대응함으로써 유지보수 및 추가 개발 이슈에 대해 시간과 비용면에서도 보다 효율적 이라는 것이지요.

반응형웹

만일 소비자들이 부정적인 모바일 검색 경험을 한다면 잘 이용하지 않게 될 것이다. 모바일 친화적인 사이트에 대해서 검색 결과에 높은 순위를 매기는 보상을 통해서, 구글은 전반적인 모바일 검색 사용자 경험을 높이도록 도와주며, 이는 모바일 검색 사용량 증가로 이어질 것이다

Greg Sterling(그레그 스털링), Local Search Association(로컬 서치 어소시에이션)

모바일에서 가독성이 현저히 떨어지는 웹사이트를 본 적 있으신가요?

이런 이유 때문에 2015년 구글은 검색 엔진 알고리즘을 변경하여 웹 사이트의 모바일 친화도를 검색 순위 산정에 적용 하였습니다. 그리고 그날을 ‘모바일겟돈( Mobilegeddon)’으로 명명 하였습니다. 이러한 구글의 업데이트는 검색결과에 있어서 모바일에 친화적이지 않은 URL 상당수를 뒤로 몰아내는 결과를 가져왔습니다.

이 이유만으로도 반응형웹 디자인이 얼마나 중요한지 그것을 정당화 할 수 있습니다.

모바일 친화성 테스트

여러분의 웹페이지는 모바일 친화적인가요?

Google 모바일 친화성 테스트를 통해 현재 소유하고 있는 웹사이트의 상태를 확인 하실 수 있습니다
모바일 친화성 테스트

모바일 퍼스트 반응형웹 디자인

최근에는 반응형웹 디자인 개념보다는 모바일 퍼스트(모바일 우선주의)개념을 중요시 하기도합니다. 물론 둘은 서로 기술적으로 전혀 다른 무언가는 아닙니다. 전략의 차이라고 봐야 옳습니다. 반응형 웹디자인은 디자인에 있어서 일반적으로 데스크탑에서 출발 한다는 개념이고 모바일 퍼스트는 말 그대로 모바일을 그 시작점으로 인식한다는 차이점이 있습니다.

방대한 정보를 담고 있는 복잡한 레이아웃의 웹사이트를 가정할 때 이는 모바일 사용자에게 필요이상의 정보와 그에 따른 리딩 및 로딩 시간에 문제가 야기될수도 있기 때문이지요. 둘중 하나가 반드시 정답이 될수는 없다고 봅니다. 때론 여건만 된다면 ‘적응형웹’이 더 나은 선택이 될 수도 있습니다만 적응형웹은 앞서 언급한 관리 및 비용 등의 효율성에 비춰 개인적으로는 권하진 않습니다.

어떤 접근법이 더 나은지에 대한 선택은 비즈니스 형태에 따라 다를 수 있습니다. 이는 잠재 고객이 누구인지, 방문자가 웹사이트에 접근하는 방법 및 수행하려는 작업의 성질은 무엇인지 등을 먼저 파악 해야 한다는 의미 입니다.

최근 트렌드는미니멀리즘 입니다. 이는 모바일 우선주의에 좀더 근접한 의미일수도 있지만 여전히 국내 상당수의 클라이언트들은 웹사이트에 모든 것을 담기를 희망합니다. 하지만 데스크탑 기준에서 출발한 디자인이 모바일에서는 단지 ‘구겨넣기’로 끝나버리는 반응형이어서는 안되겠지요.

모바일 퍼스트 반응형웹 디자인

출처 : bradfrost.com

그런 의미에서 Brad frost는 가장 이상적인 개념을 말하고 있습니다. 모바일 퍼스트 반응형 웹 디자인 (mobile-first responsive web design)이 그것입니다.

궁극적으로 모바일 퍼스트 반응형 웹디자인은 기본적으로 점진적 개선(Progressive Enhancement)이라는 웹의 전략과 디자인에 기반한 것이다. 점진적 개선이라는 방법을 사용하면, 강력한 토대 위에 개선용 층위를 영리하게 추가하는 식의 방법으로, 모두에게 접근성을 향상시킬 수 있다.

Brad frost
프로젝트 문의

도움이 필요하신 가요?

합리적인 가격이 무엇인지 설득 보다는 공감이란 관점에서 늘 고민합니다.
프로젝트 문의