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