데브허브 | DEVHUB | AI로 MVP 만들어보기-09 Figama에서 루트 레이아웃 방 만들기AI로 MVP 만들어보기-09 Figama에서 루트 레이아웃 방 만들기
- 디자인 요소를 '콘텐츠'와 '방'으로 구분하는 것이 레이아웃 설계의 핵심입니다. 🖼️
- '콘텐츠'는 '가구'에 수납되고, '가구'는 '방'에 배치되는 계층적 구조로 디자인을 이해합니다. 🛋️
- 전체 디자인을 루트(Root)에서 헤더, 바디, 푸터와 같이 수직으로, 바디 내부는 다시 좌우로 수평 분할하는 방식으로 레이아웃을 구성합니다. 🌳
- Figma에서 부모 컨테이너의 패딩과 자식 요소 간의 갭을 0으로 설정하여 정밀한 레이아웃 제어를 구현합니다. 🚫
- 헤더와 푸터는 고정된 높이(예: 64px, 100px)를 부여하고, 바디는 '부모 영역 채우기'를 통해 유연하게 확장되도록 설정합니다. 📏
- 바디 영역 내부에 수평 자동 레이아웃을 적용하여 좌측 고정 너비(예: 48px)와 우측 '부모 영역 채우기' 요소를 배치합니다. ↔️
- 대부분의 박스에는 아이템 배치 및 정렬을 위해 '자동 레이아웃(Auto Layout)'을 포함하는 것이 바람직합니다. ⚙️