Itunes Search API의 이미지 저해상도 -> 고해상도로 변경

Itunes Search API의 Music에서 받아오는 artwork Image 크기는 100x100 사이즈가 최대

iTunes API에서 제공하는 음악 정보 중 artwork 이미지 URL은 다음과 같이 최대 크기가 100x100으로 제한되어 있다

"artworkUrl30":"<https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/c8/ac/a5/c8aca553-673f-b716-4447-428b55de55e5/11..jpg/30x30bb.jpg>",
"artworkUrl60":"<https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/c8/ac/a5/c8aca553-673f-b716-4447-428b55de55e5/11..jpg/60x60bb.jpg>",
"artworkUrl100":"<https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/c8/ac/a5/c8aca553-673f-b716-4447-428b55de55e5/11..jpg/100x100bb.jpg>",

따라서, 이미지뷰의 크기가 100x100보다 클 경우 이미지가 선명하지 않고 깨져 보이는 현상이 발생했다

첫 번째 시도: 이미지 리사이징 (실패)

이미지의 사이즈를 UIGraphicsImageRenderer를 활용하여 이미지의 크기를 늘린다면 해상도 또한 보완할 수 있을 것이라 생각했다

extension UIImage {
    func resize(newWidth: CGFloat) -> UIImage {
        let scale = newWidth / self.size.width
        let newHeight = self.size.height * scale

        let size = CGSize(width: newWidth, height: newHeight)
        let render = UIGraphicsImageRenderer(size: size)
        let renderImage = render.image { context in
            self.draw(in: CGRect(origin: .zero, size: size))
        }
        print("resize 전: \\(String(describing: self.pngData()))")
        print("resize 후: \\(String(describing: renderImage.pngData()))")
        return renderImage
    }
}

위 코드를 간단히 살펴보면, UIImage를 확장하여 기존 이미지의 넓이를 인자로 받은 넓이로 리사이즈하는 메서드이다. 인자로 받은 newWidth에 맞춰 비율을 계산하고, UIGraphicsImageRenderer를 이용하여 비율에 맞춘 새로운 이미지를 그려 반환한다

 

https://developer.apple.com/documentation/uikit/uigraphicsimagerenderer

https://nsios.tistory.com/154

 

[Swift] Image Resize

 

 

리사이즈 전  /  후

→ 결과적으로 이미지의 크기만 키워졌을 뿐, 화질은 전혀 개선되지 않았다

 

리사이징 과정은 내부적으로 이미 존재하는 픽셀을 단순히 늘려서 렌더링하는 방식이기 때문에 단순히 이미지를 확대해서 그릴 뿐, 실제 화질이 좋아지진 않는다

즉, 100x100의 원본 이미지를 300x300으로 키운다고 해도, 기존 픽셀을 확대하여 흐릿한 이미지가 될 뿐, 선명도를 높이는 효과는 전혀 없던 것이다

리사이징은 보통 고해상도 이미지를 저해상도 이미지로 낮추어 용량을 줄일 때 사용해야 하며, 저해상도 이미지를 고해상도로 보이게 만드는 용도로는 적합하지 않다

 

 

두 번째 시도: 이미지 URL을 변경하여 해상도 큰 이미지 사용

iTunes 및 App Store에서 제공되는 이미지 URL은 정해진 규칙에 따라 크기를 조절할 수 있도록 구성되어 있다

따라서 아래와 같이 이미지 URL에서 해상도 부분만 변경하면 다른 사이즈의 이미지를 요청할 수 있다

 

크기	URL 예시
200x200	/200x200bb.jpg
600x600	/600x600bb.jpg
1200x1200	/1200x1200bb.jpg

ex) 100x100 이미지

"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/c8/ac/a5/c8aca553-673f-b716-4447-428b55de55e5/11..jpg/100x100bb.jpg"

 

→ 600x600 이미지

"https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/c8/ac/a5/c8aca553-673f-b716-4447-428b55de55e5/11..jpg/600x600bb.jpg"

 

유의사항

• 모든 이미지가 고해상도까지 존재하는 것은 아니며, 요청한 크기의 이미지가 없을 경우 가장 가까운 사이즈로 리턴되거나 404 오류가 발생할 수 있다
• 일반적으로 음악 앨범 기준으로는 600x600, 1200x1200, 3000x3000까지는 지원하는 경우가 많다고 한다

 

URL 변환 함수 (정규식 사용)

이미지 URL에서 마지막 해상도 부분(100x100bb.jpg)만 찾아서 값을 동적으로 바꿔주기 위해서 정규식을 사용했다

이 함수는 이미지 URL 문자열에서 /숫자x숫자bb.jpg 형식을 찾아서 내가 원하는 크기의 문자열로 바꿔주는 역할을 한다

    func replaceImageURL(toSize size: Int) -> String? {
        let pattern = #"/\\d+x\\d+bb\\.jpg$"# // 정규식 패턴: "/숫자x숫자bb.jpg" 형식의 문자열을 찾는다
        guard let range = self.range(of: pattern, options: .regularExpression) else {
            return nil
        }

        let newSizeString = "/\\(size)x\\(size)bb.jpg"
        return self.replacingCharacters(in: range, with: newSizeString)
    }

#"/\d+x\d+bb\.jpg$"#

이 정규식은 아래와 같이 분리할 수 있다

• /: 문자 “/”
• \d+: 숫자 1개 이상 (\d: 숫자, +: 1개 이상)
• x: 문자 “x”
• \d+: 숫자 1개 이상 (\d: 숫자, +: 1개 이상)
• bb : 문자열 “bb”
• \.jpg : 문자열 “.jpg” (dot은 특수문자이기 때문에 \\로 escape 처리)
• $: 문자열의 끝을 의미
• → "/숫자x숫자bb.jpg"로 끝나는 문자열을 찾는 정규식이다

range(of:options:)를 통해 해당 정규식에 맞는 부분의 범위를 구하고, 그 범위를 /600x600bb.jpg처럼 내가 원하는 해상도로 바꿔치기하는 식이다.

이렇게 하면 URL의 구조가 일정할 때 간결하게 원하는 해상도로 변경할 수 있다

 

변경 전

https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/af/66/50/af665094-ceb3-5179-0f2a-a4fc058ec0f8/WJSN.jpg/100x100bb.jpg

변경 후

https://is1-ssl.mzstatic.com/image/thumb/Music113/v4/af/66/50/af665094-ceb3-5179-0f2a-a4fc058ec0f8/WJSN.jpg/600x600bb.jpg