Figmapedia
목록으로 돌아가기
오토 레이아웃UX/UI 디자인

최종 디자인 화면을 구성할 때, 전체를 오토 레이아웃으로 만들거나, 혹은 프레임으로 감싸는 방식 중 어떤 것이 더 일반적인가요?

오픈카톡방 2026. 3. 7.

최종 디자인 화면을 구성할 때는 **일반 프레임과 Auto Layout 프레임을 조합하여 사용하는 것이 가장 일반적이고 권장되는 방식**입니다.

1. **최상위 프레임 (Frame)**: 먼저, 전체 화면의 캔버스 역할을 하는 **일반 프레임**을 생성합니다. 예를 들어, 'Desktop 1440' 또는 'iPhone 15 Pro Max'와 같이 특정 디바이스의 뷰포트 크기를 정의하는 데 사용됩니다. 이 프레임은 배경색 설정, 프로토타이핑 시 디바이스 목업 적용, 전체 화면의 스크롤 동작 설정 등의 역할을 합니다.

2. **내부 오토 레이아웃 프레임 (Auto Layout Frame)**: 이 최상위 일반 프레임 안에 실제 UI 콘텐츠(헤더, 메인 콘텐츠 영역, 푸터 등)를 담는 **Auto Layout 프레임**을 배치합니다.

* 이 내부 Auto Layout 프레임은 일반적으로 너비를 `Fill container`로 설정하여 상위 프레임의 너비에 맞춰지고, 높이는 `Hug contents`로 설정하여 내부 콘텐츠의 높이에 따라 유동적으로 조절되도록 합니다.

* 이렇게 하면 UI 요소들이 Auto Layout의 규칙에 따라 정렬되고 반응형으로 동작하여, 디자인 변경 및 관리가 훨씬 용이해집니다.

**이러한 조합 방식의 장점:**

* **명확한 뷰포트 정의**: 최상위 일반 프레임이 실제 디바이스 화면 크기를 명확하게 정의하여 프로토타이핑 및 개발 시 혼란을 줄입니다.

* **유연한 콘텐츠 관리**: 내부 Auto Layout 프레임은 콘텐츠의 추가/삭제/변경에 따라 자동으로 크기와 위치를 조절하여 디자인 효율성을 극대화합니다.

* **Fixed Position 요소 처리**: 헤더나 푸터처럼 스크롤 시 화면에 고정되어야 하는 요소들은 최상위 일반 프레임의 직계 자식으로 배치하고 'Fixed position when scrolling'을 적용할 수 있습니다. 반면, 스크롤되는 메인 콘텐츠는 내부 Auto Layout 프레임 안에 배치하여 관리합니다.