Auto Layout 가이드

시작하기 전에

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

모든 요금제에서 사용 가능

Figma Design 및 Figma Sites에서 사용할 수 있습니다. Figma Slides와 Figma Buzz의 디자인 모드에서도 Auto Layout에 액세스할 수 있습니다.

파일에 대한 편집 가능 액세스 권한이 있는 사람은 누구나 Auto Layout을 사용할 수 있습니다.

프레임에 Auto Layout을 사용하면 디자인이 콘텐츠 변경에 동적으로 반응하여, 시간을 절약하고 반응성과 적응성을 갖춘 디자인을 만들 수 있습니다.

Auto Layout 프레임의 요소는 방향, 간격, 패딩, 정렬 등 여러 Auto Layout 속성을 기반으로 프레임 내에서 자동으로 배치됩니다. 콘텐츠가 변경되거나 요소가 추가, 제거 또는 크기 조정되면 수동으로 위치를 조정할 필요 없이 레이아웃이 조정됩니다.

Auto Layout을 사용하여 다음과 같은 반응형 디자인을 만들 수 있습니다.

• 텍스트 레이블을 편집할 때 커지거나 작아지는 버튼
• 항목이 추가, 제거 또는 숨겨질 때 조정되는 목록
• 벤토 박스와 대시보드
• 다양한 화면 크기에 맞는 웹페이지

오토레이아웃 추가

디자인에서 Auto Layout을 시작하려면, 하나 이상의 레이어를 선택하고 ⇧ Shift A를 누르거나 오른쪽 사이드바에서 Add auto layout(Auto Layout 추가)를 클릭하세요. Figma가 세로, 가로, 그리드 중 어떤 Auto Layout 흐름을 사용할지 결정하려고 시도합니다. 언제든지 다른 흐름으로 전환할 수 있습니다.

디자인의 Auto Layout 전환에 대해 자세히 알아보세요.

Auto Layout 흐름 선택하기

프레임에 Auto Layout을 사용하면 프레임 내 개체의 흐름과 배열을 결정하기 위해 3가지 옵션 중 하나를 선택할 수 있습니다.

• 세로
• 가로
• 그리드

가로 및 세로

Vertical(세로) 옵션은 프레임에 개체를 Y축을 따라 배치합니다. 추가, 제거 또는 재정렬한 모든 개체는 y축을 따르게 됩니다. 예를 들어, 할 일 목록의 여러 항목, 뉴스피드나 타임라인 내의 게시물 등이 있습니다.

Horizontal(가로) 옵션은 x축을 따라 프레임에 개체를 배치합니다. 추가, 제거 또는 재정렬한 모든 개체는 x축을 따르게 됩니다. 예를 들어, 모바일 탐색 메뉴의 버튼 행 또는 아이콘이 있습니다.

가로를 선택하면 Wrap(줄 바꿈) 기능이 활성화됩니다. Wrap(줄 바꿈)은 프레임에서 넘치는 개체를 다음 줄로 밀어냅니다.

가로 및 세로 Auto Layout 옵션에는 크기 조정, 간격, 정렬 등과 같은 추가 속성도 있습니다.

가로 및 세로 Auto Layout 흐름에 대해 자세히 알아보세요.

Grid 오픈 베타

Grid(그리드) 옵션은 개체를 열과 행에 배치하여, 다양한 프레임 크기에 맞게 반응하고 크기를 조정하는 갤러리, 벤토 박스, 대시보드 레이아웃을 만들 수 있게 해 줍니다.

가로 및 세로 흐름의 줄 바꿈 설정과 달리, 그리드의 개체는 다음 줄로 넘어가지 않습니다. 대신 '그리드' 안에 배치되며, 여러 행이나 열에 걸쳐 배치할 수 있는 옵션이 제공됩니다.

Grid Auto Layout 프레임에는 열 및 행 크기 조정, 범위(span) 등 다양한 속성이 추가로 제공됩니다.

Grid Auto Layout 흐름 사용 방법에 대해 알아보세요.

간격 속성 조정하기

Auto Layout 프레임에서 사용할 수 있는 속성 유형은 사용 중인 Auto Layout 흐름에 따라 달라집니다. 그러나 모든 흐름은 몇 가지 주요한 간격 속성을 공유합니다.

Padding(패딩)은 부모 Auto Layout 프레임의 가장자리와 그 개체들 사이의 빈 공간 또는 흰색 공간입니다. 패딩을 균일, 세로, 가로로 설정하거나 상단, 오른쪽, 하단, 왼쪽 패딩에 다른 값을 지정할 수 있습니다.

Gap between(간격)은 Auto Layout 프레임에서 개체 간의 거리 또는 분포입니다. 숫자 값을 사용하여 개체 간의 거리를 정확히 지정합니다. 세로 및 가로 Auto Layout 프레임에서는 항목 간 간격을 Auto(자동)로 설정하여, 개체들 사이의 간격이 최대가 되도록 할 수 있습니다.

크기 조정으로 반응성 조정하기

Auto Layout의 가장 강력한 기능 중 하나는 크기 조정 속성을 사용하여 주변 설정 및 개체에 맞춰 개체의 치수를 조정하는 것입니다. 부모 Auto Layout 프레임에서 크기 조정 동작을 설정하여 콘텐츠의 변경 사항에 따라 크기가 조정되는 방식을 결정할 수 있으며, 그 반대의 경우도 마찬가지입니다.

크기 조정 설정은 오른쪽 패널의 width(너비) 및 height(높이) 드롭다운 메뉴를 사용하여 X축과 Y축 모두에 적용할 수 있습니다.

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

크기 조정 속성	적용 대상	치수 동작
내용에 맞게 조절	Auto Layout 프레임	개체의 크기는 자식 개체에 따라 조정됩니다.
컨테이너 채우기	Auto Layout 프레임의 자식 개체	개체가 모든 사용 가능한 공간을 채웁니다.
고정 너비/높이	둘 다	개체가 고정된 상태로 유지됩니다.
최소 너비/높이	둘 다	개체가 최소값 이상입니다.
최대 너비/높이	둘 다	개체가 최대값 이하입니다.

내용에 맞게 조절

모든 Auto Layout 프레임에서 내용에 맞게 조절을 사용하면, 간격 값을 준수하면서 자식 개체 주위의 치수를 가능한 가장 작게 유지합니다.

예를 들어, Auto Layout을 사용하는 프레임 내에 40px 너비의 텍스트 레이어가 있다고 가정해 보겠습니다. 프레임의 패딩은 좌우에 10px로 설정되어 있습니다. 크기 조정이 '내용에 맞게 조절'로 설정되어 있으므로 프레임의 너비는 60px입니다. 텍스트 레이어가 업데이트되어 너비가 50px가 되면, 프레임의 너비는 70px로 변경됩니다.

'내용에 맞게 조절'은 Auto Layout 프레임에만 적용할 수 있습니다.

컨테이너 채우기

Fill container(컨테이너 채우기)로 설정된 레이어는 부모 프레임에서 사용 가능한 모든 공간을 차지하도록 늘어나며, 간격 값을 준수합니다.

Fill container(컨테이너 채우기)는 Auto Layout 프레임의 자식 개체에만 적용할 수 있으며, 최상위 프레임에는 사용할 수 없습니다.

Auto Layout 프레임의 자식 개체도 부모 프레임의 사용 가능한 전체 공간에 맞게 수동으로 크기가 조정되는 경우 Fill container(컨테이너 채우기)로 설정됩니다.

고정 너비 또는 높이

레이어에 고정 너비 또는 높이를 설정하면 주변 간격 값과 자식, 부모 또는 형제 개체의 변경에 관계없이 치수가 고정되어 변경되지 않습니다.

고정은 모든 Auto Layout 프레임과 그 자식 요소에 적용될 수 있습니다.

레이어의 크기를 수동으로 조정하거나 너비 또는 높이 필드에 값을 지정하면, 크기 조정 속성이 해당 축에서 고정으로 설정됩니다.

예를 들어, Auto Layout을 사용하는 버튼 컴포넌트가 있고, 그 너비가 내용에 맞게 조절되도록 설정되어 있다고 가정해 보겠습니다. 너비 필드에 125와 같은 값을 입력하면 크기 조정 속성이 Fixed width(고정 너비)로 변경됩니다.

최소 및 최대 치수

모든 Auto Layout 프레임과 해당 자식 요소에 최소 또는 최대 너비와 높이를 설정하세요.

• Width(너비) 드롭다운을 열어 Add min width(최소 너비 추가) 및 Add max width(최대 너비 추가)를 찾습니다.
• Height(높이) 드롭다운을 열어 Add min height(최소 높이 추가) 및 Add max height(최대 높이 추가)를 찾습니다.

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

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

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

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

오토레이아웃 무시

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

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

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

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

• Auto Layout 프레임의 자식을 선택하고 오른쪽 패널에서 클릭합니다.
• ⌃ Control을 누른 상태에서 개체를 Auto Layout 프레임으로 드래그합니다.

오토레이아웃 프레임 중첩

Auto Layout의 반응성이 가진 진정한 힘은 중첩된 Auto Layout 프레임에서 크기 조정 동작을 결합할 때 발휘됩니다.

중첩은 레이어를 다른 레이어 안에 배치하는 작업을 의미하며, 그 예로 컴포넌트 안에 버튼을 배치하거나 프레임 안에 도형을 배치하는 경우를 들 수 있습니다.

Auto Layout 프레임을 다른 Auto Layout 프레임 내에 중첩하면 가로, 세로, 그리드 Auto Layout 옵션을 결합하여 복잡한 인터페이스를 만들 수 있습니다. 중첩된 프레임은 부모와 자식 속성을 모두 가지며, 각 프레임은 자체적인 패딩과 간격 값을 가지고 있어, 요소들이 다양한 방향과 배열로 흐르는 다차원 레이아웃을 구성할 수 있습니다.

다차원 Auto Layout 흐름을 만드는 방법을 알아보세요.

다른 기능 관련 고려 사항

제약 조건

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

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

예를 들어, 습관을 기록하는 앱이 있다고 가정해 보겠습니다. 이 앱에서는 각 습관마다 습관 완료 내역을 보여주는 캘린더와 함께 분석 화면이 제공되며, 특정 날짜에 대한 메모를 남길 수 있는 하단 패널도 있습니다. 이 화면은 Auto Layout을 사용하지만, 메모 패널은 Auto Layout 흐름을 무시합니다. 부모 프레임의 크기가 조정될 때 메모 패널이 올바르게 반응하도록 하려면 Bottom(하단) 및 Left 및 Right(왼쪽 및 오른쪽) 제약조건을 사용할 수 있습니다.

제약조건에 대해 자세히 알아보세요.

컴포넌트 및 인스턴스

컴포넌트는 프레임이므로 오토레이아웃을 추가할 수 있습니다. 각 컴포넌트에 개별적으로 오토레이아웃을 추가해야 합니다. 현재로선 일괄적으로 오토레이아웃을 추가할 수 있는 방법이 없습니다.

작업	주요 컴포넌트	인스턴스
세로 및 수평 패딩 조정	✓	✓
간격 조정	✓	✓
레이어 순서 바꾸기	✓	✕
새 레이어 추가	✓	✕
레이어 삭제 또는 제거	✓	(레이어만 숨김)

오토레이아웃이 있는 프로토타입 제작

오토레이아웃을 사용하여 프로토타입을 만들 때는 몇 가지를 염두에 두어야 합니다.

스마트 애니메이션 전환은 프레임의 배경을 고려하지 않습니다. 스마트 애니메이션과 함께 Slide in(슬라이드 인) 또는 Move in(안으로 이동) 전환을 사용하려면 배경을 추가해야 합니다. 일반 프레임 안에 직사각형을 만들고 그 안에 Auto Layout 프레임을 배치할 수 있습니다. '슬라이드 인' 및 '안으로 이동' 전환에 대해 자세히 알아보세요.

프레임에 스크롤링 오버플로를 적용하려면 콘텐츠가 프레임 경계를 넘어 확장되어야 합니다.

오토레이아웃 부모의 크기는 콘텐츠 기반이므로 개체에 맞게 크기가 조정됩니다. 스크롤링 오버플로를 복제하려면 오토레이아웃을 일반 프레임 안에 넣어야 합니다.

텍스트 레이어, 최대 높이, 최대 줄 수

텍스트 레이어는 최대 높이와 설정된 최대 줄 수를 모두 가질 수 없습니다. 최대 높이를 추가하면 최대 줄이 Auto(자동)로 설정됩니다. 최대 줄을 숫자로 설정하면 레이어의 최대 높이 설정이 제거됩니다.

최대 줄에 대해 자세히 알아보세요.

텍스트 크기 조정

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

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

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

키보드 단축키 가이드

기본 단축키

작업	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 + 세로 또는 가로 가장자리를 두 번 클릭

리소스

아티클

• 아티클: 디자인에서 Auto Layout 전환하기
  Auto Layout 사용을 시작할 준비가 되셨나요? 프레임과 레이어에서 Auto Layout을 사용하여 디자인을 반응형으로 만드는 방법을 알아보세요.
• 아티클: Auto Layout에서 가로 또는 세로 흐름 사용하기
  Auto Layout의 가로 및 세로 흐름에 사용할 수 있는 속성에 대해 알아보세요.
• 아티클: Auto Layout 흐름에서 그리드 사용하기
  그리드 레이아웃 흐름에서 열, 행, 셀을 다루는 방법을 알아보세요.
• 아티클: 다차원 Auto Layout 흐름 만들기
  여러 Auto Layout 흐름을 결합하여 완전 반응형 컴포넌트와 화면을 만들어 보세요.

프로젝트와 실습 학습

• Figma 튜토리얼 플레이리스트: 유연한 디자인 및 컴포넌트를 만드는 방법 배우기
  이 플레이리스트에는 Auto Layout의 기본 사항, 디자인에 Auto Layout을 적용하는 방법, 그리고 더 많은 연습을 위한 실습 튜토리얼을 다루는 동영상 튜토리얼이 포함되어 있습니다.
• 커뮤니티 파일: Auto Layout 플레이그라운드
  학습하면서 연습할 수 있도록 Auto Layout 플레이그라운드 파일 사본을 받아 두세요.
• 커뮤니티 파일: Grid 플레이그라운드
  학습하면서 연습할 수 있도록 Grid Auto Layout 플레이그라운드 파일의 사본을 받아 두세요
• 프로젝트: Auto Layout과 제약조건으로 반응형 카드 만들기
  이 프로젝트에서는 Auto Layout, 제약조건, 컴포넌트, 도형 도구를 사용하여 팟캐스트 앱을 위한 반응형 카드 디자인 방법을 알아봅니다.