1. 프레임(Frame) vs 그룹(Group)
디자인 → 코드(박스 모델) → 웹, 앱 코드 읽음 → 화면에 디자인으로 보여줌
피그마에서 요소를 묶는 두 가지 방법이지만, 성격은 완전히 다름.
- 프레임: 코드 블록 만드는 기능, 기본 단위(개체, 컨테이너)
- 컨테이너 = 개체 + 패딩
- 내부 개체들과 별개로 독립적인 배경색, 윤곽선, 패딩을 가질 수 있음.
- 코드로 변환이 가능한 구조이기 때문에 UI 설계의 시작점.
- 실무에서 주로 프레임 사용
- 개발에 필요한 속성 적용 가능.
- Frame Selection
- 그룹 (단순히 묶어두기):
- 여러 개체를 단순하게 하나로 묶어둔 것
- 편집, 조정 시 그룹 전체가 아닌 내부 개체들의 스타일이 한꺼번에 변경.
- 프레임과 달리 코드 블록이 아니라 SVG 이미지로 인식됨.
- 개발에 필요한 속성 적용 불가.
- Group
2. 부모-자식(Parent-Child) 관계와 정렬
- 부모-자식 관계: 특정 프레임(부모 컨테이너)이 다른 개체나 프레임(자식)을 감싸고 있는 레이어 구조를 말합니다.
- 정렬(Align): Position-Alignment
- 단일 개체 정렬-기준이 부모 개체
- 다중정렬: 기준점이 서로가 되어 정렬
- 균등 분배: Tidy Up, Distribue Vertical Spacing, Distribue horizontal Spacing
- 단축키 팁:
- 레이어 전부 접기: Opt + L (Mac) / Alt + L (Windows)
- 개체 복제(Duplicate): Cmd + D (Mac) / Ctrl + D (Windows)
- 이름 바꾸기(Rename): Cmd + R (Mac) / Ctrl + R (Windows)
3. 오토레이아웃(Auto Layout)과 여백
- Auto Layout: 레이어 쌓고, 프레임 배치하고 정렬하는 기능으로 컨테이너의 여백을 조정함.
- 다양한 화면 크기(반응형)에 유연하게 대응하기 위해 레이어를 코드 블록처럼 쌓는 핵심 기능임.
설정한 조건에 따라 자동으로 크기 조절이 잘 됨. - 코드 블록은 프레임으로 만든다. 프레임=컨테이너
- 컨테이너 자체도 규칙에 맞게 정렬
- 오토레이아웃은 오토레이아웃으로 감쌀 수 있음
- 프레임이 아닌 것에 Add auto layout = 프레임에 Frame Selection Shit+A
- 세로 정렬 컨테이너에 Bring to Front = 다음 새로운 개체가 아래에 쌓임 왜냐, 오토 레이아웃은 이미 정렬이 되어 있는 컨테이너이기 때문
- 패딩(Padding): 블록(컨테이너) 내부의 여백. 자식 개체와 테두리 사이의 간격입니다.
- 보더(Border): 코드 블록의 테두리 선입니다.
- 마진(Margin): 코드 블록 바깥의 여백으로, 다른 블록과의 간격을 뜻합니다.
4. 프레임과 컨스트레인트(Constraint, 제약 조건)
- Constraint: 부모 컨테이너의 크기가 변할 때, 오토레이아웃 안의 자식 컨테이너가 어디를 기준으로 고정되어 움직일 것인가를 정하는 규칙. 부모 컨테이너의 크기 변경 시, 자식 컨테이너는 어디를 기준으로?
- 오토레이아웃을 오토레이아웃답게 만들어준다
- 반응형 웹 사이트나 입처럼 실시간으로 같이 움직이는 레이아웃 만들기 위해서
- 프레임 안에 프레임 넣어보면 핀 위치처럼 파란 선이 생김
- Position - Constraints
- 이걸 잘 다루는 사람이 피그마를 잘 다룬다고
5. 프레임 리사이징(Re-sizing) 3가지 값
- Re-sizing: 오토레이아웃 안에서 자식 개체들이 어떻게 움직일 거냐
- 어떤 부분이 반응형으로 움직여주는가, 어떤 부분을 동적으로 만들 것인가 -> 실현해줌
- Constraint: 프레임에 대한 것 vs. Re-sizing: 컨테이너 안에서 벌어지는 것
- 프레임을 오토 레이아웃으로 바꾸면 리사이징 옵션 생김.
| 값 (Value) | 설명 | 특징 |
| Fixed | 고정값 (길이가 변하지 않음) | 부모, 자식 모두 사용 가능 |
| Hug | 자식 컨테이너의 크기에 맞춰 부모가 유연하게 감쌈 | 부모만 사용 가능 |
| Fill | 부모 컨테이너의 남은 크기에 맞춰 자식이 쫙 늘어남 | 자식만 사용 가능 |
리사이징의 자연스러운 규칙 기억해두자
(실습하면서 머리 깨져가면서 익히기)자식이 Fixed(고정)라면 → 부모는 자식을 감싸 안을 수 있음 (Hug).
자식이 부모에 맞춰 늘어나야 한다면 (Fill) → 부모는 중심을 잡아야 하므로 고정되어야 함(Fixed).
6. 포지션(Position) 속성
화면에서 요소들이 스크롤 될 때 어떻게 움직일지 결정하는 속성으로, 프로토타입 패널에서 설정합니다.
디자인보다 개발에서 더 많이 사용됨.
- Static: 기본값. 스크롤을 내리면 화면과 함께 위로 따라 올라가며 사라짐.
- Fixed: 화면 전체를 기준으로 고정됩니다. 스크롤을 아무리 내려도 웹사이트의 헤더(상단바)나 앱의 하단 바처럼 늘 그 자리에 떠 있음(Prototype 패널에 있음).
- Absolute: 부모 컨테이너 안에서 고정, 부모 컨테이너 기준이라 Fixed와 다름 (Position 패널에, 오토 레이아웃 안에 있을 때만).
- Sticky: 평소에는 스크롤을 따라 움직이다가, 특정 위치(최상단 등)에 도달하면 그 자리에 딱 고정됨.
7. 오늘 배운 것
- 오늘 배운 Figma 기본 개념들.. 내가 이해한 방식(정확한 비유는 아닐 수 있음)
- 프레임: 존재 단위, 코드 블럭 만듦, 컨테이너(안에 자식 담는 측면 강조)
- 부모-자식 관계: 존재의 관계
- Align: 자식을 부모 어디에 둘 건지
- Constraint: 우리 규칙 정하자
- Auto Layout: 매번 조건 정하기 귀찮다. 자동으로 규칙 대략 정하자.
- 일반 프레임일 때: Constraint 사용 = 부모가 변할 때 자식이 어느 위치에 있을지
vs. Auto Layout 상태일 때: Re-sizing 사용 = 부모 자식이 서로에게 영향부모 자식 관계는 여기서도 쉽지 않네!
- 디자인에도 논리적 사고가 필요하다. 왜냐 디자인도 소통과 협업이 필요하기 때문에.