[TIL] 24.10.28(월)

피그마 활용법(1) / 1, 2주차 강의 내용 정리 및 숙제

 

 

피그마 커뮤니티 (주의사항)

서비스 제공자가 아닌 사람들이 자체적으로 만드는 것=서드파티(3rd-party, Third-party;제 3자)

1. 가격을 꼭 확인할 것

2. 저작권을 꼭 확인할 것

3. 문제가 생겼을 경우, 제작자에게 직접 문의할 것

 

피그잼

피그마 디자인 파일이 UI 설계에 특화되어 있다면, 피그잼은 린 캔버스, 더블 다이아몬드, 사용자 여정 지도 등 UX 기획 및 아이데이션에 특화되어 있음

 

Shift+H / Shift + V (단축키)

Shift + H: Flip Horizontal 

Shift + V: Flip Vertical 

 

피그마 도형 이미지 리사이징 종류

Fill: 정해진 도형 크기 안에 비율을 유지한 채 이미지를 꽉 채워줌(이미지가 도형 안에 다 안들어 갈 수 있음)

Fit: 정해진 도형 크기 안에 비율을 유지한 채 이미지가 다 들어가게 해줌(도형에 빈공간 생길 수 있음)

Crop: 말 그대로 영역을 자를 수 있음, 사진을 기준으로 도형의 모양을 바꿀 수 있음, 도형의 사이즈를 변경하면 이미지가 깨질 수 있음

Tile: 이미지가 반복된 타일처럼 들어감

 

Save to version history (Shift+Command+S)(클라우드 저장, 파일 버전 관리)

현재 작업 상황 등의 메모를 덧붙여서 저장 할 수 있는 기능 (저장한 날짜와 메모 등을 확인 가능, 이전 버전으로 파일 복구 가능)
저장 목록은 File > Show version history > 우측 패널에서 확인 가능

 

1주차 숙제: 도형 따라 그리기

피그마 강의 1주차 도형 따라 그리기 숙제

 

---

 

프레임과 그룹 (차이점)

프레임(Frame): 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체(=컨테이너)

그룹(Group): 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능으로 프레임과 달리 코드 블록으로 인식되지 않음. 실무에선 그룹 기능 거의 사용 하지 않음

 

레이어와 정렬

레이어 패널에서의 위, 아래 순서와 캔버스에서의 X축 순서는 동일함 (레이어 창에서 [, ] 키로 순서 변경 가능)

여러 개체를 선택 후 정렬을 누르면 그 기준에 가장 가까이 위치한 개체를 기준으로 정렬됨

 

오토레이아웃

레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능으로 개체를 패딩으로 감싸 컨테이너를 만들 때 사용함

UI의 크기 = 개체의 크기 + 패딩(내부 여백)

오토레이아웃의 내부 프레임에서, 레이어 패널의 더 밑에 있을 수록 더 앞에 있는 것(일반 프레임의 레이어 순서와 반대)

 

컨스트레인트

컨스트레인트(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인 경우 부모를 잡고 늘려야 제대로 작동)

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

 

 

2주차 숙제: 오토레이아웃 사용하기

피그마 강의 2주차 오토레이아웃 사용하기 숙제