웹 페이지의 HTML 코드를 복사하여 디자인 툴 피그마(Figma)에 편집 가능한 레이어로 붙여넣을 수 있는 오픈소스 라이브러리 '피짓(Figit)'이 공개되어 개발자와 디자이너 커뮤니티의 주목을 받고 있습니다. 기존에는 HTML 요소를 피그마로 가져오려면 복잡한 플러그인을 설치하거나 수동으로 재구성해야 하는 번거로움이 있었습니다. 피짓은 이러한 과정을 단순화하여, 브라우저에서 렌더링된 HTML을 복사(copy)하고 피그마에 붙여넣기(paste)만 하면 바로 디자인 작업에 활용할 수 있게 합니다.
피짓은 웹 문서 객체 모델(DOM)을 탐색하고 각 노드의 계산된 스타일을 읽어 피그마가 인식하는 클립보드 페이로드로 변환하는 방식으로 작동합니다. 특히 피그마의 클립보드 구조가 공개 문서가 거의 없는 내부적인 방식임에도 불구하고, 수많은 시행착오를 거쳐 작동 가능한 수준으로 구현해냈다는 점이 인상적입니다. 현재는 편집 가능한 HTML 요소를 피그마 레이어로 변환하는 핵심 기능을 제공하며, 향후에는 원클릭 크롬(Chrome) 확장 프로그램과 팀 단위 사용을 위한 호스팅 API(Application Programming Interface)도 출시할 예정입니다.
이 라이브러리의 등장은 개발 워크플로우에 상당한 변화를 가져올 잠재력을 지니고 있습니다. 디자이너는 실제 웹 페이지의 요소를 피그마로 가져와 빠르게 디자인 시스템을 구축하거나 기존 디자인을 개선할 수 있으며, 개발자는 디자인 시안을 실제 코드와 비교하며 일관성을 유지하기가 훨씬 쉬워집니다. 이는 디자인과 개발 간의 간극을 줄이고 협업 효율성을 극대화하는 데 기여할 것입니다. 아직 초기 단계이지만, 웹 UI(User Interface) 디자인 및 개발 프로세스를 혁신할 수 있는 중요한 도구로 자리매김할 가능성이 큽니다.