html2design

이름에 "figma"가 들어가서 플러그인 심사에서 반려됐습니다

플러그인 심사에서 이런 답을 받았습니다.

"Website url does not align with our branding guidelines"

제품 이름이 html2figma였어요. 제품명이랑 도메인에 Figma를 쓰면 안 된다는 규칙이었고, 가이드라인 읽어보니 맞는 얘기라 딱히 반박할 것도 없었습니다. 이름 바꾸고 도메인 옮기고 문서에 박힌 옛 이름 찾아 지우는 데 하루가 갔습니다. 지금 이름이 html2design인 이유고요.

만든 이유는 리디자인 킥오프에서 "지금 화면들 Figma로 받을 수 있어요?" 를 들은 게 시작이었습니다. 그때 웹페이지를 Figma로 옮겨주는 도구 세 개를 실제 페이지에 돌려봤는데, 제일 아쉬웠던 게 로그인 뒤에 있는 화면이었습니다. URL만 넣으면 자기네 서버가 렌더해서 가져오는 방식은 세션이 필요한 화면과 localhost 를 못 봅니다. 회사 어드민 화면의 DOM 이 외부 서버를 경유하는 것도 마음에 걸렸고요.

그때 세 도구를 비교한 기록은 블로그에 정리해 뒀습니다.
https://www.zigae.com/web-to-figma-tools-2026/

결론은 지금 브라우저에 떠 있는 화면을 그대로 읽는 쪽으로 만드는 거였습니다. 스크린샷이 아니라 실제 Figma 노드로 재조립하니까, 프레임과 텍스트와 벡터로 들어옵니다. 간격이나 문구를 그 자리에서 고칠 수 있고요. 스크린샷 위에 주석 다는 것과 실제 레이어를 만지는 건 꽤 다르더라고요.

원리는 픽셀을 베끼는 게 아니라 구조를 옮기는 쪽입니다. Chrome DevTools Protocol로 DOM과 계산된 스타일, 레이아웃을 읽어서 Figma 노드로 재조립합니다. 그래서 flex나 grid는 Auto Layout으로 들어오고, 인라인 SVG는 편집 가능한 벡터가 됩니다.

삽질 하나 더 공유하면, Google 로그인이 한동안 아예 안 됐습니다. 팝업에서 인증 창을 띄우면 창이 열리는 순간 크롬이 익스텐션 팝업을 닫아버리는데, 팝업이 죽으면 그 뒤 코드가 실행되지 않습니다. 에러조차 안 떴어요. 에러를 그릴 컨텍스트가 이미 사라졌으니까. 개발자 도구를 붙여놓으면 팝업이 안 닫혀서 잘 되는 것처럼 보였고, 그래서 한참 헤맸습니다. 결국 인증 흐름을 서비스 워커로 옮겨서 해결했습니다.

심사 얘기가 나온 김에 덧붙이면, 크롬 웹스토어에서도 두 번 반려당했습니다. 둘 다 안 쓰는 권한을 요청하고 있다는 지적이었고요. 호출이 있어도 그 권한이 필요 없을 수 있다는 걸 그때 배웠습니다. 세 번의 반려를 한 번에 정리한 글은 여기 있습니다.
https://www.zigae.com/html2design-review-rejections/

못 하는 것도 있습니다. canvas로 그린 건 못 가져옵니다. 요소 박스만 옵니다. 그라디언트 각도는 근사값이고, 안 깔린 폰트는 Inter로 대체됩니다. 그리고 크롬 확장과 Figma 플러그인을 둘 다 깔아야 동작합니다. 확장이 캡처하고 플러그인이 그리는 구조라 한쪽만으로는 아무것도 안 됩니다. 이게 제일 큰 이탈 지점인 걸 알지만 아직 답을 못 찾았습니다.

월 5회는 무료입니다. 가입도 로그인도 없습니다. 무제한은 월 $5이고 LAUNCH50 코드 넣으면 3개월 반값입니다.

https://html2design.zigae.com/?utm_source=disquiet&utm_medium=community&utm_campaign=launch

깨지는 페이지 URL 주시면 제일 도움 됩니다. 그게 지금 가장 필요한 피드백이라서요.