[SwiftUI] 앱의 상태에 따라 다른 화면 보여주기 (App Switcher에서 앱 화면 가리기)

1. 사이드 프로젝트를 진행하면서 앱에 적용해보고 싶은 iOS의 여러 기능~을 맘대로 추가할 수 없다는 점이 아쉬웠다. (팀프로젝트니까..)

2. 혼자 앱을 만들면서 개발하고 싶은 기능을 맘껏 시도해보자~ 

3. 기획&디자인에 시간을 생각보다 쓰게된다.

4. 기능/화면 단위로 구현해보자 ! (언젠간 도움이 되겠지 !)

어찌저찌 시간을 보내다보니 현재 4번의 결론에 도달했다.

그러다 문득 스타벅스 앱을 사용하면서 유난~히 앱을 Inactive 상태로 만들면 Active의 상태의 화면이 아닌 초록 배경의 스타벅스 로고를 보여주는 걸 발견했다.

이런 기능(?)은 보통 은행 앱에서 자주 보이는 패턴인데 스타벅스에서 보여서 독특하단 생각을 했다.

구현을 해보자

ScenePhase에는 .active, inactive, background 3가지의 상태가 있다. 이 상태에 따라 다르게 보여주면 된다!!

이 상태 개념에 대해 길게 작성할 수,,는 있지만, 이 글에서는 .inactive 상태에서 다른 화면을 보여주도록 구현하는데 집중할 것이다.

 

 

 

 

먼저 환경변수 scenePhase를 선언해준다.

선언하고 보니 여러 방법이 있겠다는 생각이 들었다. 각자의 코드 스타일에 따라, 프로젝트의 규모에 따라 적합한 방식을 사용하면 될 것 같다.

 

뷰에 바로 조건문을 사용해서 분기 처리해도 되고, .inactive 상태일 경우 다른 뷰를 오버레이 해도 될 것 같는 생각이 들었다.

그래서 방법을 3가지로 구분해서 작성해보았다.

 

코드를 보자 !

 

 

1) Scene에서 조건문으로 상태에 따라 다른 뷰 보여주기

액티브가 아닐 경우 (== .inactive, .background) 파란색 화면을 보여준다.

@main
struct SwiftUIStudyApp: App {
    @Environment(\.scenePhase) var scenePhase
    
    var body: some Scene {
        WindowGroup {
            if scenePhase == .active {
            	MainView()
            } else {
                Color.blue.ignoresSafeArea()
            }
        }
    }
}

 

 

2) Scene에서 오버레이로 다른 뷰 보여주기

inactive일 경우 파란색 화면을 보여준다.

@main
struct SwiftUIStudyApp: App {
    @Environment(\.scenePhase) var scenePhase
    
    var body: some Scene {
        WindowGroup {
            MainView()
                .overlay {
                    if scenePhase == .inactive {
                        Color.blue.ignoresSafeArea()
                    }
                }
        }
    }
}

 

 

3) View에서 오버레이로 다른 뷰 보여주기

inactive일 경우 파란색 화면을 보여준다.

struct MainView: View {
    @Environment(\.scenePhase) var scenePhase
    @State var selection: Int = 0
    
    var body: some View {
        TabView(selection: $selection) {
            FirstView()
                .tabItem {
                	Label("Radin", systemImage: "house.fill")
            	}
            SecondView()
                .tabItem {
                	Label("Jini", systemImage: "pencil")
            	}
        }
        .overlay {
            if scenePhase == .inactive {
                Color.blue.ignoresSafeArea()
            }
        }
    }
}

 

 

구현 결과

Inactive상태인 경우(App Switcher화면)인 경우 아래처럼 화면을 가려줄 수 있다.

 

 

 

 

+ 다른 사례 알아보기

1. UI를 그대로 보여주는 앱

 

 

 

2. 마스킹으로 민감정보를 가리는 앱

잔고도 가려줘요...

 

 

3. 다른 화면으로 정보를 가리는 앱

은행/카드/페이 앱은 알겠는데 스타벅스는 왜 이런 처리를 했을까.. 의도가 뭘까???

 

 

 

4. 백그라운드일 경우 블러처리하는 앱

 

카카오뱅크는 별다른 처리가 없어서 1번으로 분류하려 했는데 다른 앱을 확인하려고 보니까 또 달랐다.

다른 앱들과 달리 백그라운드 상태일 경우 블러처리를 하는 것 같다.

로고와 색상으로 앱을 강조(?)하는게 아니라 블러처리를 하는 이유는 멀까!!!!?!

 

.inactive이면 로고와 파란색 배경, .background면 보라색 배경이도록 다시 수정해봤다.

 

 

 

끝 - !