[TIL] 24.10.08(화)

피그마 2주차 강의 내용 정리(5~7강)

컨스트레인트

컨스트레인트(Constraint): 제약(조건), 제한이라는 뜻으로, 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한함

* 오토레이아웃 안에있는 '자식 개체'들이 움직일 때의 조건 값

* 부모 컨테이너의 크기를 조정할 때, 자식 컨테이너가 어디를 기준으로 변하게 할지를 정하는 것

* 프레임(Child Container)을 다른 프레임(Parent Container)으로 드래그하면 그 프레임 안으로 들어가게 됨

* 자식 컨테이너가 부모 컨테이너에 대해서 어떻게 고정되어있냐에 따라서 파란색 핀으로 표시되게 됨

* 자식 컨테이너가 부모 컨테이너에 대해 Left, Top으로 고정되어 있을 때, 부모 컨테이너의 우측 방향으로 사이즈를 늘려도 자식 컨테이너는 움직이지 않음, 하지만 좌측 방향으로 사이즈를 늘리면 자식 컨테이너가 따라옴

* 컨스트레인트를 바꿀 때는 부모 컨테이너가 아닌 자식 컨테이너를 선택 후 조정해 줘야 함

* 자식 컨테이너에 레이어 정렬을 사용하면 컨스트레인트값도 바뀜

* Left and Right: 왼쪽, 오른쪽이 모두 고정되어 부모 컨테이너가 늘어나면 자식 컨테이너도 왼쪽, 오른쪽을 유지하며 자동으로 늘어남 > 따라서 오토레이아웃이 아닌 프레임에서도 Left and Right 컨스트레인트 설정을 통해 자식 컨테이너의 길이를 조정할 수 있음

* Center: 자식 컨테이너의 크기는 변하지 않지만 자식 컨테이너의 현 위치를 가운데라고 치고, 부모 컨테이너의 크기를 조정했을 때 양쪽 비율을 유지시켜줌  

* Scale: 부모 컨테이너와 자식 컨테이너의 여백 비율을 계산해서 부모 컨테이너의 크기를 조정했을 때 그 비율만큼 자식 컨테이너가 늘어남 

 

프레임 리사이징

프레임은 기본적으로 가로, 세로 길이가 고정되어 있음. 이 상태를 'Fixed'라고 함.

프레임을 오토레이아웃으로 감싸는 순간 Fixed 외의 다른 사이즈 값이 생기는데, 이를 '리사이징'이라고 함(사이즈가 변경된다는 뜻)

* 오토레이아웃을 만들게 되면 우측 패널 창 사이즈(가로, 세로) 밑에 리사이징 값을 조정할 수 있게 됨

* 부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받고, 자식의 리사이징 값에 따라서도 부모의 리사이징 값이 영향을 받음

 

* 리사이징의 종류

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

* 리사이징은 가로 길이와 세로 길이에 각각 적용 가능함

* 오토레이아웃을 만들기 전 설정해놨던 컨스트레인트값에 따라 오토레이아웃으로 만들었을 때 적용되는 기본 패딩 값이 달라짐(ex. 기존 컨스트레인트값이 Top, Right 방향으로 여백 사이즈가 50, 80 이었다면 오토레이아웃 적용 후 패딩 값이 상하좌우(50,50,80,80)으로 적용되게 됨)

* 부모 컨테이너가 Hug > 자식 컨테이너는 무조건 Fixed (자식이 가만히 있어야 부모가 감쌀 수 있다고 생각)

* 자식 컨테이너가 Fill > 부모 컨테이너는 무조건 Fixed (부모가 가만히 있어야 자식이 그걸 채울 수 있다고 생각)

 

* 자식 컨테이너의 크기가 변하는 경우

(일반 프레임의 컨스트레인트 Scale도 자식 컨테이너의 크기가 변하긴 하지만 아래 유형과 다르므로 제외했음) 

상태	유형	값
일반 프레임	컨스트레인트	Left and Right
오토레이아웃	리사이징	부모: Hug / 자식: Fixed
오토레이아웃	리사이징	부모: Fixed / 자식: Fill

 > 보이는 결과물에는 차이가 없어 보이지만, 실제로 무엇이 변하는 건지 다름

(ex. 일반 프레임에서 컨스트레인트 Left and Right의 경우 부모를 잡고 늘려야 제대로 작동)

(ex. 오토레이아웃에서 부모 Hug, 자식 Fixed의 경우 자식을 잡고 늘려야 제대로 작동)

(ex. 오토레이아웃에서 부모 Fixed, 자식 Fill인 경우 부모를 잡고 늘려야 제대로 작동)

 > 오토레이아웃 안에 여러 개의 컨테이너가 중첩될 수 있기 때문에, 복잡한 레이아웃 안에서 컨테이너들이 깨지지 않고 의도대로 잘 따라올 수 있도록 상황에 맞게 값을 설정하고 조정할 수 있어야 함!!

 

포지션

포지션은 실제 개발에서도 사용하는 개념으로, 디자인과 레이아웃을 위한 코드인 CSS에서 사용할 수 있음

* 기본적으로 앱/웹에 있는 모든 요소들은 스크롤 시 스크롤을 따라 함께 움직임

* 반면, 앱의 하단 버튼/웹의 헤더와 같이 스크롤을 해도 위치가 고정되는 요소가 존재함

* 요소의 위치를 고정하거나, 스크롤에 따라서 위치를 조정할 때 개발에서 포지션이라는 속성을 조정해서 만듦

 

* 피그마에서 설정할 수 있는 포지션의 종류

유형	설명	예시
Static	스크롤을 하게되면 같이 따라 움직이며, 별도로 설정하지 않더라도 기본적으로 설정되어있는 값	앱/웹에 있는 일반적인 모든 요소들
Fixed	화면 전체를 기준으로 스크롤 하더라도 항상 고정된 위치에 있음	웹사이트의 헤더 / 앱의 하단 버튼
Absolute	Fixed와 유사하지만, 본인이 담겨있는 부모 컨테이너를 기준으로 고정됨	특정 영역에서의 Fixed 포지션을 만들 때 사용
Sticky	스크롤에 따라서 Static과 Fixed를 전환하는 포지션으로, 스크롤을 따라 움직이다가 특정위치부터는 상단에 고정됨

 

* 피그마에서 포지션 설정

유형	설명	설정
Scroll with parent(기본값)	부모 컨테이너의 스크롤을 따라 간다는 뜻으로, Static(기본값)을 의미함	Prototype > Scroll behavior
Fixed(stay in place)	현재 위치에 머무른다는 뜻으로, Fixed를 의미함	Prototype > Scroll behavior
Sticky(stop at top edge)	맨 위 모서리에서 멈춘다는 뜻으로, Sticky를 의미함	Prototype > Scroll behavior
Absolute	오토레이아웃 안에서 자식 개체를 특정 위치에 고정	프레임 패널

 

 * Absolute 포지션(추가 설명)

 

- 프로토타입이 아닌 프레임 패널 안에 위치하며, 오토레이아웃 프레임 안에 있을 때만 사용 가능함

- 오토레이아웃에 영향받지 않고, 일반 프레임 안에 있는 것처럼 자유롭게 배치 가능함

- Absolute 포지션, 즉 오토레이아웃 안에서 자식 개체를 특정 위치에 고정시키고 싶다면 오토레이아웃 안의 자식 개체를 누른 후 우측 프레임 패널에 있는 Absolute 포지션 아이콘을 클릭하면 설정 가능함

 

 

생각

오늘 강의에서 배운 컨스트레인트, 프레임 리사이징, 포지션 등 피그마에서 활용할 수 있는 다양한 옵션들에 대해 단순히 이해하는 것으로 끝내지 않고 가능한 모든 유형을 상황에 맞게 연습해 보며 내 것으로 익힐 수 있도록 노력해야겠다.