[iOS / SwiftUI] .mask를 활용하여 Custom ProgressView를 구현해보자

지금 진행하고 있는 프로젝트에서 디자인 시스템을 도입하고 있다.

 

다른 컴포넌트들은 디자인이 구상이 되어 있어서, 이를 그대로 구현하면 되는 상황이었지만 ProgressView는 명시된 디자인이 없었다. 그래서 어떻게 구현할지 고민하다가, 앱의 Identity와 UX라는 두 마리의 토끼를 모두 잡아보기로 결정했다.

 

이를 위해, 우리 앱의 로고를 사용하기로 했다.

하지만 단순히 로고만 띄어주기엔 이쁘지도 않고, 일단 UX적으로 마음에 들지 않았다.

 

Why? 🧐

 

ProgressView는 어떠한 요청(ex, API Request)에 대한 응답을 받기 전까지의 로딩을 시작적으로 표현하는 것인데, 단순히 로고만 띡 띄어놓으면 사용자는 이게 무슨 상황인지 전혀 알 방법이 없다. 그래서 Dynamic한 요소가 필요했는데, 그러던 중 Shimmer라는 기법(?)이 떠올랐다.

 

자주 참고하는 SwiftUI 관련 유튜버인데, 해당 영상에는 .mask를 활용해서 빛이 이동하면서 발생하는 그림자 효과를 주고 있었다.

 

이와 비슷하게 구현하되, 다른 느낌을 주고 싶었다. 

그렇게 구현을 시작했고, 구현 결과는 아래와 같다.

 

앱의 로고를 활용하여 Identity를 가져가면서, 동시에 사용자에게 로딩 중이라는 정보를 제공할 수 있게 됐다.

 

구현

View

우선 첫 번째로 Base가 되는 View이다.

ZStack 내부에 같은 이미지를 두 장 배치했다.

2번 이미지에 컬러를 채워주고, .mask modifier를 붙여준다.

 

우선 .mask에 대해 간단하게 설명하자면, 그냥 우리가 사용하는 마스크를 떠올리면 된다.

얼굴을 가리는 것처럼, content를 가릴 수 있게 해주는 modifier이다. 

한 번 써보면 무슨 느낌인지 알 수 있을 것이다.

 

이해를 돕기 위해, 위에 작성한 코드에서 .mask를 조금 수정해봤다.

로고에 .mask가 씌어져서 양 옆에 가려진 것을 볼 수 있다. 

(사실 .mask를 쓰지 않아도, ZStack이나 Overlay로도 충분히 구현 가능하다는 생각이 들긴하지만... 😅)

 

아무튼 다시 본론으로

 

2번 이미지를 가릴 수 있는 Rectangle 형태의 마스크를 선언한다.

여기서 로고가 왼쪽에서 오른쪽으로 채워지는 느낌을 주기 위해 애니메이션을 활용했다.

 

초기에는 Rectangle의 크기가 0이고, 애니메이션이 시작되면 로고의 너비까지 증가한다.

offset도 -(로고의 크기 * 0.35)이고, 애니메이션이 시작되면 0까지 증가한다.

 

이렇게 해주면 왼쪽에서 오른쪽으로 컬러가 채워지는 느낌을 줄 수 있게 된다.

 

ViewModifier

앞서 구현한 ProgressView를 사용할 ViewModifier이다. ProgressView에서는 형태를 정의했다면, 이 곳에서는 애니메이션을 부여하고 Background를 지정하는 역할을 수행한다.

 

ZStack을 활용하여 ProgressView가 보여질 때, Touch Event를 막기 위해 Background를 지정한다.

그리고 onAppear를 활용하여 View가 보여지면 애니메이션을 작동하도록 구현했다.

 

isPresented와 isAnimated가 헷갈릴 수 있는데

isPresented는 ProgressView를 띄우는 프로퍼티,

isAnimated는 ProgressView 내부의 애니메이션을 작동하는 프로퍼티라고 생각하면 된다.

 

Extension

앞서 구현한 ViewModifier를 Extension을 활용하여 Modifier의 형태로 사용할 수 있도록 맵핑한다.

그 결과, 최종적으로는 View에서 Extension만 호출해서 사용한다.

이런 식으로 ProgressView가 필요한 곳에서 modifier의 형태로 접근한다.

 

isPresented가 true이면 ProgressView가 보여지고,

false이면 ProgressView가 사라지게 된다.

 

TMI...

코드량이 많지는 않다.

그래도 코드량에 비해 많은 고민을 했던 컴포넌트였다.

또한 사용하는 과정에서 다른 애니메이션이랑 겹치는 문제가 발생했는데, 최상단 View에서 호출하는 것으로 해당 문제를 해결할 수 있었다.