Grid Auto Layout 흐름 사용하기
🚧 Auto Layout의 Grid 흐름은 현재 오픈 베타 버전입니다. 일부 기능과 설정은 아직 Grid에서 사용하지 못할 수도 있습니다. 베타 기간 동안 이 기능은 변경될 수 있으며 버그나 성능 문제가 발생할 수도 있습니다.
Grid는 프레임에 적용할 수 있는 세 가지 Auto Layout 흐름 중 하나로, 레이어와 에셋을 배치할 수 있는 행과 열의 '셀'로 구성되어 있습니다. 개체는 여러 셀에 걸쳐 있을 수 있으며, Grid를 사용하는 프레임의 크기가 조정되면 해당 셀의 개체도 함께 반응합니다.
Grid Auto Layout 흐름은 벤토 박스, 대시보드, 편집형 레이아웃 등 디자인을 만드는 데 적합합니다.
이 아티클에서는 Auto Layout 작업의 한 측면만 다룹니다. Figma Design에서 Auto Layout으로 작업하는 방법에 대해 자세히 알아보려면 다른 아티클을 확인하세요.
- Auto Layout 가이드: Auto Layout의 개요, 작동 방식, 주요 속성, 그리고 Auto Layout 리소스 컬렉션을 찾아볼 수 있습니다.
- 디자인에서 Auto Layout 켜기/끄기: 프레임과 레이어에 Auto Layout을 적용해 디자인을 반응형으로 만드는 방법을 알아보세요.
- Auto Layout에서 가로 또는 세로 흐름 사용하기: Auto Layout의 가로 및 세로 흐름에 사용할 수 있는 속성에 대해 알아보세요.
- 다차원 Auto Layout 흐름 생성: 여러 Auto Layout 흐름을 결합하여 완전 반응형 컴포넌트와 화면을 만들어 보세요.
용어집
- 셀: Grid의 열과 행이 만나는 지점.
- 셀 레이어 또는 셀 개체: 셀 안에 위치한 레이어 또는 개체로, Grid 내에 포함된 자식 요소로 간주됩니다.
- 자식: 컨테이너 내부에 있는 레이어.
- 컨테이너: 다른 레이어를 포함할 수 있는 구조(예: 셀) 또는 레이어(예: 프레임 또는 컴포넌트).
- 중첩: 컨테이너 내부에 존재하는 레이어를 설명합니다.
- 부모: 다른 레이어를 포함하는 레이어, 즉 프레임, 컴포넌트, 그룹, 섹션을 의미합니다.
- 스팬(span): 셀 개체가 한 번에 여러 셀을 차지할 수 있는 기능
- 최상위: 캔버스에 직접 위치하며 부모를 포함하지 않는 레이어를 설명합니다.
- 트랙: 개별 행 또는 열.
열과 행
Grid Auto Layout 흐름은 디자인에 행과 열이라는 2차원 레이아웃 제어 기능을 제공합니다. 프레임에서 Grid를 활성화한 후, 오른쪽 사이드바의 그리드 선택기를 클릭하여 원하는 행과 열의 수를 선택할 수 있습니다. Number of columns(열 수) 및 Number of rows(행 수) 필드에 값을 입력하거나 대화형 선택기를 사용하세요.
참고: Grid에서 행이나 열의 수를 줄이려면, 먼저 해당 행이나 열이 비어 있는지 확인해야 합니다.
열과 행의 크기 조정
각 열과 행의 크기는 Auto(자동)로 설정되어, 다른 간격 값과 열 또는 행 크기를 고려한 후 남은 공간을 기준으로 계산됩니다.
트랙(열 또는 행)의 크기를 조정하려면 다음 순서를 따라주세요.
- 프레임을 선택합니다.
- 프레임의 상단 또는 왼쪽에 커서를 가져다 놓습니다. 원하는 트랙 위에 커서를 올려놓거나, 원하는 트랙에서 항목을 선택할 수도 있습니다. 그러면 파란색 점이 표시됩니다.
- 파란색 점 위로 마우스를 가져가면 나타나는 레이블(트랙 크기를 나타냄)을 클릭합니다.
- 그곳에서 다음과 같은 방법으로 트랙의 크기를 조정할 수 있습니다.
- 자동 크기 조정: 사용 가능한 공간에 따라 트랙 크기를 자동으로 조정하려면 Auto 또는 A를 입력한 다음 Enter / Return 키를 누릅니다.
- 특정 크기: 트랙의 가장자리를 클릭하고 드래그하여 특정 값으로 크기를 조정합니다.
간격
간격
Gap between(간격)은 열과 행 사이의 거리를 설정합니다. Grid Auto Layout 프레임을 선택한 경우, 오른쪽 사이드바의 Gap between rows(행 간 간격) 및 Gap between columns(열 간 간격) 필드를 사용하여 이 작업을 수행할 수 있습니다. 필드에 숫자 값을 입력하거나, 화살표 키를 사용하여 값을 미세 조정하거나, 커서를 사용하여 필드를 스크러빙합니다.
패딩
패딩은 Auto Layout 프레임의 경계와 프레임의 셀 사이의 빈 공간 또는 여백을 제어합니다. 패딩을 균일, 세로, 가로로 설정하거나 상단, 오른쪽, 하단, 왼쪽 패딩에 다른 값을 지정할 수 있습니다.
- 기본값: 패딩 컨트롤은 기본적으로 세로(상단 및 하단) 및 가로(왼쪽 및 오른쪽) 패딩으로 구분됩니다.
- 개별 패딩: 상단, 오른쪽, 하단, 왼쪽 패딩 필드를 사용하려면 를 클릭합니다.
-
균일한 패딩 또는 CSS 축약형: ⌘ Command 또는 Ctrl 키를 누른 채 패딩 필드를 클릭합니다. CSS 축약형을 입력할 수도 있습니다.
- 예시: 1,2,3,4를 입력하면 상단: 1px, 오른쪽: 2px, 하단: 3px, 왼쪽: 4px으로 설정됩니다.
- 예시: 1,2를 입력하면 상단/하단: 1px, 왼쪽/오른쪽: 2px로 설정됩니다.
팁: Tab 키를 눌러 입력 필드 사이를 이동합니다.
크기 조정
참고: 크기 조정 속성은 Auto Layout 가이드 아티클에서 상세히 다루고 있습니다. 이 섹션에서는 Grid Auto Layout 흐름과 관련된 세부 정보를 다룹니다. 해당 내용은 Grid의 베타 기간 동안 기능이 개발됨에 따라 변경될 수 있습니다.
크기 조정 옵션은 Grid Auto Layout 프레임의 모든 하위 레이어어에 사용할 수 있으며, 중첩된 Grid Auto Layout 프레임도 포함됩니다. Grid를 사용하는 최상위 Auto Layout 프레임에서는 크기 조정 옵션을 사용할 수 없습니다. Auto Layout 프레임 중첩에 대해 자세히 알아보세요.
사용할 수 있는 크기 조정 속성은 다음과 같습니다.
- 고정 너비 또는 높이: 셀 개체 또는 중첩된 Grid Auto Layout 프레임의 치수는 부모 셀이나 부모 프레임의 크기에 관계없이 동일하게 유지됩니다.
- 채우기 컨테이너: 셀 개체 또는 중첩된 Grid 프레임이 셀 또는 부모 프레임의 너비나 높이를 채우도록 늘어납니다.
그리드 셀에서 개체 작업하기
그리드에서 개체 추가 및 이동
- 도형, 프레임, 텍스트 레이어 생성: 셀에서 이러한 요소를 직접 생성합니다.
- 개체를 Grid로 이동: 하나 이상의 레이어를 끌어서 빈 셀이나 두 셀 사이에 놓습니다.
- 자식 개체 재배치: 하나 이상의 자식 개체를 끌어서 빈 셀이나 두 셀 사이에 놓습니다.
- 기존 개체 복제: 하나 이상의 자식 개체를 선택하고, 키보드 단축키(Mac: ⌘ Command D, Windows: Ctrl D)를 사용합니다.
개체는 왼쪽에서 오른쪽으로, 위에서 아래로 순차적으로 배치됩니다. 사용 가능한 빈 셀이 충분하지 않은 경우, Figma는 방해가 되는 개체를 사용 가능한 셀로 재배치하거나 수용을 위해 새 행이나 열을 생성합니다.
여러 셀에 걸쳐 개체 확장
자식 개체를 Grid의 여러 셀에 걸쳐 확장하면, 부모의 크기가 조정될 때 해당 개체도 함께 크기가 조정됩니다.
자식 개체를 확장하려면 캔버스에서 해당 개체를 선택한 후 크기를 조정하세요. 크기를 조정하는 동안 개체가 셀의 가장자리에 스냅되면, 조정된 치수(너비 또는 높이)에 대해 Auto Layout 크기 조정 속성이 컨테이너 채우기로 업데이트됩니다.
개체를 셀에 맞춰 정렬
Grid Auto Layout 프레임 내에서 자식 개체를 셀에 맞춰 정렬할 수 있습니다.
오른쪽 사이드바의 Position(위치) 섹션에서 자식 개체를 선택하고 정렬 버튼을 사용합니다.
- 왼쪽 정렬
- 가로 가운데 정렬
- 오른쪽 정렬
- 상단 정렬
- 세로 가운데 정렬
자식 개체를 여러 개 선택한 경우 각 개체는 해당 셀에 맞춰 정렬됩니다.
지금 사용하기
직접 사용해 보며 연습하려면 Grid 커뮤니티 파일 사본을 받아 보세요.