피그마, 웹페이지를 편집 가능한 레이어로 변환하는 크롬 확장 프로그램 공개

웹사이트 디자인을 참고하거나 벤치마킹할 때, 브라우저 화면을 캡처해 피그마에 얹어두고 폰트 크기와 여백을 하나하나 측정하며 다시 그리는 작업은 디자이너들에게 익숙한 고역이었습니다.

피그마가 이 번거로운 반복 작업을 없애기 위한 공식 크롬 확장 프로그램을 내놓았습니다. 실제 브라우저에서 동작 중인 웹페이지를 캡처해 편집 가능한 피그마 레이어로 직접 변환해 주는 기능입니다.

캡처와 수작업 대신 바로 편집하는 캔버스

지금까지 웹 화면을 피그마로 가져오려면 캡처 이미지를 밑바탕 삼아 일일이 덧그리거나, 완성도가 들쑥날쑥한 타사 플러그인을 활용해야 했습니다. 이런 도구들은 텍스트가 깨진 벡터로 변환되거나 레이어 계층이 엉망이 되기 일쑤였습니다.

이번 피그마 공식 확장 프로그램은 보다 직접적인 방식을 취합니다. 크롬 웹스토어에서 확장 프로그램을 설치하고 피그마 계정으로 로그인하기만 하면 브라우징 도중 즉시 작동시킬 수 있습니다.

단순히 평면 이미지를 저장하는 것이 아니라, 웹페이지의 레이아웃을 피그마의 네이티브 레이어로 파싱해 가져옵니다. 텍스트, 박스 구조, 배치가 편집 가능한 상태로 유지되므로, 처음부터 레이아웃을 다시 짤 필요 없이 가져온 즉시 문구를 수정하거나 요소를 재배치할 수 있습니다.

경쟁사 서비스 분석, 웹 리뉴얼 기획, 레퍼런스 수집 등 다양한 실무 과정에서 실제 웹에 배포된 화면을 손쉽게 자신의 프로젝트로 옮겨올 수 있게 된 셈입니다.

유료 플랜 대상의 베타 서비스

다만 모든 사용자가 지금 바로 쓸 수 있는 것은 아닙니다.

피그마의 안내에 따르면 이 기능은 현재 베타 단계로, 유료 플랜 사용자에게만 우선 제공됩니다. 무료 플랜 사용자들이 이용하기까지는 다소 시간이 걸릴 것으로 보입니다.

또한 복잡한 반응형 중단점이나 동적 스크립트, 다단 중첩 스타일이 적용된 웹페이지를 피그마 레이어로 옮겨올 때 스타일 누락 없이 얼마나 정교하게 복원해 낼지는 실제 프로덕션 환경에서의 검증이 더 필요합니다.

왜 중요한가

디자이너들에게 화면 복각 작업은 가장 시간 소모가 크면서도 창의적이지 않은 일이었습니다. 클릭 한 번으로 편집 가능한 원형을 확보할 수 있다면, 실제 디자인 고민에 투입할 수 있는 시간이 크게 늘어납니다. 유료 플랜 사용자라면 바로 업무에 도입해 볼 가치가 충분하다고 봅니다.

업계 차원에서도 피그마의 행보는 매우 영리합니다. 그동안 시장에는 'HTML을 피그마로 변환'해 주던 여러 서드파티 툴이 존재했지만, 완성도 편차가 심했습니다. 피그마가 이를 공식 도구로 흡수하면서 외부 유틸리티에 대한 의존도를 낮추고 플랫폼 내 락인 효과를 한층 강화했습니다.

그동안 디자인 툴 생태계는 피그마 디자인을 웹 코드로 내보내는 데 집중해 왔습니다. 이번 기능은 반대로 실제 웹의 코드를 피그마 캔버스로 되돌려놓는 흐름을 완성합니다. 디자인과 실제 서비스 사이의 간극을 좁히는 의미 있는 시도입니다.