[Figma] 피그마에서 이미지 사이즈가 다르게 익스포트 될때 해결 방법

피그마에서 아이콘들을 균일한 사이즈로 만들어서 이미지파일로 익스포트 했을 때 저장된 폴더에서 확인해 보면 아이콘 한두 개가 1픽셀 정도씩 각각 다른 사이즈로 익스포트 되어 있을 때가 있습니다. 이럴때 해결방법에 대해 알아보겠습니다.

 

 

익스포트한 이미지의 픽셀 사이즈가 안 맞는 이유

 

익스포트한 이미지의 픽셀 사이즈가 조금씩 다른 이유는

 

먼저 이미지사이즈가 소수점으로 되어 있을 때에요.  이미지는 정사이즈이더라도 좌표가 소수점일때에도 마찬가지로 픽셀사이즈가 조금씩 어긋날 수가 있습니다. 또는 사이즈와 좌표 둘 다 소수점이라면 더욱 익스포트 한 이미지의 사이즈가 어긋날 확률이 높습니다.

 

그리고 또 한가지는 아이콘이미지의 외곽에 그림자효과 등이 연하게 있고 그 그림자가 아이콘 사이즈로 설정해 둔 영역을 벗어나 있는 경우가 있을 수 있죠. 이럴 때 Clip content를 체크해두지 않았다면 그림자 영역까지 포함되어서 아이콘이미지가 익스포트되기 때문에 아이콘 사이즈가 달라지게 됩니다.

 

해결방법1: 소수점 없애기와 Clip content 체크하기

 

해결책은 먼저 이미지 사이즈에서 소수점을 없애주고, 좌표에도 소수점을 없애주는 것입니다.

그리고 아이콘이 포함된 프레임에 Clip content를 체크해서 이미지가 프레임 바깥으로 나가지 않게 해주면 이런 문제를 해결할 수 있습니다. 그러려면 아이콘은 항상 각각의 프레임에 넣어두어야 해요. 단, 그림자가 프레임사이즈로 잘리면 부자연스럽게 끊어져 보일 수가 있으니까요. 그림자의 크기나 프레임사이즈를 잘 조정해서 그림자가 프레임사이즈를 넘지 않게 해야겠지요. 

 

 

사이즈와 좌표가 수정된 아이콘들을 다시 익스포트해보면 사이즈가 균일하게 잘 익스포트 된 것을 확인할 수 있습니다.

 

해결방법2: 작업 시작 전에 항상 픽셀스냅 걸어두기

이렇게 설정을 해두어도 아이콘들을 편집 중에 드래그로 이동하면 소수점이 또다시 생깁니다.

 

 그래서 미리 프로젝트를 처음 시작할때 픽셀스냅(Snap to pixel grid)을 걸어두고 시작하는 것이 중요합니다.

그럼 편집과정에서 소숫점이 생기지 않아서 편하답니다.

 

단 픽셀스냅을 미리 걸어두었더라도 프레임들을 그룹으로 묶은 다음 스케일을 조정하면 또다시 소수점이 생긴답니다. 그룹이 아닌 프레임으로 묶으면 스케일을 조정하더라도 수숫점이 생기지 않는답니다.

미리 픽셀 스냅 걸어두기와 프레임으로 묶기를 꼭 기억합시다.

 

맺는말

"소숫점이 절대 있으면 안 돼" 이런 것은 아니지만 되도록이면 픽셀단위로 깔끔하게 떨어지는 것이 좋겠지요. 좀더 깔끔하게 작업을 한다면 이미지나 모든 컴포넌트들의 픽셀사이즈나 간격들이 홀수픽셀 단위인 것보다는 짝수 픽셀단위로 해주는 것이 좋겠습니다. 더 깔끔하게 하려면 짝수단위 보다는 십 단위, 십 단위보다는 백단위로 할 수 있다면 그렇게 정리하는 것이 더욱 좋겠습니다.

퍼블리셔나 개발자의 입장이라면 확실히 사이즈와 간격이 소수점이나 홀수 픽셀 없이 정리되어 있는 것이 작업하기에 더 좋을 것입니다.

하지만 이렇게 픽셀이나 콤포넌트 등을 정리하느라 작업시간을 너무 쓴다면 오히려 더 비효율적일 수 있으니까요. 아무래도 항상 적절하게 센스있게 정리하면서 하는 것이 좋겠습니다.