피그마 활용법 2주차 2-3 ~ 2-6 (숙제)

피그마 테크닉의 꽃이자 기본기의 끝판왕, 오토레이아웃! ㅎㅎ

앞에서 배운 프레임, 레이어, 정렬을 종합적으로 다뤄보면서, 오토레이아웃을 이해해봅시다!

 

오토레이아웃은 왜 알아야 할까요?

레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능이에요.

• 우리는 모두 다양한 크기의 핸드폰과 모니터를 사용해요.
• 따라서 앱과 웹을 만들 때는 이 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야 해요.
• 레이아웃에 유연함을 만들어주는 가장 중요한 기능이 바로 오토레이아웃이에요.
• 프레임을 배치하고 정렬해 레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능이에요.

코드 블록의 구조를 잠깐 알아볼까요?

• 우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있어요.
• 이 코드 블록은 피그마에선 프레임으로 만들고, 다른 말로는 컨테이너라고 불러요.
• 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
• 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
• 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

500

컨테이너가 만들어지는 원리

오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용해요.(오토레이아웃사용시 자동으로 패딩으로감싸진다.)

• 모든 코드 블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부 여백)으로 만들어져요.
• 즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩이에요. (진짜 우리가 패딩입으면 한몸이되는거라보면됌!)

컨테이너를 쌓으려면?

 📌 오토레이아웃의 활용

오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행해요!

• 컨테이너는 개체와 패딩으로 이루어져요.
• 컨테이너를 아래로 쌓아 내려가는 게 코드 블록이 쌓이는 원리라는 걸 배웠어요.
• 그렇다면, 피그마에서도 컨테이너가 자동으로 아래로 쌓이게 한다면 매우 편리하겠죠?
• 컨테이너를 하나의 개체라고 본다면, 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있어요.
• 이 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들어 낼 수 있어요.

 

오토레이아웃은 피그마의 핵심 테크닉이에요.

응용하기에 따라 다양한 디자인을 만들 수 있어요! 앞으로 정~~말 자주 사용하게 되니 반드시 개념을 기억해두세요!

• 오토레이아웃은 말 그대로 auto-layout, 즉 레이아웃을 자동으로 조정할 수 있는 기능이에요.
• 오토레이아웃은 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만들어요.
• 오토레이아웃은 간격에 맞게 컨테이너를 쌓을 수 있게 해줘요.

오토레이아웃 만들기

아래 실습을 따라하며 반복해보세요!

text 1(프레임이아닌) - 오토레이아웃 적용 - 글자 주변으로 내부여백이 생겼다!

새로운 오토레이아웃 프레임을 만들음

 

text 2 - 프레임을 만들음 컨알쥐!

이미 프레임으로 만들어진것을 다시 오토레이아웃으로 감쌌을때 여백이없음

 

 

 

- 오토해제 밑에 메뉴는 고급오션 -> 고급오션잇구나하구 ㅇㅇ 알아두기

 

콘테이너 안에서 여러개일때 좌우 간격  맞춰주고

 

|ㅁ|  얘는 끝에 좌우, 옆에꺼는 상하 여백

 

직접 따라하면서 여백 연습완료!

 

 

그리고!!

따라해보기

 

오토레이아웃안에서 일반전 순서랑 반대가 된다. 왼쪽 패널 부분을 보면

밑에 있을수록 앞에있다고 보면된다.

 

 

이름바꾸기 컨트롤알

 

 📌 오토레이아웃 내부 프레임 순서

레이어 패널에서 더 위에 있으면 더 앞에 있어요.

반대로, 오토레이아웃 프레임 안 에선 더 밑에 있을수록 더 앞에 있어요! a

 

컨스트레인트

 

 

오토레이아웃을 오토레이아웃답게 만들어주는 기능인 컨스트레인트를 한번 다뤄볼까요?

컨스트레인트를 꼭 알아야 하나요?

• 오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있어요.
• 하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어 줘야 해요.
• 실무에서 많이 사용하는 기능이고, 또 활용하기에 따라 정말 다양한 움직임을 연출해 낼 수 있기 때문에 반드시 알아야 해요!

• 컨스트레인트의 뜻
  • 컨스트레인트(Constraint)는 제약, 제한이라는 뜻이에요.
  • 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻이에요.
  • 더 정확하게는, **부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있어요.

아래 실습을 따라하며 반복해보세요!

 

• Child Container를 Parent Container 안으로 드래그 해주세요.
•  📌 프레임을 다른 프레임 안으로 드래그하면 자동으로 들어가요.

 

페어런트 안에 차일드컨테이너 들어가있고, 

차일드 클릭후 파란점선 확인.

핀으 ㅣ위치 컨스트레인트

부모컨테이너를 기준으로 자식 컨티 움직인다.

 

점선 오른쪽 패널에서 컨스트레인트 고정

하나씩 직접해봐야 안다~~~ 복습할때 ㄱㄱ!

 

 

프레임 리사이징

• 리사이징의 개념
  • 프레임은 기본적으로 크기가 고정이에요. 이 상태를 Fixed(픽스드;고정된)라고 불러요.
  • 프레임을 오토레이아웃으로 감싸는 순간, Fixed외의 다른 사이즈값이 생겨요.
  • 이걸 피그마에서는 리사이징이라고 불러요.
  • 부모의 사이즈 값에 따라 자식의 사이즈값이 영향을 받아요.
  • 반대로, 자식의 사이즈 값에 따라 부모의 사이즈값도 영향을 받아요.

• 리사이징의 종류
  • 피그마에서 리사이징은 3가지 값이 있어요.
  • 리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있어요.

아래 실습을 따라하며 반복해보세요!

 

리사이징 값 확인하기

리사이징 관계 연습하기

허그컨텐츠 

필콘테이너

리사이징과 움직임

자식프레임은 필콘테이너를 적용하면 부모콘테이너를 늘렸을때 자식이 따라가기때문에 같이 늘어남

이때 부모콘테이너는 고정됨.

부모프레임은 허그컨텐츠를 적용하면 자식콘테이너를 늘렸을때 부모가 따라와서 같이 늘어남.

자식콘테이너는 고정됨.

 

숙제

 

• 힌트 살펴보기
  • 1번 문제
    • 부모를 움직여도 자식 간의 간격이 일정하다면 오토레이아웃이에요.
    • 부모의 높이를 꽉 채우고 있다면 어떤 리사이징값일까요? 허그컨텐츠!
  • 2번 문제
    • 부모를 움직여도 자식 간의 간격이 일정하다면 오토레이아웃이에요.
    • 자식 하나는 높이가 움직이지 않고 일정하고, 하나는 부모의 높이를 꽉 채워서 따라가요.
  • 3번 문제
    • 부모를 움직이면 자식 간의 간격이 움직여요.
    • 자식 하나는 일정한 간격을 가지고 움직이고, 나머지 하나는 비율을 유지하고 움직여요.
  • 4번 문제
    • 오토레이아웃이어도, 일반 프레임이어도 상관 없어요!
    • 하나는 높이가 고정되어 있고, 하나는 부모 프레임의 사이즈를 꽉 채운 채로 따라 같이 움직여요.
  • 💡 2가지 해답이 있어요.
  • 5번 문제
    • 부모는 자식의 크기를 감싸는 형태에요. 감싸는 건 오토레이아웃에서만 가능해요!
  • 6번 문제
    • 부모를 움직여도 자식 간의 간격이 일정하다면 오토레이아웃이에요.
    • 부모 너비를 꽉 채우고 있다면 어떤 리사이징값일까요?

 

 

숙ㅈㅔ 완료! 3번 먼가 했는데, 해답보고 눈치챔...ㅋ바로 적용

 

오토레이아웃아녀도 그냥 프레임에서

일정간격을 유지하면서는 탐앤바틈 

그리고 비율은 스케일

 

 

늘였다 줄였다 연습해보면서 리사이징 연습이 잘 된거 같다.

필이랑 컨텐츠 고정

 

오토레이아웃도 이해되었고,

이건 클론디자인강의다시들을때 팀원분들께 질문해서 알게된 내용인데 잊어버리면 안될것같아 적는다.

오토레이아웃은 두가지요소 묶을때 사용하는데, 아이콘버튼 형식이면 오토레이아웃으로 묶는 경우가 있다고.

그리공 오토레이아웃으로 묶고나서 컴포넌트화 해야함! 컴포넌트 컨알케이!단축키~~

 

암튼

지금은 따라해보고 늘였다줄였다하니 재밌긴하다.