html2design (zigae)

html2design은 웹페이지를 스크린샷이 아니라 편집 가능한 Figma 레이어로 옮기는 도구입니다. 계기는 리디자인 킥오프에서 들은 한마디: “지금 화면들 Figma로 받을 수 있어요?” 기존 도구를 먼저 써봤는데, URL만 넣으면 자기네 서버가 렌더해서 가져오는 방식은 세션이 필요한 화면과 localhost를 못 봅니다. 회사 어드민 화면의 DOM이 외부 서버를 경유하는 것도 마음에 걸렸다고 합니다. 그래서 지금 브라우저에 떠 있는 화면을 그대로 읽는 쪽으로 만들었습니다.

원리: Chrome DevTools Protocol의 DOMSnapshot으로 DOM과 계산된 스타일, 레이아웃을 읽어 Figma 노드로 재조립합니다. 픽셀을 베끼는 게 아니라 구조를 옮기는 방식이라 flex와 grid는 Auto Layout으로, 인라인 SVG는 편집 가능한 벡터로 들어옵니다. 재현하는 것: 레이아웃·텍스트(폰트·두께·색·정렬)·이미지·배경·그라디언트·보더(비대칭 두께 포함)·라운드·그림자·투명도·overflow 클리핑·iframe·shadow DOM. 월 5회 무료, 가입·로그인 없음, 무제한 월 $5. 만든 사람은 프론트엔드 개발자 zigae: 테니스 영상에서 랠리만 남기는 OnlyRally도 만들고 있습니다.

메이커로그 「이름에 “figma”가 들어가서 플러그인 심사에서 반려됐습니다」가 붙어 있습니다. 원래 이름이 html2figma였는데 제품명·도메인에 Figma를 쓰면 안 된다는 브랜딩 가이드라인에 걸려 이름 바꾸고 도메인 옮기는 데 하루. 크롬 웹스토어에서도 안 쓰는 권한 요청으로 두 번 반려. Google 로그인이 팝업에서 죽던 문제는 인증 흐름을 서비스 워커로 옮겨 해결. 세 번의 반려를 한 글로 정리해 뒀습니다. 웹 도구 세 개를 비교한 기록도 블로그에 있습니다.

이런 분께 맞아요

• 리디자인을 앞두고 현재 화면을 Figma로 받아야 하는 디자이너·프론트엔드 개발자
• 로그인 뒤 어드민 화면·localhost 개발 화면을 Figma로 옮겨야 하는 팀
• 회사 화면의 DOM을 외부 서버로 보내면 안 되는 보안 환경
• 크롬 확장·Figma 플러그인 심사 반려 사례를 참고하려는 메이커