홈페이지를 제작하거나 디자인 레퍼런스를 분석하다 보면 “이 화면을 피그마에서 바로 수정할 수 있으면 좋겠다.”라는 생각을 한 번쯤 해보셨을 것입니다.
예전에는 참고하고 싶은 홈페이지를 캡처한 뒤 피그마에 넣고, 버튼과 이미지, 텍스트를 하나씩 다시 만들어야 했었습니다.
시간도 오래 걸렸고, 레이아웃을 다시 만드는 과정도 생각보다 번거로웠습니다.
그러다 알게 된 것이 html.to.design입니다.
html.to.design은 현재 보고 있는 웹페이지를 Figma 디자인 파일로 가져올 수 있는 크롬 확장 프로그램입니다.
물론 100% 완벽하게 변환되는 것은 아니지만, 레이아웃을 빠르게 분석하거나 디자인를 수정해야 하는 경우에는 작업 시간을 크게 줄여주는 도구입니다.
이번 글에서는 html.to.design 설치 방법부터 사용법, 그리고 실무에서 어떻게 활용하면 좋은지 자세히 소개해 보겠습니다.
html.to.design이란?
html.to.design은 웹페이지의 HTML 구조를 분석해 Figma에서 편집 가능한 형태로 변환해 주는 도구입니다.
웹사이트를 이미지로 가져오는 것이 아니라 레이어 구조를 최대한 유지한 상태로 가져오기 때문에 디자인 수정이 가능합니다.
다음과 같은 작업에서 활용도가 높습니다.
- 홈페이지 레퍼런스 분석
- UI 디자인 참고
- 랜딩페이지 리디자인
- 상세페이지 기획
- Figma 시안 제작
특히 디자인 작업을 자주 하는 디자이너에게 매우 유용한 도구입니다.
설치 방법
html.to.design을 사용하려면 크롬 확장 프로그램과 Figma 플러그인을 함께 설치해야 합니다.
chrome 웹 스토어 바로 가기 →크롬 웹 스토어에서 설치
크롬 웹 스토어에서 html.to.design을 검색합니다.
공식 확장 프로그램을 선택한 후 Chrome에 추가를 클릭합니다.
Figma 플러그인 설치
크롬 확장 프로그램만 설치해서는 사용할 수 없습니다.
Figma Community에서 html.to.design 플러그인을 함께 설치해야 합니다.
두 가지가 연결되어야 웹페이지를 Figma로 가져올 수 있습니다.
로그인 및 연결
필요한 경우 계정을 연결한 후 Figma와 연동을 완료합니다.
설정은 처음 한 번만 하면 됩니다.
기본 사용 방법
분석할 홈페이지 열기
먼저 Figma로 가져오고 싶은 홈페이지를 엽니다.
페이지가 모두 로딩된 상태에서 실행하는 것이 좋습니다.
html.to.design 실행
브라우저 상단의 html.to.design 아이콘을 클릭합니다.
가져올 페이지를 선택한 뒤 변환을 시작합니다.
Figma에서 불러오기
Figma를 실행한 후 html.to.design 플러그인을 실행하면 변환된 화면을 가져올 수 있습니다.
레이어가 생성되며 필요한 부분을 수정하거나 편집할 수 있습니다.
어떤 경우에 활용하면 좋을까요?
홈페이지 리디자인
기존 홈페이지를 새롭게 개편해야 하는 경우가 있습니다.
레이아웃을 처음부터 다시 만드는 대신 html.to.design으로 가져오면 수정 작업이 훨씬 수월합니다.
UI 분석
좋은 UI를 발견했을 때 피그마에서 직접 구조를 살펴볼 수 있습니다.
여백,
버튼,
카드,
콘텐츠 배치 등을 분석하는 데 도움이 됩니다.
와이어프레임 제작
클라이언트와 회의할 때 참고 사이트를 기반으로 빠르게 와이어프레임을 만드는 경우에도 활용할 수 있습니다.
상세페이지 기획
상세페이지의 콘텐츠 흐름을 참고하고 새로운 기획안을 만들 때도 도움이 됩니다.
레이아웃을 빠르게 수정하며 다양한 아이디어를 적용해 볼 수 있습니다.
html.to.design의 장점
직접 사용하면서 가장 좋았던 점은 레이아웃을 처음부터 다시 만들지 않아도 된다는 것이었습니다.
예전에는 참고 사이트를 캡처한 뒤 피그마에서 하나씩 다시 그려야 했습니다.
하지만 html.to.design을 사용한 이후에는 기본 구조를 가져온 뒤 필요한 부분만 수정하면 되기 때문에 작업 시간이 크게 줄었습니다.
특히 초기 시안을 빠르게 만들어야 하는 프로젝트에서 활용도가 높았습니다.
사용할 때 주의할 점
100% 동일하게 변환되지는 않습니다.
웹사이트마다 사용하는 기술이 다르기 때문에 일부 요소는 정확하게 변환되지 않을 수 있습니다.
복잡한 애니메이션이나 인터랙션은 지원되지 않는 경우도 있습니다.
폰트가 다르게 표시될 수 있습니다.
웹폰트가 설치되어 있지 않으면 다른 폰트로 변경되어 보일 수 있습니다.
필요한 폰트는 별도로 설치하는 것이 좋습니다.
참고 자료로 활용하는 것이 좋습니다.
가져온 디자인를 그대로 사용하는 것이 아니라 구조를 분석하고 새로운 디자인를 만드는 참고 자료로 활용하는 것을 추천드립니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont
사용된 폰트를 함께 분석할 수 있습니다.
ColorZilla
브랜드 컬러를 추출해 피그마에 그대로 적용할 수 있습니다.
CSS Peeper
버튼 스타일과 여백까지 함께 분석할 수 있습니다.
Page Ruler
레이아웃 크기를 픽셀 단위로 확인할 수 있습니다.
GoFullPage
변환 전 원본 페이지를 함께 저장해 비교하기 좋습니다.
실무 활용 예시
새로운 홈페이지 프로젝트를 시작하면 저는 먼저 참고 사이트를 선정합니다.
그다음 Wappalyzer로 어떤 플랫폼으로 제작되었는지 확인하고, WhatFont와 ColorZilla를 이용해 폰트와 컬러를 분석합니다.
이후 CSS Peeper와 Page Ruler를 활용해 버튼 스타일과 레이아웃을 확인한 뒤, html.to.design으로 페이지를 Figma에 가져옵니다.
마지막으로 GoFullPage를 이용해 원본 화면도 함께 저장해 비교하면서 디자인 방향을 정리합니다.
이렇게 작업하면 처음부터 모든 화면을 다시 만드는 시간을 줄일 수 있었고, 기획과 디자인 개선에 더 많은 시간을 투자할 수 있었습니다.
경험 나눔
예전에는 참고 사이트를 피그마에서 다시 만드는 작업이 당연하다고 생각했었습니다.
하지만 프로젝트가 많아질수록 반복 작업에 많은 시간을 사용하고 있다는 것을 느끼게 되었습니다.
html.to.design을 사용한 이후에는 레이아웃을 빠르게 가져와 필요한 부분만 수정하는 방식으로 작업 흐름이 바뀌었습니다.
물론 완벽하게 변환되는 것은 아니지만, 초기 시안을 만드는 속도는 확실히 빨라졌습니다.
무엇보다 반복적인 작업이 줄어들면서 디자인 자체를 고민하는 시간이 늘어났고, 프로젝트의 완성도도 조금씩 높아졌습니다.
지금도 홈페이지를 분석하거나 새로운 디자인를 기획할 때 자주 사용하는 도구 중 하나입니다.
마무리
html.to.design은 웹사이트를 그대로 복사하는 도구가 아니라 좋은 디자인를 빠르게 분석하고 새로운 아이디어를 발전시키기 위한 실무 도구입니다.
홈페이지 제작이나 UI 디자인, 상세페이지 기획처럼 피그마를 자주 사용하는 디자이너라면 작업 시간을 줄이고 생산성을 높이는 데 많은 도움이 될 것입니다.
다음 글에서는 지금까지 소개한 크롬 확장 프로그램과 이어지는 피그마 플러그인 추천 TOP 10을 통해 디자이너들이 자주 사용하는 플러그인을 소개해 보겠습니다.
