[iOS] 이미지에 원하는 모양의 마스크 적용하기

안녕하세요 제인입니다~!

UI 구현에 관한 게시글은 처음 업로드 하는 것 같은데요,

복잡한 UI를 구현하면서 겪었던 문제들 혹은 고민했던 점을 블로그에도 기록으로 남겨놓았으면 좋았을 걸,, 하는 생각에

예전 프로젝트에서 꽤나 고민했던 과정을 포스팅하려고 합니다..! (공유하면 좋으니까요..ㅎ)

앞으로도 이슈 해결에 대한 내용도 포스팅을 해보도록 노력하겠습니다!

복잡한 모양의 마스크를 이미지에 적용하기

이번 포스팅에서는 이미지에 사각형, 원처럼 간단한 도형이 아니라 복잡한 모양의 마스크를 적용하는 방법에 대해 공유해보겠습니다!!

예전에 참여했었던 프로젝트에서 서비스의 심볼인 마시멜로 모양이 여러 화면에서 보였습니다.

특히, 마시멜로 모양의 마스크가 적용된 이미지가 프로필 사진으로 적용되어 앱 곳곳에서 자주 사용되었습니다.

 

원도 아니고.. 사각형도 아니고.. 세모도 아니고.. 마시멜로 모양을 대체 어떻게 마스크로 적용하냐!!!

기획, 디자인 팀원들에게 최대한 구현해보겠다고 전달하고 구현 방법에 대해 고민했습니다.

고민 과정

가장 먼저 떠오른 방법은 CALayer의 mask 프로퍼티를 이용하는 것이었습니다.

 

공식문서의 설명에 따르면,

CALayer의 mask는 옵셔널 레이어로 레이어의 컨텐츠에 마스크를 씌우는데 사용되는 알파 채널입니다.
레이어의 알파 채널은 레이어의 콘텐츠와 배경 중 어느 정도를 보여줄지를 결정합니다.
전체 또는 부분적으로 불투명한 픽셀은 기본 콘텐츠를 보여주지만, 완전히 투명한 픽셀은 해당 콘텐츠를 차단합니다.

 

어떤 부분을 제외하고 보여주고 싶을 때, 그 부분을 투명처리해서 가리고 보여줄 수 있게 사용할 수 있는 Layer 계층 정도로 해석할 수 있으므로 maskedImage를 만드는 데 이용할 수 있을 것이라고 판단했습니다!

 

그런데, 사용 방법에 대해 찾아보니 CALayer의 mask에 CAShapeLayer 인스턴스를 주입하여 마스킹을 구현해야 했고,

이 때, CAShapeLayer의 path에 UIBezierPath를 활용해 직접 원하는 모양의 path를 그려서 넣어줘야 한다는 것이 문제였습니다.. (마시멜로 모양을 어떻게 똑같이 그려요..🥲)

 

하지만, mask에 대해 찾아보면서 UIView에도 mask라는 프로퍼티가 있다는 것을 발견했습니다.

 

공식 문서의 설명을 보면, CALayer의 mask와 동일한 역할을 하는데, 해당 프로퍼티는 레이어가 아니라 뷰이다! 라는 차이만 존재하는 것을 확인 할 수 있었습니다.

뷰의 콘텐츠를 마스킹하는 데 알파 채널을 사용하는 선택적 뷰 정도로 해석할 수 있을 것 같은데,,

그렇다면 UIImageView 또한 UIView를 상속하고 있으니 이 mask 프로퍼티에 원하는 이미지를 넣어 마스킹을 할 수 있지 않을까..?

하는 아이디어가 떠올랐습니다.

이러한 아이디어로 관련 자료를 더 찾아 원하는 maskedImage를 구현할 수 있었습니다.

구현 방법

maskedImage Custom Class

class PomeMaskedImageView: UIImageView {
    
    // MARK: Properties
    private var maskImageView = UIImageView()
    
    var maskImage: UIImage? {
        didSet {
            maskImageView.image = maskImage
            updateImageView()
        }
    }
    
    // MARK: Life Cycle
    override func layoutSubviews() {
        super.layoutSubviews()
        updateImageView()
    }
    
    // MARK: Custom Methods
    
    /// 원본 이미지에 mask를 적용해주는 메서드
    private func updateImageView() {
        guard let image = maskImageView.image else {
            return
        }
        maskImageView.frame = bounds
        mask = maskImageView
    }
}

 

마스크가 씌워진 이미지가 화면 곳곳에서 사용되기 때문에 위와 같이 Custom Class로 정의해두고 여러 이미지에 마스크를 적용할 수 있도록 구현했습니다.

 

위의 코드를 살펴보겠습니다!

 

<프로퍼티>

• maskImageView: 마스크로 사용될 이미지뷰
• maskImage: 마스크로 사용될 이미지 (마시멜로 모양 이미지) - 외부에서 이미지를 지정해주기 위해 public으로 선언

<메서드>

updateImageView()

원본 이미지에 mask를 적용해주는 메서드입니다.

마스크로 사용될 이미지(maskImageView.image)가 nil이 아니라면 ,

maskImageView의 frame을 PomeMaskedImageView의 bounds에 맞춥니다. (마스크가 원본이미지 위에 정확히 겹쳐져 원하는 부분만 보여질 수 있도록 하기 위함)

그런 다음, PomeMaskedImageView의 mask 프로퍼티에 maskImageView를 할당합니다.

 

didSet 프로퍼티 옵저버 사용 이유?

didSet 프로퍼티 옵저버는 maskImage에 새로운 값이 설정될 때마다 호출됩니다. (외부에서 마스크 이미지에 값이 할당될 때마다)

didSet 블록 안에서는 maskImageView의 image를 새로운 maskImage로 설정하고, updateImageView() 를 호출해 이미지 뷰에 마스크를 적용합니다.

layoutSubviews()에서 updateImageView() 호출 이유?

updateImageView() 메서드 안에서 마스크가 정확이 원본 이미지 위에 겹쳐지도록 해주기 위해서는, 마스킹하려는 뷰(원본 이미지)의 bounds 값에 대한 정보가 필요합니다.

그렇기 때문에 런타임 동안에 bounds 값이 새로 계산되고 적용되는 것을 알 수 있는 layoutSubviews()에서 해당 메서드를 호출하여 뷰의 레이아웃이 변경될 때마다 마스크 이미지의 frame을 갱신하여 항상 올바른 크기와 위치에 마스크가 적용될 수 있도록 하는 작업이 필요합니다.

참고) layoutSubviews() 메서드는 뷰의 레이아웃이 변경될 때마다 자동으로 호출되는 메서드 인데, 이 때마다 뷰의 bounds와 frame이 새로 계산되고 적용됩니다.

사용하는 곳

private let profileImageView = PomeMaskedImageView().then {
    $0.image = UIImage(named: "userProfileEmpty160") // 원본 이미지
    $0.maskImage = UIImage(named: "userProfileEmpty160") // 마스크로 사용할 이미지
}

 

사용하는 곳에서는 위와 같이 원본 이미지와 마스크로 사용할 이미지를 할당해주기만 하면 됩니다!

결과 화면

 

---

[참고 자료]

https://stackoverflow.com/questions/5757386/how-can-i-mask-a-uiimageview

https://ios-development.tistory.com/940