Swift로 iOS 앱에서 둥근 모서리 이미지 표시하기

Swift에서 이미지뿐만 아니라 뷰(View), 버튼(Button) 등 어떤 UI 요소든 둥근 모서리(round corners)를 적용하려면 해당 요소의 layer에 있는 cornerRadius 속성에 접근해야 합니다. iOS의 모든 UI 요소는 내부적으로 레이어(layer)를 기반으로 동작하기 때문입니다.

1. UIImageView 생성하기

먼저 스토리보드(Storyboard)에 UIImageView 객체를 추가하거나, 코드로 직접 생성할 수 있습니다. 아래는 코드로 이미지 뷰를 생성하고 이미지를 추가하는 함수입니다.

func addImage(imageName img: String) {
    let imageView = UIImageView()
    imageView.frame = CGRect(x: 10, y: 20, width: 200, height: 200)
    imageView.contentMode = .scaleAspectFill
    if let newImage = UIImage(named: img) {
        imageView.image = newImage
    }
    self.view.addSubview(imageView)
}

2. 기본 상태의 이미지 확인

애플리케이션에 추가하려는 원본 이미지는 다음과 같습니다.

이제 viewDidLoad에서 위의 함수를 호출해 이미지를 화면에 추가합니다.

모서리 속성을 변경하지 않은 기본 상태의 이미지는 아래와 같이 사각형 그대로 표시됩니다.

3. cornerRadius 속성 적용하기

이제 기존 코드에 코너 반경(corner radius) 속성을 추가하고 결과를 확인해 보겠습니다.

imageView.layer.cornerRadius = 10
imageView.clipsToBounds = true

위 두 줄의 코드를 addImage 함수 안에서 addSubview 메서드 바로 위에 추가합니다. 앱을 실행하면 이미지가 다음과 같이 부드러운 둥근 모서리로 표시됩니다.

4. Extension으로 재사용성 높이기

매번 같은 코드를 반복해서 작성하는 대신, UIImageView의 확장(Extension)을 만들어 어디서든 간편하게 재사용할 수도 있습니다. 아래와 같이 구현하면 동일한 결과를 얻을 수 있습니다.

extension UIImageView {
    func makeRoundCorners(byRadius rad: CGFloat) {
        self.layer.cornerRadius = rad
        self.clipsToBounds = true
    }
}

확장을 정의한 후에는 한 줄의 코드만으로 원하는 반경 값으로 둥근 모서리를 적용할 수 있습니다.

imageView.makeRoundCorners(byRadius: 20)

마무리

이처럼 Swift에서는 layer.cornerRadius와 clipsToBounds 두 가지 속성만으로 손쉽게 둥근 모서리 효과를 구현할 수 있습니다. 프로젝트 전반에서 자주 사용한다면 Extension으로 만들어두면 코드의 가독성과 유지보수성이 크게 향상됩니다.