Figma 및 Photoshop에서 선명한 이미지 내보내는 방법
문제: 디자인은 선명한데, 내보내면 흐릿해짐
Figma나 Photoshop에서 완벽한 디자인을 만들기 위해 수 시간을 투자했습니다. 캔버스 상에서는 모든 것이 픽셀 단위로 완벽해 보입니다. 그러나 JPG나 PNG로 내보낸 후 브라우저에서 확인하면 부드럽고 흐릿하거나 이상하게 보입니다.
이는 디자이너들이 자주 겪는 골칫거리입니다. 흐릿함의 원인은 주로 두 가지입니다: 잘못된 해상도로 내보내기 또는 부적절한 내보내기 설정 사용. 이 가이드에서는 Figma와 Photoshop에서 매번 선명한 결과를 얻을 수 있는 확실한 워크플로를 제공합니다.
황금 법칙: 2배 크기로 내보내고, 1배 크기로 표시하기
현대의 고해상도 화면(Apple의 Retina 디스플레이 등)에서 선명한 이미지를 얻으려면 실제 표시할 크기의 두 배 크기로 내보내야 합니다.
예시: 웹사이트에서 1200px 너비로 표시될 히어로 배너가 있다면, 디자인 툴에서 2400px 너비로 내보냅니다. 그런 다음 HTML 또는 CSS에서 너비를 1200px로 제한합니다.
<!-- 이미지 파일은 2400px 너비이지만, 브라우저에 1200px로 표시하도록 지시 -->
<img src="my-banner-2400px.jpg" alt="설명적인 대체 텍스트" width="1200"> 이 기술은 브라우저에 두 배의 픽셀 밀도를 제공하여 고해상도 디스플레이에서 더 선명한 이미지를 구현합니다.
Figma에서 내보내기
Figma는 벡터 기반 툴이므로 선명한 리소스 내보내기가 쉽습니다.
단계별 가이드:
- 프레임 또는 리소스 선택: 내보낼 항목(아이콘, 컴포넌트, 전체 프레임 등)을 클릭합니다.
- 내보내기 패널 열기: 오른쪽 사이드바에서 “Export” 섹션을 찾아
+아이콘을 클릭합니다. - 내보내기 크기 선택: 이것이 가장 중요한 단계입니다. “Export” 설정에서
1x를 **2x**로 변경합니다. 이는 Figma에 캔버스 크기의 두 배로 렌더링하라고 지시합니다. 로고와 같이 중요한 그래픽의 경우3x를 선택할 수도 있습니다. - 포맷 선택:
- JPG: 사진 및 복잡한 이미지에 최적입니다. 품질을 **80-90%**로 설정하세요.
- PNG: 날카로운 선, 텍스트 또는 투명도가 필요한 그래픽(로고, 아이콘)에 적합합니다.
- SVG: 단순한 로고 및 아이콘에 최적입니다. 벡터 형식이므로 어떤 크기에서도 완벽하게 선명합니다.
- “Export” 클릭: 파일을 저장합니다. 최종 이미지를 사이트에 업로드하기 전에 이미지 압축기와 같은 도구로 압축하는 것을 잊지 마세요.
Photoshop에서 내보내기
Photoshop은 래스터 기반이므로 처음부터 고해상도 문서에서 작업하는 것이 중요합니다.
현대적 방법: “내보내기”
웹 그래픽 작업 흐름에서 권장됩니다: 파일 > 내보내기 > 내보내기....
- 크기 설정: 오른쪽 “이미지 크기” 섹션에서 너비와 높이가 올바른지 확인합니다. 2배 규칙을 따르는 경우, 문서는 이미 예상 표시 크기의 두 배여야 합니다.
- 포맷 선택:
- JPG: “품질” 슬라이더를 사용하세요. 70-85 사이의 값이 품질과 파일 크기 간 최적의 균형을 제공합니다.
- PNG: 투명도가 필요한 이미지에 사용합니다. 제한된 색상 팔레트(단순한 로고 등)의 경우 “작은 파일(8비트)“을 체크하면 파일 크기를 크게 줄일 수 있습니다.
- 색상 공간을 sRGB로 설정: 대화 상자 하단의 “색상 공간”에서 **“sRGB로 변환”**이 체크되어 있는지 확인합니다. 이는 웹 표준 색상 프로파일로, 브라우저에서 색상이 탁해 보이는 것을 방지합니다.
- “모두 내보내기” 클릭: 이미지를 저장합니다.
전통적 방법: “웹용 저장”
이전 Photoshop 버전의 경우: 파일 > 내보내기 > 웹용 저장(레거시).
- 사전 설정 선택: 오른쪽 상단에서 “JPEG 높음” 또는 “PNG-24”와 같은 사전 설정을 선택합니다.
- 품질 조정: JPEG의 경우 “품질” 슬라이더를 사용하세요(70-80 값이 이상적입니다). PNG의 경우 PNG-8(파일 작음, 색상 제한)과 PNG-24(품질 높음, 전체 색상) 중 선택할 수 있습니다.
- 이미지 크기 확인: 오른쪽 하단에서 최종 크기를 확인합니다.
- sRGB 확인: “sRGB로 변환” 옵션이 체크되어 있는지 확인합니다.
- “저장”을 클릭합니다.
항상 2배 크기로 내보내고 sRGB 색상 공간에서 리소스를 적절히 압축하면 흐릿한 이미지를 영원히 작별하고 디자인이 캔버스에서와 동일하게 웹에서 선명하게 보이도록 할 수 있습니다.