pdf image 적용 (with ios)

📖 서문

xcode에 이미지를 넣어보면 1x 2x 3x 세가지의 형태로 해상도에 대응을 함을 알수있다.

예시

하지만, 이런식으로 3가지 크기의 이미지를 넣는건.. 너무 귀찮다.

이럴때 한개의 pdf image를 넣어서 single scale로 바꾸면 해결된다.

---

🤔 그렇다면, 왜 pdf는 하나만 넣어도 되고.. png, jpg의 형태는 안될까?

그건 vector와 raster 파일의 차이이다.

 

vector 파일은

그리드에 점을 설정하는 수학 공식으로 작성된 이미지이다. 그러므로 해상도를 잃지 않으면서도 제한 없는 크기 조정이 가능하다.

형식으로는 .svg, .pdf 등이 있다.

 

raster 파일은

raster 이미지는 일반적으로 픽셀이라고 하는 색상 블록으로 구성됨으로 크기가 커지게 되면, 픽셀도 커져 흔히 말하는 이미지가 깨진다 는 현상이 생길수 있다.

형식으로는 .jpg, .png 등이 있다.

 

그러므로 vector 파일인 pdf는 크기조절에도 이미지가 깨지지 않아 파일 1개만 있어도 되는것이다.

https://www.adobe.com/kr/creativecloud/design/discover/vector-file.html

---

⛏ xcode에서 어떻게 pdf 파일을 추가하는가?

xcode에서 pdf 파일을 적용하는 방법은 간단하다.

1) pdf 파일을 Assets.xcassets 파일에 추가한다.

2) 그럼 아마 Contents.json 파일도 같이 추가될것이다. 그럼 그 파일을 밑의 형식으로 바꾼다. ( 1x, 2x, 3x 써져있는거 다 지우면 됨 )

{
  "images" : [
    {
      "filename" : "iconIcStarEmptyState.pdf",
      "idiom" : "universal"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

---

📚 참고

https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

Mobile design 101: pixels, points and resolutions

https://berkbach.com/ios-pdf-image-file-assets-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-341e51d741cf

iOS .pdf image file Assets 적용하기

https://www.adobe.com/kr/creativecloud/design/discover/vector-file.html

https://nsios.tistory.com/111

[이미지 확장자] Vector? Raster? PNG, JPEG 뭐가 다를까?