[10/17 내일배움캠프] 사전캠프 5: 강의 2주차

사전캠프 D-5

📌To Do List

* 2주차 강의: 피그마 - 프레임과 포지션

---

 

01 2주차 강의 - 피그마: 프레임과 포지션

 

 

📌프레임과 그룹

*디자인이 코드로 바뀌는 과정

1) 디자인 →  코드로 변환

2) 이때, 코드는 디자인을 레고처럼 쌓는다

- 코드는 위에서 아래로 쌓는데, 이를 박스모델이라고 한다.

3) 웹,앱이 코드를 읽고 디자인으로 바꿈

 

💡프레임(Frame)이란? 
- 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체 (실제 구현될 화면 캔버스라고 생각하면 될듯)
'컨테이너(Container)'라고도 불림 
- 개발에 필요한 속성 적용O
- 프레임으로 묶는 단축키: ctrl + alt + G (우측클릭해서 선택 가능)

왼쪽 이미지와 같은 프레임이 코드에선 우측처럼 위에서 아래로 쌓이는 형태

 

💡그룹(Group)이란? ( 코드로 변환X  → 실무에서 잘 사용X)
- 개체를 하나로 묶는 것.
- 편집, 조정 또는 여러 개체를 하나로 담을 때
- 개발에 필요한 속성 적용X

- 그룹은 코드블록으로 인식X, 대신 SVG이미지로 인식O

❗주의점: 포토샵, 일러스트를 썼던 디자이너같은 경우 피그마 이용시에도 그룹을 사용하는 경우 빈번.

★ ★ ★ 그룹 사용하지 말고 프레임을 사용하여 묶어줘야한다. (코드로 나타내야하기 때문) ★ ★ ★

강의가 살짝 어렵게 설명하는 면이 있긴했쥐만 이해했다!!!

 

 

 

📌부모-자식 관계와 레이어 정렬

- 레이어 align시, constraints에 영향을 준다.

동그라미: 가로정렬 / 세모: 세로 정렬

 

 

*Tidy up 

- 단축키: ctrl + alt + shift + T

- 중구난방의 개체 적용X / 어느 정도의 규칙성 있는 개체 적용O

- Distribute vertical spacing: 수직 정렬 (위-중앙-아래)

- Distribute horizontal spacing: 수평 정렬 (왼-중앙-오)

왼쪽 이미지에 Tidy up 적용했더니 우측 이미지처럼 간격이 균일하게 정렬됨.

 

 

 

📌오토 레이아웃(Auto-layout)⭐⭐⭐

Margin: 실제 블록의 사이즈가 되는 내부 가장자리 여백

Border: 실제 코드 블록의 테두리

Padding: 바깥 여백, 다른 코드 블록과의 간격

 

[컨테이너가 만들어지는 원리]

- 개체를 패딩으로 감싸 컨테이너 만들 때 사용

- 모든 코드블록은 내부에 있는 개체와, 개체를 둘러싼 패딩이 자동으로 조정되어 만들어짐 (일일이 간격을 하나하나씩 조절한다면 끔찍하겠죠?)

- 우리가 만드는 UI크기 = 개체의 크기+패딩

- 이렇게 만들어진 컨테이너(개체+패딩) 하나 하나를 균일한 간격(규칙적)으로 얼만큼 쌓을지 만들 수 있음. 

- 오토 레이아웃 안의 레이어 순서는 우리가 기존에 알았던 방향과 반대방향. 레이어의 제일 아래에 있는게 위에 위치한 것을 의미★ ★ ★

 

[오토-레이아웃 속성] - 직접 해당 속성의 다양한 부분을 테스트해보길 바란다.

- 복사, 붙여넣기 했을 때 어느 방향으로 추가가 되는지에 대한 속성

- 단축키: 복제 ctrl + D

 

[컨테이너 오토레이아웃 만드는 2가지 방법]

1) 개체 선택 → shift + A / 오토레이아웃 해지 alt + shift + A

2) 개체 선택 → ctrl + alt + G (프레임 그룹핑) → 그룹핑한 프레임 선택 후 shift + A

 

- 어떻게 사용할지에 따라 방법이 1)또는 2)가 될 수 있다. 이건 예시로 연습해봐야 감을 익힐 수 있을 것 같다.

 

 

 

📌프레임과 컨스트레인트(Constraint)

💡컨스트레인트(Constraint)란?
제약(조건), 제한
오토레이아웃 안의 자식 개체들이 움직이는 조건값.

- 반응형 웹, 앱 제작 시 화면에 따라 일정한 간격으로 움직일 때의 규칙을 만들어야한다.

 

[컨스트레인트 속성] - 이해하기 어려운 속성만 요약 + 직접 해보기

- Left and right: 왼/오 고정 → 가운데 개체의 양옆 가로길이가 바뀜 (개체 사이즈 유지X)

    └ 왼/오 패딩값 고정 (가운데 개체 사이즈만 변한다)

- Center: 지금 비율에서 가운데 유지(개체 사이즈 유지)

- Scale: 지금 비율에서 늘어난 만큼 선택한 개체도 똑같은 비율로 늘어나거나 줄어듦(개체 사이즈 유지X)

    └ 왼/오 패딩값 고정X (왼/오 패딩값, 가운데 개체 사이즈 모두 변한다)

 

 

 

📌프레임 리사이징 

- 프레임: 가로,세로 고정(=Fixed)

- 프레임을 오토레이아웃으로 감싸는 순간, fixed외의 다른 사이즈값이 변경되는데 이를 리사이징이라고 부른다.

- 부모의 리사이징 값에 따라 자식의 리사이징 값도 달라진다(반대 상황도 마찬가지)

ex. 부모가 hug면 자식은 fixed / 자식이 fill이면 부모가 fixed

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정 (자식 컨테이너 크기가 변경됨에따라 부모 컨테이너도 동일한 비율로 크기 변경됨)	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

실전은 좀 어렵다 다양한 예시를 통해 많은 연습이 필요할 것으로 보임 ㅠ

 

 

📌포지션 이해하기

💡포지션(Position)이란?
- 스크롤 시 요소의 위치를 고정, 조정하는 기능
- 개발에서도 쓰이는 단어

[포지션 종류]

1) Static : 기본값. 스크롤 시 모든 요소가 스크롤됨.

2) Fixed : 화면 전체에서의 요소를 고정. 특정 개체를 fixed하면 그 개체만 고정된 채로 백그라운드는 스크롤됨. (ex. 하단 네비바)

3) Absolute: 컨테이너 안 (부모 컨테이너 안)의 요소를 고정시킴. 

4) Sticky: 스크롤 시 특정 위치에 요소 도달 시 고정됨. 

 

[포지션 설정 방법]

- 프로토타입 패널에서 설정.

* Scroll with parent: 부모 스크롤을 따라간다 (=Static)

* Fixed (stay in place): 현재 위치에 머문다 (=Fixed)

* Sticky (stop at top edge): 맨 위 모서리에서 멈춘다 (=Sticky)

 

일단 프레임 패널에서 확인 가능

* Absolute: 오토레이아웃 프레임 안에서만 사용 가능

---

 

Retrospect

 

😥 포토샵, 일러스트를 주로 사용한 사람으로서 프레임 그룹핑이 아닌, 그룹을 이용해서 개체를 묶었는데

✔️프레임으로 묶는다는 사실과 그 이유에 대해 새롭게 알았다. (우리 디자이너분들 조심하기! ctrl + G 말고 ctrl + alt + G)

 

😥 유튜브에서 "오토레이아웃은 이 버튼을 누르면 이렇게 돼요"의 개념만 알았는데 만들어지는 원리를 알게되니

✔️코딩과 대조했을 때 피그마에서는 코딩이 이렇게 표현되는구나를 느꼈다. 개체와 패딩으로 만들어진다 메모!