데브허브 | DEVHUB | AI로 MVP 만들어보기-08 Figma 자동 레이아웃AI로 MVP 만들어보기-08 Figma 자동 레이아웃
- Figma의 '오토 레이아웃'은 프레임 내 자식 요소들의 자동 배치를 가능하게 하여 수동 정렬의 번거로움을 해결합니다. ✨
- 절대 위치 방식은 목록 관리 시 아이템 추가/삭제에 따른 개별 위치 조정의 불편함이 큽니다. 😫
- 부모 프레임이 자식 요소의 배치를 책임지므로, 개발자는 목록 아이템의 동적인 변화에 쉽게 대응할 수 있습니다. 👨👩👧👦
- 수직 또는 수평 방향으로 아이템을 정렬할 수 있으며, 이는 동적인 UI 구성에 필수적입니다. ↕️
- 부모 프레임 내부에 패딩(여백)을 설정하여 콘텐츠가 들어갈 수 없는 영역을 만들고, 내부 마진을 정의할 수 있습니다. 📏
- 자식 요소들의 정렬 방식(좌측, 중앙, 우측, 상단, 하단)을 세밀하게 제어할 수 있습니다. ↖️
- 자식 요소들 간의 고정된 간격(갭)을 숫자로 정확하게 지정하여 일관된 디자인을 유지할 수 있습니다. ↔️
- 자식 요소가 '부모 컨테이너 채우기' 옵션을 통해 부모의 가용 공간에 맞춰 자동으로 크기를 조절하게 할 수 있습니다. 📦
- 아이템이 추가되거나 삭제될 때, 또는 숨겨질 때 나머지 아이템들이 자동으로 재배치되어 빈 공간을 채우거나 간격을 조정합니다. 🔄
- 정렬 옵션을 더블 클릭하여 남은 여백을 아이템들 사이에 균등하게 분배하는 '균등 간격' 배치를 적용할 수 있습니다. ⚖️
- 속성 변경 시 현재 선택된 요소(부모 또는 자식)가 무엇인지 정확히 확인하는 것이 중요합니다. 🎯
- 마우스 드래그를 통한 수동 위치 조정 대신, 오토 레이아웃 속성을 활용하여 정확하고 유연한 제어를 권장합니다. 🚫🖱️