오토레이아웃?
프레임에 자동으로 간격을 걸어주는 기능으로, 프레임을 동적으로 (콘텐츠에 반응하도록) 만들어준다.
주로 Web, 반응형 모바일 작업시에 유용하게 사용되고 작업시 디자이너, 퍼블리셔, 개발자 간의 오류사항을 줄여줄 수 있다.
오토레이아웃 만들기 (단축키)
1. 개체 우클릭 > Add auto layout
2. 우측 탭에서 Auto layout + 버튼 누르기
3. 단축키 : Shift + A
오토레이아웃 해제하기
1. 프레임 선택, 언그룹
2. 우측 오토레이아웃 마이너스
3. 단축키 : Ctrl + Shift +G or Ctrl + 백스페이스
오토레이아웃 패널 활용방법 알려줘!
1. 레이아웃 방향 : 자동으로 요소간의 레이아웃을 배치할 방향을 설정하는 기능이다. 반응형에서는 주로 꺾은 아래 화살표 아이콘을 주로 사용한다.
2. 레이아웃 간격 : 요소간 간격을 설정하는 기능이다. 수동으로 입력할 수도 있고, 보통은 자동으로 설정된다.
3. 좌우 마진 (간격) : 요소와 테두리 좌우 마진 간격을 설정하는 기능이다.
4. 상하 마진 (간격) : 요소와 테두리 상하 간격을 설정하는 기능이다.
5. 프레임 내 배치(상하좌우 정렬) : 테두리에서 내부 요소들이 어느위치를 기준으로 오토레이아웃이 제작되는지에 대한 기준을 설정하는 기능이다.
6. 더보기 옵션 : 이외의 다양한 더보기 기능을 확인 할 수 있다.
오토레이아웃 참고 팁
요소를 덩어리 단위로 쪼개어 가장 작은 단위부터 제작한다.
한번에 하나의 방향만 레이아웃이 가능하기 때문에, 조합해서 사용하는 것이 좋다.
위의 피그마에서는 아래와 같은 순서로 오토레이아웃을 진행했다.
1. 작은 단위인 블럭 1 x 3
2. 블럭1 + 블럭2
3. 블럭3 x 2
4. 블럭1 x 2
5. 블럭3 + 블럭1
6. (블럭1 + 블럭2) + (블럭3 + 블럭1)
각 오토레이아웃에 다르게 레이아웃 방향도 테스트해보았다. 위를 참고해서 블럭쌓기 놀이를 통해 오토레이아웃에 대해 이해를 쌓아보는건 어떨까?
다음 포스팅은 오토레이아웃의 응용편으로, 반응형 콘텐츠를 만드는 방법과 Wrap 기능, 앱솔루트 포지션에 대해 포스팅해볼 예정이다.
