본문 바로가기

본캠프

[0307_본캠프 13일차]

728x90

✔️ Figma 활용 (1) 1, 2주차 내용 복습 및 정리

 

1. 프레임과 그룹

왼쪽 : 프레임 / 오른쪽 : 그룹

프레임 그룹
피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체 여러 개체를 하나로 담는 기능
  • 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다
  • 박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈
  • 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, **컨테이너(Container)**라고도 불린다
  • 그룹은 다양한 경우에 사용할 수 있다
  • 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능
  • 프레임과 달리 그룹은 코드 블록으로 인식되지 않는다

 

 

 

2. 레이어의 원근

레이어 : 개체 하나하나가 만드는 가상의

레이어의 원근 : 화면을 보고 있는 내가 느끼는 UI의 멀고 가까운 정도

 

  • 우리가 보는 화면들 안에 있는 UI들은 블록 모양으로 쌓인다
  • UI가 쌓이는 방향은 화면 상단에서 하단으로 쌓이게 된다
  • 즉, 하단에 있는 블록이 상단에 있는 블록보다 더 나중에 쌓인 블록
  • 피그마 개체들이 만들어지면, 자동으로 한 장의 층(Layer)이 된다

 

 

<레이어가 쌓이는 방향>

상하좌우로도 쌓이지만, 앞뒤로도 쌓을 수 있다!

 

  • 레이어는 화면 상단에서 하단으로 쌓이지만, 화면 앞에서부터 뒤라는 방향도 존재한다
  • 레이어가 쌓이는 순서는 상하좌우의 평면적인 순서뿐만 아니라 입체적인 앞뒤 순서도 있다는 뜻

 

 

 

3. 오토레이아웃

레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능

 

 

<오토레이아웃은 왜 알아야 할까?>

  • 우리는 모두 다양한 크기의 핸드폰과 모니터를 사용한다
  • 따라서 앱과 웹을 만들 때는 이 크기가 바뀌어도 유연하게 대응할 수 있도록 만들어야 한다
  • 레이아웃에 유연함을 만들어주는 가장 중요한 기능이 바로 오토레이아웃
  • 프레임을 배치하고 정렬해 레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능

 

 

 

4. 컨스트레인트

컨스트레인트(Constraint)는 제약, 제한이라는 뜻으로, 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻

 

 

<컨스트레인트를 꼭 알아야 할까?>

  • 오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있다
  • 하지만 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어 줘야 한다
  • 실무에서 많이 사용하는 기능이고, 또 활용하기에 따라 정말 다양한 움직임을 연출해 낼 수 있기 때문에 반드시 알아야 한다!

 

 

 

<프레임 리사이징>

📌 리사이징의 개념
• 프레임은 기본적으로 크기가 고정. 이 상태를 Fixed(픽스드;고정된)라고 불린다
• 프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생긴다
• 이걸 피그마에서는 리사이징이라고 부른다.
• 부모의 사이즈 값에 따라 자식의 사이즈값이 영향을 받는다
• 반대로, 자식의 사이즈 값에 따라 부모의 사이즈값도 영향을 받는다

 

 

 

<리사이징의 종류>

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

 


 

이번 영상으로 피그마의 기본기를 다시 한번 잡을 수 있었다. 컨스트레인트는 디테일하게 잘 모르는 부분이라서 많이 연습해 보고 확실하게 개념을 잡아야 할 것 같다! 나중에 더 복잡한 부분으로 들어가기 전에 확실히 기본기를 다져놓고 가야지 🔥

728x90

'본캠프' 카테고리의 다른 글

[0308_본캠프 14일차]  (0) 2024.03.08
[0306_본캠프 12일차]  (0) 2024.03.06
[0305_본캠프 11일차]  (0) 2024.03.05