웹페이지를 피그마 레이어로 그대로 옮길 수 있다고?

디자인 벤치마킹 해보신분들이라면 아시는 부분일텐데요. 참고 할만한 화면을 일단 전체 혹은 부분 캡처해서 피그마에 가져다 두죠. 그런데 그렇게 가져온 건 그냥 통이미지예요. 참고는 되지만, 그 위에서 바로 색을 바꾸거나 버튼을 옮길 수는 없어요. 결국 옆에 띄워두고 새로 그리게 되죠.

만약 그 캡처가 처음부터 편집 가능한 레이어로 들어온다면 어떨까요? 참고 화면이 곧바로 '변형의 출발점'이 돼요. 0부터 그리는 대신, 가져온 레이어를 내 방향대로 수정하면서 시작할 수 있죠. 2026년 6월, 디자인 도구들이 향하는 곳이 바로 여기예요.

통 이미지 캡쳐본을 편집 가능한 레이어

이걸 해주는 크롬 확장 프로그램이 나왔어요. 대표적인 게 Export to Figma와 피그마 공식 확장 두 가지인데, 둘 다 웹페이지를 피그마에 편집 가능한 레이어로 옮겨줘요. 스크린샷도 아니고, 손으로 다시 그리는 것도 아니에요. 폰트·색·간격·구조가 화면에 보이는 그대로 레이어로 떨어져요.

이 흐름의 핵심은 "통이미지처럼 납작하게 굳어버린 결과물을 다시 편집 가능한 레이어로 되살린다"는 점이에요. 포토샵 플러그인으로 들어간 힉스필드(Higgsfield, AI로 영상·이미지를 만드는 생성 도구)의 Expand 기능도 평면 이미지를 편집 가능한 레이어로 분해하는 같은 방향을 보여줘요. 도구는 다르지만 향하는 곳은 같은 셈이죠.

이름이 비슷해서 헷갈리기 쉬운데, 두 확장은 다른 제품이에요. Export to Figma는 외부 개발사가 만든 완전 무료 확장이고, 피그마 공식 확장은 피그마 회사가 직접 만든 거예요. 가격과 쓰임새가 다른데, 먼저 무료인 Export to Figma부터 살펴볼게요.

Export to Figma로 레이아웃 가져오기

Export to Figma는 웹페이지를 피그마의 편집 가능한 레이어로 옮겨주는 무료 크롬 확장 프로그램이에요.

데스크톱·태블릿·모바일 등 여러 화면 크기(뷰포트) 프리셋을 제공해요. 경쟁사 화면 뜯어보기, 클라이언트 웹사이트 리디자인, 실제 운영 중인 사이트에서 디자인 시스템 추출하기, 스타일 가이드 만들기 같은 작업에 쓰여요. 가져온 레이어를 그대로 베끼는 게 아니라, 내 방향대로 바꿔나가는 출발점으로 쓰는 거죠.

가장 큰 강점은 완전 무료라는 점이에요. 사용 횟수 제한이나 워터마크, 유료 전환 압박 없이 모든 기능을 써요. 공개된 웹사이트라면 URL만 있으면 캡처가 되고, AI로 빠르게 생성한 화면을 곧바로 피그마로 옮기는 흐름에 잘 맞아요.

Export to Figma를 직접 코워크에디터 민지가 직접 사용해봤어요

레이아웃을 그대로 사용하기 위한 목적보다는, 커뮤니케이션 목적에 더 적합해보여요.
AI 바이브코딩(AI로 코딩해 앱을 만드는 방식)으로 뽑은 프로토타입을 피그마로 가져와서, 디자인 시스템으로 정리하거나 이해관계자들에게 보여줄 시안으로 다듬을 때 유용해요.

Figma 공식 확장프로그램

그럼 피그마가 직접 만든 공식 확장은 뭐가 다를까요? 공식 크롬 확장도 웹 캡처라는 같은 일을 해요. 웹페이지나 페이지의 특정 요소를 캡처해서 피그마에 편집 가능한 레이어로 가져와요. 실제 운영 중인 화면을 캔버스로 끌어와 다음 버전을 구상하거나, 피그마 안에서 바로 이어 작업할 수 있죠.

다만 이 웹 캡처 기능은 베타 단계이고, 피그마 유료 플랜에서만 열려요. 확장 설치 자체는 무료이고 구글 캘린더 연동 같은 기존 기능은 모든 요금제에서 쓸 수 있지만, 웹페이지를 레이어로 가져오는 캡처 도구는 유료 플랜 사용자에게만 보여요.

또 베타라서 아직 빠진 부분이 있어요. 가져온 요소는 피그마의 일반 레이어로 들어오는데, 디자인 시스템의 컴포넌트나 변수와 자동으로 연결되지는 않아요. 이 연결 기능은 베타 기간 중에 추가될 예정이에요. 복잡한 스크롤 애니메이션이나 특수하게 그려진 사이트는 깔끔하게 안 잡힐 수도 있고요. 전체 페이지보다 필요한 섹션만 캡처하는 편이 더 깨끗할 때도 있어요.

정리하면, 피그마 유료 플랜을 이미 쓰고 있고 실제 제품 화면을 빠르게 캔버스로 가져오고 싶다면 공식 확장이 자연스러운 선택이에요.

Figma 공식 확장프로그램도 코워크에디터 민지가 직접 사용해봤어요.

1️⃣ 크롬 확장프로그램를 설치

2️⃣ 네이버 웹페이지를 캡쳐 -> 상단에 피그마 캡쳐본을 확인할 수 있어요 -> Copy all 선택

3️⃣ 피그마로 Paste -> 네이버 웹페이지가 레이어로 들어온 것을 확인할 수 있어요

캡쳐한 통 이미지와 비슷한 검색창을 만들고 싶다 했을때, 이전에는 사이즈를 직접 재고, 텍스트 입력 도형추가, radius 설정, 컬러설정 직접 새로 만들어야했죠
이제는 레이어로 들어오니 번거로운 수 작업이 줄었어요 👍🏻

Export to Figma vs 피그마 공식 확장, 핵심 차이

앞의 두 섹션을 나란히 두면 어디서 갈리는지 한눈에 보여요.

이 둘 말고 html.to.design(div RIOTS 제작)도 자주 비교돼요. 더 오래되고 검증된 도구라는 평가를 받고, 특히 로그인이 필요한 비공개 페이지 캡처에 강해요. 관리자 화면이나 내 계정 안쪽 화면처럼 URL만으로는 못 들어가는 페이지를 가져와야 한다면 이쪽이 나아요. 클립보드 복사 기능을 쓰면 피그마 플러그인 없이도 캡처한 화면을 바로 붙여넣을 수 있어요.

URL만 넣는 플러그인과 브라우저에서 캡처하는 확장은 뭐가 다를까

사실 웹페이지를 피그마로 가져오는 것 자체는 새로운 일이 아니에요. html.to.design 같은 도구는 예전부터 피그마 플러그인 안에서 주소(URL)를 붙여넣는 방식으로 이 일을 해왔어요. 피그마 안에서 플러그인을 켜고 주소를 넣으면 그 페이지가 레이어로 들어오는 거죠. 그럼 이번에 화제가 된 크롬 확장들과는 뭐가 다를까요? 핵심은 "어디서 화면을 잡느냐"예요.

피그마 플러그인 방식은 주소만 넣으면 되니 간편해요. 누구나 들어갈 수 있는 공개 사이트라면 이걸로 충분하죠. 처음부터 다 그리지 않고 기존 사이트를 출발점으로 삼을 수 있어요. 다만 주소로 접근되는 페이지만 가져올 수 있다는 게 한계예요.

크롬 확장 방식은 브라우저에서 지금 보고 있는 화면을 그대로 잡아요. 그래서 주소만으로는 닿지 않는 화면까지 캡처할 수 있어요. 로그인해야 보이는 페이지, 내 계정 안쪽 화면, 드롭다운을 펼친 특정 상태 같은 것들요. URL만 넣는 플러그인 방식으로는 어려운 부분이에요. html.to.design이 플러그인과 크롬 확장을 둘 다 두는 이유도 여기에 있어요. 공개 사이트는 플러그인으로, 로그인 뒤 화면은 확장으로 나눠 쓰는 거죠.

정리하면 이래요. 공개된 사이트를 가져올 거면 플러그인이든 확장이든 상관없어요. 하지만 로그인 뒤에야 보이는 화면이나 특정 상태가 필요하면 브라우저에서 직접 잡는 크롬 확장이 답이에요. 단, 확장도 인터넷에 공개된 주소가 있는 페이지여야 하고, 내 컴퓨터에서만 도는 화면(localhost)은 따로 설정이 필요해요.

디자인 도구 시장은 어디로 가고 있나

도구 하나하나의 차이를 넘어 한 발 물러서 보면, 왜 이런 확장이 한꺼번에 쏟아지는지가 보여요. 웹→피그마 확장이 2026년 들어 화제가 된 건 우연이 아니에요. AI가 화면을 만들어주는 속도가 빨라질수록, 그 결과물을 다시 손봐서 내 디자인으로 바꾸는 작업이 더 자주 생겨요. 실제 운영 중인 화면을 디자인 도구로 가져와 다음 버전을 구상하는 흐름도 일상이 됐고요.

방향은 분명해요. "납작한 이미지나 코드를 다시 편집 가능한 레이어로 되살리는 것"이에요. 포토샵의 힉스필드 Expand 플러그인, 피그마의 웹 캡처 확장, Export to Figma 같은 무료 서드파티 도구는 모두 같은 질문에 답하고 있어요. "완성된 것처럼 보이는 화면을, 다시 만질 수 있는 재료로 되돌릴 수 있을까?"

참고 화면을 납작한 이미지가 아니라 편집 가능한 레이어로 가져올 수 있으면, 디자이너의 출발선이 0이 아니라 한참 앞으로 당겨져요. 2026년 6월 기준으로 디자인 도구 시장은 그 출발선을 앞으로 당기는 방향으로 움직이고 있어요.

한 번 더, 빠르게 짚고 갈게요

Q. Export to Figma와 피그마 공식 확장은 같은 건가요? A. 아니에요. Export to Figma는 외부 개발사가 만든 완전 무료 크롬 확장이고, 피그마 공식 확장은 피그마 회사가 직접 만든 거예요. 이름이 비슷해 헷갈리지만 다른 제품이에요. 공식 확장의 웹 캡처 기능은 유료 플랜에서만 쓸 수 있어요.

Q. AI로 만든 앱 화면을 피그마로 가져올 때 어떤 확장이 나을까요? A. Export to Figma가 Claude Code, Lovable, Bolt, Vercel 같은 AI 도구로 만든 앱 화면 캡처에 강해요. 완전 무료이고 공개 URL만 있으면 바로 캡처돼서, AI 바이브코딩으로 만든 프로토타입을 빠르게 피그마로 옮기기에 좋아요.

Q. 로그인이 필요한 비공개 페이지는 어떻게 캡처하나요? A. html.to.design 같은 도구가 비공개 페이지 캡처에 강해요. 로그인한 상태에서 페이지를 캡처할 수 있고, 클립보드 복사 기능을 쓰면 피그마 플러그인 없이도 바로 붙여넣을 수 있어요. 피그마 공식 확장도 유료 플랜이라면 비슷한 작업이 가능해요.

Q. 가져온 레이어를 그대로 베껴 쓰는 건가요? A. 그렇게 쓰는 게 목적이 아니에요. 캡처한 화면을 참고만 하던 걸, 편집 가능한 레이어로 가져와 내 방향대로 바꿔나가는 출발점으로 쓰는 거예요. 0부터 그리는 대신 레이아웃이 잡힌 상태에서 수정하며 시작할 수 있어요.

Q. Export to Figma는 정말 무료인가요? A. 네, 완전 무료예요. 사용 횟수 제한이나 워터마크 없이 모든 기능을 쓸 수 있어요. 공개된 웹사이트라면 URL만 있으면 캡처가 가능해요.