Liquid Glass TabView 내 badge icon 추가

개요

iOS26 이상에서 Liquid Glass 스타일로 표시되는 TabView 의 경우 기존에 사용 가능한 옵션들이 먹히지 않아 badge icon 을 표시하기 위한 새로운 접근이 필요해짐.

다만 실제로 아직 적용하진 않고 가능성만 검토했기에 추후 필요 시 참고용으로 기록을 남기고자 함

접근 방식

TabView 내 어떤 옵션 설정도 먹히지 않는 것으로 보아 Image 파일 자체에 badge icon 을 추가한 이미지를 표시하는 식으로 접근함

따라서 기존 탭바 이미지를 토대로 우상단에 빨간색 badge icon 을 추가한 이미지를 생성하는 기능으로 접근함

Code

fileprivate extension Image {
    /// 탭뷰 이미지 우상단에 뱃지 아이콘 추가한 이미지 생성
    @MainActor
    static func makeTabIconWithBadge(rawImage: UIImage, isBadge: Bool) -> Image {
        let badgeSize: CGFloat = 4
        
        // 베이스 이미지 크기 가져오기
        let iconSize = rawImage.size
        
        // UIKit 방식으로 이미지 생성 (투명 배경 지원)
        let format = UIGraphicsImageRendererFormat()
        format.scale = UIScreen.main.scale
        format.opaque = false
        
        let renderer = UIGraphicsImageRenderer(size: iconSize, format: format)
        
        let uiImage = renderer.image { context in
            let cgContext = context.cgContext
            
            // 1. 베이스 아이콘 그리기
            let iconRect = CGRect(origin: .zero, size: iconSize)
            rawImage.withRenderingMode(.alwaysTemplate).draw(in: iconRect)
            
            // 2. 뱃지 그리기 (우상단)
            if isBadge {
                let badgeRect = CGRect(
                    x: iconSize.width - badgeSize,
                    y: 0,
                    width: badgeSize,
                    height: badgeSize
                )
                
                cgContext.setFillColor(UIColor.red.cgColor)
                cgContext.fillEllipse(in: badgeRect)
            }
        }
        
        // UIImage에 rendering mode를 명시적으로 설정
        let finalImage = uiImage.withRenderingMode(.alwaysOriginal)
        
        return Image(uiImage: finalImage)
            .renderingMode(.original)
    }
}

Tab 정의 부분

Tab(value: TabItem.customer) {
    CustomerTabView(...)
} label: {
    Label {
        Text("사업자")
    } icon: {
        (selectedTab == .customer
         ? Image.makeTabIconWithBadge(rawImage: UIImage.icTabCustomerSelected, isBadge: true)
         : Image.makeTabIconWithBadge(rawImage: UIImage.icTabCustomer, isBadge: true))
    }
}