피그마에서 디자인한 이미지를 저장했는데 생각보다 작게 나오거나, 다른 프로그램에서 열었을 때 이미지가 흐릿하게 보인 적 있나요?
이럴 때는 이미지 크기뿐 아니라 내보내기 설정도 확인해야 합니다. 피그마에서는 디자인을 원래 크기인 1x로 저장할 수도 있고, 2x·3x처럼 더 큰 픽셀 크기로 내보낼 수도 있습니다.
이번 글에서는 피그마 이미지 해상도 설정 방법, 2배·3배 저장 방법, 내보낸 이미지의 실제 크기 계산법과 함께 저장한 이미지가 흐릿할 때 확인해야 할 사항까지 정리하겠습니다.
1. 피그마 이미지 해상도와 1x·2x·3x의 차이
피그마에서 이미지 해상도를 설정할 때 가장 먼저 알아야 할 개념이 배율입니다.
1x는 디자인의 기본 크기, 2x는 가로와 세로를 각각 2배로 확장한 크기, 3x는 가로와 세로를 각각 3배로 확장한 크기입니다.
예를 들어 피그마에서 가로 400px, 세로 300px인 프레임을 이미지로 내보낸다고 가정해 보겠습니다.
| 내보내기 배율 | 저장되는 이미지 크기 | 전체 픽셀 수 |
|---|---|---|
| 1x | 400 × 300px | 120,000 |
| 2x | 800 × 600px | 480,000 |
| 3x | 1,200 × 900px | 1,080,000 |
2x로 내보내면 가로와 세로가 각각 2배가 되므로 전체 픽셀 수는 4배가 됩니다. 3x라면 전체 픽셀 수는 9배가 됩니다.
여기서 중요한 점은 2x·3x로 저장한다고 해서 디자인 자체의 비율이나 배치가 바뀌는 것은 아니라는 것입니다. 같은 디자인을 더 많은 픽셀로 내보내는 방식입니다.
2. 피그마에서 이미지를 2배 크기로 저장하는 방법
이미지를 2배 크기로 저장하려면 오른쪽 속성 패널의 Export(내보내기) 설정을 이용하면 됩니다.
단계별 설정 방법
피그마에서 저장할 프레임이나 오브젝트를 선택합니다.
오른쪽 속성 패널에서 아래쪽에 있는 Export(내보내기) 항목을 찾습니다.
Export 옆의
+버튼을 눌러 내보내기 설정을 추가합니다.파일 형식을 PNG 또는 JPG로 선택합니다.
크기 설정에서
1x를2x로 변경합니다.Export [선택한 요소 이름] 버튼을 눌러 파일을 저장합니다.
브라우저에서 피그마를 사용한다면 이미지가 브라우저의 기본 다운로드 위치에 저장될 수 있습니다. 데스크톱 앱에서는 저장 위치를 선택하는 창이 표시될 수 있습니다.
2배로 저장했는지 확인하는 방법
저장한 파일을 이미지 편집 프로그램이나 파일 속성에서 열어 가로·세로 픽셀 크기를 확인하면 됩니다.
예를 들어 원본 프레임이 500 × 400px이라면 2x로 내보낸 이미지의 예상 크기는 1,000 × 800px입니다.
다만 이미지 크기 제한이나 원본 이미지 처리 등 다른 조건이 영향을 줄 수 있으므로, 저장 후 실제 픽셀 크기를 확인하는 것이 가장 확실합니다.
3. 피그마에서 이미지를 3배 크기로 저장하는 방법
3배 크기로 내보내는 방법도 2배 설정과 같습니다.
내보낼 프레임이나 오브젝트를 선택합니다.
오른쪽 패널에서 Export 항목을 찾습니다.
+버튼으로 내보내기 설정을 추가합니다.PNG 또는 JPG 형식을 선택합니다.
배율을
3x로 설정합니다.Export 버튼을 눌러 저장합니다.
예를 들어 원본 디자인이 360 × 240px이라면 3x로 내보냈을 때 예상되는 이미지 크기는 1,080 × 720px입니다.
다만 3x는 2x보다 픽셀 수가 많아지는 만큼 파일 용량도 커질 수 있습니다. 모든 이미지에 무조건 3x를 사용할 필요는 없습니다. 이미지가 사용될 환경과 필요한 크기를 먼저 확인하는 것이 좋습니다.
4. 피그마 2x와 3x 중 어떤 설정을 사용해야 할까?
이미지의 사용 목적에 따라 적절한 배율을 선택하면 됩니다.
| 사용 목적 | 추천 설정 | 확인할 점 |
|---|---|---|
| 일반 웹 이미지 | 1x 또는 필요한 픽셀 크기 | 실제 표시 크기 |
| 고밀도 화면용 UI 에셋 | 2x 또는 3x | 개발 환경의 에셋 규격 |
| 고해상도 이미지 자료 | 필요한 최종 픽셀 크기 기준 | 원본 이미지 품질 |
| SNS용 이미지 | 플랫폼에서 요구하는 크기 | 업로드 후 압축 여부 |
| 인쇄용 이미지 | 최종 인쇄 크기와 요구 DPI 확인 | 픽셀 크기와 출력 해상도 |
웹이나 앱에 사용할 이미지는 무조건 3x로 내보내기보다 실제 표시 크기와 개발 규격에 맞추는 것이 효율적입니다.
또한 인쇄용 파일이 목적이라면 2x·3x 설정만으로 충분한지 판단하기 어렵습니다. 최종 출력 크기와 요구되는 DPI를 함께 확인해야 합니다.
5. 피그마에서 원하는 픽셀 크기로 내보내는 방법
꼭 2x나 3x를 선택해야 하는 것은 아닙니다. 피그마에서는 배율 대신 원하는 가로 또는 세로 픽셀 크기를 지정할 수도 있습니다.
Export 설정의 크기 입력란에서 다음과 같은 형식을 사용할 수 있습니다.
2x: 원본 크기의 2배3x: 원본 크기의 3배800w: 가로 너비를 800px로 설정600h: 세로 높이를 600px로 설정
예를 들어 원본 프레임이 400 × 300px인데 가로 800px인 이미지를 원한다면 800w를 입력할 수 있습니다. 비율이 유지되면 세로는 600px로 계산됩니다.
가로 또는 세로 중 한쪽을 지정하면 다른 쪽은 원본 비율에 따라 결정됩니다. 특정 크기가 필요한 작업에서는 배율보다 고정 너비나 높이를 사용하는 편이 더 편리할 수 있습니다.
6. 피그마에서 이미지가 흐릿하게 저장될 때
2x나 3x로 내보냈는데도 이미지가 흐릿하다면 배율만 높이기보다 다음 항목을 확인해 보세요.
① 원본 이미지의 해상도가 낮은 경우
작은 이미지를 피그마에서 크게 확대해 사용하면 저장 배율을 높여도 원본의 세부 정보가 새롭게 생기지는 않습니다.
예를 들어 작은 사진을 3배 크기로 내보내면 픽셀 수는 늘어날 수 있지만, 사진의 디테일까지 원래부터 선명한 것처럼 복원되지는 않습니다.
가능하면 원본 사진이나 고해상도 에셋을 사용하는 것이 좋습니다.
② 이미지 내보내기 배율이 1x로 설정된 경우
원하는 픽셀 크기보다 작게 저장됐다면 Export 설정의 배율이 1x로 되어 있는지 확인합니다.
2x 또는 3x로 변경한 뒤 다시 내보내고, 파일의 실제 픽셀 크기를 확인해 보세요.
③ JPG 압축으로 화질이 저하된 경우
JPG는 사진에 적합하지만 손실 압축 방식이므로 설정과 이미지 내용에 따라 화질이 저하될 수 있습니다.
텍스트, 로고, 투명 배경이 포함된 그래픽이라면 PNG를 고려해 보세요. PNG는 무손실 압축을 지원하지만 JPG보다 파일 크기가 커질 수 있습니다.
④ 내보내기 리샘플링 설정을 확인해야 하는 경우
피그마는 PNG, JPG, PDF 내보내기에서 이미지 리샘플링 옵션을 제공합니다.
Detailed: 사진, 벡터 그래픽, 그라데이션이나 그림자가 있는 디자인처럼 세부 표현이 중요한 경우에 적합합니다.
Basic: 아이콘, 로고, 픽셀 아트처럼 선명한 경계가 중요한 경우에 고려할 수 있습니다.
해당 옵션은 내보내기 고급 설정에서 확인할 수 있습니다. 사용 목적에 맞는 방식을 선택하되, 원본 이미지의 품질이 낮다면 리샘플링만으로 모든 흐림 현상을 해결할 수는 없습니다.
7. 피그마에서 DPI와 픽셀 크기는 어떻게 다를까?
이미지 해상도를 검색하다 보면 DPI라는 용어도 자주 보게 됩니다. 하지만 DPI와 픽셀 크기는 같은 의미가 아닙니다.
픽셀 크기: 이미지가 가로와 세로로 몇 개의 픽셀로 구성되어 있는지 나타냅니다.
DPI: 출력 환경에서 인치당 몇 개의 점을 사용하는지 나타내는 개념입니다. 이미지 파일에서는 실제 출력 해상도를 계산할 때 PPI라는 표현도 사용합니다.
피그마 공식 도움말에 따르면 이미지로 내보낸 에셋은 기본적으로 72 DPI이며, 2x로 내보내면 144 DPI, 3x로 내보내면 216 DPI로 계산됩니다.
따라서 인쇄용 이미지가 필요하다면 DPI 숫자만 확인하지 말고, 실제 출력할 크기에서 충분한 픽셀을 확보했는지도 확인해야 합니다.
예를 들어 가로 1,200px인 이미지가 300 PPI로 출력된다면 가로 출력 크기는 약 4인치입니다. 같은 이미지라도 출력 크기가 커지면 인치당 픽셀 수는 줄어듭니다.
8. 피그마 이미지 해상도 설정 시 알아둘 점
마지막으로 내보내기 전에 다음 사항을 확인해 보세요.
원하는 가로·세로 픽셀 크기를 먼저 정합니다.
웹이나 앱에서 사용할 경우 실제 표시 크기와 에셋 규격에 맞춰 배율을 선택합니다.
사진과 투명 배경 그래픽은 용도에 따라 JPG 또는 PNG를 선택합니다.
SVG는 벡터 형식이므로 일반적인 PNG·JPG의 2x·3x 설정과 다르게 처리됩니다. 피그마 공식 도움말은 SVG와 PDF 내보내기에서 1x만 지원한다고 안내합니다.
저장 후 파일 속성에서 실제 픽셀 크기를 확인합니다.
인쇄용 파일이라면 최종 출력 크기와 필요한 DPI를 별도로 확인합니다.
피그마에서 이미지 해상도를 높이려면 오른쪽 패널의 Export 설정에서 2x 또는 3x를 선택하면 됩니다. 원하는 픽셀 크기가 정해져 있다면 800w처럼 가로 너비를 직접 지정하는 방법도 활용할 수 있습니다.
다만 배율을 높인다고 원본 이미지의 세부 정보까지 자동으로 복원되는 것은 아닙니다. 저장 결과가 흐릿하다면 원본 이미지 품질, 파일 형식, 리샘플링 설정을 함께 확인해 보세요.