실무에서 바로 쓰는 피그마 6 - 오토레이아웃 : 반응형 디자인의 필수 요소

지금까지 Figma의 기본적인 기능들을 배우며 디자인의 시각적인 요소들을 다루는 법을 익혔습니다. 이제 Figma의 가장 강력하고 혁신적인 기능 중 하나인 오토 레이아웃(Auto Layout)에 대해 알아볼 시간입니다. 오토 레이아웃은 단순히 요소를 정렬하는 것을 넘어, 콘텐츠의 변화에 따라 자동으로 크기와 간격을 조절하는 반응형(Responsive) 디자인을 구현하는 핵심 도구입니다. 이 기능을 마스터하면 디자인 수정 시간을 획기적으로 단축하고, 일관되고 유연한 UI를 구축할 수 있게 됩니다. 오토 레이아웃이 왜 필수적이며 어떻게 활용하는지, 그 모든 것을 상세히 파헤쳐 보겠습니다.

 

6.1 오토 레이아웃이란 무엇인가? 왜 필수적인가?

Figma에서 오토 레이아웃은 프레임이나 그룹 내의 요소들이 콘텐츠의 크기 변화에 따라 자동으로 정렬되고 간격을 조절하는 속성입니다. 마치 웹 개발의 Fiexbox나 Css Fird와 유사하게 작동하여, 디자이너가 수동으로 간격을 조절하거나 요소를 재배치하는 번거로움을 없애줍니다.

 

6.1.1 오토 레이아웃의 등장 배경과 필요성

과거의 디자인 도구에서는 텍스트 내용이 바뀌거나 아이콘이 추가되면, 해당 텍스트나 아이콘 주변의 모든 요소들을 수동으로 옮기고 간격을 다시 맞춰야 했습니다. 이는 특히 반복적인 수정 작업이 빈번한 UI/UX디자인 과정에서 엄청난 시간 낭비와 오류 발생의 원인이 되어씃ㅂ니다.

• 반응형 디자인의 요구 증가 : 다양한 디바이스(모바일, 태블릿, 테스크톱)와 화면 크기에 대응하는 반응형 디자인은 이제 선택이 아닌 필수가 되었습니다. 오토 레이아웃은 이러한 반응형 UI를 효율적으로 만들 수 있는 기반을 제공합니다.
• 디자인 시스템 구축의 핵심 : 재사용 가능한 컴포넌트를 만들고 디자인 시스템을 구축할 때, 컴포넌트의 유연성과 확장성은 매우 중요합니다. 오토 레이아웃은 버튼, 카드, 헤더 등 모든 컴포넌트가 다양한 상황에서 일관되게 동작하도록 만듭니다.
• 협업의 효율성 : 여러 디자이너가 하나의 디자인 시스템을 공유할 때, 오토 레이아웃이 적용된 컴포넌트는 모든 팀원이 일관된 방식으로 사용할 수 있게 하여 커뮤니케이션 오류를 줄이고 생산성을 높입니다.
• 디자인 - 개발 핸드오프 간극 축소 : 오토 레이아웃의 동작 방식은 웹 개발의 Flexbox와 유사하여, 디자이너의 의도를 개발자에게 더 명확하게 전달하고 실제 구현 과정에서의 오차를 줄여줍니다.

6.1.2 오토 레이아웃의 기본 원리

오토 레이아웃은 기본적으로 부모-자식 관계를 기반으로 작동합니다.

• 부모(Parent) : 오토 레이아웃이 적용된 프레임 또는 그룹입니다. 이 부모 프레임이 오토 레이아웃의 속성을 제어합니다.
• 자식(Child) : 부모 프레임 안에 포함된 요소들입니다. 이 자식 요소들은 부모 프레임의 오토 레이아웃 규칙에 따라 자동으로 간격이 조절됩니다.

오토 레이아웃은 내부 자식 요소들의 크기나 개수가 변함에 따라 부모 프레임의 크기를 자동으로 조절하거나, 부모 프레임의 크기에 따라 자식 요소들을 재배치하는 등 유연한 동작을 가능하게 합니다.

 

6.2 오토 레이아웃 생성 및 기본 설정 : 첫 걸음 떼기

오토 레이아웃을 적용하는 방법은 매우 간단하며, 그 후 세부적인 속성을 조절할 수 있습니다.

 

6.2.1 오토 레이아웃 생성 방법

오토 레이아웃은 단일 요소가 아닌 두 개 이상의 요소를 선택했을 때 활성화됩니다.

1. 요소 선택 : 오토 레이아웃을 적용할 때 두 개 이상의 레이어(텍스트, 도형, 이미지, 다른 프레임 등)을 선택합니다.

2. 선택방법 :

• 단축키 : Shift + A(가장 빠르고 권장되는 방법)
• 우측 속성 패널 : Design 패널의 AutoLayout섹션에서 +버튼 클릭
• 마우스 우클릭 : 선택된 요소에 마우스 우클릭 > Add auto layout 선택

3. 결과 확인 : 오토 레이아웃이 적용되면 선택된 요소들이 하나의 새로운 프레임으로 묶이며, 이프레임에 오토레이아웃 속성이 부여됩니다. 레이어 페널에서 Auto layout아이콘(정렬 화살표)이 표시된 것을 확인할 수 있습니다.

6.2.2 오토 레이아웃 핵심 속성 살펴보기

오토 레이아웃이 적용된 프레임을 선택하면 우측 속성 패널 Auto Layout섹션에서 다양한 설정 옵션들이 나타납니다.

1. Direction (방향) :

• Horizontal direction (수평) : 자식 요소들을 가로 방향으로 정렬합니다.(왼쪽에서 오른쪽, 또는 오른쪽에서 왼쪽)
• Vertical direction (수직) : 자식 요소들을 세로 방향으로 정렬합니다. (위에서 아래, 또는 아래에서 위)
• 활용 : 버튼 내부의 텍스트와 아이콘을 가로로 정렬하거나, 목록 아이템들을 세로로 쌓을 때 사용합니다.

2. Spacing between items ( 아이템 간 간격) : 

•  오토 레이아웃 내의 자식 요소들 사이의 간격을 조절합니다. px 단위로 입력합니다.
• 활용 : 버튼 내부의 텍스트와 아이콘 사이 간격, 목록 아이템 간 간격 등 일관되게 유지할 때 사용합니다.

3. Padding (패딩) : 

• Horizontal padding (수평 패딩) : 오토 레이아웃 프레임의 좌우 내부 여백을 조절합니다.
• Vertical padding (수직 패딩) :  오토 레이아웃 프레임의 상하 내부 여백을 조절합니다.
• 개별 패딩 조절 : 패딩 입력란 옆의 아이콘을 클릭하면 상, 하 , 좌, 우 패딩을 각각 다르게 설정할 수 있습니다.
• 활용 : 버튼의 내부 여백, 카드 컴포넌트의 콘텐츠와 경계선 사이 여백 등을 만들 때 사용합니다.

4. Alignment (정렬) :

• 오토 레이아웃 내의 자식 요소들이 어떻게 정렬될지 결정합니다. 오토 레이아웃 프레임의 크기가 자식 요소들의 총 키기보다 클 때 적용됩니다.
• 좌측 상단, 중앙, 우측 하단 등 9가지 정렬 옵션을 제공합니다.
• Space between (공간 균등 분배) : 자식 요소들 사이에 남은 공간을 균등하게 분배하여 채웁니다. (웹 개발의 justify-content : space-between과 유사) 주로 상단 내비게이션 바처럼 양 끝에 요소를 배치할 때 유용합니다.
• 활용 : 버튼 내부의 텍스트를 중앙에 정렬하거나, 여러 아이콘을 수평으로 나열하고 각 아이콘 사이에 균등한 공간을 줄 때 사용합니다.

5. Resizing (크기 조절) : 

• 오토 레이아웃 프레임 자체의 크기 조절 방식과 그 안에 포함된 자식 요소들의 크기 조절 방식을 정의합니다. 오토 레이아웃의 핵심 기능 중 하나입니다.
• 5.2.2 Resizing Modes 참조(실무에서 바로쓰는 피그마 5)

https://codespecialist.tistory.com/185

실무에서 바로 쓰는 피그마 5 - 이미지 삽입과 편집 : 효율적인 시각 자료 활용

 

6.3 Resizing Modes : 오토 레이아웃의 핵심, 반응형 동작 정의

Resizing은 오토 레이아웃의 가장 중요한 부분으로, 부모 프레임의 크기 변화에 따라 자식요소들이 어떻게 반응할지, 또는 자식 요소의 크기 변화에 따라 부모 프레임이 어떻게 변할지를 결정합니다.

 

6.3.1 부모 프레임의 Resizing

오토 레이아웃이 적용된 부모 프레임을 선택했을 때 우측 속성 패널 Resizing섹션에서 설정합니다.

1. Hug contents (콘텐츠 안기) :

• 설명 : 부모 프레임의 크기가 내부 자식 요소들의 크기와 패딩에 따라 자동으로 조절됩니다. 즉, 자식 요소의 크기가 커지거나 작아지면 부모 프레임도 함께 커지거나 작아집니다.
• 활용 : 버튼, 태그, 알림 메시지 등 텍스트 내용의 길이에 따라 자동으로 크기가 조절되어야 하는 컴포넌트를 만들 때 필수적입니다.

2.Fixed width / Fixed height (고정 너비 / 고정 높이) :  

• 설명 : 자식 요소의 너비 또는 높이가 수동으로 지정한 값으로 고정됩니다.
• 활용 : 고정된 크기를 가져야 하는 아이콘, 이미지 등.

3. Fill container (컨테이너 채우기) :

• 설명 : 자식 요소가 부모 오토 레이아웃 프레임의 남은 공간을 모두 채우도록 크기가 조절됩니다.  이 기능은 Space between과 함께 반응형 레이아웃의 핵심입니다.
• 활용 : 카드 내에서 이미지가 카드 너비 전체를 차지해야 할 때 , 폼 입력 필드가 부모 프레임ㅇ너비를 가득 채워야 할 때 등.

4. Fixed position (고정 위치) :

• (오토 레이아웃 Reizing은 아니지만 관련하여 함께 설명) 오토 레이아웃 프레임 내에서 특정 자식 요소만 오토 레이아웃의 흐름에서 벗어나 고정된 위체에 있고 싶을 때 사용합니다. Position 우측 lgnore auto layout버튼 클릭
• 활용 : 특정 프레임의 배경 이미지, 팝업 닫기 버튼처럼 오버레이되어야 하는 요소.

 

6.4 오토 레이아웃 중첩 및 고급 활용 : 복잡한 UI 구현

오토 레이아웃의 진정한 힘은 여러 오토 레이아웃프레임을 중첩(Nesting)하여 복잡한 UI를 유연하게 만들 수 있다는 점에 있습니다.

 

6.4.1 오토 레이아웃 중첩의 중요성

• 모듈화된 UI 구축 : 헤더, 카드, 푸터 등 각 섹션을 오토 레이아웃 프레임으로 만들고, 이들을 다시 하나의 큰 오토 레이아웃 프레임 안에 배치함으로써 UI를 모듈화하고 재사용성을 높일 수 있습니다.
• 다단계 반응형 디자인 : 예를 들어, 내비게이션 바(수평 오토 레이아웃)안에 로고, 메뉴 그룹, 버튼 그룹(각각 별도의 수평 오토 레이아웃)을 배치하고, 각 그룹 내의 요소들이 또 다른 오토 레이아웃을 가질 수 있습니다. 이렇게 중첩된 구조는 화면 크기 변화에 따라 요소들이 유기적으로 반응하게 만듭니다.

6.4.2 간격 조절의 고급 옵션

1. Canvas stacking (캔버스 스태킹) : 

• 설명 : 오토 레이아웃이 적용된 프레임 내에서 자식 요소들이 서로 겹치도록 만들 때 사용합니다.
  First on top 또는 Last on top 옵션이 있습니다.
• 활용 : 프로필 사진 목록, 태그 목록처럼 요소들이 겹쳐 보이도록 연출할 때 유용합니다.

 

2. Stroke settings (스트로크 설정) :

Include stroke in layout 옵션을 통해 스트로크(선)의 두께를 오토 레이아웃의 크기 계산에 포함할지 여부를 결정할 수 있습니다.

3. Advanced Layout settings (고급 레이아웃 설정) :

• 오토 레이아웃 패널의 하단에 있는 점 세 개 아이콘을 클릭하면 더 많은 옵션이 나타납니다.
• Spacing mode (간격 모드) :
  Packed (기본값) : 아이템 간 간격으로 모든 요소를 밀착시킵니다.
  Space between: 아이템 사이에 남은 공간을 균등하게 분배합니다.
• Canvas stacking : 위에서 설명한 겹침 순서 설정. 
• Text baseline alignment  : 텍스트 레이어의 기준선에 맞춰 정렬할지 여부를 설정합니다.
• Position : First item default(기본값) 또는 Last item default를 설정하여 순서를 조절할 수 있습니다.

6.4.3 간격 토큰(Spacing Tokens)

Figma에서는 간격 값을 스타일(Styles)로 정의하여 재사용할 수 있습니다. 예를 들어, spacing-sm(8px), spacing-md(16px)와 같은 간격 토큰을 만들어 오토 레이아웃의 패딩이나 아이템 간 간격에 적용하면, 디자인 시스템의 일관성을 강화하고 한 번의 수정으로 모든 관련 간격을 변경할 수 있습니다.(향후 스타일 가이드 또는 디자인시스템에서 자세히 다룰 예정입니다.)

 

6.5 오토 레이아웃 활용 팁 : 생산성 극대화

오토 레이아웃을 마스터하면 작업 속도를 비약적으로 높일 수 있습니다. 몇 가지 유용한 팁을 알려들비니다.

1. 단축키를 습관화하라 : Shift + A는 오토 레이아웃 생성의 핵심 단축키입니다. 자주 사용하여 몸에 익히는 것이 중요합니다.

2. Cmd(Mac)/Ctrl(window) + Enter(Select child) : 오토 레이아웃 프레임이 선택된 상태에서 Cmd(Mac)/Ctrl(window) + Enter를 누르면 그 안에 있는 첫번째 자식 요소가 선택됩니다. 반복해서 누르면 다음 자식 요소로 이동합니다. 이는 중첩된 오토 레이아웃에서 특정 요소를 빠르게 선택하고 수정할 때 매우 유용합니다. 

3. Enter(Edit Contents) : 오토 레이아웃 프레임을 선택한 상태에서 Enter를 누르면 내부의 모든 자식 요소들이 선택되어 한꺼번에 이동시키거나 속성을 변경할 수 있습니다.

4. Option(Mac)/Alt(window) + 드래그 (간격 시각화) : 오토 레이아웃의 적용된 프레임이나 그 안의 자식 요소를 선택한 상태에서 Option(Mac)/Alt(window) 키를 누르면 각 요소의 패딩 및 간격이 빨간색으로 시각화되어 보입니다. 이를 통해 정확한 간격을 쉽게 확인할 수 있습니다.

5. 드래그로 순서 변경 : 오토 레이아웃 프레임 내에서 자식 요소를 드래그하여 순서를 쉽게 변경할 수 있습니다. 드래그 중 Option(Mac) / Alt(window)키를 누르면 해당 위치에 새 요소를 삽입할 수 있습니다.

6. Backspace로 오토 레이아웃 제거 : 오토 레이아웃 프레임을 선택하고 Backspace 키를 누르면 프레임만 삭제되고 안에 있는 자식 요소들은 원래 위치에 남게 됩니다. (이는 프레임을 삭제하는 것과 다릅니다. Delete키를 누르면 프레임과 내부 요소가 모두 삭제됩니다.)

7. Fill container 와 Hug contents 조합 : 이 두가지 Resizing 모드를 적절히 조합하여 유연한 반응형 컴포넌트를 만들 수 있습니다. 예를 들어, 부모는 Fixed width이고 자식은 Fill container를 사용하여 너비를 채우게 하거나, 버튼처럼 텍스트 내용에 따라 크기가 변해야 하는 컴포넌트는 Hug contents를 사용합니다.

8. 오토 레이아웃 진단 플러그인 활용 : Similayer 나 Autoflow와 같은 플러그인은 복잡한 오토레이아웃 구조를 분석하거나, 오토 레이아웃 간의 흐름을 시각화하는데 도움을 줄 수 있습니다.

 

6.6 마치며 : 디자인 생산성의 혁명

이번 글에서는 Figma의 오토 레이아웃 기능을 깊이 있게 다루었습니다. 오토 레이아웃이 왜 현대 디자인 워크플로우에서 필수적인지, 어떻게 생성하고 핵심 속성들을 조절하는지, 그리고 반응형 디자인의 핵심인 Resizing modes와 중첩 기능을 통해 복잡한 UI를 구현하는 방법까지 상세히 알아보았습니다.

 

오토 레이아웃은 단순히 디자인 시간을 단축하는 것을 넘어, 여러분의 디자인을 더욱 유연하고 견고하게 만들며, 개발자와의 협업을 훨씬 원활하게 해줍니다. 처음에는 다소 어렵게  느껴질 수 있지만, 버튼이나 카드와 같은 작은 컴포넌트부터 시작하여 점진적으로 오토 레이아웃을 적용하는 연습을 한다면 곧 익숙해질 것입니다.

 

다음 글에서는 컴포넌트와 인스턴스 : 재사용 가능한 디자인 시스템 구축이라는 주제로, 디자인 요소를 재사용하고 효율적으로 관리하는 컴포넌트 기능에 대해 다를 예정입니다. 오토 레이아웃으로 만든 유연한 요소들을 컴포넌트로 만들면 디자인 시스템 구축의 기반을 다질 수 있습니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!