[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 9일차 "오토 레이아웃”

 

 

 

안녕하세요.

오늘은 피그마의 핵심 기능이라고 할 수 있다는 "오토 레이아웃"에 대해 배웠습니다.

 

 

오토 레이아웃

 

언제 사용하나요?

버튼 만들 때

패딩을 넣어주고 싶을 때

반응형 레이아웃 만들 때

아이템 사이의 간격을 편하게 설정하기 위해

오브젝트의 방향이 다를 때

 

단축키

✅ 설정: Shift + A

✅ 해제: Shift + Alt + A

 

 

• 텍스트 오토 레이아웃 설정
  가로: Fill
  세로: Hug

 

 

컨스트레인트

 

통제, 제약이라는 뜻으로 프레임 안의 오브젝트(자식요소)를 통제하는 기능입니다.

다양한 디바이스에 대응하는 반응형 레이아웃 디자인을 해야될 때, 오브젝트를 효율적이고 배치하고 이동해서 유동적으로 디자인하기 편리합니다.

 

• 컨스트레인트 설정 전 주의사항
  그룹X, 오토레이아웃X 프레임 안에서만 설정 가능.
• 컨스트레인트 무시
  Ctrl 누르고 프레임을 드래그해서 마음대로 변경

 

 

오토 레이아웃 실습

 

1. 스테이폴리오

 

스테이폴리오 홈페이지의 Header 부분을 오토레이아웃으로 묶는 연습을 진행했습니다.

 

2. 대시보드

 

대시보드도 열심히 연습했습니다.

이후, 팀 프로젝트 설문조사를 이어갔습니다.

 

 

 

---

본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다