# html2design (zigae)

> 웹페이지 Figma 레이어 변환. 스크린샷이 아니라 편집 가능한 레이어로 바꾸며, 로그인 뒤 화면과 localhost도 됩니다. flex·grid는 Auto Layout으로 옮기고 월 5회 무료입니다.

- 페이지: https://dreamboat.kr/discover/html2design
- 공식 사이트: https://html2design.zigae.com
- 분야: 디자인, 개발도구
- 쓰는 환경: 웹
- 상태: 운영 중
- 등재: 2026-09-18 · 마지막 갱신: 2026-09-28


## 소개

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 플러그인 심사 반려 사례를 참고하려는 메이커

## 인용

이 소개는 Dreamboat(드림보트)이 공식 사이트를 직접 확인해 작성했습니다.
출처(https://dreamboat.kr/discover/html2design)를 명시하면 인용 가능합니다. 서비스 자체의 권리는 각 제작자에게 있습니다.
전체 목록: https://dreamboat.kr/llms.txt · 전문: https://dreamboat.kr/llms-full.txt