N-Screen을 고려한 UI 제작 가이드 - 3. 멀티디바이스 레이아웃 패턴

1. 반응형 웹디자인과 그리드시스템 :

• 반응형 웹디자인이란?
• 그리드시스템이란?
• 그리드시스템을 웹 사이트 레이아웃에 사용해야 하는 이유

를 소개하였습니다.

2. 그리드시스템 적용 방법 :

• 설계 단계
• 디자인 단계
• 퍼블리싱 단계

에서 반응형 웹디자인을 제작할 때 그리드시스템을 적용하면 얼마나 더 효율적인지에 대해서 설명드렸습니다.

이번 글에서는 모바일퍼스트로 유명한 LukeW의 Multi-Device Layout Patterns을 설명드리겠습니다.

세번째, LukeW의 Multi-Device Layout Patterns

모바일퍼스트로 유명한 LukeW의 Multi-Device Layout Patterns은 mediaqueri.es의 반응형 사이트들을 다음과 같이 총 5가지의 패턴으로 분류하고 있다.

- 출처 : LukeW의 Multi-Device Layout Patterns

Mostly Fluid

가장 인기있고 심플한 패턴으로,
유동형 그리드,
유동형 이미지 의존하며,
데스크 탑에서 좌우 여백과 함께 여러 컬럼으로 배치되고,
화면 폭이 작아지면 컬럼을 수직로 배열한다.

- 예제 site : 좌] Princess Elisabeth Antarctica, 우] Trent Walton

Column Drop

또 다른 인기있는 패턴으로,
다양한 컬럼 레이아웃과,
일관된 레이아웃으로 최소 크기의 컬럼 폭 유지하고,
화면 폭이 작아지면 중앙 컬럼을 중심으로 컬럼을 수직 배열한다.

- 예제 site : 좌] Owltastic, 우] Festival de Saintes

Layout Shifter

다양한 화면의 전체 크기에 적용되지 않습니다. (100% Layout)
크게 대, 중, 소로 나누어 다른 레이아웃을 사용하며,
가장 혁신적인 디자인이 많이 일어나는 패턴으로,
본질적으로 많은 작업과 높은 기술을 필요로 하기 때문에,
앞의 두 패턴보단 인기가 적다.

- 예제 site : 좌] Performance Marketing Awards, 우] Food Sense

Tiny Tweaks

멀티 디바이스 적용이 가장 단순한 형태이지만,
가장 인기가 없는 패턴이다.
대부분 하나의 컬럼에서 몇 가지 요소(이미지, 글꼴 등)로 구성된다.
멀티 디바이스 적용은 글꼴 크기와 이미지 크기조정으로 이루어 진다.

- 예제 site : 좌] Design made in Germany Issue 5, 우] Future Friendly

Off Canvas

위 패턴들은 다양성이 있지만 몇 가지 공통적인 특징도 있습니다.
다양한 구성 요소들이 작은 화면에서 수직 배열을 한다는 점 이다.
Off Canvas 패턴은 새로운 트랜드이며,
보여지지 않는 스크린(Off Screen)을 활용하며,
네비게이션을 숨기는 레이아웃을 가장 많이 사용한다.
사용자 액션에 의해 화면 공간을 제어한다.

- 예제 : Facebook, Path, Google