피그마 뽀사기 1. 오토레이아웃 기능 소개
피린이 탈출기원 프로젝트
피그마 오토 레이아웃이란?
반응형웹처럼 레이아웃을 원하는데로 고정시켜 화면을 늘리거나 줄였을때 원하는 디자인이 보여지게 할 수 있으며,
버튼이나 중복된 리스트 디자인을 만들 때 유용하게 사용된다.
부모와 자식의 두개의 레리아웃이 있을 때만 오토레이아웃 적용이 가능하다.
한 개의 요소에는 적용할 수 없다. 이점 명심하시길..
부모요소와 자식요소 두개의 레이어를 잡고 우클릭 > Add Autolayout 또는
단축키 shift + A 로 만들 수 있습니다.
여기서 단축키 외우고 가실게요 shift + A
오토레이아웃의 설정값 간략 설명
1 - 정렬 방향
화살표 선택된 오토레이아웃 프레임 내부의 요소들이 세로로 배치되어있으면 세로 화살표로 표시되고 가로방향으로 배치된 겅우 가로 화살표가 선택
2 - 요소간 간격
기본이 되는 도형위에 여러개의 컨텐츠가 있는 경우 간격을 자동으로 맞춰주는 기능
스페이스 비트윈을 적용하면 아래있는 도형을 움직이면 그 크기에 맞춰서 간격이 조절된다.
수직수평 아이콘을 클릭해 정렬 변경도 가능하다
3 - 패딩 값
CSS에서와 마찬가지로 각 오토 레이아웃 부모 프레임에는 그 안의 요서 주위에 패딩이 있습니다.
오토레이아웃을 통해 패딩을 설정하게 되면, 패딩값이 자동으로 늘어나고 줄어든다.
4 - 프레임 내 배치 위치
무모요소를 기준으로 자식요소의 위치를 어디에 고정시킬지 지정해준다.
유연한 반응형의 레이아웃 작업 시 유용하게 쓰인다.
5 - 더보기 버튼
Advanced layout 에서는 세부 설정을 해줄 수 있다.
Spacing mode : 자식레이어가 왼쪽부터 차곡하게 정렬되는 패키지, 그리고 가로길이에 맞춰 동일한 여백이 적용되며 정렬되는 Space Between이 있다.
Strokes : 스트로크를 포함한 영역을 사용할지, 스트로크를 제외한 영역을 사용할지 설정해주는 메뉴이다.
Canvas stracking : 자식요소의 나열을 순서대로 하단 배치할지(First on top), 아니면 순서를 역행하여 붙이는 순서대로 상위 배치할지(Last on top)를 지정해준다.
이 부분은 예제를 활용하면 쉽게 이해가 될 것 같아 나중에 예제와 함께 활용해 보겠다.
[Tip] 오토레이아웃 활용 버튼 만들어 보기
1. 박스와 텍스트 요소를 만들어준다
2. 요소를 함께 선택한 후 마우스 우클릭 > Add auto layout, 혹은 ctrl(Command) + A 를 눌러서 오토레이아웃을 설정해준다.
3. 설정창에서 좌우여백을 설정해주고 상하 마진값을 조절해주면
아주 유용하게 사용할 수 있는 버튼 간단 완성!!
기본적인 기능은 익혔으니 다음예제에는 오토레이아웃을 활용한
기본 리스트와, 앱 메인 화면을 만들어 보기로 하자 :)
