피그마 활용법(1)_1,2주차 정리

[수업 목표]

• 피그마 핵심 기능인 프레임과 그룹의 차이를 이해하고 사용합니다.
• 피그마 프레임을 정리하고 정렬하는 방법을 배웁니다.
• 오토레이아웃과 컨스트레인트를 활용해 레이아웃을 만들고 조정하는 방법을 이해합니다.

---

프레임과 그룹 - 입문과 심화를 나누는 기준이 됨. 중요!
-프레임 : 블록 개념
-그룹 : 개체를 붂는 개념
-정렬개념 : 화면에 배치하는 규칙
-오토레이아웃 : UI에서 가장 중요한 개념, 좀 더 빠르고 쉽게 레이아웃을 만들 수 있게 도와주는 개념
-컨스트레인트 : 어떤식으로 움직일지 정하는 것.

1. 프레임과 그룹
-코드와 디자인 : 박스 형식으로 디자인 해야한다.(코드가 디자인을 레고처럼 쌓아서 박스 모델을 만듦.)
-프레임과 그룹의 개념 : 개체를 만드는 기본적인 단위, 차이는 큼
-프레임(=컨테이너) : 피그마에서 코드 블록을 만드는 기능, 실제 코드(UI)로 인식하는 개체,기본적으로 프레임으로 작업한다고 생각해야 함, 개발에 필요한 속성이 적용.
각각의 개별 객체에 색을 따로 지정 할 수 있음
-그룹 : 여러 개체를 하나로 담는 기능, 디자인을 정리하는 편의 기능. 관리하는 용 여러요소를 한번에 컨트롤 할때 사용한다. 정리해서 묶어서 사용할 때 사용한다. 숙련도가 올라가면 그룹기능을 사용하지 않게 됨.(그래픽, 로고에 사용), 개발에 필요한 속성이 비적용.
그룹 안에 있는 객체의 색이 다 같이 변경 됨.

 
2. 레이어와 정렬
: 레이어를 쌓는 구조가 곧 코드 구조. 따라서 레이어로 뼈대를 만드는 법에 익숙해지자
: 오토레이아웃을 알면 레이어를 정렬하는데에 더 쉽다.
-레이어 : 가장 먼저 생긴 코드블럭(첫줄) 마지막에 생긴 코드 블럭(막줄)
-레이어의 어근 : 상하좌우 평면으로도, 원근으로도 쌓임. (그림자)
-프레임(부모) 안에 도형(자식), 포함된 그릇 기준으로 정렬
프레임 안에 도형, 도형 : 왼쪽 정렬하면, 가장 왼쪽에 있는 도형을 기준으로

3. 오토레이아웃
: 피그마 테크닉의 끝, 기본기
-개념 : 레이어를 쌓고 프레임을 배치하는 피그마의 핵심 기능.
-코드 블록의 구조 : 프레임(컨테이너)
패딩(Padding) : 내부 여백
보더(Border) : 가장자리
마진(Margin) : 바깥 여백, 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
-컨테이너가 만들어지는 원리 : 오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용/     
  오토레이아웃을 사용하면 자동으로 패딩이 생김.
-컨테이너를 쌓으려면? : 오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행
얼마큼의 간격으로 몇 개를 쌓을 건지 오토레이아웃으로 편하게 만들 수 있다.
일단 프레임 안에서 정렬했을 때 : 레이어창 위에 있는 것이 앞에 있는 것.
오토레이아웃 안에서 정렬했을 때 : 레이어창 위에 있는 것이 뒤에 있는 것.

4. 컨스트레인트
: 오토레이아웃을 정말로 오토-레이아웃화 시키는 기능.
: 반응형 웹사이트처럼 실시간 움직이는 레이아웃을 만들기 위해서는 오토레이아웃에 규칙을 줘야함
-컨스트레인트(Constraint) : 제약, 제한/ 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다
-부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까를 정할 수 있다.
-프레임 리사이징 : 오토레이아웃과 컨스트레인트를 제대로 하려면 리사이징을 이해해야 함.
프레임은 기본적으로 크기가 고정(Fixed)
프레임을 오토레이아웃으로 감싸는 순간 Fixed 외의 다른 사이즈 값이 생긴다 → 이것이 리사이징
부모의 사이즈 값에 따라 자식의 사이즈 값이 영향을 받음/ 반대로 자식의 사이즈 값에 따라 부모의 사이즈값도 영향을 받음.
Fixed - 고정값 - 공통
Hug - 자식 컨테이너의 크기에 맞춰 조정 - 부모만
Fill - 부모 컨테이너의 크기에 맞춰 조정 - 자식만
자식이 고정값이면 부모가 감쌀 수 있음.
자식이 채우려면 부모가 고정값을 가지고 있어야 함.