반응형 웹 개발 기본 개념 이해하기

반응형 웹이란? 

반응형 웹이란 PC, TV, 내비게이션, 스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말한다.

예를 들어 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹 사이트의 구조를 작은 화면에 최적화된 구조로 변경하여 보여주고, 큰 화면을 가진 기기에서는 웹 사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여준다.

이처럼 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이다.

 

반응형 웹이 세상에 나온 이유

2007년, 처음으로 모바일 기기가 세상에 선을 보이자 사람들은 열광했다. 이제야 기본적인 검색뿐만 아니라 예약, 주문까지 언제, 어디서든 할 수 있게 되었다고 소리치면서 말이다. 하지만 모바일 기기의 인터넷 사용에는 문제가 있었다. 바로 모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다는 점이다. 그래서 등장한 것이 '모바일 웹'이다.

 

모바일 웹과 반응형 웹

모바일 기기에 최적화된 웹사이트를 제공하기 위해 모바일 웹이 등장하면서 사람들은 쾌적한 웹 사용 환경을 접할 수는 있었지만 곧바로 다른 문제에 봉착하게 되었다.

모바일 기기뿐만 아니라 태블릿 기기, 패블릿(스마트 폰과 태블릿의 합성어) 기기 등 모바일 기기보다 화면이 큰 기기가 등장함에 따라 모바일 기기처럼 작은 화면에서만 최적화된 웹사이트를 제공하는 모바일 웹이 화면이 큰 기기에서는 작게 보이게 되어 또 다시 문제가 된 것이다. 그뿐만 아니라 PC 버전의 웹사이트와 모바일 버전의 웹 사이트, 이 두 가지 웹사이트를 만들게 되면 비용과 시간, 인력을 두 배로 투자해야 하는 현실적인 문제도 해결해야 한다.

이런 문제를 감지한 전 세계의 개발자들은 다양한 방법을 모색하기 시작했고 2010년 5월 반응형 웹이라는 기술이 등장하였다.

 

왜 반응형 웹으로 만들어야 하나?

왜 웹 개발자들은 반응형 웹을 곡 배워야 하는가? 나아가 웹 기획자와 웹 디자이너도 반응형 웹을 배워야 하는 이유는 무엇인가?

반응형 웹이 등장하면서 웹사이트를 이용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간, 인력을 반으로 줄일 수 있게 되었다. 그러면 왜 반응형 웹으로 만들어야 하는지 구체적으로 알아보자.

 

1. 유지보수가 간편하다.

반응형 웹은 유지보수가 간편하다. 모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱 버전을 개별적으로 수정해야 하므로 손이 많이 가고 복잡했다. 하지만 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML 파일과 CSS 파일에서 작업하기 때문에 유지보수가 쉽다.

 

2. 모바일 점유율의 증가

세계적으로 인터넷 보급률은 90%, 스마트 기기의 보급률은 70%가 넘는다. 만약 스마트 기기 사용자가 지하철에서 뉴스를 보기 위해 언론사 사이트를 본다고 가정해보자. 그런데 언론사의 홈페이지가 PC 웹사이트로 만들어져 글씨의 크기들이 작게 보인다면 어떻게 될까? 사용자는 단 1초의 망설임 없이 다른 언론사를 찾아보거나 웹사이트를 닫아버릴 것이다. 

이처럼 모바일로 인터넷을 사용하는 것은 당연한 일이 되었다. 그러므로 웹사이트를 만들 때는 PC용 웹 이외에 모바일용 웹을 별도로 만들거나, 반응형 웹으로 만드는 것이 기본이다.

 

3. 마케팅에 유리하다.

마케팅이란 market(시장)의 매매를 활발하게 만드는 모든 과정을 말한다. 제품의 컨셉, 가격 정책이나 유통 정책, 홍보 등을 통해 많이 팔리게 만드는 활동이다. 그러나 보통 사람들이 마케팅이라고 부를 때는 회사의 제품이나 서비스를 많은 사람들에게 알리기 위한 활동을 말한다. 요즘은 마케팅 활동의 최적의 장소로 웹이 꼽히고 있다. 웹은 언제, 어디서든 스마트 기기로 쉽게 접근할 수 있기 때문에 다양한 마케팅 활동을 펼칠 수 있는 곳이다.

그런데 마케팅이 진행되는 웹사이트를 데스크톱 버전으로만 만들면 자은 화면의 스마트 기기에서는 화면이 작게 보이게 되어 전달하고자 하는 내용이 제대로 전달되지 않는다. 

이때 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하면 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경하여 보여줄 수 있기 때문에 전달하고자 하는 내용을 확실하게 전달할 수 있다. 그리고 모바일 버전과 데스크톱 버전 등 여러 가지 웹사이트를 만들지 않아도 되기 때문에 기업 비용 측면에서도 상당한 효과를 볼 수 있다.

이렇듯 언제 어디서든 접근이 용이해야 하는 웹 마케팅에서 가장 효과적인 방법인 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하는 것이다.

 

4. 검색 엔진 최적화가 가능하다.

자신의 웹사이트를 사람들에게 최대한 많이 알리고 싶다면 어떻게 해야 할까? 해답은 바로 검색 엔진 최적화 작업을 하는 것이다.

검색 엔진 최적화란 SEO(Search Engine Optimize)라고도 하며, 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색을 했을 때 나오는 웹사이트 검색 결과에서 상위권에 나타나도록 하는 작업을 말한다.

 

5. 미래 지향적 기술이다.

휘어지는 화면을 탑재한 스마트 기기나 TV, 냉장고, 차량용 내비게이션, 프린터, 화장실 등에 탑재된 웹 브라우저 그리고 환경에 따라 축소 또는 확대되는 건축물과 공상과학 영화에서나 볼 수 있었던 공중에 떠 있는 화면 등 과거에는 상상만 했던 일들이 이제는 모두 현실화되어 정말로 미리 세계에 한층 가까워졌다는 생각을 하게 만든다.

현재 그리고 미래에서 반응형 웹으로 웹사이트를 개발하게 되면 어떠한 장점이 있을까? 예를 들어 환경에 따라 자유롭게 축소 또는 확대되는 건축물이 있고, 그 안에 휘어지는 화면을 탑재한 기기들이 있을 수 있다.

이때 누군가가 건축물 안에서 스마트 TV를 이용하여 웹 브라우저를 실행시켜 일반적인 웹사이트를 접속한다고 가정해 보자. 아마도 문제 없이 웹사이트를 둘러보다가 건축물이 축소됨에 따라 원래 휘어지는 화면이 탑재된 기기들도 화면이 휘어지거나 축소될 것이다. 그러면 웹사이트의 일부가 잘려진 모습으로 보일것이다. 이와 같은 경우 반응형 웹으로 개발된 웹사이트라면 웹사이트의 구조를 환경에 따라 최적화된 구조로 바꾼 웹사이트를 보여줄 것이다.