그리드(grids), 열(columns) 및 행(rows)으로 레이아웃 그리드 생성

화면용으로 디자인할 때 경쟁해야 할 레이아웃이 얼마든지 있다. 우리의 디자인이 적응할 수 있도록 하려면 정밀도(precision)와 유연성(flexibility)이 모두 필요하다.

픽셀 그리드는 배치에 대한 정밀도와 제어를 제공한다. 레이아웃 그리드는 설계를 구현하는 데 더 큰 유연성을 제공한다.

레이아웃 그리드(layout grids)에 대해 자세히 알아보기

이 페이지 하단에서 자주 묻는 질문에 대한 답변을 확인하자.
블로그 게시물인 Grid Pro Quo에서 레이아웃 그리드를 사용하는 방법에 대해 자세히 알아보자.

레이아웃 그리드(layout grids)란?

레이아웃 그리드는 프레임 내에서 개체를 정렬하는 데 도움이 된다. 그들은 우리의 디자인에 시각적 구조를 제공한다. 그들은 우리의 디자인이 다양한 플랫폼과 장치에서 논리적이고 일관성을 유지하는 데 도움이 된다.

레이아웃 그리드는 픽셀 그리드에 의존하지 않는다. 즉, 특정 해상도나 치수에 의존하지 않는다.

레이아웃 그리드는 프레임에만 적용할 수 있다. 이것은 최상위 프레임이거나 다른 프레임 내에 중첩된 프레임일 수 있다.

레이아웃 그리드를 사용하면 다음을 수행할 수 있다.

여러 플랫폼에서 일관성을 설정한다.
레이아웃을 정의할 때 더 적은 수의 결정을 내려야 한다.
목업(mock-ups) 또는 와이어프레임(wireframes)에 대한 레이아웃을 정의하는 데 걸리는 시간을 줄인다.
갤러리(galleries), 아이콘(icons) 또는 전체 페이지 레이아웃(entire page layouts)과 같은 다양한 레이아웃 기술을 지원한다.

Note: 블로그 게시물: 화면 디자인을 위한 그리드 시스템(Grid Systems for Screen Design)에서 Figma와 함께 그리드 시스템을 사용하는 방법에 대해 자세히 알아보자.

레이아웃 그리드 적용

레이아웃 그리드를 모든 프레임에 적용할 수 있다. Components도 프레임이므로 components에도 적용할 수 있다.

오른쪽 사이드바에서 레이아웃 그리드 설정을 찾을 수 있다.

레이아웃 그리드를 적용하려면:

캔버스 또는 왼쪽 사이드바의 레이어 패널에서 프레임을 선택한다.
오른쪽 사이드바에서 레이아웃 그리드 옆 ‘+’을 클릭한다.
기본적으로 균일한 그리드가 프레임에 적용된다.
그런 다음 ‘⁝⁝⁝’을 클릭하여 레이아웃 그리드 설정을 열고 속성을 업데이트할 수 있다.

레이아웃 그리드 속성

균일한 정사각형 그리드(uniform square Grid), 열(Columns) 및 행(Rows) 세 가지 유형의 레이아웃 그리드를 사용할 수 있다.

균일 그리드를 사용하면 그리드의 크기와 색상을 모두 정의할 수 있으며, 정사각형 그리드는 기호 또는 아이콘 디자인과 같이 정밀도가 필요한 상황에 적합하다.

열(Columns) 및 행(Rows) 그리드를 사용하여 그리드의 너비 또는 높이와 간격(gutter) 및 바깥 여백(margins)을 정의할 수 있다. 웹 및 모바일용 반응형 인터페이스를 설계하는 데 이상적이다.

그리드를 단독으로 사용하거나 결합하여 보다 복잡한 레이아웃을 지원할 수 있다.

레이아웃 그리드 결합에 대해 자세히 알아보기 ↓

레이아웃 그리드 변경

그리드 유형을 선택하려면:

오른쪽 사이드바에서 ‘⁝⁝⁝’을 클릭한다.
레이아웃 그리드 속성 창을 클릭한다.
다음을 선택할 수 있다.
- 균일 그리드(Uniform Grid)
- 열이 있는 그리드(Grid with Columns)
- 행이 있는 그리드(Grid with Rows)

균일한 그리드 속성

균일한 그리드를 선택하면 그리드의 크기를 선택할 수 있다. 이것은 각 사각형이 포함할 픽셀 수를 결정한다.

예: 기본 10pt 그리드에서 그리드의 각 사각형에는 100픽셀(10px x 10px)이 포함된다.

레이아웃 그리드 설정을 열려면 ‘⁝⁝⁝’을 클릭한다.
Size 필드에 원하는 크기로 업데이트한다.
‘X’을 클릭하여 창을 닫고 캔버스로 돌아간다.

열(column) 및 행(row) 속성

레이아웃 그리드를 열(columns), 행(rows) 또는 둘 다로 적용할 수 있다. 열 및 행 그리드를 사용하면 레이아웃을 보다 강력하게 제어하고 유연하게 조정할 수 있다.

그리드의 다음 속성을 정의할 수 있다.

그리드 속성

개수(Count)는 그리드에 있는 열이나 행의 수를 결정한다.
간격Gutter)은 각 열 또는 행 사이의 거리를 정의한다.
여백(Margin)은 열이나 행이 시작되는 가장자리로부터의 거리이며, 이는 Stretch 그리드에만 적용된다.
오프셋(Offset)은 열 또는 행이 시작되는 상단 또는 왼쪽으로부터의 거리이며, 이것은 행이 위쪽으로 설정되고 열이 왼쪽으로 설정될 때 적용된다.

그리드 유형

레이아웃 그리드에는 고정(Fixed) 및 신축(Stretchy)의 두 가지 유형이 있다.

고정(Fixed) 레이아웃 그리드의 경우 Width(columns) 또는 Height(rows)와 열 또는 행의 Count(number)를 모두 결정할 수 있다.

레이아웃 그리드는 다음과 같이 고정할 수 있다.

행(Rows) 프레임의 Top 또는 Center
열(Columns) 프레임의 Left 또는 Center

신축성(Stretchy) 그리드는 프레임의 크기에 맞게 조정된다. 이렇게 하면 프레임 크기가 조정될 때 디자인이 그에 따라 반응할 수 있다.

그리드의 너비(Width) 또는 높이(Height)는 프레임 크기에 따라 자동으로 결정된다.

색상(color)

레이아웃 그리드의 기본 색상은 빨간색(#FF0000)이며 불투명도는 10%이다.

모든 레이아웃 그리드의 색상(Color) 및 불투명도(Opacity)를 변경할 수 있다.

오른쪽 사이드바에서 ‘⁝⁝⁝’을 클릭
색상(Color) 견본(swatch)을 클릭한다.
color picker를 사용하여 새 색상을 선택한다.
필요한 경우 불투명도(opacity)를 조정한다.

레이아웃 그리드 결합

위에서 언급했듯이 단일 프레임에 많은 레이아웃 그리드를 적용할 수 있다. 이것은 더 복잡한 레이아웃을 개발할 때 편리하다.

예: 세로 및 가로 정렬을 더 잘 제어하기 위해 열 및 행 레이아웃 그리드를 모두 적용할 수 있다.

다른 레이아웃 그리드를 추가할 프레임을 선택한다.
오른쪽 사이드바의 레이아웃 그리드 옆에 ‘+’을 클릭한다.
제공된 드롭다운에서 레이아웃 그리드를 선택한다.
기타 관련 속성을 정의한다.
프레임에 레이아웃 그리드를 더 추가하려면 반복한다.

레이아웃 그리드 전환(toggle)

레이아웃 그리드의 가시성을 토글 할 수 있다. 이것은 레이아웃 그리드를 완전히 제거하지 않고 숨겨야 하는 상황에 유용하다.

레이아웃 그리드는 보이지 않는 경우에도 계속 작동한다.

모든 레이아웃 그리드 전환(toggle)

파일의 모든 레이아웃 그리드에서 한 번에 가시성을 토글 할 수 있다.

화면 오른쪽 상단의 확대/축소 비율을 클릭한다. 그러면 보기 설정 메뉴가 열린다.
레이아웃 그리드 옵션 옆에 체크 표시가 없는 경우 이를 클릭하면 그리드가 표시된다.
이미 체크 표시가 있는 경우 레이아웃 그리드를 클릭하면 그리드가 숨겨진다.
또는 키보드 단축키를 사용하여 레이아웃 그리드를 켜고 끌 수 있다.
- 맥: ⌃ Control + G
- 윈도우: Control + Shift + 4

개별 레이아웃 그리드 전환(toggle)

단일 레이아웃 그리드를 활성화하거나 비활성화하려면 속성 패널에서 이 작업을 수행할 수 있다.

해당 프레임을 선택한다.
오른쪽 사이드바에서 레이아웃 그리드 섹션을 찾는다.
끄려면 레이아웃 그리드 옆에 가시성 아이콘을 토글 한다.
레이아웃 그리드를 다시 보려면 가시성 아이콘을 토글 한다.

레이아웃 그리드 스타일

이상적인 레이아웃 그리드가 완성되면 스타일을 만들어 디자인 전반에 걸쳐 재사용할 수 있다.

스타일 생성에 대해 자세히 알아보기 →

레이아웃 스타일 만들기

레이아웃 그리드가 적용된 캔버스에서 프레임을 선택한다.
오른쪽 사이드바의 레이아웃 그리드 섹션에서 ‘::’을 클릭
그리드 스타일 창에서 ‘+’을 클릭한다.
레이아웃 그리드 스타일에 기억하기 쉬운 이름을 지정한다.
스타일 만들기를 클릭하여 프로세스를 완료한다.

레이아웃 스타일 적용

캔버스에서 프레임을 만들거나 선택한다.
오른쪽 사이드바에서 ‘::’을 클릭
창에서 레이아웃 그리드 스타일을 선택한다.
레이아웃 그리드가 선택한 프레임에 적용된다.

Note: 관련 구성 요소는 다음에 의해 결정된다.

복사할 프레임을 선택한다.
오른쪽 사이드바에서 레이아웃 그리드를 클릭한다.
강조 표시되면 키보드 단축키를 사용하여 레이아웃 그리드를 복사한다.
- 맥 : ⌘ Command + C
- 윈도우 : Ctrl + C
레이아웃 그리드를 적용할 프레임을 선택한다.
키보드 단축키를 사용하여 레이아웃 그리드를 붙여넣는다.
- 맥 : ⌘ Command + V
- 윈도우 : Ctrl + V

그리드 및 제약 조건(constraints) 작업

더 복잡한 디자인의 경우 크기를 조정할 때 디자인이 작동하도록 하려면 정밀도와 유연성이 필요하다.

제약 조건은 프레임 내에서 개체가 배치되는 위치에 대한 기본 프레임워크를 제공하는 데 유용하다. 레이아웃 그리드와 결합하면 강력한 레이아웃 시스템을 위한 프레임워크를 제공한다.

그리드와 제약 조건 결합에 대해 자세히 알아보기 →

8-point 그리드

8포인트 그리드 시스템은 UI 레이아웃을 디자인하는 데 널리 사용되는 도구이다. 여기에는 8의 배수를 사용하여 디자인 내에서 개체의 배치를 정의하는 것이 포함된다.

모바일 앱과 같이 고정된 제약 조건을 설계할 때 이 시스템을 사용할 수 있다. 그러나 반응형 레이아웃을 디자인할 때 유용한 도구가 될 수도 있다.

8포인트 시스템을 구현하는 두 가지 일반적인 방법이 있다.

Hard grid: 8포인트 증분으로 고정 그리드에 개체를 배치하는 것과 관련된다. Figma에서 이것은 크기가 8 인 프레임에 균일한 그리드를 적용하는 것을 포함한다.
Soft grid: 여기에는 8로 나눌 수 있는 거리에 개체를 배치하는 것이 포함된다. 여기에는 8로 나눌 수 있는 속성이 있는 행 또는 열 레이아웃 그리드를 적용하는 것이 포함된다.

Spec.fm 게시물에서 8포인트 그리드에 대해 자세히 알아보기 →

자주 묻는 질문

모든 레이아웃 그리드를 한 번에 전환할 수 있나요?

네. 이것은 Figma의 오른쪽 상단 모서리에 있는 보기 설정 메뉴에서 수행할 수 있습니다.

↑ 토글 레이아웃 그리드 섹션에서 자세히 알아보기

내 레이아웃 그리드가 표시되지 않는 이유는 무엇입니까?

레이아웃 그리드가 표시되지 않는 데에는 몇 가지 이유가 있습니다.

레이아웃 그리드는 오른쪽 사이드바에서 비활성화되었습니다.
레이아웃 그리드는 전역적으로 해제되었습니다.
선택한 레이어는 프레임이 아니며, 레이아웃 그리드는 프레임에만 적용할 수 있습니다.
프레임이 회전되었습니다. 레이아웃 그리드를 적용하기 전에 개체의 회전 이 0º로 설정되어 있는지 확인하십시오.

레이아웃 그리드를 복사하려면 어떻게 합니까?

단일 레이아웃 그리드를 복사하여 다른 프레임에 적용할 수 있습니다. 또는 디자인 전체에서 재사용할 수 있는 레이아웃 그리드 스타일을 생성할 수 있습니다.

레이아웃 그리드 스타일 섹션에서 자세히 알아보기 ↑

출처: Layout grids in Figma