⚒️ 커스텀 네비게이션바 셀(customNavigationBarCell)이 statusBar에 가리는 문제....

https://explorer89.tistory.com/542

👍 네비게이션 UI(로고 + 앱 이름 + 우측 버튼들)를 컬렉션뷰 + 컴포지셔널 레이아웃 구조 안의 커

 

 

 

현재 커스텀 네비게이션바 셀(customNavigationBarCell)이 컬렉션뷰의 첫 번째 셀로 들어가다 보니
→ status bar 영역 아래에서 시작해야 하는데,
→ 컬렉션뷰가 SuperView의 top = 0로 잡혀서
→ status bar와 겹쳐버리는 문제가 발생한 거야.

즉 status bar만큼의 상단 inset이 필요해

 

✅ 해결 방향 (가장 깔끔하고 안정적인 방식)

👉 1) Status bar를 불투명 + 배경색 지정

👉 2) 컬렉션뷰의 topAnchor를 safeAreaLayoutGuide.topAnchor에 맞춘다

이 두 가지가 정석적인 해결책이야.

 

🎯 1) Status Bar 영역을 불투명하게 하기

iOS 13+부터는 SceneDelegate 기반이라 statusBarStyle만 변경할 수 있고,
배경색을 바꿀 수는 없어.

그래서 보통 status bar 아래에 배경 view를 하나 깔아주는 방식을 사용해.

 

 

📌 방법 A — "StatusBarCoverView"를 만드는 방법 (가장 일반적)

➜ MainHomeViewController viewDidLoad()에서 이런 식으로 추가하면 됨:

private func setupStatusBarBackground() {
    let statusBarHeight = view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 54

    let statusBarView = UIView()
    statusBarView.backgroundColor = UIColor(red: 242/255, green: 230/255, blue: 198/255, alpha: 1.0)
    statusBarView.translatesAutoresizingMaskIntoConstraints = false
    
    view.addSubview(statusBarView)

    NSLayoutConstraint.activate([
        statusBarView.topAnchor.constraint(equalTo: view.topAnchor),
        statusBarView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        statusBarView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        statusBarView.heightAnchor.constraint(equalToConstant: statusBarHeight)
    ])
}

 

🔹 StatusBar 색깔을 전체 배경과 동일한 색(cream tone) 으로 지정
🔹 이 View가 상태바 뒤를 덮고,
🔹 컬렉션뷰는 safeArea 아래에서 시작하므로 겹침이 없어짐.

 

 

🎯 2) 컬렉션뷰 제약 수정 — 꼭 이렇게 해야 함!

현재 문제의 제약조건 :

collectionView.topAnchor.constraint(equalTo: view.topAnchor)

 

➡️ 이러면 status bar 위에까지 collectionView가 올라가버림.

 

✔ 정답: safeArea 영역 아래부터 시작

collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)

 

➡️ 이러면 status bar + statusBarView가 컬렉션뷰 위를 덮어주고
➡️ 네비게이션 셀은 그 아래에서 시작해서 겹침이 사라져.

 

 

📌 참고: 왜 상태바 색을 직접 바꾸지 않고 뷰를 덮나?

iOS에서는 status bar 자체의 배경 색 변경은 공식적으로 제공되지 않는다.
그래서 대부분의 앱이 아래 방식으로 구현한다:

• 인스타그램
• 카카오톡
• 뱅크샐러드
• 토스
• 네이버

전부 statusBarOverlayView를 따로 깔고 있음!