[내배캠 베이스캠프] 피그마 기초 완전 정복 | 2주차

 

프레임과 컨스트레인트

 

코드가 디자인을 읽는 법

 

디자인을 코드로 변환 → 코드가 디자인을 레고처럼 쌓음 (박스 모델) → 웹/앱이 코드를 읽고 디자인으로 바꿔서 보여줌

 

프레임

 

프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐

다른 개체나 프레임을 넣을 수 있음 → 컨테이너(Container)라고도 함

 

그룹

 

여러 개체를 하나로 묶음을 뜻함

코드 블록이 아닌 SVG 이미지로 인식되어 실무에서는 가급적 사용하지 않음

 

프레임 VS 그룹

 

Fill 색상 변경 시

 

 

부모-자식(Parent-Child) 관계

 

Layers 패널

 

프레임 정렬 기능

 

 

단일 개체의 정렬 기준은 부모 개체

다중 개체의 정렬 기준은 서로

 

다중 개체 정렬 시 추가되는 정렬 옵션

Tidy up: 그리드를 맞춰서 정렬

Distribute vertical spacing: 수직 간격을 균등하게 분배

Distribute horizontal spacing: 수평 간격을 균등하게 분배

 

컨스트레인트(Constraint)의 개념

 

 

제약・제한, 즉 조건

오토레이아웃 안에 있는 자식 개체들이 움직이는 방식을 제한하는 것

 

부모 컨테이너의 크기가 변할 때 자식 컨테이너는 어디를 기준으로 변할지를 정할 수 있음

→ 자식 컨테이너가 부모에 고정되어 움직이는 일종의 ‘핀’ 위치

 

 

 

오토레이아웃과 리사이징

 

오토레이아웃의 개념

 

레이어를 쌓고 프레임을 배치 및 정렬하는 핵심 기능

오토레이아웃은 개체를 패딩(Padding)으로 감싸 컨테이너로 만들어 줌 → 간격에 맞게 컨테이너를 쌓을 수 있게 해 줌

 

오토레이아웃 만들기

 

Shift + A

 

오토레이아웃 패널

 

 

리사이징의 개념

 

프레임을 오토레이아웃으로 감싸면 생기는 사이즈 값

 

리사이징의 종류

Fixed	고정 값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

 

리사이징은 부모-자식 간의 관계를 신경 써 주면 됨 → 어느 프레임에 반응하는지

 

포지션의 종류

 

‣ Static: 기본 값, 스크롤을 하면 같이 따라 움직임

‣ Fixed: 화면 전체 기준으로 고정, 스크롤하더라도 움직이지 않음

‣ Absolute: Fixed와 유사하지만 부모 컨테이너 기준으로 고정됨

‣ Sticky: 스크롤에 따라 옴직이지만 특정 위치부터는 상단에 고정됨

 

 

 

2주차 숙제

 

오토레이아웃, 컨스트레인트, 리사이징을 활용해 영상과 동일한 움직임 6가지 구현