[iOS] WebView 백그라운드 투명 처리 (UIWebView → WKWebView 최신 방식 포함)

[iOS] WebView 배경 투명하게 만들기

iOS 앱에서 HTML을 라운드 박스 형태로 디자인하거나, 팝업처럼 WebView를 사용해야 할 때 웹뷰의 배경을 투명 처리해야 하는 경우가 종종 있습니다.

과거 UIWebView 시절에는 subview 순회 후 Opaque 속성을 바꾸는 방식이 필요했지만, 현재 iOS(2025년 기준)에서는 WKWebView를 사용해야 하며, 방법 또한 훨씬 간단해졌습니다.

---

1. (레거시) UIWebView – 예전 코드

아직 유지보수 중인 오래된 프로젝트라면 아래 코드가 유효합니다.

- (void)makeBodyBackgoundTransparent {
    for (UIView *subview in [webView subviews]) {
        [subview setOpaque:NO];
        [subview setBackgroundColor:[UIColor clearColor]];
    }
    [webView setOpaque:NO];
    [webView setBackgroundColor:[UIColor clearColor]];
}

이 방식은 UIWebView의 내부 스크롤뷰 및 뷰 계층의 배경을 직접 clearColor로 바꿔주는 방식입니다.
하지만 UIWebView는 iOS 12에서 완전히 deprecated 되었기 때문에, 신규 개발에서는 WKWebView를 사용하는 것이 필수입니다.

WebView 배경 투명하게 만들기

---

2. (신규 개발) WKWebView에서 배경 투명하게 만들기

WKWebView는 훨씬 간단하게 배경 투명 처리가 가능합니다.

Swift 예제

let webView = WKWebView()

webView.isOpaque = false
webView.backgroundColor = .clear

// HTML 자체도 투명하게 처리할 수 있음
let css = "body { background-color: transparent; }"
let script = WKUserScript(source: css, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

webView.configuration.userContentController.addUserScript(script)

실제로 HTML 배경을 완전 투명으로 만들려면 CSS로 background-color: transparent 를 지정하는 것이 핵심입니다.

참고: HTML 자체에 추가하는 경우

<style>
    body { background: transparent !important; }
</style>

---

3. 왜 WKWebView에서 CSS가 중요한가?

WKWebView는 UIWebView와 내부 구조가 달라서, webView.backgroundColor = .clear 만으로는 “HTML 배경”이 투명해지지 않습니다.

즉, WKWebView에서는 아래 두 가지 모두 필요합니다.

• WKWebView 자체의 배경 색상 제거 (isOpaque = false, backgroundColor = clear)
• HTML/CSS의 배경 제거 (CSS로 background: transparent 설정)

---

4. 팝업, 쿠폰/이벤트 페이지, 반투명 모달 등에서 활용

이 방법은 다음과 같은 상황에서 매우 유용합니다.

• 웹뷰를 팝업처럼 둥근 모서리로 표시할 때
• 바텀시트/모달 형태의 웹 콘텐츠 표시
• 쿠폰/이벤트/바코드 안내 페이지 WebView
• 앱 UI와 WebView를 자연스럽게 겹쳐 표현하고 싶을 때

---

5. 정리

• UIWebView 시대에는 subview 순회를 통한 투명화가 필요했다.
• 2025년 기준, WKWebView + CSS 조합이 가장 정확한 투명 처리 방법이다.
• 배경 투명은 “웹뷰 자체” + “HTML 배경” 두 가지를 모두 처리해야 완전해진다.
• 팝업/라운드 UI/모달 웹뷰 사용 시 매우 유용한 기술이다.

예전에는 정말 많은 삽질 끝에 해결했지만, WKWebView 시대에는 훨씬 간단해졌습니다. 역시 구글링은 힘이 셉니다!