디자인 작업을 하다 보면 이미 존재하는 웹페이지를 피그마 안으로 옮겨야 하는 순간이 자주 온다. 기존 서비스를 리디자인하거나, 경쟁사 화면을 참고 자료로 정리하거나, 사내 관리자 도구의 UI를 손보려 할 때가 그렇다. 지금까지의 흔한 방법은 스크린샷을 찍어 피그마에 이미지로 붙여넣는 것이었지만, 이렇게 얻은 결과물은 하나의 납작한 그림일 뿐이라 색상 하나, 텍스트 한 줄을 고치려 해도 처음부터 다시 그려야 했다. 피그미믹(Figmimic)은 바로 이 지점을 겨냥한 작은 도구다.
피그미믹은 별도의 설치형 프로그램이나 플러그인이 아니라 브라우저 북마크바에 끌어다 놓는 '북마클릿'이다. 원하는 페이지를 브라우저에서 연 상태로 이 북마클릿을 클릭하면 현재 보이는 화면이 피그마 프레임 형태로 캡처되어 클립보드에 담긴다. 그다음 피그마를 열어 붙여넣기만 하면 된다. 핵심은 붙여넣어진 결과가 스크린샷 이미지가 아니라 편집 가능한 레이어라는 점이다. 텍스트, 도형, 배치 요소들이 개별 객체로 들어오기 때문에 곧바로 수정 작업을 이어갈 수 있다.
인증 뒤에 숨은 화면도 담는다
피그미믹이 내세우는 차별점은 '브라우저에서 볼 수 있는 페이지라면 무엇이든' 대상으로 삼는다는 것이다. 로그인 장벽 뒤에 있는 대시보드, 관리자 패널, 사내 애플리케이션처럼 외부에서 URL만으로 접근할 수 없는 화면도 포함된다. URL을 입력받아 서버 쪽에서 페이지를 렌더링하는 방식의 캡처 도구들은 인증이 필요한 화면에 접근하지 못하는 한계가 있는데, 피그미믹은 이미 사용자의 브라우저 세션에서 렌더링된 화면을 그대로 읽어 오기 때문에 이 문제를 우회한다. 실무에서 내부 도구의 UI를 개선하려는 팀에게는 이 지점이 특히 유용하다.
동작 원리는 의외로 단순하면서도 영리하다. 피그미믹은 피그마가 자체적으로 쓰는 캡처 스크립트인 capture.js를 북마클릿 안에 그대로 심어 활용한다. 즉 웹페이지를 피그마 오브젝트로 변환하는 무거운 작업을 새로 구현한 것이 아니라, 피그마가 이미 갖추고 있는 변환 엔진을 빌려 쓰는 구조다. 이 덕분에 도구 자체는 가볍게 유지되면서도 붙여넣기 결과의 호환성은 피그마의 기준을 따르게 된다. 제작자는 더 자세한 배경을 별도의 블로그 글에서 설명하고 있다.
실무에서 무엇이 달라지나
실무자 입장에서 이 도구의 가치는 '재작업 시간의 절약'으로 요약된다. 기존 화면을 출발점으로 삼아야 하는 리디자인, 컴포넌트 정리, UI 감사 같은 작업에서 화면을 픽셀 단위로 다시 그리는 수고를 줄여 준다. 특히 문서화되지 않은 레거시 관리자 화면처럼 원본 디자인 파일이 남아 있지 않은 경우, 현재 프로덕션 화면 자체가 곧 편집 가능한 초안이 된다는 점은 상당한 이점이다. 설치가 필요 없고 북마크바에 한 번 등록해 두면 되는 낮은 진입 장벽도 팀 단위 도입을 쉽게 만든다.
다만 기대치는 현실적으로 잡을 필요가 있다. 웹페이지의 구조를 피그마 레이어로 옮기는 변환은 본질적으로 완벽할 수 없어, 복잡한 레이아웃이나 동적으로 그려지는 요소, 캔버스 기반 그래픽 등은 의도한 대로 분리되지 않을 가능성이 있다. 원문은 결과물의 정확도에 대한 구체적 수치나 지원 범위를 제시하지 않으므로, 실제 화면에서 어느 정도 손질이 필요한지는 직접 검증해 봐야 한다. 붙여넣은 레이어가 편집 가능하다는 것과, 그 편집이 항상 수월하다는 것은 별개의 문제다.
또 하나 눈여겨볼 점은 이 도구가 피그마의 내부 스크립트에 의존한다는 사실이다. 공식적으로 공개·보장된 인터페이스가 아니라 피그마가 자체 용도로 쓰는 구성 요소를 활용하는 방식이므로, 피그마 쪽 변경에 따라 어느 순간 동작이 멈출 여지가 있다. 프로덕션 워크플로의 핵심으로 삼기보다는 초안 확보를 빠르게 해 주는 보조 도구로 접근하는 편이 안전하다. 여기에 더해 인증 뒤 화면까지 캡처할 수 있다는 특성은, 다루는 화면에 민감한 내부 정보가 담길 수 있다는 뜻이기도 하다. 캡처한 결과를 어디에 붙여넣고 누구와 공유하는지에 대해서는 조직의 보안 기준을 그대로 적용하는 것이 바람직하다.