mask

안녕하세요.

 

이번에는 SwiftUI의 mask 수식어에 대해 알아볼게요.

 

---

# mask

Masks this view using the alpha channel of the given view.

 

현재 뷰를 주어진 뷰의 알파 채널을 사용해서 마스크 하는 것.

 

 

저는 여기서 mask가 어떤 의미인지 이해가 잘 안 갔어요.

 

 

마스크(mask)의 사전적 의미는 '가리다' 입니다.

 

 

 

즉, mask 수식어를 사용하면 현재 뷰(mask 수식어를 적용한 뷰)에서 주어진 뷰(mask 시킬 뷰) 영역만큼만 보이고 주어진 뷰 바깥은 가려지게 된다는 의미입니다.

(mask 시킬 뷰만큼 가리는 게 아니고, mask 시킬 뷰만큼 보여준다 라고 이해하면 될 것 같아요.)

 

 

그리고 mask 수식어를 잘 살펴보면

 

 

파라미터가 Mask 타입, 즉 View 타입인 것을 알 수 있어요.

 

그 말은 복잡한 화면도 mask 시킬 수 있다는 것입니다.

 

예시로 직접 살펴볼게요.

 

 

 

## 예시

Circle 뷰를 mask로 지정하니, Circle 뷰에 해당하는 뷰만 보입니다.

 

 

 

 

 

이번엔 VStack이 포함된 좀 더 복잡한 뷰로 mask 시켜볼게요.

 

 

어떤 느낌인지 아시겠죠??

 

mask 시킬 뷰 만큼만 보여주는 것이죠. (투과시킨다? 라고도 볼 수 있을 것 같아요.)

 

 

 

이때 mask 수식어의 또 하나의 특징은 mask 시킬 뷰의 투명도(opacity)는 결과물에 반영되지만 foregroundColor는 무시됩니다.

 

이게 어떤 말인지 아래 예시를 보면 쉽게 이해가 될 것 같아요.

 

 

foregroundColor로 설정한 색들은 전부 무시되고 배경이 되는 Color.red로 색깔이 설정된 것을 볼 수 있습니다.

 

그와 동시에 opacity는 foregroundColor 설정과는 다르게 유지된 것을 볼 수 있어요.

 

 

이제 mask 수식어의 기능이 뭔지 어느 정도 감이 잡힌 것 같아요ㅎㅎ

 

그럼 mask 수식어를 어디에 활용하면 좋을까요?

 

 

 

# mask 활용

mask 활용방법은 무궁무진하기 때문에.. 그중에서 대충 2가지만 뽑아봤습니다ㅎㅎ

 

## 돋보기

 

약간 이런 갬성의 돋보기(?) 기능을 만들 수 있을 것 같아요ㅋㅋ

 

 

 

 

## Fade 효과

mask를 잘 사용하면 아래처럼 스크롤할 때 버튼과 Contents 영역 사이에 적당한 Fade 효과를 줄 수도 있습니다.

 

 

 

 

 

# 참고

- https://developer.apple.com/documentation/swiftui/view/mask(alignment:_:)

- https://www.fivestars.blog/articles/swiftui-masking/

 

 

---

이번 글은 여기서 마무리.