[Android] Compose BackdropScaffold 적용해보기

 

출처 https://m2.material.io/components/backdrop#usage

 

 

디소 아쉬운 Ux

 

안녕하세요 점냥입니다 :)

위 사진은 오래전에 사이드 프로젝트로 진행한 모꼬라는 프로젝트 홈 화면입니다. Compose 처음 접할 당시 마구잡이로 개발했던 프로젝트라서 마음 한편에 아쉬움을 많이 가지고 있었던 프로젝트였죠. 홈 화면은 모꼬 브랜드를 그래픽 아트의 느낌으로 표현했던 Title 영역과 주요 기능인 실시간 검색어 리스트를 보여주는 Content 영역이 존재했어요. 초기 기획과 디자이너는 리스트를 스크롤함에 따라 상단 Title 영역도 같이 접히는 UX를 기대했지만 당시 관련 자료를 찾을 수 없어서 아쉽게도 리스트만 스크롤되는 채로 배포가 되었죠..

그러다가 최근에 Material에서 제공해 주는 Compose Layout 중에 BackdropScaffold를 알게 되어서 적용해보려고 해요

 

 

BackdropScaffold

@Composable
fun RealTimeScreen() {
    BackdropScaffold(
        modifier = modifier,
        appBar = {},
        backLayerContent = {
            RealTimeTitle(
                ...
            )
        },
        frontLayerContent = {
             RealTimeContent(
                ...
             )
        }
    )
}

BackdropScaffold는 Back Layer Content와 Front Layer Content로 구성되어 있는 UI입니다. 이름 그대로 배경이 되는 Back layer UI가 있고 그 위로 그려지는 Front Layer UI로 구현되어 있어요. 각 Layer는 Slot API 방식을 사용하여 외부에서 표시될 Composable을 자유롭게 정의할 수 있습니다.

 

 

가장 기본 코드로 적용해본 모꼬 홈 화면

 

기본적인 코드로는 아직 미흡한 부분들이 많이 보입니다. 따라서 이 글에서는 BackdropScaffold에서 제공해 주는 기본 속성들을 추가로 적용해 보면서 UI/UX를 개선해 볼게요

 

 

 

 

---

 

 

BackLayer backgroundColor

BackLayer의 기본 색상은 primary

 

Front Layer와 Back Layer 경계 부분을 보면 보라색으로 채워져 있는 것을 볼 수 있습니다.

이 부분의 색상은 BackLayer의 BackgroundColor로 설정되는데 해당 속성의 기본 값은 Theme에서 primary color 값을 기본값으로 바라보고 있어요. 모꼬에서는 이 부분의 Front Layer Content Color와 비슷하면 좋겠다고 판단했기 때문에 아래처럼 수정했습니다!

BackdropScaffold(
     ...
     backLayerBackgroundColor = //input your front layer content Color,
     ...
)

 

---

 

FrontLayer Elevation

 

 

backLayer backgroundColor와 frontLayer content color를 동일하다 보니 이전에 발견하지 못했던 그림자를 확인할 수 있었습니다. 그림자는 겹치는 Layer 들의 elevation의 차이로 자동으로 그려지게 되는데요. 모꼬에서는 해당 그림자가 필요 없을 것 같아 제거하려고 합니다 :)

BackdropScaffold에 기본적으로 설정되어 있는 elevation 값은 Back Layer는 0, Front Layer는 1로 설정되어 있어요. 따라서 Front Layer Elevation 값을 0으로 설정하면 됩니다.

 

 

BackdropScaffold(
     ...
     frontLayerElevation = 0.dp,
     ...
)

 

---

 

FrontLayer ScrimColor

스크롤 시 Front Layer의 투명도가 낮아지는 것을 확인할 수 있었습니다. Front Layer가 내려가면서 Back Layer의 Focus 되기 위해서 기본 설정값으로 되어 있는 것 같아요. 모꼬 홈에서는 Back보다 Front Layer가 더 중요한 내용이기 때문에 이 기능을 비활성화해 줄게요. 

 

 

   BackdropScaffold(
        ...
        frontLayerScrimColor = Color.Unspecified,
        ...
    )

 

---

 

BackdropScaffoldState

 

Backdrop의 상태를 Concealed, Revealed 2가지로 정의하고 있어요. 

 

• Concealed - Front Layer가 active 상태, BackLayer는 가려짐
• Revealed - Front Layer가 inactive 상태, BackLayer가 온전히 보임

모꼬에서는 모꼬의 브랜딩을 보여주는 Title, 즉 Back Layer이 온전히 보이는 상태를 원하므로 Revealed 상태가 초기 상태여야 해요!

 

기본 값 Concealed

 

기본 초기 값은 Conceale므로 Revealed 상태를 초기 State로 설정해 주면 됩니다.

 

BackdropScaffold(
     ...
     scaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed),
     ...
)

 

 

---

 

 

결과

 

이전과 비교했을 때, 제스처를 통해 상단으로 스크롤이 되었을 때 실시간 검색어 리스트가 같이 올라가고 그다음 스크롤이 되는 것이 자연스러워요. 결과적으로 쉽게 이쁜 UI를 만들 수 있었어요.

 

추가적으로 Backdrop 내부에서 NestedScroll을 사용하고 있기 때문에 화면처럼 SwipeRefresh가 있어도 스크롤이 정상적으로 동작해요. 그래서 SwipeRefresh처럼 중첩 스크롤 Ux를 사용하고 있는 기존 UI에도 쉽게 적용할 수 있을 것 같아요!

 

    SwipeRefresh(
        ...
    ) {
        BackdropScaffold(
			...
        )
    }

 

아쉬운 점으로는 Front Layer와 Back Layer의 위치를 조절하기 어려웠어요. 구현하고자 했던 UI는 Revealed 상태일 때, Front Layer가 Back Layer를 가리는 상태이길 원했지만 해당 UI를 제공해 주는 속성으로는 불가능하더라고요 흑,,

그래도 BackdropScaffold 내부 코드들은 모두 오픈 소스로 공개되어 있기 때문에 추후 시간이 된다면 커스텀으로 구현해보고 싶네요!