피그마, 피그잼 이미지 해상도가 강제로 줄어드는 이유

안녕하세요.

플래니지 해리입니다.

 

피그마를 사용하시다 보면 이미지 캡처 후 붙여 넣기를 했는데, 해상도가 원하는 사이즈대로 노출이 안 되는 경우가 있습니다.

이런 경우 어떻게 처리를 해야되는지 한번 확인해보도록 하겠습니다.

 

 

피그마 이미지 리사이징 오류 해결

 

 

우리는 웹사이트를 캡처한 뒤 붙여 넣기를 할 때 보통은 전체페이지를 캡쳐해서 붙여넣곤 합니다.

이게 가장 편한 방법이니까요, 하지만 페이지 캡쳐 후 붙여넣기를 한다면 강제로 해상도가 작아지는 경험을 해보셨을 겁니다.

 

이미지 캡쳐 방법 - 네이버 웨일

 

피그마 이미지 붙여넣기

 

 

내 오류인지 뭔지 모를 이 이상한 현상 때문에 당황하실 겁니다.

이런 경우 이미지가 깨져 보여서 작업하기가 매우 어려운 상황이 발생될 수 있습니다.

 

하지만 걱정하지 마세요.

이런 문제는 피그마에서 이미지를 강제로 줄이는 현상이랍니다.

피그마 가이드에도 나와있는 내용이긴한데내용이긴 한데,우리는 보통 툴을 사용할때 이런 시스템 정책에 대한 부분은 확인하지 않는 경우가 있으니까 이제라도 확인하셨으면 됩니다.

 

 

피그마 설명 - 번역본

 

 

피그마에서 이미지를 불러올 때 가용되는 이미지의 최대 사이즈는 4096px입니다.

그렇기 때문에 4096px 이상의 해상도 사이즈를 가진 이미지를 불러오게 되면 최대 4096px에 맞춰 이미지가 리사이징이 되는것입니다.

 

이미지를 붙여넣으면 친절하게 설명을 해주는 피그좌

 

 

해결방법

해결방법은 다양하지만 간단합니다.

 

1. 이미지 분할

이미지를 분할하는 방법인데요, 이미지를 리사이징이 되지 않게 분할해서 사용하는 방법이 있습니다.

 

이미지를 분할하여 붙여넣기

 

저는 웹사이트 캡처를 위해 네이버 웨일 브라우저를 사용하는데, 단축키를 사용하면 쉽게 분할된 영역을 캡처할 수 있습니다.

각각의 분할된 이미지를 피그마에 붙여 넣어 사용하게 되면 깨지는 이미지 없이 모니터에서 본 화면 그대로를 사용할 수 있게 됩니다.

 

네이버 웨일 브라우저 이미지 캡쳐

 

 

다소 귀찮은 방법이긴 하지만, 피그마에서 제한 없이 이미지를 넣게 된다면 리소스로 인한 과부하가 발생될 수 있으니, 이것을 해결하기 위해서 당연한 조치를 했을 것이라고 생각됩니다.

피그마 사용하시다가 별거 아닌 걸로 당황하지 마시고 이미지는 분할하여 넣어주세요.

 

 

2. 플러그인 사용

두 번째 방법은 플러그인을 사용하는 것입니다.

피그마 플러그인 중 Insert Big Image라는 플러그인을 활용해 주세요.

큰 해상도의 이미지를 붙여 넣기 할 수 있습니다.

 

플러그인에서 Insert Big Image를 검색해보세요.

 

 

플러그인으로 이미지 추가중

 

이 플러그인을 사용하면 이미지를 한 번에 불러올 수 있습니다.

하지만 한 가지 문제가 발생하는데요, 이 플러그인도 완벽하게 하나의 이미지로 불러오진 못합니다.

일부 구역들이 나눠진 상태로 이미지를 불러오게 되니 참고해 주세요.

 

이미지를 불러오면 분할된 영역을 확인할 수 있습니다.

 

 

---

 

 

두 방법 전부 분할된 이미지를 불러오는 방식입니다.

손수 한 땀 한 땀 불러올지 아니면 한 번에 불러올지는 사용자의 마음이니까 알아서 하시면 될 것 같습니다.

 

오늘도 즐거운 프로젝트 수행하시기 바랍니다.

 

 

 

[기획자의 툴]기획자의 피그마 장점/단점, 설계서 템플릿 공유