Full Screen Cover: 개요, 전체 화면 프레젤테이션 및 UIKit

iOS에서 Full Screen Cover란?

Full Screen Cover는 iOS에서 표시된 컨트롤러가 장치 화면 전체를 차지하는 모달 프레젤테이션 스타일입니다. 부모 컨텐츠는 완전히 가려졌으며, 이머시브 효과를 만들어 사용자를 현재 작업에 집중시킵니다.

iOS 13 이전에는 Full Screen Cover가 iPhone에서 유일한 모달 프레젤테이션 스타일이었습니다. present(_:animated:completion:) 구문의 모든 호출은 기본적으로 .fullScreen을 사용했습니다. iOS 13부터 Apple은 기본 스타일을 .automatic으로 변경하였으며, iPhone에서는 .pageSheet가 선택됩니다. 그러나 Full Screen Cover는 여전히 사용 가능하며 완전한 집중이 중요한 시나리오에 사용됩니다.

Page Sheet과 달리 Full Screen Cover는 부모 컨텐츠와의 상호작용을 허락하지 않고 모달 창 아래에 표시하지 않습니다. 사용자는 아래로 스와이프하여 Full Screen Cover를 닫을 수 없습니다 — 닫기 위해선 dismiss(animated:completion:)을 프로그래머적으로 호출하거나 화면 상의 닫기 버튼이 필요합니다. UX를 설계할 때 이 부분을 고려하는 것이 중요합니다.

Full Screen Cover vs Page Sheet: 스타일 비교

Page Sheet은 iOS 13에서 도입된 둔번째 주요 모달 프레젤테이션 스타일입니다. Page Sheet는 상단 여백이 있는 카드로 표시되며, 그 아래에 부모 화면이 보입니다. 사용자는 아래로 스와이프하여 Page Sheet를 닫을 수 있습니다. 반면 Full Screen Cover는 부모 컨텐츠를 가리고 스와이프 닫기를 지원하지 않습니다.

Full Screen Cover와 Page Sheet 사이의 선택은 컨텐츠와 문맥에 따라 달라집니다. 권장됩니다 Full Screen Cover를 완전한 주의가 필요한 컨텐츠에: 전체 화면 비디오, 사진 미리보기, 문서 스캔. Page Sheet는 부모 화면의 문맥가 중요한 작업에: 편집 양식, 옵션 선택, 상세 보기.

UIKit 구현: UIModalPresentationStyle

UIKit은 모달 프레젤테이션 스타일을 설정하기 위한 상수 UIModalPresentationStyle.fullScreen을 제공합니다. present를 호출하기 전에 UIViewController에서 이 속성을 설정하면 컨트롤러가 전체 화면에 표시되도록 합니다. 컨트롤러는 키보드 나타날 때의 동작과 시스템 이벤트도 관리합니다.

설정 및 리계이트

.fullScreen 스타일을 설정한 후에는 닫기 이벤트를 처리하기 위해 presentationController?.delegate를 구성하는 것이 권장됩니다. UIAdaptivePresentationControllerDelegate 리계이트는 닫기 시도를 가로채고 데이터 손실을 방지할 수 있습니다. Page Sheet과 달리 Full Screen Cover에서는 리계이트가 프로그래머적 dismiss 호출 시에만 발동됩니다.

회전 및 키보드 처리

Full Screen Cover는 화면 회전과 키보드 표시를 올바르게 처리합니다. 회전 시 모달 컨트롤러가 자동으로 새 방향에 적응합니다. UIKeyboardWillShowNotification은 키보드가 나타날 때 컨텐츠를 위로 올려 텍스트 필드가 보이도록 합니다. Page Sheet과 달리 Full Screen Cover는 키보드가 나타날 때 크기가 바뉴지 않습니다.

let playerVC = VideoPlayerViewController()
playerVC.modalPresentationStyle = .fullScreen
playerVC.modalTransitionStyle = .crossDissolve
present(playerVC, animated: true) {
    playerVC.startPlayback()
}

// 닫기
dismiss(animated: true) {
    print("플레이어가 닫혀졌습니다")
}

SwiftUI: .fullScreenCover 수식자

SwiftUI는 전체 화면 모달 창을 선언적으로 생성하기 위한 수식자 .fullScreenCover를 제공합니다. .sheet(Page Sheet)과 달리 .fullScreenCover는 유사한 동작으로 .fullScreen 스타일을 만듭니다: 완전한 컨텐츠 커버리지와 스와이프 닫기 없음.

Binding과 데이터 사용

수식자는 Bool에 대한 binding 또는 옵션적인 식별 가능한 항목을 수닭합니다. binding이 true로 설정되면 SwiftUI가 전체 화면 창의 표시를 애니메이션합니다. 데이터를 전달하려면 onDismiss 매개변수와 컨텐츠 클로저를 사용합니다. \.dismiss 환경 값은 모달 창을 내부에서 닫을 수 있게 합니다.

Full Screen Cover vs Sheet

SwiftUI에서 .fullScreenCover와 .sheet 사이의 선택은 UIKit과 유사합니다: .fullScreenCover는 이머시브 컨텐츠용, .sheet는 카드용. SwiftUI는 자동으로 올바른 닫기 동작을 선택합니다: .sheet는 스와이프로 닫을 수 있고, .fullScreenCover는 프로그래머적으로만 닫을 수 있습니다. 수식자는 하나의 View 계층에서 결합할 수 있습니다.

struct CameraView: View {
    @State private var showCamera = false

    var body: some View {
        Button("카메라 열기") {
            showCamera = true
        }
        .fullScreenCover(isPresented: $showCamera) {
            CameraPreviewView()
                .ignoresSafeArea()
        }
    }
}

struct CameraPreviewView: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            VStack {
                Spacer()
                Button("캡처") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

커스텀 애니메이션 및 전환

Full Screen Cover는 UIKit에서 UIModalTransitionStyle을 통해 그리고 SwiftUI에서 커스텀 전환을 통해 커스텀 애니메이션을 지원합니다. 기본 스타일은 다음과 같습니다: .coverVertical (아래에서 위로), .crossDissolve (점점적으로 나타남), .flipHorizontal (뒤집기), .partialCurl (페이지 구기름 효과).

UIKit: UIViewControllerAnimatedTransitioning

완전히 커스텀인 애니메이션을 위해 UIViewControllerAnimatedTransitioning 프로토콜을 구현합니다. animateTransition(using:) 메소드를 통해 애니메이션 기간과 전환 자체를 정의할 수 있습니다. 애니메이션 컨트롤러는 UINavigationControllerDelegate 또는 UIViewControllerTransitioningDelegate를 통해 지정됩니다.

SwiftUI: Matched Geometry Effect

SwiftUI에서 .fullScreenCover에 대한 커스텀 전환은 matchedGeometryEffect를 사용하여 만듭니다. 이 수식자는 요소를 부모 View에서 전체 화면 창으로 이동시키는 애니메이션을 지원합니다. 예를 들어 사진 썸네일을 탭하면 부드럽게 전체 화면으로 확대되며 연속성이 있는 효과를 만듭니다. matchedGeometryEffect는 시작과 목적 위치에서 요소를 연결하는 id와 namespace로 동작합니다.

struct PhotoViewer: View {
    @State private var selectedPhoto: String?
    @Namespace private var animation

    var body: some View {
        HStack {
            ForEach(["photo1", "photo2"], id: \.self) { photo in
                Image(photo)
                    .matchedGeometryEffect(id: photo, in: animation)
                    .onTapGesture { selectedPhoto = photo }
            }
        }
        .fullScreenCover(item: $selectedPhoto) { photo in
            Image(photo)
                .matchedGeometryEffect(id: photo, in: animation)
                .ignoresSafeArea()
        }
    }
}

Full Screen Cover를 언제 사용할까?

Full Screen Cover는 컨텐츠가 부모 인터페이스에 방해받지 않고 화면 전체를 차지해야 하는 시나리오에 권장됩니다. Apple HIG는 세 가지 주요 카테고리를 제시합니다: 미디어 컨텐츠, 컨텐츠 작성 도구, 일시적인 시스템 인터페이스.

미디어 및 어라운트

비디오 플레이어, 사진 보기, PDF 및 코믹스 읽기는 Full Screen Cover의 일반적인 사용 예입니다. iOS에서 AVPlayerViewController는 가로 모드로 전환할 때 자동으로 전체 화면 모드를 사용합니다. Adobe Lightroom가이 사진 편집기는 사진 라이브러리 위에 전체 화면 편집기를 엽니다.

컨텐츠 작성 도구

카메라, 문서 스캘너, 음성 녹음 — 사용자의 완전한 주의가 필요한 작업. UIImagePickerController는 iOS 14 이전에 카메라에 Full Screen Cover를 사용했습니다. iOS 14부터 시스템 픽커는 Page Sheet를 사용하지만 개발자는 커스텀 카메라에 .fullScreen을 강제할 수 있습니다.

피할 것

다음에는 Full Screen Cover를 사용하지 마세요: 회원가입 양식 (Page Sheet가 더 적합함), 부모 페이지 문맥이 중요한 텍스트 입력 화면, 모달 창 내의 순차적 탐색. Material Design에서도 시스템 뒤로가기 버튼을 차단하지 말것을 권장합니다 — iOS에서는 허용되지만, 사용자가 UI 요소를 통해 닫을 수 있는 명확한 방법이 있어야 합니다.