[TIL] 24.10.07(월)

피그마 2주차 강의 내용 정리(1~4강)

프레임과 그룹의 차이

프레임: 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체

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

* 개발에서의 박스 모델 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 것

* 프레임은 그 안에 다른 개체나 프레임을 넣을 수 있음 > 프레임=컨테이너 라고도 불림

 

그룹: 여러 개체를 하나로 묶어주는 기능

* 그룹은 다양한 경우에 사용 가능

* 여러 개체를 조정, 디자인 정리 등의 편의를 위해 여러 개체를 하나로 담는 기능

* 프레임과 달리 그룹은 코드 블록으로 인식할 수 없음 

* 그룹은 여러 요소를 한 번에 담아서 움직일 때 주로 사용하며, 실제 UI 작업에서는 그룹이 아닌 프레임을 사용함

 

프레임 vs 그룹

* 프레임은 코드 블록을 만드는 기능으로 실제 코드로 바꿀 수 있는 개체

* 그룹은 편집 또는 조정이 필요할 때, 편의를 위해 여러 개체를 하나로 묶을 때 사용

* 프레임은 개발에 필요한 속성을 적용할 수 있고, 그룹은 속성을 적용할 수 없음

 

오토레이아웃의 원리

오토레이아웃: 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능으로 레이아웃에 유연함을 만들어주는 기능

* 오토레이아웃 단축키: SHIFT+A

* 오토레이아웃은 말 그대로 레이아웃을 자동으로 조정할 수 있는 기능

* 오토레이아웃은 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만듦

* 오토레이아웃은 간격에 맞게 컨테이너를 쌓을 수 있게 해줌

* 프레임이 아닌 개체에 오토레이아웃을 적용하면 자동으로 기본 패딩 값이 적용됨

* 프레임을 설정한 개체에 오토레이아웃을 적용하면 프레임 자체에 오토레이아웃이 적용되며 자동으로 패딩 값이 설정되지 않음 (상황에 맞게 유연한 선택 필요함)

* 오토레이아웃을 설정했을 때 개체들의 진행 방향(수직, 수평), 컨테이너 안에서의 개체들의 위치, 개체 사이의 간격, 개체의 상하좌우 패딩 값을 설정할 수 있음

* 일반적으로 레이어 패널에서 상단에 위치할수록 위에 있는 개념이지만, 오토레이아웃 레이어 패널에서는 하단에 위치한 개체가 제일 위에 있는 개념으로 작용함

 

생각

원래 오토레이아웃의 기능을 대강 알고는 있었지만 강의를 통해 오토레이아웃의 정확한 개념을 다시 되짚어 볼 수 있었고, 일반 레이어와 오토레이아웃 레이어 순서의 차이점 등 꼭 알고 넘어가야 할 특징들을 새로 알게 되어 뜻깊었다. 잘 기억해서 유용하게 사용해야겠다.