Notch — 기초, 화면 컷아웃에 대한 인터페이스 적응

Notch란 무엇인가?

Notch(컷아웃)는 스마트폰 화면 상단의 영역으로, 전면 카메라, 이어피스 스피커, 근접 센서 및 조도 센서가 위치하며, iPhone X 이상의 경우 적외선 Face ID 카메라, 도트 프로젝터 및 플러드 일루미네이터(TrueDepth 카메라 시스템)가 위치합니다. 노치는 모든 필요한 센서를 유지하면서 사용 가능한 화면 영역을 늘리기 위해 도입되었습니다. 상단 베젤 대신 디스플레이가 컷아웃 주위로 위쪽으로 확장됩니다.

크기: 표준 iPhone 노치는 폭 약 ~34mm(6.1인치 모델의 세로 방향에서 ~209pt), 높이 약 ~5mm(~30pt)입니다. 노치 양쪽에는 "귀"—컷아웃의 오른쪽과 왼쪽에 있는 작은 화면 섹션이 있습니다. 오른쪽 "귀"는 일반적으로 시간, 배터리 표시기 및 Wi-Fi를 표시하고, 왼쪽은 통신사와 상태를 표시합니다. 가로 방향에서 iOS는 상태 표시줄의 전체 너비에 걸쳐 검은색 막대로 노치를 숨깁니다. 콘텐츠는 컷아웃 영역에 표시되지 않습니다.

iPhone만이 아님: 노치 개념은 많은 Android 제조사에 의해 채택되었습니다. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — 모두 컷아웃이 있었습니다. 일부 제조사는 더 나아갔습니다: 물방울 노치, 펀치홀 카메라(화면 구멍), 슬라이더 카메라(접이식 모듈). 현대 Android 플래그십(Samsung Galaxy S23+, Google Pixel 8 Pro)은 펀치홀을 사용합니다. 화면 상단에 카메라를 위한 최소한의 구멍으로, 넓은 컷아웃이 없습니다.

iOS의 Safe Area: safeAreaInsets

Safe Area는 뷰 내부의 직사각형 영역으로, 시스템 인터페이스 요소(노치, 둥근 화면 모서리(corner radius), Home Indicator, 탭 바, 탐색 표시줄)에 의해 가려지지 않음이 보장됩니다. Safe Area의 크기는 UIView.safeAreaInsets 속성을 통해 반환됩니다. top, left, bottom, right 값이 있는 UIEdgeInsets입니다. 노치가 있는 iPhone의 경우 top inset = ~44pt(세로) 또는 ~0pt(검은색 막대가 있는 가로)입니다.

// 콘텐츠 배치를 위한 safeAreaInsets 사용
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Area 여백 읽기
        let safeArea = self.view.safeAreaInsets

        // 디버깅을 위한 값 로깅
        print("Top inset: \(safeArea.top)")    // ~44 pt(노치 있음)
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt(Home Indicator 있음)

        // Safe Area로 제목 배치
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Safe Area 변경 처리(회전, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // 레이아웃 재계산
    }
}

Auto Layout 및 Safe Area: Interface Builder에서 "Superview" 대신 앵커 대상으로 "Safe Area"를 사용합니다. 프로그래매틱 레이아웃의 경우 safeAreaLayoutGuide를 사용하세요: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS는 기기 회전, iPad에서 Split View 전환, 키보드 표시/숨기기 및 방향 변경 시 safeAreaInsets를 자동으로 업데이트합니다. 모든 표준 UIKit 컨트롤러(UINavigationController, UITabBarController)는 이미 Safe Area를 고려합니다. 사용자 정의 뷰와 컨트롤러는 명시적으로 safeAreaInsets를 사용해야 합니다.

Android의 Notch: DisplayCutout 및 WindowInsets

DisplayCutout은 API 28(Android 9.0)에 추가된 Android SDK 클래스로, 화면의 컷아웃 영역을 설명합니다. WindowInsets.displayCutout()을 통해 얻을 수 있습니다. 이 클래스는 boundingBoxList(컷아웃을 설명하는 사각형 목록)와 safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight(안전한 콘텐츠 표시를 위한 최소 여백)를 반환합니다. Android는 다양한 컷아웃 구성을 지원합니다: 중앙(iPhone처럼), 측면(모서리에 카메라), 이중(두 대의 카메라), 펀치홀.

// Activity에서 DisplayCutout에 대한 인터페이스 적응
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 컷아웃 영역에 콘텐츠 표시 허용(필요한 경우)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // WindowInsets을 통해 DisplayCutout 가져오기
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // 상단 콘텐츠 여백 설정
            headerView.updatePadding(top = safeTop)
        }
    }
}

표시 모드(layoutInDisplayCutoutMode): ALWAYS — 콘텐츠가 컷아웃 영역에 표시될 수 있음(전체 화면 앱, 비디오, 게임의 경우); NEVER — 콘텐츠가 컷아웃을 절대 겹치지 않음, 시스템이 여백을 추가; SHORT_EDGES — 콘텐츠가 짧은 가장자리에서만 컷아웃 영역에 표시됨(상단 노치가 있는 세로 앱의 경우). 기본 모드는 SHORT_EDGES(Android 12부터)입니다. 펀치홀 카메라의 경우 컷아웃이 더 작으며, 많은 앱이 화면 사용을 최대화하기 위해 ALWAYS를 사용합니다.

Notch의 진화: iPhone X에서 Dynamic Island까지

iPhone X(2017) — 노치가 있는 최초의 Apple 스마트폰. 컷아웃에는 Face ID를 위한 TrueDepth 카메라(적외선 카메라, 도트 프로젝터 및 플러드 일루미네이터 시스템)가 포함되었습니다. 컷아웃 크기: ~34mm × 5mm. iOS 11에서 Apple은 앱 적응을 위해 Safe Area를 도입했습니다. 사용자들은 의견이 나뉘었습니다: 일부는 Face ID에 필요한 것으로 노치를 받아들였고, 다른 사람들은 "잘린" 화면으로 비판했습니다.

iPhone 13(2021) — Apple은 스피커를 상단 베젤로 이동하여 노치를 20% 줄였습니다. 이것이 마지막 클래식 노치였습니다. iPhone 14 및 14 Plus(2022)는 축소된 노치를 유지했습니다. iPhone 14 Pro 및 Pro Max는 Dynamic Island를 도입했습니다. 이는 카메라와 Face ID 센서를 결합한 타원형 컷아웃으로, 동적으로 모양을 변경하고 시스템 알림(타이머, 음악, AirPods 연결)을 표시합니다. Dynamic Island는 자체 API(ActivityKit, Live Activities)를 가진 소프트웨어 플랫폼이 되었습니다.

Dynamic Island는 단순한 컷아웃이 아니라 대화형 인터페이스 요소입니다. AirPods을 연결하면 아일랜드가 확장되어 아이콘과 상태를 표시합니다. 택시를 호출하면(Uber) 도착 시간이 표시됩니다. 앱을 최소화하면 타이머가 아일랜드에 표시됩니다. Dynamic Island는 iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max에서 사용할 수 있습니다. Dynamic Island의 Safe Area: top inset = 54pt(클래식 노치보다 10pt 더 큼).

컷아웃이 있는 인터페이스를 위한 디자인 규칙

노치 뒤에 콘텐츠를 숨기지 마세요 — 자동 여백 계산을 위해 Safe Area 또는 DisplayCutout을 사용하세요. 고정된 여백 값(예: 44pt)을 설정하지 마세요. 장치와 방향에 따라 다릅니다. Safe Area를 읽으려면 항상 시스템 API를 사용하세요: iOS의 safeAreaInsets, Android의 windowInsets.displayCutout. 이렇게 하면 모든 장치에서 올바르게 표시됩니다: iPhone SE(노치 없음), iPhone 14 Pro(노치 있음), iPhone 15(Dynamic Island), iPad(노치 없음, 하지만 Home Indicator 있음).

가로 방향 — 특별한 위험 영역입니다. 가로 방향에서 노치가 있는 iPhone의 경우 iOS는 자동으로 상태 표시줄의 전체 너비에 걸쳐 검은색 막대를 추가합니다(콘텐츠가 노치의 왼쪽과 오른쪽에 표시되지 않음). 이는 Safe Area inset = 0 top이지만 증가된 left/right insets(~47pt)에 의해 수행됩니다. 이 동작을 비활성화하려고 하지 마세요. App Store는 가로 방향에서 콘텐츠에 화면의 "금지된" 영역을 사용하는 앱을 거부합니다. 전체 화면 비디오의 경우 자동으로 컨트롤을 노치 영역 밖에 배치하는 AVPlayerViewController를 사용하세요.

배경 및 상태 표시줄: 사용자 정의 배경색을 사용하는 경우 노치 뒤의 영역을 포함하여 전체 화면 영역을 채워야 합니다. 상태 표시줄 위에 콘텐츠를 그리지 마세요. Safe Area를 사용하세요. 다크 모드의 경우 상태 표시줄을 읽을 수 있는지 확인하세요: 배경 스타일에 맞게 preferredStatusBarStyle을 설정합니다(.default는 밝은 배경의 어두운 텍스트, .lightContent는 어두운 배경의 밝은 텍스트).

Notch 적응 테스트

시뮬레이터 및 에뮬레이터: Xcode는 노치(iPhone X–14) 및 Dynamic Island(iPhone 14 Pro–15)가 있는 모든 iPhone 모델의 시뮬레이터를 제공합니다. Android Studio는 다양한 컷아웃 구성(Google Pixel 3 XL, 사용자 정의 컷아웃 에뮬레이터)의 에뮬레이터를 제공합니다. 세로 및 가로 방향, 키보드 유무, Split View(iPad)에서 테스트하세요. 모든 콘텐츠를 읽을 수 있고 가려지지 않았는지 확인하세요.

실제 장치: 시뮬레이터와 실제 장치의 노치는 다를 수 있습니다. 예를 들어 iPhone 14 Pro 시뮬레이터는 Dynamic Island를 표시하지만 실제 상호 작용(Live Activities)은 없습니다. Android의 경우 펀치홀 카메라가 정확하게 에뮬레이트되지 않을 수 있습니다. 가장 좋은 방법은 실제 장치에서 테스트하는 것입니다. 최소 세트: iPhone SE(노치 없음), iPhone 14(노치 있음), iPhone 15 Pro(Dynamic Island), 펀치홀이 있는 Android, 워터폴 화면이 있는 Android(Samsung Edge).

도구: iOS의 경우 "Show Safe Area Insets" 옵션이 있는 Xcode View Debugger를 사용하세요. Safe Area 경계를 시각적으로 표시합니다. Android의 경우 — Android Studio의 Layout Inspector로, Attributes 패널에 WindowInsets 및 DisplayCutout을 표시합니다. 또한 Accessibility Inspector는 Safe Area 내의 모든 요소가 VoiceOver/TalkBack에 액세스 가능한지 확인하는 데 유용합니다. 노치는 없지만 Home Indicator(하단 여백 ~21pt)와 둥근 모서리가 있는 iPad를 잊지 마세요.