728x90
✔️ Figma 활용 (1) 1, 2주차 내용 복습 및 정리
1. 프레임과 그룹
프레임 | 그룹 |
피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체 | 여러 개체를 하나로 담는 기능 |
|
|
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 |