SwiftUI - antialiased & interpolation

안녕하세요. 그린입니다🍏

이번 포스팅에서는 SwiftUI의 이미지를 조금 더 매끄럽게 보간하는 메서드들에 대해 학습하겠습니다🙌

 

오늘 소개할 두가지는 antialiased와 interpolation입니다.

그럼 순차적으로 알아보겠습니다!

 

antialiased?

안티 에일리어싱이 뭘까요?

사전적인 의미부터 한번 파악해보죠.

우선 에일리어싱은 디지털 샘플링에서 출력이 왜곡되는 현상 즉, 계단 현상을 의미합니다.

이미지 같이 렌더링된 컨텐츠를 보여줄때 출력되는 이미지의 픽셀이 깨지거나 가장자리가 울퉁불퉁 해지게 나타나는 현상입니다.

여기서 안티가 붙었으니 이러한 매끄럽지 못한 출력을 매끄럽게 만들어주는 메서드겠죠?

실제 공식문서에서는 아래와 같이 소개하고 있습니다.

 

"이미지를 렌더링할 때 SwiftUI가 안티 에일리어싱을 적용할지 여부를 지정합니다."

 

매끄럽게 고쳐서 보여줄지 아니면 가져온 그대로의 이미지를 보여줄지 결정해줍니다.

func antialiased(_ isAntialiased: Bool) -> Image

선언은 이렇게 SwiftUI의 이미지 뷰에 모디파이어로 적용할 수 있습니다.

isAntialiased라는 Bool 타입의 매개변수의 값을 주어 적용하면 끄읕~👏

 

실제 antialiased가 적용되어 보이는 사례를 예로 보겠습니다.

왼쪽이 antialiased가 적용되지 않은 이미지고 우측이 적용된 예시입니다.

픽셀을 확대해보면 조금 더 매끄럽게 이미지가 렌더링 된걸 확인할 수 있습니다.

 

그럼 다음으로 interpolation에 대해 알아보죠🕺🏻

 

interpolation?

antialiased와 유사한 느낌이긴 합니다.

interpolation의 사전적 의미는 보간의 뜻을 가집니다.

즉, 어떠한 주어진 값 사이 중간 값을 제공된 값으로 부터 추정하여 그리게 됩니다.

SwiftUI에서 이미지가 늘어나거나 할때 일부 픽셀이 매끄럽지 못하고 이미지가 손상되는 경우가 있습니다.

이럴때 보간은 주어진 픽셀을 가지고 더 작은 픽셀 단위로 추정하고 만들어 이미지를 보다 더 매끄럽게 만들어줍니다.

공식 문서에서도 아래와 같이 interpolation을 설명하고 있습니다.

 

"보간이 필요한 이미지를 렌더링하기 위한 현재 품질 수준을 지정합니다."

 

선언은 아래와 같으며 Interpolation이라는 enum 타입의 값을 통해 어느정도 보간 시킬지 수준을 결정해 이미지로 리턴해줍니다.

func interpolation(_ interpolation: Image.Interpolation) -> Image

 

Interpolation 타입은 보간 시 품질 수준의 열거 값입니다.

 

총 4가지의 값이 존재합니다👍

 - high: 보간 품질을 높이지만 이미지 렌더링 속도가 느림

 - medium: 중간의 보간 품질과 이미지 렌더링 속도를 가짐

 - low: 낮은 보간 품질을 가지지만 이미지 렌더링 속도가 빠름

 - none: 보간하지 않을때의 값

위와 같은 4가지의 유형을 렌더링 속도와 품질의 우선순위와 중요도를 가지고 적절히 사용해야합니다.

왼쪽이 낮은 품질의 보간이고 우측이 높은 품질의 보간입니다

마무리

이미지 렌더링 속도와 품질을 고려해 더 나은 선택지가 무엇인지 우리 프로젝트에서는 어떤것이 유리할지 매번 고민해보면 좋을것 같습니다!

 

[참고자료]

https://developer.apple.com/documentation/swiftui/image/antialiased(_:) 

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/image/interpolation(_:) 

Apple Developer Documentation

https://betterprogramming.pub/swiftui-interpolation-9c337ca98bc7

SwiftUI: Interpolation

https://developer.apple.com/documentation/swiftui/image/interpolation

Apple Developer Documentation

https://www.quora.com/What-are-the-differences-between-interpolation-and-anti-aliasing

What are the differences between interpolation and anti-aliasing?