자동 레이아웃 속성 살펴보기 – Figma Learn - 도움말 센터

이 문서는 이전 Figma UI와 새로운 Figma UI에서 모두 확인할 수 있습니다. 페이지 왼쪽 하단의 토글을 사용하여 현재 UI를 선택하세요. UI3 알아보기: Figma의 새 디자인 →

시작하기 전에

이 기능을 사용할 수 있는 사용자

파일에 대한 편집 가능 액세스 권한이 있는 사용자는 프레임과 개체에 자동 레이아웃을 추가할 수 있습니다.

자동 레이아웃 속성에 대해 이미 잘 알고 계시나요? 자동 레이아웃 사용 방법 알아보기 →

자동 레이아웃은 프레임과 컴포넌트에 추가할 수 있는 속성입니다. 이를 통해 크기에 맞게 채워지거나 축소되고 내용이 변경됨에 따라 리플로우되는 디자인을 만들 수 있습니다. 새 레이어를 추가하거나, 긴 텍스트 문자열을 수용하거나, 디자인이 발전함에 따라 정렬을 유지해야 할 때 유용합니다.

자동 레이아웃을 사용하는 방법에는 여러 가지가 있습니다.

텍스트 레이블을 편집할 때 커지거나 작아지는 버튼을 만듭니다.
항목이 추가, 제거 또는 숨겨질 때 조정되는 목록을 만듭니다.
자동 레이아웃 프레임을 결합하여 완전한 인터페이스를 구축합니다.

자동 레이아웃은 많은 움직이는 부분과 용도를 가진 강력한 기능입니다. 이 글에서는 자동 레이아웃의 다양한 측면이 어떻게 작동하는지 알아보겠습니다.

Figma 커뮤니티에서 자동 레이아웃 플레이그라운드 파일 탐색하기 →

자동 레이아웃이 있는 프레임은 일반 프레임과 다른 속성을 가집니다. 자동 레이아웃을 적용하면 오른쪽 패널에서 몇 가지 변경 사항을 확인할 수 있습니다.

자동 레이아웃 프레임에는 다음을 수행할 수 없습니다.

🚫 해당 프레임에 레이아웃 그리드 추가하기
🚫 개체에 자동 레이아웃 무시가 활성화되어 있지 않은 경우, 자동 레이아웃 프레임 내의 모든 개체에 제약조건 적용하기
🚫 프레임 내 모든 개체에 스마트 셀렉션 사용하기

레이아웃 흐름

방향

방향은 자동 레이아웃 프레임이 흐르는 방식을 설명합니다.

Vertical: y축을 따라 개체를 추가, 제거, 재정렬합니다. 예를 들어 목록 내의 개체, 뉴스피드 또는 타임라인 내의 게시물 등이 있습니다.
Horizontal: x축을 따라 개체를 추가, 제거, 재정렬합니다. 예를 들어, 모바일 탐색 메뉴의 버튼 행 또는 아이콘이 있습니다.
Wrap: 프레임 안에 여러 행과 열로 개체를 배열합니다. 개체는 가로로 흐르며 다음 줄로 래핑됩니다. 예: 사진 갤러리 또는 태그 세트.

모두 동일한 요소를 가진 세 가지 디자인 세트: 원 3개, 분홍색 1개, 노란색 1개, 녹색 1개. 첫 번째 원 집합은 세로 방향으로 배치됩니다. 두 번째 원 집합은 가로 방향으로 배치됩니다. 세 번째 원 세트는 래핑되어 있으며, 분홍색과 노란색 원이 첫 번째 줄에 있고 녹색 원이 두 번째 줄에 있습니다.

캔버스 스태킹 순서

여러 레이어의 간격이 음수인 스택을 만들면 기본적으로 스택의 마지막 개체(가장 오른쪽 또는 가장 아래쪽 개체)가 맨 위에 놓입니다.

캔버스에 보이는 스택의 시각적 순서를 변경할 수 있습니다.

자동 레이아웃 프레임을 선택한 상태에서 오른쪽 패널에서 을 클릭하여 자동 레이아웃 설정을 엽니다. canvas stacking 옆에서 다음을 선택합니다.

First on top: 스택의 첫 번째 레이어가 맨 위에 표시됩니다.
Last on top: 스택의 마지막 레이어가 맨 위에 표시됩니다.

맨 위의 마지막과 맨 위의 첫 번째를 나란히 비교

참고: 스태킹 순서가 변경되어도 레이어 패널의 레이어 순서는 동일하게 유지됩니다. 캔버스 스태킹은 캔버스에서 일어나는 시각적인 변화일 뿐입니다.

자동 레이아웃 무시

참고: 자동 레이아웃 무시는 이전에는 절대 위치로 알려져 있었습니다. 이 기능의 이름은 바뀌었지만 여전히 동일하게 작동합니다.

자동 레이아웃 무시가 활성화된 개체는 자동 레이아웃 프레임에 유지되는 동안 자동 레이아웃 흐름에서 제외됩니다. 해당 개체와 주변의 다른 개체들은 크기가 조절되거나 이동하는 경우에도 서로를 무시합니다.

CSS의 절대 위치와 마찬가지로 자동 레이아웃을 무시하는 개체는 부모 컨테이너를 기준으로 원하는 위치에 정확하게 배치할 수 있습니다.

자동 레이아웃 무시가 활성화된 개체는 일반 프레임의 객체로 처리됩니다. 즉, 부모 자동 레이아웃 프레임의 크기가 조정될 때 어떻게 반응할지 결정하기 위해 제약조건 을 적용할 수 있습니다. 크기 조정 및 레이아웃 옵션과 같은 기타 자동 레이아웃 설정은 이러한 개체에 사용할 수 없습니다.

다음 중 하나를 수행하여 개체가 자동 레이아웃 흐름을 무시하도록 할 수 있습니다.

자동 레이아웃 프레임의 자식을 선택하고 오른쪽 패널에서 을 클릭합니다.
개체를 자동 레이아웃 프레임으로 드래그하면서 ⌃ Control을 누릅니다.

Figma Design 파일에서는 Ctrl 키를 누른 상태에서 커서가 X 아이콘을 자동 레이아웃 프레임으로 끌어다 놓을 수 있습니다. 커서를 사용하여 프레임의 오른쪽 상단 모서리에 X 아이콘을 놓습니다.

간격

항목 간 간격

항목 간 간격 을 사용하여 자동 레이아웃 프레임에서 개체 간의 거리 또는 분포를 설정합니다.

항목 간 간격에는 두 가지 설정이 있습니다:

Auto: 개체 간 간격을 가능한 최대 거리로 설정합니다. 필드에 Auto 를 입력하거나 드롭다운 메뉴에서 선택합니다.
A specified gap: 개체 간의 간격을 지정합니다. 필드에 값을 입력하거나, 화살표 키를 사용하여 값을 이동하거나, 커서를 사용하여 필드를 스크러빙합니다.

이 두 설정 사이를 빠르게 전환하려면 정렬 상자를 클릭하고 X를 누릅니다.

Figma Design 파일에서는 프레임에 블로그 게시물 카드가 들어 있습니다. 그 안에는 분홍색 직사각형, 제목 텍스트, 설명 텍스트, 3개의 주제 태그가 있습니다. 주제 태그는 자체 자동 레이아웃 프레임에 있으며 래핑되도록 설정되어 있습니다. 오른쪽 패널에서 필드 사이의 가로 간격을 커서로 클릭하면 자동으로 변경됩니다. 주제 태그가 가로로 펼쳐져 부모 컨테이너를 채웁니다.

자동 레이아웃 프레임의 방향을 수직 또는 수평으로 설정하면 항목 간 간격을 각각 수직 또는 수평으로 설정할 수 있습니다. 프레임 방향을 Wrap으로 설정하면 항목 사이에 수평 및 수직 간격을 설정할 수 있습니다.

팁! 큰 넛지 값을 사용하여 늘리거나 줄이려면 ⇧ Shift 키를 누른 채로 핸들을 드래그하세요.

패딩

패딩은 자동 레이아웃 프레임의 경계와 프레임의 자식 개체 사이의 빈 공간 또는 흰색 공간을 제어합니다. 패딩을 균일, 수직, 수평으로 설정하거나 위쪽, 오른쪽, 아래쪽, 왼쪽 패딩에 다른 값을 지정할 수 있습니다.

오른쪽 패널의 캔버스 컨트롤 또는 간격 필드를 사용하여 패딩을 조정합니다.

캔버스 컨트롤에 액세스하려면 자동 레이아웃 프레임을 선택하고 그 위로 마우스를 가져갑니다. 스마트 셀렉션에서와 유사한 분홍색 핸들이 나타납니다.

핸들을 클릭하여 입력 필드를 열고 숫자 값을 입력합니다.
또는 핸들을 클릭하고 드래그하여 간격을 변경합니다.

팁: 반대쪽 면, 모든 면에 패딩을 설정하는 단축키 등 자세한 내용은 키보드 단축키 가이드↓ 를 확인하세요!

제목, 설명, 자세히 보기 버튼이 포함된 연한 녹색 블로그 카드 에셋입니다. 이 에셋에는 자동 레이아웃이 적용됩니다. 모든 면의 패딩을 변경하는 키보드 단축키가 아래에 표시됩니다. 커서는 해당 키보드 단축키를 사용하면서 자동 레이아웃 프레임의 분홍색 상단 핸들을 클릭하고 드래그합니다.

오른쪽 패널의 패딩 컨트롤은 기본적으로 세로(위아래) 및 가로(왼쪽과 오른쪽) 패딩으로 구분되어 있습니다.

개별 패딩을 설정하려면 를 클릭하여 상단, 오른쪽, 하단, 왼쪽 패딩 필드를 사용합니다.
균일한 패딩을 설정하거나 CSS 단축키를 사용하려면 ⌘ Command 또는 Control 을 누른 채 패딩 필드를 클릭하세요. CSS 단축키를 입력할 수도 있습니다. 예를 들어 1,2,3,4 를 입력하면 상단, 오른쪽, 하단, 왼쪽이 각각 1, 2, 3, 4로 설정됩니다. 1,2 를 입력하면 값이 상단/하단이 1, 왼쪽/오른쪽이 2로 설정됩니다.

팁! 입력 필드 사이를 이동하려면 tab 키를 누르세요.

레이아웃의 선

기본적으로 개체의 크기를 계산할 때 선은 고려되지 않으므로 부모 프레임이나 주변의 형제 프레임에 영향을 미치지 않습니다.

CSS에서 테두리를 렌더링하는 방식을 정확하게 나타내지 못하므로 개발자에게 핸드오프하는 동안에는 이상적이지 않을 수 있습니다.

자동 레이아웃 설정으로 이동하고 선 옆의 드롭다운을 사용하여 included in layout 또는 excluded from layout을 선택하여, 선이 자동 레이아웃 프레임에서 공간을 차지할지 여부를 선택합니다.

정렬

자식 개체에 정렬 설정

자동 레이아웃 프레임 내에서 자식 개체를 정렬하는 방법을 선택합니다. 자동 레이아웃 프레임의 방향과 분포 또는 항목 간의 간격에 따라 사용할 수 있는 정렬 옵션이 결정됩니다.

일반 프레임에 있는 개체와 달리, 개체의 정렬을 개별적으로 제어할 수 없습니다. 이러한 이유로 부모 자동 레이아웃 프레임에서 자식 개체의 정렬을 설정합니다.

오른쪽 패널의 정렬 상자를 사용하여 프레임에 있는 자식 요소에 대한 9가지 레이아웃 옵션 중에서 선택합니다.

상자를 선택하고 화살표 키를 사용하여 다양한 정렬 설정 사이를 전환합니다.
상자를 선택하고 W/A/S/D 를 눌러 프레임 가장자리에 정렬을 설정합니다.

3개의 노란색 사각형이 있는 녹색 자동 레이아웃 프레임입니다. 커서가 오른쪽 패널의 정렬 상자에서 다양한 옵션을 클릭합니다.

항목 사이의 간격이 Auto로 설정된 경우 각 방향에 대해 세 가지 옵션을 사용할 수 있습니다.

수직 자동 레이아웃: 왼쪽, 중앙, 오른쪽
가로 자동 레이아웃: 상단, 중앙, 하단

3개의 노란색 사각형이 있는 녹색 자동 레이아웃 프레임입니다. 'Auto'가 간격에 적용될 때 커서가 정렬 상자의 다양한 옵션을 클릭합니다.

항목 사이의 간격이 특정 숫자로 설정된 경우 각 방향에 대해 동일한 9개의 옵션을 사용할 수 있습니다.

왼쪽 상단
상단 중앙
오른쪽 상단
왼쪽
센터
오른쪽
왼쪽 하단
하단 중앙
오른쪽 하단

참고: 하나 이상의 크기 조정 속성을 내용에 맞게 조절하면 일부 선택 사항은 캔버스에서 시각적으로 다른 레이아웃을 만들지 않습니다. 이는 내용에 맞게 조절하는 기능이 자식 개체 주위의 추가 공간을 제거하기 때문입니다.

텍스트 기준선 정렬

기준선은 텍스트 또는 레이어가 놓이는 보이지 않는 선입니다. 타이포그래피에서 내림줄은 이 선 아래로 확장됩니다.

경우에 따라 레이어의 기준선을 정렬하면 더 많은 균형을 만들 수 있습니다(예: 텍스트 레이어의 기준선을 다양한 글꼴 크기로 정렬하거나, 아이콘을 텍스트 레이어에 정렬하는 경우).

텍스트 기준선 정렬 여부에 따른 아이콘과 텍스트의 나란히 비교

기준선에 따라 레이어를 정렬하려면 정렬하려는 레이어를 선택하고 오른쪽 패널에서 를 클릭하여 자동 레이아웃 설정을 엽니다. text baseline alignment 옆의 를 클릭하여 baseline alignment를 활성화합니다.

팁! 오른쪽 패널의 정렬 상자를 클릭하고 B 를 눌러 텍스트 기준선 정렬을 켜고 끕니다.

크기 조정

자동 레이아웃의 가장 강력한 기능 중 하나는 자동 레이아웃 프레임에 있는 개체의 크기를 제어하는 기능입니다.

부모 자동 레이아웃 프레임의 크기 조정 동작을 설정하여 자식 개체의 변경 사항에 맞게 조정할 수 있습니다. 크기 조정 설정은 오른쪽 패널의 드롭다운 메뉴를 사용하여 X축과 Y축의 개체에 개별적으로 적용할 수 있습니다.

드롭다운에서 크기 조정 옵션 위에 마우스를 올리면 캔버스에 선이 나타나 디자인의 바운딩 박스 크기가 어떻게 조정되고 변경될지 나타냅니다.

모바일 프레임 내부의 레이어가 선택됩니다. 오른쪽 패널의 크기 조절 섹션이 상자로 강조 표시됩니다.

참고: 텍스트 레이어에도 자체 크기 조정 속성이 있습니다. 자동 레이아웃 프레임 내에서 이는 몇 가지 유용한 결과를 가져올 수 있습니다.

자동 레이아웃 프레임을 완전히 유동적으로 만들려면 고정된 크기의 텍스트 상자를 사용하지 않는 것이 좋습니다. 고정된 크기의 텍스트 레이어는 텍스트에 맞게 크기가 조정되지 않으므로 자동 레이아웃 프레임에서 레이어 간에 겹칠 수 있습니다.

텍스트 크기 조정에 대해 자세히 알아보기 →

고정 너비 또는 높이

자동 레이아웃 프레임을 고정 너비 또는 높이로 설정하면 프레임 내의 콘텐츠에 관계없이 프레임의 크기 값은 동일하게 유지됩니다. 프레임의 크기는 길이가 변하는 텍스트 문자열처럼 그 안에 있는 개체의 변화에 반응하지 않습니다.

최소 및 최대 치수

모든 자동 레이아웃 프레임과 해당 자식에 최소 또는 최대 너비와 높이를 설정할 수 있습니다.

너비 드롭다운을 열어 최소 너비 추가 및 최대 너비 추가 를 찾습니다.
Height 드롭다운을 열어 Add min height와 Add max height를 찾습니다.

Width 또는 Height 드롭다운 메뉴에서 옵션을 선택하세요. 나타나는 새 필드에서 값을 입력하거나 드롭다운을 사용하여 숫자 변수를 적용합니다.

검은색 테두리와 흰색 배경의 'topic'이라는 레이블이 붙은 주제 태그 컴포넌트로, 가로 자동 레이아웃을 사용합니다. 커서는 컴포넌트에 최소 80px 너비를 추가한 다음 레이블을 'interior design'으로 변경합니다. 컴포넌트는 텍스트를 수용하기 위해 가로로 확장됩니다.

개체에 최소 또는 최대 설정이 포함된 경우 해당 너비 또는 높이 아이콘은 양쪽에 하나 씩 두 줄이 생깁니다. 이 아이콘 위로 마우스를 가져가면 캔버스에서 크기 제한을 미리 볼 수 있습니다.

개체를 선택 해제했다가 다시 선택하면 해당 개체의 최소 및 최대 크기 필드가 오른쪽 패널에서 숨겨집니다. 다시 액세스하려면 너비 또는 높이 아이콘을 클릭합니다.

최소 또는 최대 설정을 제거하려면 Width 또는 Height 드롭다운을 열고 Remove min and max를 선택합니다.

메모: 레이어는 최대 높이 와 설정된 최대 선 수를 모두 가질 수 없습니다. 최대 높이를 추가하면 최대 라인이 자동으로 설정됩니다. 최대 선을 숫자로 설정하면 레이어의 최대 높이 설정이 제거됩니다. 최대 선에 대해 자세히 알아보기 →

내용에 맞게 조절

자동 레이아웃 프레임을 Hug content로 설정하여 자식 개체에 따라 크기가 조정되도록 합니다. 프레임은 패딩 값을 존중하면서 그 안에 있는 개체를 둘러싸기 위해 가능한 가장 작은 크기를 유지합니다.

팁! 자동 레이아웃 개체 바운딩 박스의 세로 또는 가로 모서리를 더블 클릭하여 Hug content 로 설정합니다.

참고: 자동 레이아웃 프레임 내의 자식 개체가 Fill container로 설정된 경우, 부모 프레임은 더 이상 내용에 맞게 조절되지 않고 축에 대해 고정됩니다.

채우기 컨테이너

Fill container로 설정된 자동 레이아웃 프레임의 개체는 부모 프레임의 너비 및/또는 높이로 늘어납니다.

자동 레이아웃 프레임의 자식 개체도 부모 프레임의 전체 너비에 맞게 수동으로 크기가 조정되는 경우 Fill container로 설정됩니다.

팁! ⌥ Option 또는 Alt 키 를 누른 채 자동 레이아웃 개체 바운딩 박스의 세로 또는 가로 가장자리를 더블 클릭하면 Fill container로 설정됩니다.

제약조건에 대한 참고 사항

개체가 자동 레이아웃 흐름을 무시하지 않는 한, 자동 레이아웃 프레임의 자식 개체에 제약조건을 적용할 수 없습니다. 대신 크기 조정 속성을 사용하여 프레임 또는 프레임 내 개체의 크기가 조정될 때 개체가 반응하는 방식을 정의할 수 있습니다.

자동 레이아웃 프레임 자체가 일반 프레임 내에 중첩되어 있는 경우에도 제약조건을 적용할 수 있습니다. 제약조건 섹션과 크기 조정 옵션이 표시되어, 자동 레이아웃 프레임의 제약조건과 그 안의 모든 개체에 대한 크기 조정 동작을 모두 설정할 수 있습니다.

예를 들어, 자동 레이아웃을 사용하여 태그 세트를 만든 경우 다양한 화면 크기에 맞게 조정하고자 할 수 있습니다. 제약 조건을 사용하여 부모 프레임의 크기가 조정될 때 탐색 모음이 올바르게 반응하도록 하고 크기 조정을 통해 탐색 모음 내의 개체가 이러한 변경에 반응하는 방식을 제어할 수 있습니다.

화면 하단에 팝업 패널이 있는 모바일 프레임입니다. 커서로 패널을 선택하고 constraints 버튼을 클릭한 다음 가로 제약조건을 'left'에서 'left and right'로 변경합니다. 모바일 프레임의 크기를 수평으로 조절하면 패널이 확장됩니다.

제약조건에 대해 자세히 알아보기 →

키보드 단축키 가이드

기본 단축키

작업	Mac	Windows
자동 레이아웃 추가	`⇧ Shift A`	`⇧ Shift A`
자동 레이아웃 제안	`Ctrl` `⇧ Shift A`	`Ctrl` `Alt` `⇧ Shift` `A`
자동 레이아웃 제거	`⌥ Option` `⇧ Shift A`	`Alt` `⇧ Shift A`
모든 면의 패딩 편집(오른쪽 패널에서)	`⌘ Command` + 패딩 입력 필드 클릭	`Ctrl` + 패딩 입력 필드 클릭

정렬 상자에서

오른쪽 패널의 정렬 상자를 클릭하고 다음과 같이 키를 눌러 작업을 수행합니다.

작업	Mac 및 Windows
정렬 설정	`↓` / `→` / `←` / `↑`
정렬을 가장자리로 설정	`W` / `A` / `S` / `D`
기준선 정렬 전환	`B`
간격 전환	`X`

캔버스에서

캔버스 핸들을 드래그하면서 다음과 같이 키보드 단축키를 사용하여 작업을 수행할 수 있습니다.

작업	Mac	Windows
반대쪽에 패딩 설정	`⌥ 옵션`	`Alt`
모든 면에 패딩 설정	`⌥ Option⇧ Shift`	`Alt⇧ Shift`
큰 넛지로 패딩 또는 간격 설정	`⇧ Shift`	`⇧ Shift`

이러한 단축키를 사용하고 자동 레이아웃 프레임에서 특정 영역을 클릭하면 다음을 수행할 수 있습니다.

작업	Mac	Windows
반대쪽에 패딩 값 입력	`⌥ Option` + 패딩 영역 클릭	`Alt` + 패딩 영역 클릭
모든 면에 패딩 값 입력	`⌥ Option⇧ Shift` + 패딩 영역 클릭	`Alt⇧ Shift` + 패딩 영역 클릭
hug contents 설정	세로 또는 가로 가장자리를 두 번 클릭	세로 또는 가로 가장자리를 두 번 클릭
fill container 설정	`⌥ Option` + 세로 또는 가로 가장자리를 두 번 클릭	`Alt` + 세로 또는 가로 가장자리를 두 번 클릭