[SwiftUI] redacted를 사용한 스켈레톤 화면 구현하기

이전에 항상 ProgressVew로 로딩중인 화면을 구현했었는데, 홈 탭을 구현하면서 .redacted를 사용해보고 싶었다.

앱에 적용할지는 확실하진 않지만,, 간단하게 기록하고자 작성한다.

 

 

redacted란?

결론부터 말하자면, redacted는 컨텐츠를 가려주는 메소드입니다.

 

공식 문서를 보기 전에 설명이 와닿나요?

(아니요!!!!?)

 

 

단어부터 이해하고 가자면, 이 글에서 설명되어있는 것 처럼 기밀 또는 민감한 내용을 지우다라는 뜻을 갖고 있습니다.

그래서 reason에 데이터를 가리기 위한 이유를 같이 작성해주는 거겠죠?

 

 

 

redacted 사용해보기

일단 RedactionReasons에는 현재 3가지가 존재합니다. 

 

각각 사용에 대해서는 여기서 더 알려드리겠습니다!!

3가지 중에서 placeholder를 사용해서 스켈레톤 뷰를 만들어봅시다!!!

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 30) {
            VStack(alignment: .leading) {
                Text("Email")
                    .font(.title3)
                Text("jini@naver.com")
                    .font(.body)
            }
            
            VStack(alignment: .leading) {
                Text("Password")
                    .font(.title3)
                
                HStack(spacing: 60) {
                    Text("abcd1234")
                        .font(.body)
                    Image(systemName: "eye.circle")
                }
                .redacted(reason: .placeholder) // <-- 여기
            }
        }
    }
}

 

 

이렇게 .redacted(reason: .placeholder)를 작성해주면 아래의 오른쪽 이미지처럼 패스워드가 가려집니다.

 

 

 

 

unredacted란?

문서를 살펴보면 unredacted()라는 메서드도 발견할 수 있습니다. 이 메서드는 뷰 계층에 적용된 redacted 상태를 제거하는 역할을 합니다. 쉽게 말해, unredacted()를 사용하면 숨겨졌던 콘텐츠를 다시 보여주는 겁니다!!

 

redacted(reason:)로 콘텐츠를 가린 상태에서, 하위 뷰에서만 특정 콘텐츠를 보이고 싶을 때 유용하게 사용할 수 있겠죠?? 예를 들어, 부모 뷰에서 플레이스홀더 스타일을 적용했더라도 특정 자식 뷰는 그대로 표시되게 할 수 있습니다.

 

위에서 본 예시 코드에서 눈 이미지를 보여주도록 해볼까요?

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 30) {
            VStack(alignment: .leading) {
                Text("Email")
                    .font(.title3)
                Text("jini@naver.com")
                    .font(.body)
            }
            
            VStack(alignment: .leading) {
                Text("Password")
                    .font(.title3)
                
                HStack(spacing: 60) {
                    Text("abcd1234")
                        .font(.body)
                    Image(systemName: "eye.circle")
                        .unredacted()  // <--- 하위 뷰 계층에서 .unredacted()
                }
                .redacted(reason: .placeholder)  // <--- 상위 뷰 계층에서 .redacted()
            }
        }
    }
}

 

 

이렇게 .unredacted()로 설정해준 이미지는 다시 표시됩니다!

 

데이터 로딩 시 스켈레톤으로 표시하기

암튼 처음으로 돌아가서(?) 개발 중인 앱에 시도해봤던 코드 결과와 스크린샷을 공유드립니다..

결과 먼저 봐볼까요?!!! (현재 기본 데이터를 넣어둬서 화면 수정이 잦은 상태입니다..)

 

 

 

 

먼저 뷰 상태를 관리할 열거형과 변수를 선언해줍니다. 

enum ViewStatus {
    case error
    case loading
    case loaded
}

@State var viewStatus: ViewStatus = .loading

 

 

삼항연산자를 활용해서 redacted에 뷰 상태가 .loading이라면 .placeholder로 표시하도록 해줍니다.

ScrollView {
    LazyVStack(spacing: sectionSpacing) {
        popularQuestSection
        recommendQuestSection
        largestRewardQuestSection
        userRankingSection
    }
    .redacted(reason: viewStatus == .loading ? .placeholder : [])
}

 

 

색상 적용하기

앱에 적용하다보면 뷰나 이미지에 백그라운드 색상을 설정해두지 않으면 플레이스홀더가 콘텐츠를 인식하지 못하고 투명하게 보이는 경우가 있다. 해당 뷰에 백그라운드를 설정해줘도 되고, 아래처럼 뷰에 모디파이어를 달아줘도 된다.

@Environment(\.redactionReasons) var redactionReasons

Image("image")
    .foregroundStyle(redactionReasons.contains(.placeholder) ? .clear: Color.gray)

 

 

 

 

 

 

 

무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?

카카오페이의 이 글을 인상깊게 봐서 링크를 첨부한다.

 

 

 

그리고 출처는 아니지만, 나중에 다시 보기 위해 남기는 글과 스택오버플로우..

https://www.avanderlee.com/swiftui/redacted-view-modifier/

https://stackoverflow.com/questions/70107089/how-to-change-the-color-of-swiftui-redacted-shimmer-effect