피그마 Auto Layout 사용법 – 피그마 강좌 2-2

피그마의 오토레이아웃 기능을 마스터하는 시간입니다! 오토레이아웃은 디자인에서 반응형 요소를 구현할 때 매우 중요한 기능으로, 이를 통해 요소 간 간격, 마진, 패딩을 자동으로 조정하며 일관된 레이아웃을 유지할 수 있습니다. 오늘 이 영상에서는 오토레이아웃을 설정하는 방법과 다양한 활용 사례를 알아보고, 실제 작업 흐름에서 어떻게 적용하는지 보여드릴 것입니다.

Auto Layout이란?

Auto Layout은 디자인 작업에서 요소 간의 배치와 정렬, 크기 조정을 자동으로 관리할 수 있도록 도와주는 기능입니다. 디자이너가 각각의 요소를 수동으로 배치하고 정렬하는 번거로움을 줄이고, 효율적이고 체계적인 레이아웃을 구성할 수 있게 해줍니다. 특히, UI 디자인에서 다양한 디바이스 크기에 대응하는 반응형 설계가 필요할 때 매우 유용합니다.

Auto Layout은 다음과 같은 주요 기능을 제공합니다.

• 동적 크기 조정: 화면 크기나 콘텐츠의 양에 따라 요소의 크기가 자동으로 변경됩니다.
• 간격 및 여백 조정: 요소 간의 간격(Spacing)과 패딩(Padding)을 설정하여 균형 잡힌 레이아웃을 유지합니다.
• 반응형 디자인 지원: 다양한 화면 크기에 맞게 레이아웃이 적응하며, 모바일, 태블릿, 데스크톱 같은 디바이스에서도 일관성을 유지합니다.

Auto Layout의 주요 활용 사례

Auto Layout은 다음과 같은 작업에 유용합니다.

1. 인라인 타입의 요소 제작

버튼, 태그, 배지와 같이 하나의 행으로 정렬된 요소를 제작할 때 Auto Layout을 사용하면 효율적입니다.
예: 텍스트와 아이콘이 포함된 버튼의 구성에서, 텍스트 길이에 따라 버튼 크기가 자동으로 조정됩니다.

2. 요소 간 간격 조정

여러 개의 요소를 일정한 간격으로 배치해야 할 때, 상하좌우의 간격을 자동으로 맞출 수 있습니다.
예: 리스트 아이템이 일정한 간격으로 나열되거나, 카드형 UI가 동일한 여백을 가지도록 설정.

3. 패딩 및 마진 설정

요소의 외부 여백(마진)과 내부 여백(패딩)을 설정하여 콘텐츠를 보기 좋게 정렬할 수 있습니다.
예: 컨테이너 내부에 있는 텍스트나 이미지가 일정한 간격으로 정렬된 카드 디자인.

1단계: Auto Layout 설정하기

1. 요소를 선택한 후 Shift + A를 누르면 오토레이아웃이 적용됩니다.
2. 또는, 우측 패널에서 Auto Layout 버튼을 직접 클릭합니다.
3. Auto Layout 설정 창에서 방향(세로/가로), 간격, 패딩 등의 값을 조정합니다.

오토 레이아웃의 주요 속성

1. Direction: 요소 정렬 방향을 선택합니다.
   • Vertical: 세로 방향.
   • Horizontal: 가로 방향.
2. Spacing: 요소 간의 간격을 설정합니다.
3. Padding: 프레임 내부의 여백을 설정합니다.

컴포넌트화

Auto Layout으로 구성한 요소를 컴포넌트로 변환하면 여러 곳에서 재사용할 수 있습니다.

• 단축키: Cmd + Option + K
• 예: 버튼 디자인을 컴포넌트화하여 일관된 스타일 유지.

2단계: Alignment와 중첩된 Auto Layout

Auto Layout은 한 번만 설정하고 끝내는 것이 아니라, 중첩적으로 사용할 수 있습니다.

여러 Auto Layout 겹치기

여러 개의 버튼을 Auto Layout으로 정렬하고, 그 상위 요소에 다시 Auto Layout을 적용하면 요소 간 간격과 정렬이 자동으로 조정됩니다.

Alignment 기능

각 요소의 높이가 다를 때 Alignment를 사용하면 중앙 정렬, 상단 정렬, 하단 정렬 등 다양한 방식으로 요소를 배치할 수 있습니다.

3단계: Frame 내부 값의 이해

Auto Layout의 프레임 내부 값을 이해하면 더 복잡한 구조를 쉽게 만들 수 있습니다.

주요 속성

1. Hug Contents
   • 부모 프레임의 크기를 자식 요소의 크기에 맞춥니다.
   • 예: 버튼 텍스트가 변경될 때 버튼 크기가 자동으로 조정.
2. Fill Container
   • 자식 요소의 크기를 부모 프레임의 크기에 맞춥니다.
   • 예: 반응형 레이아웃 제작.
3. Fixed Width/Height
   • 요소의 크기를 고정값으로 설정합니다.

Auto Layout 응용편: 고급 기능

1. Auto 기능 사용(Space Between)

Auto Layout의 Gap의 속성을 수치를 입력하는 것이 아닌 Auto로 선택하면 요소가 프레임 내부에서 균등하게 분배됩니다. 이는 버튼 그룹, 네비게이션 바와 같은 요소 제작에 유용합니다.

• Packed: 요소를 간격 없이 정렬.
• Space Between: 요소 간 간격을 균등하게 설정.

2. Strokes 포함 여부 설정

Auto Layout에서는 기본적으로 스트로크(외곽선)가 레이아웃 계산에 포함되지 않습니다. 하지만, Included in Layout 옵션을 활성화하면 스트로크를 레이아웃에 포함할 수 있습니다. 이는 CSS의 box-sizing 속성과 유사한 개념입니다.

실습 예제: 바텀 네비게이션 만들기

1. 버튼 4개를 Auto Layout으로 정렬하고, Space Between을 설정합니다.
2. 각 버튼의 크기를 Hug Contents로 설정해 텍스트 변경에도 버튼 크기를 자동으로 조정합니다.
3. 버튼을 컴포넌트화하여 재사용 가능한 디자인 시스템을 만듭니다.

Auto Layout은 단순히 요소를 정렬하는 기능을 넘어, 효율적인 디자인 시스템 구축과 반응형 레이아웃 제작에 필수적인 도구입니다. 이를 잘 활용하면 작업 시간을 단축하고, 더 높은 품질의 UI를 만들 수 있습니다.

다음 강의에서는 Constraints를 배워 Auto Layout과 함께 사용하는 방법을 알아보겠습니다. Constraints를 통해 더욱 유연한 반응형 디자인을 만들어 보세요!