ch03_1_스마트 셀렉션 만들기

Chapter03_피그마의 정렬과 레이아웃

학습목표
- 스마트 셀렉션을 이용하여 두 개 이상의 오브젝트를 선택하면 정렬과 간격을 쉽게 조절할 수 있다.
- 오토 레이아웃을 통해 개체를 프레임 내에서 여러 행과 열로 자동 정렬할 수 있다.
- 레이아웃 그리드의 개념을 이해하고 구성 할 수 있다.
- 콘스트레인트의 이해하고 반응형 레이아웃을 구성 해 본다. 

1. 스마트 셀렉션

• 두 개 이상의 오브젝트를 선택하면 정렬과 간격을 쉽게 조절할 수 있다.
• 자주색 간격 조절선을 클릭 앤 드래그하여 간격을 조정할 수 있으며, 원형 핸들을 선택해 위치를 빠르게 변경할 수 있다.
• Alt + 클릭을 통해 간격을 확인할 수 있다.

2. 오토 레이아웃 (Auto Layout)

• 오토 레이아웃을 통해 개체를 프레임 내에서 여러 행과 열로 자동 정렬할 수 있다.
• 프레임 내부에서 오브젝트를 정렬할 때 레이아웃 그리드를 사용하면 다양한 플랫폼 간에 디자인의 통일성을 줄 수 있다.

3. 레이아웃 그리드

• 레이아웃 그리드는 UI 요소를 배치하는 데 도움을 주며, margin, gutter, column 등의 요소로 구성된다.
• 가로(column)와 세로(rows)로 구분되며, 각 구성 요소는 화면 레이아웃의 기준을 잡아준다.
• 그리드 옵션은 Stretch와 Fixed 모드가 있어 화면 크기에 따라 유연하게 조정하거나 고정할 수 있다.

4. 콘스트레인트 (Constraint)

• 콘스트레인트는 특정 오브젝트의 위치를 상하좌우에 강제로 고정하는 기능이다.
• 이를 통해 화면 크기에 따라 개체의 위치가 유동적으로 변하거나 고정되도록 설정할 수 있다.
• 부모 프레임 크기를 변경해도, 오브젝트가 원하는 위치에 고정될 수 있도록 다양한 옵션을 제공한다.

---

정렬을 편리하게 : 스마트 셀렉션

• 2개이상의 오브젝트를 선택했을 때 정렬과 간격을 손쉽게 조절
• 자주색 간격 조절선을 클릭 앤 드래그하여 간격 조절
• 원형 핸들을 선택하여 빠르게 위치 변경
• Alt + 클릭 : 간격 확인

 

스마트 선택을 사용하여 다음을 수행할 수 있습니다.

• 레이어간의 수직, 수평 간격을 균일하게 조절합니다.
• 선택한 레이어에서 균일하거나 균일하지 않은 그리드를 만듭니다.
• 행, 열 또는 그리드 레이아웃에서 레이어를 재정렬하거나 다시 정렬합니다.
• 선택 영역에서 레이어를 복제하거나 삭제하고 다른 레이어를 다시 흐르게 합니다.

  

---

스마트 선택에서 레이어 조정

선택을 한 후에는 선택 항목 내의 개별 레이어를 변경할 수 있습니다. 이렇게 하면 선택 항목을 벗어나지 않고도 레이어를 이동, 추가 또는 삭제할 수 있습니다.

• 간격을 조정하세요
• 이동 또는 재정렬
• 레이어 복제
• 레이어 크기 조절
• 레이어 삭제

레이어 재정렬 또는 재배열

---

스마트 셀렉션 연습 : list를 만들어 보자

• 스마트 셀렉션이 활성화된 상태에서 원하는 셀렉션의 자주색 핸들을 클릭
• 선택한 레이어는 잘 보이도록 파란색으로 표시

1. 라운드 프레임안에 원을 그려 넣는다.
2. 프레임을 복사한다. (Alt + drag)
3. 플러그인창을 열어 UI face를 추가한다.
   [shift + I] – 플러그인 열기
   [ctrl + alt +p] – 최근 플러그인 적용
4. 두번째 리스트만 색상을 변경한다
5. [Ctrl] 누른 채로 드래그 하여 셀렉션만 조절

---