반응형 웹 (Responsive Web) 이란 무엇인가?

     

    스마트폰, PC, 태플릿PC, 스마트TV 등 여러가지 디바이스의 해상도(화면크기)에 따라 레이아웃이 반응해서 웹페이지가 구성되는 걸 말합니다. 해상도별로 화면이 별도로 있는 것이 아니라 하나의 소스로 다양한 디바이스에서 여러가지 레이아웃을 표현할 수 있습니다. 반응형 웹이 아닌 사이트를 스마트폰에서 접속한다면 작은 화면에서 보기 불편하겠죠? 반응형 웹사이트인 경우 스마트폰에서 접속할 경우 스마트폰의 해상도에 맞게 레이아웃이 변경되어 정상적으로 볼 수가 있습니다. 제 블로그도 반응형 스킨을 사용하기 때문에 지금 사용 중인 브라우저의 크기를 줄였다 크게 해보면 해상도에 따라 화면의 레이아웃이 변경되는 것을 확인해 볼 수 있습니다.



     반응형 스킨을 테스트해보자

     

    요즘은 스마트폰으로 블로그를 방문하는 사람들이 많아져서 반응형 스킨을 사용한다면 스마트폰 기기별로 정상적으로 레이아웃이 보여지는지 궁금하게 됩니다. 저 또한 궁금해서 검색 도중 유용한 서비스를 발견했는데 반응형 스킨을 스마트폰 기기별로 테스트를 할 수 있는 다음(Daum)에서 제공하는 트로이(Troy) 라는 서비스입니다.


     트로이(Troy) 사이트 바로가기 

     http://troy.labs.daum.net/




     ✔ 트로이(Troy) 사이트의 메인 화면입니다.



     반응형 스킨을 테스트하기 위해서 블로그 URL을 입력했습니다. Galaxy Note4에서는 정상적으로 나오고 있습니다.




     1. 멀티스크린 모드 설정을 사용하면 여러 단말기를 동시에 테스트할 수 있습니다. (기본설정은 사용)

     2. 테스트할려고 하는 스마트폰의 종류를 선택합니다.



     ✔ 스마트폰 종류를 두개 선택했을 때 화면입니다. 원한다면 여러 개의 종류를 선택해서 동시에 확인할 수 있습니다.


     마치면서

     

    요즘은 웹 서비스를 개발하면 모바일을 신경안쓸 수가 없는 상황이기 때문에 반응형 웹을 사용해서 서비스를 개발하는 곳은 꾸준히 많아질 것으로 보입니다. 하나의 소스로 모든 해상도에서 보여질 수 있고, 하나의 소스이기 때문에 개발 업무량을 줄여주고 유지보수 또한 수월해 질 것이기 때문입니다.