다양한 스크린 사이즈에 대응하기 위해 유체 그리드와 미디어 쿼리 수정, 반응형 디자인을 가능하게 하는 웹 페이지 레이아웃. 디자이너들이 이 기법을 사용하면서 많은 혁신과 명확한 패턴도 나타났다. 나는 이런 패턴들 중 멀티 디바이스 레이아웃에 적용 가능한 많이 사용하는 패턴들을 분류했다.
새롭게 나타나는 반응형 디자인 레이아웃 패턴을 찾기위해 Media Queries 갤러리 사이트를 여러번 방문했다. 나는 높은 난이도의 패턴들을
나는 자주 사용되는 높은 수준의 패턴들을 찾고자 했지만 차이점이 거의 없는 몇몇 패턴은 제외했다.
대부분 유체(Mostly Fluid)
가장 인기있는 패턴은 가장 간단했다 : 큰 화면에 큰 여백(margin)을 나타내기, 유체 그리드, 큰 화면에서 작은 화면에 맞게 이미지 크기(scale) 조절, 좁은 영역에 컬럼을 수직으로 쌓기 같은 다중 컬럼 레이아웃(아래 그림 참조)
나는 이 패턴을 '대부분 유체(Mostly Fluid)'로 명명했다. 그 이유는 가장 작은 너비 화면이 되기 전까지 레이아웃 핵심 구조는 바뀌지 않았기 때문이다. 대신 다양한 스크린 크기를 대응하기 위해 유체 그리드에 의존했다.
위 예시들은 엘리먼트들이 움직이는 방식과 작은 화면 크기를 정의하는 방식은 다양하지만 대부분의 패턴은 동일했다.
컬럼 떨어트리기(Column Drop)
다른 패턴은 다중 컬럼 레이아웃으로 시작해서 단일 컬럼 레이아웃으로 변해가면서 컬럼이 아래로 떨어진다. '대부분 유체' 패턴과 다르게 이 레이아웃에서 엘리먼트들의 전체 크기는 일관된다. 다양한 화면 크기에 대응하기 위해 컬럼을 쌓는다.(아래 그림 참조)
각 디자인마다 다른 해상도 분기점에서 언제, 어떻게 컬럼이 쌓이는지는 달랐다. 일반적으로 각 내비게이션 또는 콘텐츠는 좁은 화면에서도 상단에 위치했다.
레이아웃 이동(Layout Shifter)
이 패턴은 다른 화면 크기에 대응하기 위해 가장 많이 변한다. 큰 크기 화면, 중간 크기 화면, 작은 크기 화면에서 모두 다른 레이아웃을 사용한다. 이런 본질적인 이유로 이전의 두 패턴에 비해 가장 인기가 적다.
내가 본 것들을 위 그림에 나타낸것처럼 이 패턴을 일반화시키기 위해 노력했지만 이 패턴에서 사실 많은 혁신적인 디자인들이 있었다. 결과적으로 이 패턴은 한 가지 공식으로 표현할 수 있는 방법이 없었다.
- Food Sense
- Performance Marketing Awards
- Forefathers Group
- The Boston Globe
- Andersson-Wise Architects
작은 변화(Tiny Tweaks)
가장 단순한 형태의 대응이지만 이 패턴도 인기가 없다. 왜냐하면 잔인할 정도로 단순한 하나의 컬럼 레이아웃을 가진 웹 페이지들을 사용하는 회사들이 거의 없기 때문이다. 이런 말도 안 되는 단순함 덕분에 폰트 크기, 이미지 레이아웃 변화 정도의 작은 변화만으로 멀티 디바이스에 대응이 가능하다.
캔버스 가리기(Off Canvas)
위에서 설명한 반응형 디자인 레이아웃 패턴은 각자 다른 특징이 있지만 공통점도 있다. 이전의 패턴들은 작은 화면에선 모든 것들을 수직으로 쌓는 경향이 있는데 결과적으로 다양한 컴포넌트들로 페이지가 길어진다. 확실하진 않지만, 위의 패턴들은 레이아웃을 만들기 위해 사용 가능한 화면 공간에 의존한다.
적응형 레이아웃의 핵심은 다양한 크기의 화면에 레이아웃을 맞추는게 핵심이다. 만약 그뿐이라면 우리는 우리의 선택지를 현재 보이는 것만으로 제한할 수 있다. 사실 레이아웃 적용을 위한 공간은 화면에 보여지는 부분보다 화면의 보이지 않는 부분에 더 많다.
위의 그림처럼 멀티 디바이스 레이아웃을 위한 캔버스 가리기 패턴은 공간상의 이점을 갖는다. 가려진 화면의 콘텐츠 또는 내비게이션은 더 큰 화면을 사용할 수 있게 돼서 보이거나 사용자가 숨겨진 것들 드러나게 할 때까지 숨겨진다. 이 패턴은 몇몇 모바일 웹사이트 디자인과 네이티브 모바일 애플리케이션에서 보인다.
페이스북의 모바일 웹 경험은 내비게이션 옵션들을 보기위한 링크를 선택하기 전까지 네비게이션 옵션들을 숨길 때 보이는 윈도우의 왼쪽 공간을 사용한다. 언젠가 가려진 화면이 슬라이드 되어 보인다.
Path의 네이티브 모바일 애플리케이션은 계층화된 기술을 사용하여 가려진 캔버스 효과를 만들어낸다. 이 앱은 내비게이션을 보이게 할 때 화면의 왼쪽과 오른쪽 면을 사용한다.
Torkil Johnsen은 터치와 자바스크립트를 지원하지 않는 기기들에서 Path의 디자인을 모방한 웹을 위한 컨셉을 제안했다.
구글의 모바일 경험은 내비게이션 옵션을 화면 밖에 위치하도록 화면 상단의 공간을 사용한다. 누군가가 "더보기"버튼을 누를 때 이 옵션들은 페이지의 상단으로 보이게 슬라이드 된다.
작은 크기 화면에서 캔버스 가리기 패턴의 일반적인 아이디어는 추가되는 엘리먼트들은 클릭하면 화면 크기가 확장되면서 나타나고 이 컴포넌트들에 접근하기 위해 클릭할 필요가 없을 때까지 보인다. 만약 누구라도 이 반응형 웹 디자인 기법을 사용한 예제 완성에 관심이 있다면 나에게 알려줘!
가려진 캔버스 패턴은 사람들의 컨텐츠로 구성된 긴 페이지를 스크롤하게 하지 않고 작은 크기 화면에 내비게이션을 배치하는 점이 흥미로웠다. 하나의 다른 구역(숨겨진 캔버스 영역)은 필요할 때 분리될 수 있고, 라벨로 표시할 수 있고, 접근할 수 있다.
Multi-Device Layout Patterns 주제와 관련된 내용인 반응형 디자인 네비게이션 방법들을 최근 Brad Frost가 잘 정리했다.
* 본문 링크는 사용 불가능한 링크여서 직접 검색해서 추가했습니다.
원문 : Multi-Device Layout Patterns, www.lukew.com/ff/entry.asp?1514
LukeW Ideation + Design | Digital Product Strategy & Design
www.lukew.com
참고하면 좋은 글 : developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=ko