[TIL] AI 디자이너 베이스 캠프 D-3

[피그마 강의 2-1~2-7]

 

프레임과 그룹

1. 프레임

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

- 박스모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 방식

- 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너 라고도 불린다.

2. 그룹

포토샵, 일러스트에서도 많이 사용하는 묶음 기능. 여러개체를 한번에 이동하거나 조정할때 쓰는기능

피그마에서 그룹으로 묶으면 프레임과 달리 코드블록으로 인식되지 않는다. SVG확장자의 이미지로 인식한다고 생각하면 편함.

* 포토샵, 일러스트와 달리 피그마는 UI를 디자인하기 위한 프로그램이다 보니 그룹으로 그루핑 하지 말고, 프레임으로 그루핑 해줘야 한다.  그룹으로 묶은 건 코드로 변환이 되지 않는다. 그래서 실무에서 그룹 기능을 사용할 일은 매우 적은 편.

 

그룹과 프레임의 레이어형태

 

 

 

 

 

 

 

 

 

*그룹 상태의 개체는 하나만 선택 하려고 하면 더블클릭 하면 됨.

 

프레임과 그룹의 차이점

 

각각의 도형에 같은 색을 채운뒤 프레임으로 묶은 곳에 Fill로 연두색을 채우면 배경색이 채워지고, 그룹으로 묶은 곳에 Fill로 색으 채우면 기존에 각각 다르게 설정했던 도형 색들이 연두색으로 채워진다. 배경색이 채워지는 개념이x

 

 

Stroke를 프레임그룹에 적용하면, 도형의 배경 하단으로 적용된다.

그룹 으로 묶은 곳에 각각의 도형에 Stroke가 적용된다.

 

정렬 (Alignment)

정렬기능은 사용하면서 실제로 익히는게 좋을 듯.

 

오토레이아웃?

레이어를 쌓고 프레임을배치하는 피그마의 핵심기능. 하나의 디자인이 여러 화면에서 잘 구현 될 수  있도록 레이아웃의 유연함을 만들어 주는기능

 

우리가 보는 화면은 모두 코드블록으로 이루어져 있다.

이 코드블록은 피그마에서 프레임으로 만들 수 있고, 다른말로 컨테이너 라고도 부른다.

• 패딩(padding) : 코드블록 안에 있는 개체와 함께 실제 블록사이즈가 되는 내부여백
• 보더(border) : 코드블록 내부공간 바깥의 가장자리. 실제 코드 블록의 테두리
• 마진(Margin) :  코드블록 바깥의 여백이자 다른 코드 블록과의 간격

 

모든 코드블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부여백)으로 만들어진다.

즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩이다.

 

오토레이아웃

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

오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정력해주는기능도 한다. 

노란색 원 안에 있는 아이콘이 오토레이아웃이라는 표시

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

방법1. 마우스 우클릭 Add auto rayout

방법2. 마우스 우클릭 Frame selection -> Shift+A

 

오토레이아웃 해제

1. 메뉴바의 버튼 클릭

2. Alt+Shift+A 

 

컨테이너 안에서 개체클릭후 Ctrl+D ->복제

컨테이너 안에서는 복제하면 아래로 쌓인다.

 

컨스트레인트(constraint)

제약(조건),제한 이라는 뜻

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

더 정확하게는 부모컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있다.

어디를 기준으로 정렬할 건지, 고정시킬건지.

 

리사이징(Re-sizing)

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

 

• 자식 컨테이너가 고정값(Fixed)이고, 부모컨테이너가 (Hug)일때 -> 자식컨테이너 사이즈가 바뀌면 부모컨테이너는 같이 바뀐다. but, 부모컨테이너를 바꾸면 자식컨테이너는 바뀌지 않는다. 
• 자식이 (Fixed)이고 부모가 (Fixed) 일때 ->부모 사이즈 변경시 자식은 변하지 않는다.  자식사이즈는 부모사이즈 내부에서만 변경된다. 
• 반대로 부모가 (Hug)라면 자식은 (Fixed)가 된다. (자체 변경됨)
• 자식 컨테이너가 (Fill)이라면 부모 컨테이너는 (Fixed)가 되어야한다. --> 부모 컨테이너 사이즈 변경시 자식컨테이너 사이즈도 함께 변한다. Fill하도록 속성값이 되어 있기 때문
• 부모가 (Fixed) 자식은(Fill)일경우 

***리사이징에는 관계가 있다는 것! 기억하자

 

포지션

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

• 스태틱 (Static) : 일반적인 요소들이 가지고 있는 포지션으로 기본값이자 스크롤을 하면 같이 따라움직임
• 픽스드 (Fixed) : 화면 전체 기준으로 스크롤 하더라도 항상 고정된 위치에 있어요. 우리가 아는 웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position 
• 티키 ( Sticky ) : 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션/ 스크롤을 따라 움직이다가 특정위치부터 상단에 고정되는 것을 뜻한다. 

*프로토타입 패널에서 설정할 수 있다.

 

• 앱솔루트 ( Absolute ) : Fixed와 유사하지만, 고정되는 기준이 부모 컨테이너 안이다.

* 우측 포지션 패널에서 사용가능. But, 오토레이아웃 프레임 안에 있을때만 사용가능 / 오토레이아웃 처럼 착착 정리되는 프레임안에서 그 영향을 받지 않고 별도의 위치를 지정해야 할 때 사용.

  

* 일반 프레임 안에서는 배치가 자유로우니 앱솔루트 포지션을 굳이 쓸 필요가 없음.

 

 

[느낀점]

피그마의 프레임과, 컨스트레인트, 리사이징의 관계를 완벽하게 파악하는 것은 조금 걸릴 것 같다. 

피그마 2주차 숙제를 하면서도 생각보다 어려워서 당황한 부분도 있고, 쉬운부분도 있었는데 실습을 더 많이 해봐야 할듯.