반응형에 대한 ‘반응’은 엇갈리는게 사실이지만, 웹 서비스를 구현하는데 있어 한 번쯤은 꼭 논의해봐야할 내용 중 하나입니다. 반응형으로 가느냐, 아니냐에 따라 그리드 레이아웃 자체를 다르게 설계해야 하기 때문인데요. 웹 버전에만 초점을 맞춰 레이아웃을 구성할 경우 모바일에서의 레이아웃이 깨질 수 있고, 반대로 모바일에 초점을 맞출 경우 웹에서 레이아웃이 어색해질 수 있습니다. 때문에 반응형으로 서비스를 개발할 경우에는 화면 사이즈에 맞춰(사이즈가 줄어듬에 따라) 구조가 어떻게 달라지는지를 함께 고려해 스토리보드 등 설계 문서에 반영해야 하죠. 저 같은 경우에는 초기 버전은 PC(웹)에 맞춰 작업을 하고, 이를 기준으로 1200(1140) 이상, 1199-768(940), 767-480(450), 479이하(320)에 맞춰 반응형 처리를 하고 있는데요. 최근 웹디자인 트렌드가 블록단위로 나누어 심플하게 레이아웃을 잡는 형태이기 때문에 반응형 처리를 하는데 있어 필수로 들어가야 하는 것과 그렇지 않은 내용을 먼저 정리한 후 화면 기획을 진행하고 있습니다.
‘MIT license’의 MUURI를 통해 반응형에 대한 힌트를 얻다!
이번에 새로운 프로젝트를 진행하면서, 앱이 아닌 웹으로 테스트를 진행하기로 했고 반응형에 대한 고려가 필요해 필요한 자료가 있는지 다시 한 번 살펴보게 되었는데요. 그러다 구글을 통해 ‘MUURI’라는 API를 만나게 되었습니다. ‘MUURI’는 반응형을 기반으로 하여 정렬, 필터링 방법에 따라 달라지는 다양한 그리드 레이아웃을 확인해보고 적용할 수 있게 도와주는데요! ‘MIT licensed’를 통해 오픈소스로 배포되고 있으며 상업적으로도 이용이 가능합니다.
‘MUURI’ 웹페이지에서 두 가지 주요 데모를 바로 확인해볼 수 있는데, 하나는 위와 같은 그리드 형태의 데모입니다. 이미지 상단을 보면 검색창, 필터링(여기선 컬러에 따라 정렬 가능), 드래그앤 드롭, 정렬(좌,우 등) 방법에 따라 레이아웃이 어떻게 변하는지 볼 수 있습니다. 드래그앤드랍의 경우 모바일 환경에서 페이지 단위의 터치 제스처를 빠르게 지원하는 ‘Hammer.js‘를 활용했다고 합니다.
데모를 통해 ‘필터링’옵션을 ‘Blue’로 선택한 모습인데요. 같은 컬러라 하더라도(콘텐츠로 예를 들면 동일한 카테고리의 콘텐츠) 크기가 모두 다르게 적용될 수 있는데, 전체 내용이 모두 포함되어 있을 때와 특정 컬러의 내용만 걸러냈을때 어떻게 변하는지 바로 확인할 수 있습니다.
이번에는 디폴트 값이 ‘좌측 정렬’로 되어 있던 데모에서 우측 상단으로 정렬하기를 선택했습니다. 좌-우 정렬만 다르게 했을뿐인데 느낌이 또 다릅니다. 문서를 통해 설명하기 어려운 내용들이기에 ‘MUURI’에서 제공해주는 데모는 정말 매력적이었습니다. 기본적인 내용이라도 말이죠.
그리드 레이아웃 외, ‘MUURI’에서는 트렐로 스타일의 데모 역시 함께 제공하고 있습니다. 우리에게 익숙한 형태의 레이아웃이죠.
이를 통해 특정 보드에 속한 아이템을 드래그하여 이동할 수 있고, 포함된 아이템 갯수에 따라 달라지는 레이아웃을 미리 확인해볼 수 있습니다. 이처럼 기본적이지만 상황에 따라 달라지는 레이아웃을 바로 확인해볼 수 있는 ‘MUURI’는 깃허브를 통해 상세 내용을 확인할 수 있는데, 상업적 이용 및 수정이 가능하다는 점이 가장 큰 장점입니다. 소스에 대한 정리가 잘 되어 있어 어렵지 않게 활용이 가능하다는 점도 매력이죠. 또한 크로스 브라우징(IE의 경우 9버전 이상)을 지원하며 오픈소스로 제공되고, 웹은 물론 모바일에서의 드래그앤드랍(Drag&Drop)을 지원합니다.
그리드 레이아웃에 대한 힌트는 물론, 실제 서비스에 적용해볼 수 있는 내용을 원하신다면 ‘MUURI‘는 좋은 옵션이 될 수 있을 것 같습니다!
