iOS Assets ② - Universal? @1x? 🎨

앱 내에 사용할 이미지들을 업로드하다보면 마주하게 되는 'Universal Image'.
어떤 포맷의 이미지 에셋을 제공하는지에 따라 1x, 2x, 3x 혹은 universal 형식이 선택된다.

Xcode 6 이후 등장한 '하나의 PDF로 여러 에셋 만들기' 기능은 참 편리했다.
1x ~ 3x 방식이 예전부터 사용된 방식인만큼, PDF로 에셋을 사용하는 방식이 '최신 방식'이자 옳은 방법이 아닐까 싶기도 했다.

하지만 문득 든 생각은 애플에서는 왜 여전히 예전 방식을 제공하고 있는걸까?
그리고 차이가 있을까 싶었다.

그래서 찾아봤다!

---

Apple의 그래픽 담당! Quartz

가장 먼저 애플의 View System에 대해 알아낸 내용을 정리해보고자 한다.
애플 view System은 Core Graphic에 의해 만들어 진다.
Core Graphic 덕분에 2D 렌더링, 패스 드로잉, 안티 에일리싱 등 화면 출력 관련 모든 것을 담당한다. 이 중요한 프레임워크 뒷단에 Quartz가 위치하고 있다.

과거 애플이 Adobe과 함께 만들었던 DPS(Display PostScript) 그래픽 시스템을 활용하는데 지불하는 로열티 비용을 절감하고자 만든 대체용 프레임워크가 Quartz라고 한다. 덕분에 애플에서는 NeXT OS에서 macOS 전환을 하는 당시 그래픽 프레임 워크를 대체할 수 있었으며 PDF를 적극 활용할 수 있게 되었다고 한다.

2D 컴퓨터 그래픽을 활용한 UI 드로잉, 실시간 렌더링, sub-pixel precision(픽셀 단위에서 x,y 좌표를 명확하게 지정하는 기술)을 지원하는 안티 에일리어싱 기술 등 많은 장점들이 존재하는데, Quartz 프레임워크는 2개의 API로 구성되어 있다고 한다.

---

Quartz의 2개 API

• Quartz 2D [출처]

  쿼츠 2D는 2D 텍스트, 그래픽 등 이미지와 색상 등 모든 렌더링을 담당하는 API이다.
  여기서 앞서 정리한 실시간 렌더링, 안티에일리싱, sub-pixel precision 등의 기술을 제공하는 것으로 보여지는데 - 해당 API 덕분에 PDF를 활용할 수 있다고 한다.

• Quartz compositor

  쿼츠 컴포지터는 윈도우를 구성하고 관리를 하며 발생하는 이벤트를 전달하는 역할을 한다고 이해했다.
  mac OS에서 윈도우는 x,y,z 좌표값을 담고 있는 비트맵 정보를 저장하고 있다고 하는데, 해당 비트맵 정보를 활용하여 어플에서 올바른 좌표에 UI 컴포넌트를 올리고 화면을 그린다고 한다. 더불어 어떤 window에서 이벤트가 발생했는지 파악하고 해당 window를 관리하는 프로세스로 이벤트에 대한 정보를 보낸다고 한다.

  참고로 이제는 deprecated 되었으며 Quartz Extreme으로 바뀌었다!

정리해보면 애플에서 만든 Quartz 프레임워크와 기술력 덕분에 그래픽 렌더링이 쉽게 처리되며 PDF도 활용할 수 있다는 점을 알게 됐다. 그렇다면 애초에 화면을 그리는 프레임워크가 PDF 기반으로 되었으니 더더욱 이미지 에셋 또한 PDF로 처리하는 방식이 더 좋지 않을까?

---

🚨 PDF의 다양한 문제점 🚨

놀랍게도 편의성 때문에 모든게 좋아보이지만 PDF 이미지 에셋에는 여러 문제점이 있다고 한다.

1. Full Vector Support X

• Xcode에서는 완전 Vector은 지원하지 않는다고 한다.
  PDF를 업로드하고 나서 preserve vector data라는 기능을 보통 사용한다.
  이름만 보면 PDF의 Vector 이미지를 Vector 이미지로 출력하는 방식으로 이해하게 되는데, 약간은 달랐다.
  
  알고보니 PDF의 Vector 이미지는 Xcode 빌드 시간에 PNG(비트맵) 이미지로 변환하는 과정을 거친다. 이후 런타임에는 해당 이미지의 @1x 포맷을 늘려 적재적소에 적용한다고 한다.

그래도 하나의 이미지 파일로 모든 기기(DPI)를 지원할 수 있으니 꽤 좋은 선택이 아닐까??

2. No Spot Color!!!

• PDF에는 특정 컬러들이 안보이거나 대체된다.
  스폿 컬러(별색)는 Pantone 색상 잉크를 활용하여 만들어 낸 단색이다.
  일반 RGB, CMYK 등의 조합으로 만들 수 없는 특수 색상들을 Spot Color이라 부르는데, PDF 이미지 에셋에서는 해당 컬러들이 다른 색상으로 대체된다고 한다.

  브랜드 로고 컬러마저 다르게 보일 수 있다고 한다!

3. Image Artifacts - Masking

• Xcode에서 PDF를 PNG로 변형하는 과정에서 Quartz가 제공하는 기술이 100% 적용되지 않음.
  적용이라기보다 '분별'을 하지 못한다고 정리를 하는게 더 옳은 표현일 것 같다. Xcode에서 PDF 이미지를 PNG로 slice하는 과정에서 만약 이미지에 opacity 같은 약간의 효과가 있다면 Xcode는 해당 효과를 인식하지 않는다고 한다. 따라서 위 이미지처럼 밖으로 갈수록 옅어지는 빨간색 원 이미지가 있다면 Xcode에서는 단순히 빨간 원으로 인식하게 된다고 한다. 이 문제는 Gradient에서도 발생한다고 한다.

  쉽게 정리하면 효과가 많을수록 antialiasing은 제대로 적용되지 않는다.

4. x1@ 기반 scaling

• 앞서 PDF 이미지 에셋은 단 하나의 파일만 올려도 된다고 했다.
  이 파일이 활용되는 방식은 @1x 이미지 파일을 강제 스케일링하여 @2x, @3x 이미지 파일을 만들어주는데, 생각보다 좋은 이미지 퀄리티를 만들어내지 못한다고 한다. 위에서도 정리했듯, Xcode는 이미지를 생성할 때 Vector 이미지 데이터를 활용하여 Bitmap으로 변형한 이후 화면에 출력한다고 한다. @1x 비트맵 이미지를 강제로 늘리게 되면서 생각했던 것보다 덜 떨어지는 이미지 화질을 볼 수 있게 된다.

  PDF는 필요에 따라 이미지 에셋을 만들어 내는 것이 아닌, Resizing을 한다.

5. 퍼포먼스 차이

• PDF를 활용한 어플의 경우, PNG로 변환, 화면 구성, 이미지 렌더링, 출력까지 PNG 이미지 에셋만 활용한 경우보다 시간이 조금 더 걸린다고 한다.

  *관련해서는 추가로 서치 중!

6. 이미지 크기

• PDF에서 생성된 PNG 파일 에셋의 크기는 생각보다 크다고 한다.
  이 문제는 내가 추측하기로 아마 PDF 이미지 자체의 크기 때문인 것 같다.
  이미 다들 알고 있겠지만 이미지 에셋은 고정된 크기를 가지고 있다. 아무리 압축된 이미지더라도 PNG로 변형하고 강제 스케일링을 하면서 이미지 크기가 계속해서 변경되고 쌓이는게 아닐까 싶다.
  
  @1x ~ @3x도 마찬가지지만, 상황에 맞는 이미지가 이미 제공된 것과 새로 만드는 과정에서 조금씩 차이가 발생하지 않을까 싶다.

  PDF에서 생성된 이미지 크기가 PNG 파일 3종보다 5배는 더 크다고 한다.

---

결론

컬러, 이미지 변형 등을 고려하지 않아도 되는 매우 작은 컴포넌트들은 PDF를 사용해도 무방할 것 같다. 하지만 편의성 때문에 포기해야하는 요소들이 너무 많은 관계로 최대한 PNG을 따로 만들어 달라고 하는 방식이 아마 베스트이지 않을까 싶다!!

참고

• pdf Graphics
• i don't use PDF
• Quartz Overview