레이아웃 & 그리드시스템

 

해상도

가장 기본이 되는 해상도는 1 배수인 mdpi이며, 모바일은 일반적으로 2 배수 이상의 해상도를 가지고 있다.

실제로 디자인을 할 때 타겟 디바이스의 dpi를 잘 살펴보아야 한다.

만약 타겟 디바이스가 720x1280 xhdpi라면, 1 배수인 mdpi로 계산했을 때 360x640의 해상도임을 확인할 수 있다.

 

Ratio	Resolution	Dpi
0.75x	ldpi	120dpi
1.0x	mdpi	160dpi
1.5x	hdpi	240dpi
2.0x	xhdpi	320dpi
3.0x	xxhdpi	480dpi
4.0x	xxxhdpi	640dpi

 

 

레이아웃 (Layout)

사전적 의미로는 '설계, 지면의 배열, 배치'라는 뜻을 가지고 있다.

디자인에서의 레이아웃은 잡지, 광고, 출판물 등을 디자인할 때 텍스트나 이미지 등의 요소를 보기 좋게 배열한 것을 의미한다.

보는 사람들이 이해하기 쉽도록 통일성, 조화, 비례, 크기, 균형 등에 응용되기도 하며, 웹이나 모바일 서비스를 디자인할 때 같은 오브젝트라도 어디에 위치하느냐에 따라 분위기가 달라진다.

디자인할 때 그리드 시스템에 위배되지 않는 최적의 위치에 오브젝트가 배치될 수 있도록 다양한 방법으로 레이아웃을 시도하는 것이 좋다.

새롭게 만드는 페이지뿐만 아니라 이미 만들어진 컨텐츠를 개선할 때도 다양한 방법으로 레이아웃을 표현할 수 있다.

레이아웃을 시각적으로 잘 배치하는 디자인 퍼포먼스에 따라 웹이나 모바일 서비스의 인상이 달라질 수 있다.

 

 

그리드 시스템 (Grid System)

책, 웹이나 모바일 등에서 화면을 구성하는 모든 디자인적인 요소(사진, 텍스트 등)를 일관된 시스템 속에서 배치하는 것을 의미한다.

화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓는 것으로, 보이지 않는 가이드라인이라 할 수 있다.

실제 디자인을 시작하기 전에 그리드 시스템을 미리 세워놓는 것이 좋으며 이 과정을 통해 한정적인 화면 영역을 좀 더 효과적으로 활용할 수 있다.

 

하나의 플랫폼에는 수많은 정보가 다양한 디자인을 통해 제작되고 배치되는데, 어떻게 그리드 시스템을 구성하느냐에 따라 정보의 배치와 간격이 달라진다.

웹이나 모바일 서비스는 규칙 없이 무작정 나열된 것 같아도 그리스 시스템을 지키면서 레이아웃을 일관적으로 사용하고 있다.

처음부터 끝까지 일관된 규칙성을 보여주는 것이 중요한데, 일관적인 레이아웃과 그리드 시스템의 적용은 페이지마다 다양한 디자인을 적용하더라도 하나의 플랫폼 디자인을 보고 있다는 통일성을 느끼게 된다.

새롭게 프로젝트를 진행할 때는 전체 플랫폼에 공통으로 적용할 레이아웃과 그리드 시스템을 결정하고 진행하는 것이 좋다.

 

그리드 시스템은 컬럼(columns), 거터(gutters), 마진(margins)으로 구분된다.

컬럼은 화면을 새로 열로 나누는 것을 의미하며 화면이 커질수록 많은 열로 나뉘어질 수 있다.

컬럼은 단이라고 표현하기도 한다.

화면을 2개의 컬럼을 나누었다면 2 컬럼 그리드 또는 2단 그리드를 사용했다고 표현한다.

거터는 단과 단 사이의 공간으로, 거터 값이 넓을수록 열 사이가 넓어지므로 더 큰 화면에 적합하다.

거터는 컨텐츠 분리 표현에 도움을 줄 수 있는데 거터 값이 작을수록 컨텐츠가 가까워져 그룹핑된 느낌을, 값이 클수록 컨텐츠가 각각의 개체인 것 같은 느낌을 줄 수 있다.

하지만 컨텐츠 사이가 지나치게 멀어져 사용성이 떨어지는 경우에는 그리드 시스템 설계가 잘못되었다 판단하므로 컨텐트와 컨텐츠 사이가 너무 멀거나 좁지 않게 값을 적절히 설정해야 한다.

마진은 화면의 외쪽과 오른쪽 양 가장자리의 공간을 뜻하며, 화면이 넓어지면 마진도 더 넓게 잡아주게 된다.

컬럼, 거터, 마진의 그리드 값을 정하면 전체 화면에 일괄되게 적용해야 한다.