[UX/UI] Figma 활용법 2

✳️ 프레임과 그룹

1. 프레임의 개념

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

  

  프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 불러요.

2. 그룹의 개념

• 그룹은 여러 개체를 하나로 담는 기능

  

  그룹 기능은 여러 요소를 한번에 담아서 움직일 때 주로 사용 또는 복잡한 디자인들을 정리할 필요가 있을 때 그룹을 사용해서 정리

3. 프레임 VS 그룹

• 프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체
• 그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능
• 프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없음

 

---

 

✳️ 레이어와 정렬

1. 레이어의 개념

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

  

2. 레이어 원근의 개념

• 레이어의 원근은 화면을 보고 있는 내가 느끼는 UI의 멀고 가까운 정도
• 레이어는 상하좌우로도 쌓이지만, 앞뒤로도 쌓을 수 있음

  

• 우리가 보는 화면을 입체 도형에 대입하면 입체 도형의 축이 되고, 각각 X, Y ,Z 방향이다. 레이어가 떠 있다는 건 Z축 방향으로 레이어가 더 높이 올라와 있다는 뜻

  

  • ex : 화면을 정면으로 보면 순서대로 위에서 아래 방향으로 나열되어있지만 화면을 옆에서 보면 서로 떠 있는 정도가 다를 수가 있다.

    

    

3. 레이어의 높이

• 택배 상자의 크기를 가로 X 세로 X 높이로 재듯이 실무에서도 가로, 세로, 높이라고 함. 개발과의 표현을 통일해서 각각 width, height, z-index라고 함. Z값이나 Z인덱스 등으로 쓰임.

4. 레이어 패널과 정렬 기능

• 감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child) 관계라고 한다.

  

• 레이어 전부 접기(opt + L)
• 레이어 순서 변경 : 레이어 선택 > 맨 앞으로 보내기_Bring to front(]), 맨 뒤로 보내기_Send to back([), 뒤로 한 칸 보내기 Send backward(cmd + [)
• 정렬기능

  

  • 정리하기(Tidy up) : 선택된 개체들을 가로 세로를 딱 맞춰서 정렬
  • 수직 간격 균등 분배(Distribute vertical spacing) : 선택된 개체들 사이의 세로 간격을 균일하게 맞춤
  • 수평 간격 균등 분배(Distribute horizontal spacing) : 선택된 개체들 사이의 가로 간격을 균일하게 맞춤

 

---

✳️ 오토레이아웃

1. 오토레이아웃의 개념

• 오토레이아웃은 레이아웃을 자동으로 조정할 수 있는 기능으로 개체를 내부 여백(패딩)으로 감싸 컨테이너로 만들고 간격에 맞게 컨테이너를 쌓을 수 있게 해준다.
  • 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
  • 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
  • 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격 

    

2. 컨테이너가 만들어지는 원리

• 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들어 낼 수 있다

  

3. 오토레이아웃 만들기

• 텍스트 레이어 만들기 > 마우스 우클릭 > Add auto layout을 적용(Shift+A)

  

1. 오토레이아웃의 정렬 방향: 오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지 정함

• 세로: 수직 방향으로 쌓아요
• 가로: 수평 방향으로 쌓아요
• 감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓아요.

1. 정렬 위치: 오토레이아웃의 사이즈가 변할 때, 안에 있는 프레임들이 어디를 기준으로 정렬되는 지 정함
2. 오토레이아웃 해제: 오토레이아웃 속성을 제거(일반 프레임으로 변경됨)
3. 고급 옵션: 오토레이아웃의 고급 속성을 설정
4. 간격: 오토레이아웃 안에 프레임이 여러개 있을 때, 이 프레임 사이의 간격
5. 좌우 패딩: 오토레이아웃의 좌우 여백값
6. 상하 패딩: 오토레이아웃의 상하 여백값
7. 패딩 개별 조정하기: 상하좌우 패딩을 각각 따로 설정할 수 있음

 

 

4. 컨스트레인트

1. 컨스트레인트의 개념

• 컨스트레인트란? 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻
• 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어야 함.

2. 컨스트레인트 패널 살펴보기

• 캔버스 상에서 보이는 파란 점선은 컨스트레인트 패널 값과 같다. 

  

 

---

5. 프레임 리사이징

1. 리사이징의 개념

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

2. 리사이징의 종류

• 리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있다.

  

 

---

✳️ 피그마 실습(숙제)

🔗실제작업파일보기

Figma