4. 반응형 웹
보통 웹으로 구축하려는 경우, 반응형 웹을 하나 구축해서 모바일과 웹 두 마리의 토끼를 잡으려고 한다. 반응형 웹이란, 모두가 다 알다시피, 브라우저 크기에 따라 사이트가 변하는 것이다. 일반적으로는 모바일용 / 웹용 홈페이지를 각각 만들어야 하지만, 이 경우에는 하나의 웹사이트만으로 모바일과 웹 둘 모두를 서비스할 수 있다. 아래 사이트를 한번 클릭해보자.
아래 사이트를 브라우저에 띄우고, 브라우저 크기를 축소하거나 확대해보자. 그러면 브라우저 크기에 따라 메뉴나 컨텐츠들이 자동으로 변하는 모습이 보인다. 핸드폰 화면만큼 브라우저를 작게 조절하면 모바일웹의 모습이 되고, 최대화시키면 익숙한 웹 사이트의 모습으로 변한다.
상단 메뉴를 보자. 일반 웹사이트에서 볼 수 있는 형태로, 일렬로 메뉴가 나타나있다
브라우저 창을 줄이면 모바일 전용 햄버거(三) 메뉴 아이콘이 나타나면서, 다른 메뉴들이 사라진다.반응형 웹을 제작하는 기술은 웹 개발에서 High 퀄리티에 속한다. 센스있게 세밀히 다듬기 어려운 면도 있지만, 무엇보다 개노가다다. 반응형 웹을 구현하는 방법에도 두 가지가 있다. 첫번째로는 '맨땅에 헤딩'하는 방법이고, 두 번째로는 부트스트랩과 같이 반응형 웹을 지원하는 UI 프레임웍을 도입하는 것이다.
보통 반응형 웹은 몇 가지 케이스를 설정해둔 후 개발한다. 브라우저 가로 사이즈가 최대 500픽셀인 경우, 최대800픽셀인 경우, 최대 1000픽셀 이상일 경우 - 이런 식으로 보통 3가지 케이스로 구분하고, 엄청 세밀하게 하려는 경우엔 뭐.. 케이스를 더 많이 만들기도 한다. 그리고 그 케이스에 따라 각각 다르게 보이도록 스타일 속성을 지정한다. 폰트 크기나, 이미지 크기, 전체적인 사이트의 스타일들을 각각의 케이스에 따라 다르게 설정하는 것이다.
직접적인 코드를 궁금해 할 사람도 있는 것 같아서 밑에 써본다. 코드를 이해하지 못한다고 해서 좌절할 건 없다. 그냥, 반응형 웹이라는게 그렇게 막 스마트한 기술이라기보다는, 이렇게 케이스 별로 다 일일이 지정해줘야 하는 노가다의 한 작업이라는 것을 이해하면 될 것 같다.
@media(max-width:1280px){ //브라우저 사이즈가 960~1280px 일때
body { font-size:18px; }
}
@media(max-width:960px){ //브라우저 사이즈가 500~1280px 일때
body { font-size:15px; }
}
@media(max-width:500px){ //브라우저 사이즈가 500px 이하일때
body { font-size:12px; }
}
그리고 이렇게 설정해서 안되는 부분들도 물론 있다. 그런 경우에는 jQuery (프론트엔드 개발 언어의 일종) 으로 브라우저의 크기가 변경되면(사용자가 브라우저의 크기를 변경하면) 어떻게 변경되었는 지 감지하여, 변경된 사이즈에 맞춰 폰트나 이미지, 박스들의 크기를 바꾸어주어야 한다.
반응형 웹을 지원하는 UI 프레임웍은 애초에 이런 설정들이 모두 기술되어 있어 매우 편리하게 개발할 수 있다. 그러한 맥락에서 부트스트랩(http://bootstrapk.com/)은 가장 많이 쓰이는 UI 프레임웍이다. 그리고 Masonry 플러그인(http://masonry.desandro.com/)도 유용하게 쓰인다. 홈페이지에 들어가서 브라우저 크기를 늘였다 줄였다 해보면 어떤 방식으로 반응형 웹이 실행되는 지 쉽게 볼 수 있다.
