HR Tong 프로젝트를 진행하면서 다음과 같은 요청이 들어온 적이 있습니다.

“모바일 메뉴를 만들어야 하는데, 인사시스템(웹 기반)에서도 볼 수 있고, 모바일에서도 볼 수 있는 화면을 만들 수 있으면 좋겠습니다.”

모바일 메뉴는 HR Tong에서 Activity를 생성하여 만들 수 있지만, 인사시스템 웹 화면에서는 볼 수가 없고, 인사시스템에서 메뉴를 만들어 HR Tong에서 웹 뷰를 통해 보여주자니 PC형 화면을 모바일에서 보기가 매우 힘들었습니다. 이에 대한 대안으로 나왔던 것이 반응형 웹이었습니다.

얼마 전 프로젝트를 진행하면서 만들었던 반응형 웹에 대해 이야기해 보려고 합니다.

반응형 웹이란?

모바일 웹 브라우저에서 네이버를 접속하게 되면 url이 naver.com에서 m.naver.com으로 바뀌면서 PC 브라우저에서 보던 네이버 화면 UI와 다른 화면을 접하게 됩니다.

[모바일에서 네이버(m.naver.com)를 접속했을 때 화면]

[갤럭시S5로 본 네이버 PC 버전(www.naver.com) 화면]

위의 그림과 같이 모바일에서 네이버 PC화면을 그대로 보기에는 글자크기도 너무 작고, 그림도 잘 안보여 확대를 해야 합니다.

[확대를 하면 답답합니다…]

이 때문에 네이버는 다른 url을 가지고 모바일 전용 화면을 따로 만들어 보여주도록 되어 있습니다. 그런데 당연하게도 이러한 방법은 화면을 PC용과 모바일용 2개의 화면을 제작해야 한다는 점과 접속하는 장비를 체크해서 url을 다르게 접속하도록 세팅해야 한다는 불편함을 가지고 있습니다. 이런 불편함을 해결해줄 수 있는 것이 반응형 웹 개발이죠.

일단 반응형 웹은 화면 사이즈에 따라 화면 레이아웃과 입력창, 버튼, 콤보박스 같은 컴포넌트가 보기 편하게 위치하게 됩니다.

지금 보이는 사이트는 세계에서 가장 많이 사용되는 반응형 웹 프레임워크인 부트스트랩의 메인 홈페이지 입니다. 홈페이지 역시 부트스트랩을 이용하여 반응형 웹으로 제작되어 있습니다.

위에서 이야기 했듯 반응형 웹은 화면 사이즈에 따라 다르게 보여준다고 했습니다. 화면 사이즈를 줄여보겠습니다.

이건 중간 사이즈(테블릿 너비)의 화면으로 볼 경우입니다. 달라진게 무엇인지 잘 안보일 수도 있겠지만, 전체적으로 이미지와 레이아웃이 가로로 좁아진 느낌입니다. 여기서 더 사이즈를 줄여보겠습니다.

위와 같이 이미지는 위로 올라가고 텍스트는 이미지 하단에 위치하면서 내용이 보기 편하게 바뀌었습니다. 여기서 더 좁은 모바일 화면으로 보게 되면 텍스트의 폭도 좁아지고 작은 화면에서도 불편함이 없이 내용들을 볼 수 있습니다. 이런 웹을 반응형 웹이라고 합니다.

모바일 화면을 따로 만들지 않아도 알아서 지능적으로 바꾸어주기 때문에 하나의 화면만으로도 다양한 디바이스에서 사용할 수 있습니다. 그렇기에 url도 하나면 충분합니다.

물론 이러한 반응형 웹은 모바일 및 태블릿과 같은 소형 기기에 맞춤형이긴 합니다. 아무래도 보여주는 컨텐츠는 유지하되 레이아웃을 변경하는 것이기 때문에 많은 내용을 보여주기는 힘들지만, 화면의 추가개발은 피할 수 있는 것이죠.

이제 bootstrap이라는 반응형 웹 개발 최고의 라이브러리를 소개하겠습니다.

위에서도 소개가 조금 되었지만, bootstrap은 Html, CSS, Javascript까지 다루는 반응형 웹 프레임워크입니다. 2011년에 트위터의 개발자였던 Mark Otto는 다양한 환경마다의 라이브러리들이 존재했지만 정형화되어 있는 것이 없다는 것을 알고 하나로 통합하기 위해서 만들었습니다. 이때 1.0에서 시작한 부트스트랩은 지금은 모바일 화면에 맞춘 3 버전을 넘어 4.0 베타버전까지 출시되었지만, 4.0 베타버전에서 적용되지 않는 플러그인들이 많아 아직 3.x 버전을 많이 사용하는 편입니다.

부트스트랩은 홈페이지의 문서를 참고하면 적용하기 쉽게 되어 있고, 다양한 예제들로 개발자가 적용하기 편하게 되어 있습니다. 기본적으로 부트스트랩은 그리드 레이아웃과 다양한 컴포넌트들을 제공합니다. alert, card, dropdowns, input group 등의 컴포넌트들을 반응형 웹에 맞추어 제공합니다. 또한, 여기에 포함되지 않은 컴포넌트들을 부트스트랩 사용자들이 직접 플러그인을 만들어 제공하기도 합니다.

( 3.3.7 버전 홈페이지 : https://getbootstrap.com/docs/3.3/
4.0 베타버전 홈페이지 : https://getbootstrap.com/ )

지금부턴 개발을 하면서 사용해본 유용한 플러그인들을 소개하겠습니다.

Fuel UX(http://getfuelux.com/javascript.html)

[제공되는 컴포넌트]

• input, button, checkbox등 기본적인 컴포넌트 들에 대해서 bootstrap에서 제공하지만 infiniteScroll, datepicker, tree 등 제공하지 않는 그러나 많이 사용하는 컴포넌트들을 제공
• 기본 제공 컴포넌트들도 깔끔한 디자인을 입혀 제공

blueimp Gallery(https://blueimp.github.io/Gallery/)

• carousel이라고 불리는 이미지 및 동영상 슬라이드 컴포넌트를 제공
• 터치도 가능하여 모바일에서도 사용 가능

bootstrap-datepicker(https://eonasdan.github.io/bootstrap-datetimepicker/)

• 화면에 달력을 표시할 수 있는 컴포넌트를 제공
• 다국어도 기능도 제공하기 때문에 한국어 달력으로도 표시 가능.

Dropdown on Hover plugin(https://cameronspear.com/demos/bootstrap-hover-dropdown/)

• 일반 bootstrap을 이용하면 dropdown 메뉴들을 보기 위해서는 버튼을 클릭해야 하지만 이 플러그인을 이용하면 마우스를 위에 올려놓기만 해도 메뉴들을 볼 수 있다.

Bootstrap Markdown plugin(http://www.codingdrama.com/bootstrap-markdown/)

• 일반 글을 작성하는 것은 textarea를 사용할 수 있지만 게시판 기능을 사용하고 싶을 경우 이용할 수 있는 플러그인.
• 게시판 글쓰기 창처럼 글자 굵기, 기울이기 등 변경이 가능하고, 미리보기도 가능함.

bootsnipp(https://bootsnipp.com)

• 플러그인은 아니지만 bootstrap 버전별로 사용 가능한 플러그인들을 검색해서 사용할 수 있음.

마치면서

반응형 웹은 위에서 이야기 했던 좋은 점도 있지만, 아무래도 모바일 및 태블릿에 더 치중된 화면 프레임워크이다 보니 PC화면에서처럼 많은 컨텐츠들을 보여주면서 빠르게 개발하기는 어려운 점이 있습니다. 그러나 많은 내용을 보여주기 보단 핵심적인 내용만 빠르게 전달하고 모바일 또는 태블릿 화면에서 자주 보게 될 홈페이지를 가지고 싶다면 정답은 반응형 웹이라고 생각됩니다.

모바일 앱개발이 어렵거나 모바일용 화면을 따로 만들어야 하는 번거로움에 시도조차 두려워하시는 분들이 계시면 시간나실 때 bootstrap을 활용하여 나만의 모바일 페이지를 만들어 보는 것도 좋을 것 같습니다.