[iOS | SwiftUI ] containerRelativeFrame로 반응형 UI 구현하기

SwiftUI에서 고정 프레임 (fixed frame)을 사용하면 다음과 같은 부작용이 발생한다.

VStack {
    Rectangle()
        .fill(.blue)
        .frame(width: 300, height: 200) // ❌ 고정된 사이즈 — 작은 기기에서 깨짐

    Text("Fixed width card")
        .frame(width: 250) // ❌ 마찬가지
        .font(.title2)
}

• 기기 스펙 편차(device fragmentation): iPhone SE에서는 300pt가 화면의 80%에 해당하지만, iPad Pro에서는 단 29%에 지나지 않을 수 있습니다.

• 가로/세로 회전(orientation) 문제: 가로로 돌리면 수직 공간이 과도하게 차지되거나, 혹은 너무 좁아질 수 있습니다.

• 미래 대응성 부족: 새로운 기기, 새로운 화면 크기가 나올 때마다 고정값을 일일이 조정해야 합니다. 한 번의 수정으로 끝나지 않은 악몽이 될 수 있습니다.

바로 여기서 containerRelativeFrame()이 등장합니다. 이 modifier는 단순히 화면 전체가 아니라 직접적인 컨테이너(container) 에 맞춰 뷰 크기를 조절하게 해줍니다. 즉, ScrollView, Modal, Sidebar, Grid cell 등 다양한 컨테이너가 “부모”가 될 수 있다는 뜻입니다.

VStack {
    Rectangle()
        .fill(.blue)
        .containerRelativeFrame(.horizontal) { length, axis in
            length * 0.8   // ✅ 가용 너비의 80%
        }
        .containerRelativeFrame(.vertical) { length, axis in
            length * 0.25  // ✅ 가용 높이의 25%
        }

    Text("Responsive card")
        .containerRelativeFrame(.horizontal) { width, _ in
            min(width * 0.9, 400)  // ✅ 최대 400pt 까지, 화면에 맞춰 축소 가능
        }
        .font(.title2)
}

이렇게 하면 작은 기기에서도, 큰 기기에서도 “비율 기반 + 최대/최대값 제약” 덕분에 일관된 레이아웃을 유지할 수 있습니다.

출처
https://medium.com/@jaikrishnavj/stop-using-fixed-frames-in-swiftui-the-complete-guide-to-containerrelativeframe-3e010968a329