포토샵, 일러스트 웹, 앱용 이미지 @2x @3x 변환

안녕하세요. 오늘은 제가 겪었던 문제와 실험(?)에 대해 포스팅해보려고 합니다.

혹시 제목을 보고 포토샵, 일러스트 웹, 앱용 이미지 @2x @3x 변환 방법이 궁금하셔서 오셨다면
포토샵, 일러 를 참고하시면 될 것 같아요 :)

---

포토샵, 일러 등에서는 이미지의 크기를 자동으로 키워주는 기능을 제공하고 있습니다. 

그런데!!!!!

그렇게 해서 이미지를 변환시켰을 경우 Assets.xcassets 의 프리뷰로 보면 크기가 다 똑같아 보이는 현상을 겪었습니다.

이렇게 말이죠... 크기가 다 동일하게 보여요 ... 😢

어도비에서 제공하는 기능을 사용하지 않고 일일이 크기를 2배, 3배 키워주면 제대로 보이는데 말이죠...

이렇게 잘 나오는데 ㅠㅠㅠㅠㅠ 

뭐가 문제인지 한참 찾아보았으나... 답은 찾을 수가 없었습니다.
어도비 기능이든 직접 키우든 Contents.json 파일, 파일정보, 이미지 크기 등등이 다 똑같은데 저러니 환장할 노릇이였습니다..

그래서 몇 가지 실험끝에 제가 찾은 답은

프리뷰는 저렇게 보이지만 기능은 제대로 한다! 입니다.
(제대로 된 해결책이 아니라 죄송하네요.. )

왜 그렇게 생각했는지 실험 결과를 보여드리면 이미지 뷰 3개를 만들어서 비교해봤습니다.

1번. 일일이 키워서 만든 파일
2번. 어도비 기능으로 만든 파일 
3번. 원본 파일을 @2x @3x로 복사해 Contents.json 파일만 맞춤

을 비교해서 확인해보았습니다.

Asset 프리뷰로 보면 이렇게 보이는데요!

하지만 결과는 정상적으로 잘 나오는 걸 확인하실 수 있습니다 XD

왜인지 원인은 결국 찾지 못했으나.. 제 나름의 결론을 내렸습니다 ㅠㅠ

추후에 문제를 발견하거나 답을 찾으면 추가로 포스팅하도록 하겠습니다.
(답을 아신다면 댓글로 알려주시면 너무 감사드려요 !!)

 

감사합니다.

참고

https://helpx.adobe.com/kr/photoshop/how-to/export-image-web.html

Adobe Photoshop에서 모바일 및 웹용 이미지 내보내기

https://helpx.adobe.com/kr/illustrator/how-to/export-assets-web-app-design.html

Illustrator에서 웹 및 앱 디자인용으로 에셋을 내보내는 방법