오토 레이아웃
🤔 오토 레이아웃?
-UI 화면 크기가 바뀔 때마다 레이아웃 자동 조정
😶 오토 레이아웃으로 뭘 할 수 있는데?
개체 크기
정렬 방향, 절대 위치 이런 것들 포함해서 변함
화면 사이즈에 맞게 그 비율에 따라 오토레이아웃에서 개체 크기를 조정할 수 있도록 값을 걸 수가 있음
정렬 및 방향
아이콘이나 텍스트 다른 개체들이 왼쪽 정렬이 되어있다고 가정해보자.
반드시 왼쪽을 기준으로 오른쪽에 개체가 추가되도록 하고 싶으면 오토레이아웃에서 추가되는 방향을 정할 수 있음
절대 위치
그래픽을 넣었다고 가정했을 때, 중간에 꼭 있었으면 좋겠다, PC 외부로 넘어가든지 모바일로 넘어가더라도 꼭 중간에 이 그래픽이 위치했으면 좋겠다 하면 화면의 중앙으로 오토 레이아웃을 걸 수 있음.
✔️ 설정값 살펴보기
1. 오토 레이아웃 적용
2. 개체 추가 시 방향
- 개체 추가 시 어떤 방향으로 오토 레이아웃 적용할 건지 체크
Vertical gap between items: 개체 간격 조정
3. 정렬과 padding 설정
- 상하좌우 padding 값 각각 적용 가능
- 원하는 정렬로 자동 적용 가능
🧐 실습 중 의문점..
강사님 🧑🏻💼 ---> 현 텍스트를 기준으로 우측에 추가됨, 프레임도 같이 커짐
나 😶 ---> 프레임은 커지지 않고 텍스트만 늘어남 ➡️ 심지어 우측에 생기는 게 아니라 중앙을 기준으로 가운데 정렬이 되는 느낌..
가로로 복사하는 거만 이러고 세로는 또 잘 됨..
새로 만들어보니까 또 잘만 되는 게 아무래도 뭔가를 잘못 만진 것 같다.. 뭘까
찾았다....... 범인은 이놈....
모두 Hug라 되어있는데 쟤는 Fixed로 설정되어 있었다... 그거때매 중앙에 고정된 상태로 복사가 됐던 것...
마침 다음 실습에서 Hug와 Fixed에 알아볼 수 있었다😏😏
Hug vs Fixed
Hug- 텍스트 길이에 맞게 프레임 가변
Fixed- 텍스트가 길어져도 프레임 길이 고정
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
