iOS WebView 네이버 로그인 후 화면 깨짐 해결 (SafeArea 무시 / 상태바 사라짐)

iOS WebView 기반으로 앱을 만들면서 네이버 로그인을 붙였는데, 이상한 버그를 하나 만났다.

로그인까지는 문제없이 잘 된다.

그런데 로그인 이후부터 앱 화면이 전부 이상하게 깨지기 시작한다.

상단 상태바가 사라지고, SafeArea가 완전히 무시되면서

모든 화면이 풀스크린처럼 표시된다.

기존에는 정상적으로 보이던 페이지들도 전부 영향을 받는다.

처음에는 웹 쪽 문제라고 생각했다.

CSS나 viewport 설정이 잘못된 줄 알고 이것저것 수정해봤는데 전혀 해결되지 않았다.

이상하게도 이 문제는 항상 발생하는 게 아니라

네이버 로그인 화면을 한 번 거쳤다가 돌아온 이후부터 발생했다.

이 시점에서 웹 문제가 아니라 iOS 쪽 문제일 가능성이 높다고 판단했다.

결론적으로 원인은 WebView의 SafeArea 처리와 네이버 로그인 과정에서의 화면 전환이 충돌하면서 발생한 문제였다.

네이버 로그인은 내부적으로 SafariViewController나 외부 웹뷰 형태로 화면이 전환되는데,

이 과정에서 iOS가 SafeArea를 다시 계산하지 않거나 WebView가 풀스크린 상태로 고정되는 경우가 있다.

특히 SwiftUI에서 아래와 같은 설정이 들어가 있으면 문제가 더 확실하게 나타난다.

.ignoresSafeArea()

이 설정이 있는 상태에서 로그인 화면을 거치고 돌아오면

WebView가 계속 전체 화면을 덮어버리는 상태가 된다.

해결 방법은 생각보다 단순했다.

우선 .ignoresSafeArea() 설정을 제거하거나 꼭 필요한 영역에서만 제한적으로 사용하도록 수정했다.

이것만으로도 대부분의 경우 문제가 해결된다.

그리고 WebView를 감싸는 구조도 한 번 점검해봤다.

불필요하게 전체 화면을 덮는 구조 대신, SafeArea 기준으로 자연스럽게 렌더링되도록 단순하게 구성했다.

예를 들어 이런 식으로 정리했다.

VStack {
    WebView(urlString: "https://example.com")
}

그래도 로그인 이후 화면이 깨지는 경우가 있다면

WebView를 한 번 다시 로드해주는 것도 도움이 된다.

webView.reload()

나는 이 문제를 해결하기까지 꽤 삽질을 많이 했다.

CSS 문제라고 생각해서 viewport를 계속 수정해보기도 했고,

meta 태그를 바꿔보기도 하고,

웹 쪽 SafeArea 대응도 해보고,

네이버 SDK 문제까지 의심해봤지만 전부 아니었다.

결국 원인은 웹이 아니라 iOS WebView의 렌더링 문제였다.

혹시 iOS WebView에서 네이버 로그인을 붙였는데

로그인 이후 화면이 풀스크린처럼 깨지거나 상태바가 사라진다면

SafeArea 처리와 WebView 구조를 먼저 의심해보는 게 좋다.

특히 SwiftUI를 사용하고 있다면

.ignoresSafeArea() 설정이 들어가 있는지 꼭 확인해보자.

나처럼 몇 시간 날리는 일은 줄일 수 있을 거다