[Figma 꿀팁] WebP 파일 바로 추출하는 플러그인 추천! 이미지 용량 줄이고 웹사이트 속도 높이기

Figma에서 바로 WebP로 추출하는 꿀팁 공유합니다.

디자인 작업을 하다보면 완성된 이미지를 웹사이트나 블로그에 업로드해야 할 일이 정말 많습니다. 그런데 문제는 JPG나 PNG 파일만 쓰기에는 용량이 부담 스럽고 또 고화질의 이미지를 업로드를 다량으로 업로드 할 수록 페이지 로딩 속도에도 영향을 준다는 점이죠.

 

특히 요즘은 백오피스 관리자 작업을 할 때가 많은데, 클라이언트 측에서 WebP 파일로 꼭 업로드를 해달라는 요구가 있습니다. 이럴 땐 어쩔 수 없이 JPG로 추출한 후, 다시 WebP로 변환하는 번거로운 과정을 거쳐야 했습니다. 그러다 발견한 것이 바로 Figma에서 직접 WebP 파일로 저장할 수 있는 플러그인입니다.

 

---

클릭 몇 번이면 끝나는 WebP 추출, 작업 효율이 확 올라갑니다.

이 플러그인을 스면 디자인한 화면을 그대로 WebP 포맷으로 추출할 수 있습니다. 기존처럼 JPG 로 저장 > 툴 켜서 변환 > 또 다시 저장하는 단계가 사라졌습니다.  무엇보다 마음에 들었던 것은 자동 압축 기능입니다. 디자인 요소를 파트별로 나눠서 저장할 수 있고, 필요한 부분만 골라서 WebP로 뽑아낼 수 있어 상황에 맞게 유연하게 사용 할 수 있습니다.

 

---

Image Compressor

실제 작업 예시

최근 백오피스 관리자를 활용하여 상세페이지를 업로드하는 일이 있었는데, 클라이언트가 업로드 시 꼭 WebP 파일을 사사용해달라고 요청이 들어왔습니다. 처음엔 또 변환 작업을 해야 하나 싶었지만, 이 플러그인 덕분에 모든 이미지를 빠르게 WebP로 저장해서 전달할 수 있었습니다. 덕분에 피드백도 바르게 받고, 전체 일정도 앞당길 수 있었습니다.

---

webp 파일 스케일, 퀄리티 조정 가능, 각각의 프레임으로 내보내기 가능

블로그 운영자나 웹디자이너라면 WebP는 선택이 아닌 필수

요즘은 개인 블로그, 포트폴리오 사이트, 제품 상세 이미지 등 이미지 사용량이 많은 콘텐츠가 많아졌죠. 이럴 때 WebP를 사용하면 로딩 속도가 훨씬 빨라지고 방문자의 이탈률도 줄어듭니다. 저 역시 블로그 업로드 시 WebP 파일을 사용하기 시작하면서 페이지 로딩 속도가 훨씬 빨라지고, 이미지 품질은 그대로 유지할 수 있어 만족도가 높았습니다. 구글에서도 WebP 사용을 추천하는 만큼, SEO 측면에서도 도움이 됩니다.

---

아래와 같은 경우 사용하면 좋습니다.

- Figma에서 이미지 작업을 많이 하시는 분

- WebP 변환을 수작업으로 하고 있는 디자이너

- 백오피스, 관리자 페이지용 디자인 작업이 많은 분

- 블로그, 웹사이트의 로딩 속도를 줄이고 싶은 분

 

---

 

WebP는 트렌드가 아니라 표준 포맷입니다. 디자인의 완성도는 물론이고, 작업 효율과 사용자 경험까지 고려해서 Figma에서 WebP로 추출하는 것은 중요합니다. 저처럼 아직까지도 JPG나 PNG 파일을 여러번에 거쳐 WebP 파일로 변환하고 있다면 꼭 한 번 써보시길 추천드립니다. 작업물이 훨씬 가벼워지고 사용자 경험에도 큰 영향을 미칩니다.