어떤 웹 페이지든
편집 가능한 피그마 레이어로
텍스트도 색상도 Auto Layout도 컴포넌트도 전부 진짜라서 직접 수정할 수 있습니다. 스크린샷이 아니에요. 로그인해야 보이는 화면까지 담기고, 모든 처리는 내 컴퓨터 안에서 끝납니다. 아무것도 업로드되지 않아요.
둘 다 필요해요. 확장이 화면을 담고, 피그마 플러그인이 붙여넣습니다. 둘 다 무료고 1분이면 끝나요.
사용 방법
보이는 그대로 캡처
피그마용 복사
플러그인 설치 후 붙여넣기
다른 도구가 닿지 못하는 페이지를 위해 만들었습니다
Snapture는 지금 브라우저에 떠 있는 화면을 그대로 읽습니다. 눈에 보이면 담을 수 있어요 — 로그인 뒤의 대시보드, 사내 어드민, 열어 둔 드로어와 팝오버, 웹컴포넌트와 iframe까지.
로그인 페이지
캡처는 로그인된 탭 안에서 실행돼서, 사내 도구나 유료 대시보드, 스테이징 사이트가 화면에 보이는 그대로 변환됩니다.
픽셀 보증 Auto Layout PRO
플렉스와 그리드 레이아웃이 진짜 Auto Layout으로 변환됩니다. 단, 피그마 엔진이 모든 요소를 0.5px 이내로 똑같이 배치할 수 있을 때만요. 그렇지 않으면 정확한 절대좌표로 남깁니다. 어느 쪽이든 틀어지지 않아요.
아이콘도 그대로 담깁니다
CSS 마스크 아이콘, SVG 스프라이트, 아이콘 폰트 — 변환기가 흔히 놓치는 세 가지 방식을 Snapture는 전부 처리합니다.
차트, 지도, 3D
WebGL 캔버스와 외부 embed는 어떤 도구도 레이어로 만들 수 없습니다. Snapture는 회색 박스 대신 딱 그 영역만큼의 선명한 스크린샷을 채워 넣고, 같은 출처의 iframe은 한발 더 나아가 진짜 레이어로 변환합니다.
컴포넌트 & 스타일 PRO
반복되는 카드는 인스턴스를 가진 컴포넌트가 됩니다. 자주 쓰인 서체와 색상은 로컬 스타일로 정리되고, 사이트가 CSS 변수로 정의한 색은 피그마 변수로 들어옵니다 — 이름도 사이트가 쓰던 그대로, #2D7BFF가 아니라 brand-primary로요.
파일 없이 클립보드로
캡처하고 붙여넣으면 끝입니다. 파일 저장은 선택이에요 — 캡처는 클립보드에 실려 플러그인으로 바로 가고, 서버는 거치지 않습니다.
일괄 캡처 PRO
URL을 붙여넣거나 사이트맵에서 불러오면 한 번에 최대 30개 페이지를 차례로 열어 담습니다.
PRO표시된 기능은 무료 캡처 5회에 전부 포함돼요. 카드도, 가입도 필요 없습니다. Pro는 횟수 제한만 없앱니다.
가이드
기능 목록이 아니라 실제 캡처와 실제 깨짐에서 나온 글입니다.
임포트한 뒤 Auto Layout이 어긋나는 이유
플렉스박스와 피그마 Auto Layout은 닮았지만 다른 시스템입니다. 어디서 어긋나는지, 그런데도 변환기들이 왜 붙이는지, 내가 쓰는 도구가 확인은 하는지 알아보는 법.
웹 페이지를 피그마로 가져올 때 아이콘이 사라지는 이유
웹의 아이콘은 인라인 SVG, 스프라이트, 아이콘 폰트, CSS 마스크 네 가지 방식으로 그려지고 각각 다르게 깨집니다. 내 경우가 어느 쪽인지 알아보는 법과, 변환기가 해야 하는 일.
로그인해야 보이는 페이지를 피그마로 가져오기
URL 방식 변환기가 로그인 화면을 돌려주는 건 서버가 '나'여야만 보이는 페이지를 볼 수 없기 때문입니다. 실제로 되는 방법과, 여러 도구가 이미 제공하는 것, 그리고 대신 물어야 할 질문.
어떤 것도 컴퓨터를 떠나지 않습니다.
피그마 플러그인의 manifest에 networkAccess: "none"이 선언돼 있습니다. 피그마가 이걸 강제하기 때문에, 플러그인은 원해도 네트워크 요청을 할 수 없어요. 지키겠다는 약속이 아니라, 가지고 있지 않은 능력입니다.
캡처하는 동안 개발자도구 네트워크 탭을 열어보세요. 그 요청들 말고는 아무것도 없습니다. 자세한 건 개인정보처리방침에 있어요.
구조상 서버가 없습니다
다른 도구들도 설정을 바꾸면 캡처를 로컬에 둘 수 있어요. Snapture는 잘못 설정할 여지가 없습니다. 애초에 보낼 서버가 없거든요.
| Snapture | 서버 경로가 있는 도구 | |
|---|---|---|
| 비공개로 두고 싶다면 | 항상 그렇습니다 | 로컬 옵션을 고르세요 |
| 무료로 주는 것 | 전 기능, 캡처 5회 | 월 할당량 |
| 로그인 / 인터랙션 상태 | 항상 가능 | 제각각 |
| 계정 필요 | 아니요 | 예 |
| Pro 가격 | 월 $5 | 대체로 더 비쌈 |
쓰는 건 무료. Pro는 제값을 할 때만.
전 기능을 5번 무료로 써보세요. Pro는 그 제한만 없앱니다 — 기능은 그대로예요.
- Free의 모든 기능 포함
- 픽셀 보증 Auto Layout
- 반복 카드의 컴포넌트화
- 텍스트·색상 스타일 — 토큰 이름 그대로
자주 묻는 질문
제 페이지 데이터는 정말 안전한가요?
네, 구조적으로요. 변환은 브라우저 탭 안에서 실행되고 결과는 디스크나 클립보드로만 갑니다. 보낼 Snapture 서버 자체가 없어요. 피그마 플러그인은 매니페스트에 네트워크 접근 0을 선언하는데, 이건 피그마가 강제하고 누구나 열어볼 수 있습니다. 확장이 보내는 요청은 몇 가지뿐입니다 — 파일에 넣을 페이지의 이미지, Pro를 쓸 때의 라이선스 키 확인, 일괄 캡처를 누를 때의 사이트맵 읽기. 어느 것도 페이지 내용을 담지 않고, 전부 개인정보처리방침에 적어 두었습니다.
html.to.design 같은 도구와 뭐가 다른가요?
그 도구들도 자체 브라우저 확장으로 로그인한 페이지를 담을 수 있고, 옵션을 고르면 파일을 로컬에 둘 수도 있습니다. 차이는 Snapture에는 고를 옵션이 없다는 점이에요. 서버가 없으니 비공개 경로가 유일한 경로이고, 피그마 플러그인은 networkAccess: "none"으로 배포돼 피그마가 대신 강제합니다. 그 밖에는 무료 플랜이 기능을 덜어낸 버전이 아니라 완전판이라는 점, 그리고 피그마 엔진이 0.5px 이내로 재현할 때만 Auto Layout을 적용한다는 점이 다릅니다.
무료로는 정확히 뭘 쓸 수 있나요?
캡처 5회입니다. 그리고 그 다섯 번은 전부 완전판이에요 — 로그인 뒤 페이지, 아이콘, 그라디언트, 차트 스크린샷, Auto Layout, 컴포넌트, 스타일 추출, 클립보드까지. 아무것도 빼지 않으니 내 페이지로 돈 낼 만한지 직접 확인하실 수 있어요. 다섯 번을 다 쓰면 Pro가 제한을 없앱니다.
피그마에서 폰트가 다르게 보여요.
피그마는 컴퓨터에 설치된 폰트만 쓸 수 있습니다. Snapture는 폰트 스택을 정확히 캡처하니, 빠진 폰트(예: Pretendard, Inter)를 설치하고 피그마를 재시작하면 완전히 일치해요. 그 전까지는 피그마가 가장 비슷한 설치 폰트로 대체합니다.
라이선스 하나로 여러 컴퓨터에서 쓸 수 있나요?
네, 개인 기기 최대 3대까지 활성화할 수 있습니다. 기기를 바꾸다 한도에 걸리면 메일 주세요. 바로 초기화해 드립니다.
환불은 어떻게 되나요?
Snapture가 내 페이지에서 기대만큼 동작하지 않는다면, 구매 후 14일 안에 알려주세요. 결제 대행사를 통해 전액 환불해 드립니다. 복잡한 절차 없이요.
이미 존재하는 걸 다시 그리지 마세요.
확장을 설치하고, 보고 있는 페이지를 캡처해서, 피그마에 붙여넣으세요. 동작을 확인하는 데 1분이면 됩니다.