내 홈페이지가 모바일에서는 어떻게 보일까? – 반응형 웹

모바일 사용자가 늘어나면서 웹제작자들의 고민이 늘어났습니다.

PC 모니터에서는 멀쩡했던 홈페이지가 스마트폰에서는 엉망이 되버렸기 때문입니다.

메뉴가 안 보이기도 하고 이미지가 어디론가 사라지기도 했습니다. 글자가 너무 작아서 눈이 아플 지경이고 버튼은 눌러도 제 기능을 하지 못 했습니다.

모바일 사용자는 점점 많아지고 심지어 모바일에서 제품을 구매하기까지 하는데 모바일웹을 그대로 방치할 수는 없었죠.

그래서 모바일 버전의 웹을 따로 제작하고 3차 도메인을 m으로 해서 별도의 사이트를 운영하게 된 것입니다.

그러니까

www.website.com 은 PC에서 보여지는 사이트
m.website.com 은 모바일에서 보여지는 사이트

로 이원화된 것입니다.

모바일에서 화면이 깨지거나 가독성이 떨어지는 문제는 해결이 됐습니다.

그런데 이렇게 운영을 하니까 일단 한개의 웹사이트를 만들 때 실질적으로 두개의 사이트를 만들어야 하는 어려움이 생겨났습니다.

관리를 할때도 마찬가지로 두배의 힘이 들었습니다.
회사 전화번호가 바뀌면 PC버전과 모바일 버전을 각각 수정해 줘야 했습니다. 인사말씀이 바뀌어도 안내멘트가 바뀌어도 매번 두번씩 작업을 해야 했습니다.

그리고 PC 모니터와 스마트폰의 중간 크기에 해당하는 태블릿이나 넷북 등은 애매한 위치에 놓이게 되었습니다.
태블릿PC에서 보여지는 글자의 크기는 모바일 버전일 때 너무 크고 PC버전일때는 너무 작았습니다.

모바일 버전의 문제점이 하나 둘 드러나기 시작한 거죠.

그래서 해결책을 강구하게 된 것이 ‘반응형 웹’입니다.

반응형은 말 그대로 뭔가에 반응하도록 설계된 것인데 반응을 유도하는 것은 다름 아닌 사용자의 접속기기(device)입니다.

PC, 스마트폰, 태블릿, 노트북 등 접속기기는 저마다의 화면크기와 해상도를 가지고 있습니다.

반응형 웹은 접속기기의 화면크기를 감지해서 화면 레이아웃을 넓게 할지 아니면 길고 좁게 할지를 결정합니다. 또 글자 크기를 적절히 조절해서 가독성이 유지되도록 해 줍니다.

웹상이트를 반응형으로 만들게 되면서 별도의 모바일 버전을 제작할 필요가 없어졌습니다. 사이트 운영이 단순해 졌고 기기별로 적절한 크기의 화면을 열람할 수 있게 되었습니다.