문제 해결

Figma 이미지 자동 축소 현상

피그마 오픈카톡방2026. 3. 7.

질문사항

포토샵에서 1920px로 작업한 이미지를 Figma로 드래그하여 삽입하면 자동으로 크기가 줄어들어 약 1300px로 들어갑니다. 이를 다시 1920px로 확대하면 이미지가 깨지는데, 왜 이런 현상이 발생하나요?

답변

Figma에서 이미지를 드래그하여 삽입할 때 자동으로 크기가 줄어드는 현상은 주로 DPI (Dots Per Inch) 또는 PPI (Pixels Per Inch) 설정과 관련이 있습니다.

Figma의 기본 동작: Figma는 기본적으로 1x 해상도를 기준으로 작동하며, 이미지를 삽입할 때 이미지 파일 자체에 포함된 DPI/PPI 메타데이터를 해석하여 화면에 표시되는 물리적 크기를 조정할 수 있습니다. 예를 들어, 포토샵에서 72DPI로 작업된 이미지를 Figma에 넣으면, Figma가 이를 1x 해상도에 맞게 조정하면서 실제 픽셀 크기가 줄어들어 보일 수 있습니다.

해결 방법:

이미지 삽입 시 크기 확인: 이미지를 삽입한 직후, Figma의 오른쪽 패널에서 `W` (Width)와 `H` (Height) 값을 확인하고, 원본 1920px로 직접 입력하여 크기를 조정합니다. 이 경우 이미지가 깨지는 것은 이미지가 래스터(Raster) 이미지이기 때문에 확대 시 픽셀이 늘어나기 때문입니다.

원본 이미지 해상도 확인: 포토샵에서 이미지를 저장할 때, 웹용으로 저장하거나 DPI 설정을 확인하여 Figma에서 예상하는 1x 해상도에 맞게 조정하는 것이 좋습니다.

플러그인 사용: `Insert Big Image`와 같은 플러그인은 대용량 이미지를 삽입할 때 발생할 수 있는 문제를 해결하는 데 도움을 줄 수 있습니다. 이 플러그인은 이미지를 더 효율적으로 처리하거나, 특정 크기로 강제 삽입하는 기능을 제공할 수 있습니다.

벡터 이미지 사용: 로고나 아이콘 등 깨짐이 없어야 하는 요소는 SVG와 같은 벡터 형식으로 작업하여 삽입하면 크기를 아무리 조절해도 깨지지 않습니다.

가장 좋은 방법은 Figma에 이미지를 삽입하기 전에 웹 환경에 최적화된 해상도와 크기로 이미지를 준비하는 것입니다.