[수업 목표]
- 프레임과 그룹의 차이를 이해하고 사용할 수 있다
- 오토레이아웃의 원리를 이해하고 사용할 수 있다
- 컨스트레인트와 리사이징의 개념을 이해하고 사용할 수 있다
💡프레임(Frame)
피그마에서 코드 블록을 만드는 기능, 실제 화면으로 인식하는 개체
- 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐
- 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너(Container)라고도 부름
💡그룹(Group)
여러 개체를 하나로 묶어주는 기능
- 여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능
- 코드 블록으로 인식되지 않음
📌프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없음
- 프레임은 하나로 묶인 각각의 개체로 인식하며, 그룹은 한 덩어리의 개체로 인식
💡부모-자식(parent-Child) 관계
감싸고 있는 것과 감싸진 것의 관계
✔️ 단축키
레이어 전부 접고 펴기 Alt + L
💡오토레이이웃
말 그대로 Auto-layout, 즉 레이아웃을 자동으로 조정할 수 있는 기능
레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능
개체를 패딩으로 감싸 컨테이너를 만들 때 사용 (개체 + 패딩 = 컨테이너)
컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능 수행
📌컨테이너를 하나의 개체라고 본다면 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있음
✔️ 단축키
오토레이아웃 적용 Shift + A
💡코드 블록의 구조
- 피그마에선 프레임(=컨테이너)으로 만들 수 있음
- 패딩(Padding) : 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
- 보더(Border) : 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
- 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
📌기존 프레임을 오토레이아웃으로 변환하는 방법
1. 레이어(도형, 텍스트 등) 생성 후 레이어에 마우스 우클릭을 한다
2. 프레임 셀레션(Frame Selection) 을 눌러 프레임으로 담는다.
3. 프레임을 선택하고 오토레이아웃을 적용한다.
💡컨스트레인트(Constraint) : 제약, 제한
오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻
부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할지 정할 수 있음
📌프레임을 프레임 안에 넣었을 때 생기는 파란색 점선, 자식이 부모 컨테이너에 대해 가진 조건을 컨스트레인트 라고 함
자식 컨테이너가 부모에 고정되어 움직이는 일종의 '핀'위치
💡프레임 리사이징
- 프레임은 기본적으로 가로와 세로의 길이가 고정(Fixed)
- 프레임을 오토레이아웃으로 감싸는 순간, Fixed 외에 다른 사이즈 값이 생김
- 부모의 리사이징 값과 자식의 리사이징 값은 서로 영향을 받음
리사이징 종류
- 가로 길이와 세로 길이에 각각 적용 가능
| 값 | 설명 | 유형 |
| Fixed | 고정값 | 공통 |
| Hug | 자식 컨테이너의 크기에 맞춰 조정 | 부모만 쓸 수 있음 |
| Fill | 부모 컨테이너의 크기에 맞춰 조정 | 자식만 쓸 수 있음 |
- 자식이 고정값(Fixed)이라면, 부모는 그걸 감쌈(Hug) > 자식 컨테이너의 길이에 따라 유동적으로 변
- 자식이 부모에 맞게 쭉 늘어나야 한다면(Fill), 부모는 고정값으로 멈춰야 함(Fixed) > 부모 컨테이너의 길이에 따라 유동적으로 변
- 부모와 자식 둘 다 고정일 수도 있음
💡포지션(Position)
- 앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직임
- 웹사이트의 헤더나 앱의 하단 버튼처럼 위치가 고정된 요소들이 있음
- 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때 사용
1) 스태틱(Static)
- 일반적인 요소들이 가지고 있는 포지션
- 기본값, 스크롤을 하면 같이 따라 움직임
2) 픽스드,고정(Fixed)
- 화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있음
- 웹사이트의 헤더나 앱 하단의 버튼 등
3) 앱솔루트(Absolute)
- Fixed와 유사하지만 고정되는 기준이 '컨테이너 내부'
- fixed는 '화면 전체'를 기준으로 하고, Absolute는 '본인이 담겨있는 부모컨테이너'를 기준으로 함
4) 스티키(Sticky)
- 스크롤에 따라서 기본 값과 fixed를 전환하는 포지션
- 스크롤을 따라 움직이다가 특정 위치부터는 상단에 고정되는 것
📌 포지션 설정 방법
스태틱, 픽스드, 스티키 - 프로토타입 패널에서 설정할 수 있음
- Scroll with parent(기본값) : 부모 컨테이너의 스크롤을 따라 간다는 뜻으로, 스태틱을 의미해요.
- Fixed(stay in place) : 현재 위치에 머무른다는 뜻으로, 픽스드을 의미해요.
- Sticky(stop at top edge) : 맨 위 모서리에서 멈춘다는 뜻으로, 스티키를 의미해요.
앱솔루트 - 포지션 패널 안에서 찾을 수 있음
- 오토레이아웃 프레임 안에 있을 때만 사용
- 오토레이아웃에 영향받지 않고, 일반 프레임 안에 있는 것처럼 자유롭게 배치
너어어어무 어렵다.
개념과 기능을 확실하게 정리하고 3주차로 넘어가야겠다.
개념이 완전히 이해되지 않고 숙제를 하려니 너무 어려웠다.
세상 역시 쉬운건 없다
계속 실습하면서 익혀놓는게 좋을 것 같다.
이제 2주차 강의 들었는데 벌써 어려워서 걱정이 되네
