[내일배움캠프] UX/UI4기 사전캠프 5일차 : PPT보다 쉬운 피그마 2주차_강의 내용 정리 2-1~4

2-1 📘 aoto layout

· 오토레이아웃이란?

콘텐츠에 따라 자유롭게 변형되는 프레임 (반응형 웹)

예) 넷플릭스 사이트

 

· 오토레이아웃 만들기 : shift + A

· 오토레이아웃 해제 : cmd + shift + G

 

· 오토레이아웃, 어떻게 쓰이나요?

1. 예제는 매우 다양함 (버튼, 카드, 하단 메뉴바, 드롭다운 리스트 등)
2. 요소를 수정 할 때 자동으로 사이즈가 변경되서 편리함

👍 꿀팁 1. 블록을 조합하듯 만들기

👍 꿀팁 2. 요소를 덩어리 단위로 보고, 가장 작은 단위부터 만들기

 

📌 실습 예제

 

1. 주황, 보라 클릭 → shift + A → ‘→’ 클릭 → 나란히 정렬 됨

 

2. 주황+보라 , 파랑 클릭 → shift + A

 

3. 주황+보라, 파랑, 빨강 클릭 → shift + A → 나란히 정렬됨 → ‘↓’ 클릭

 

4. 정 가운데 클릭하면 가운데 정렬됨.

 

2-2 📘 오토레이아웃 활용

· 오토레이아웃으로 글자가 자동으로 늘어나는 버튼 만들기

1. 글자 요소

 

2. Fill 로 바탕 컬러 지정

 

3. Frame 에서 코너 값 999로 라운드 설정

 

4. 글자와 라운드 박스 간격 조정 -> 좌,우 간격 16으로 조정

 

 

· 오토레이아웃이 아닌 경우 : 요소가 안 늘어남

 

 ㅍ레이아웃인 경우 : 글자를 추가하면 자동으로 늘어남

 

· 오토레이아웃에서 fixed인 경우에는 늘어나지 않음 -> Hug로 변경

 

 

· 오토레이아웃에 요소(아이콘) 추가하기

1. 마우스 우클릭 -> plugins -> Material Design lcons

 

2. play 검색 요소 클릭

 

3. K 눌러서 사이즈 조정 (0.5x 조정 후 바닥 클릭 -> 다시 0.5x 조정할 수 있음)

 

4. 드래그 해서 넣기

 

5. 더블 클릭해서 Fill로 컬러 변경

 

6. 클릭 후 auto layout에서 10 -> 4로 간격 조정

 

7. 왼쪽 패딩값 16->24으로 조정

8. 완성

 

· 오토레이아웃 패널

 

1. 방향

프레임을 가로로 묶을지 세로로 묶을지 정해주는 옵션. 한 프레임 당 하나의 방향으로만 지정 가능

2. 간격

개체와 개체 사이의 간격을 조정하는 옵션

3. 좌, 우 패딩

프레임의 좌우 여백을 조정하는 옵션

4. 상, 하 패딩

프레임의 상하 여백을 조정하는 옵션

5. 상하좌우 패딩 커스텀 옵션

각각 지정 할 수 있음

6. 프레임 내 정렬

프레임 안에서 위치를 조정하는 옵션

7. 어드번스드 옵션

텍스트 정렬이나 간격주는 방법 등을 조정하는 옵션

 

2-3 📘 오토레이아웃으로 브레인스토밍 제작

 

2-4 📘 오토레이아웃 리사이징

· 오토레이아웃 리사이징 : 오토레이아웃 프레임 생성 시, 상위 프레임 사이즈를 조정할 때 콘텐츠와 컨테이너를 설정하는 속성

 

· 콘텐츠와 컨테이너

 

· 콘텐츠와 컨테이너 옵션

1. Hug contents : hug(감싸안다) + 콘텐츠 : 컨테이너가 콘텐츠를 감싸 안는 속성. 안에 콘텐츠가 있어야 뜸

2. Fill container : fill(채우다) + 컨테이너 : 콘텐츠가 컨테이너를 채우는 속성. 바깥에 컨테이너가 있어야 뜸

3. Fixed Size : fixed(고정하다) + 크기 : 컨테이너와 콘텐츠 모두 고정된 상태. 모든 경우에 뜸

 

---

콘텐츠에 따라서 자유자재로 변형이 되는 오토레이아웃 ! 👍

 

콘텐츠와 컨테이너의 개념이 처음엔 좀 헷갈렸지만 정리하다보니 이해가 간다 !!