CaptureTree

Captures the page you are on, full length. Read the site menu to capture many pages at once.

A tool for collecting reference websites, whole. ■ Capture the page you are on Open the extension and the page you are looking at is already selected. Press capture. Nothing to wait for, nothing to set up. It works on sites that have no navigation to read at all. ■ Reads the menu as a tree Press "Read the site menu" and the extension reads the current site's navigation, showing top-level and sub menus as they are. Check only the pages you need. Works with mega menus, dropdowns and sitemaps. ■ Captures pages that use scroll animations Most modern sites reveal content as you scroll. Ordinary full-page capture leaves those areas blank. CaptureTree actually scrolls the page one screen at a time and stitches the result, so you get what a visitor really sees. Sticky headers that would otherwise repeat down the image are removed. ■ Compare desktop and mobile side by side When capturing finishes, a result tab opens. Pick a page from the tree and the desktop and mobile captures appear next to each other, with optional synced scrolling. Mobile also gets a device mockup image. ■ Extracts fonts and colors Shows the font family, weight, size and line height the page actually uses, plus its colors, ordered by how often they appear. Click to copy. No more eyedropping a screenshot. ■ Sketch — a copy of the page you can actually change Press "Open sketch" and the page is lifted into a new tab as a still copy of itself. Only the visible UI comes along, so no scripts run there. The site cannot fight back — no framework redrawing what you just moved, no click escaping into a link — and your original tab is never touched. Everything below happens in that sketch. ■ Layers — the HTML as a list A panel on the left shows the page structure as a tree, the way developer tools do. Click a row to switch to that element, hover a row to see where it sits on the page, and hide anything with one click. Pick something on the page and the tree opens to it, so you always know where you are. ■ Click anything to change it No separate picking step. Click an element in the sketch and its controls are there: text, color, background, width and height, size, line height, padding, corner radius, weight, opacity. Use ↑ and ↓ to widen or narrow what you picked — from a word up to the card that holds it. Click inside to drop into a child. Delete removes an element. Undo steps back one change at a time, in order. ■ Save an image as its original file Pick an image and take the file that was uploaded, not a screenshot of it — full resolution, no re-compression. Works for <img>, <picture> and CSS background images. ■ Drag to resize, or to zoom Eight handles appear on the picked element. Drag a side to size the box, with a live pixel readout. Drag a corner and the whole thing scales with it, contents and all, like zooming in; hold Shift to keep the aspect ratio. Flex children that normally ignore width are handled. ■ Drag to reposition Drag inside the element to move it anywhere. It moves by position, not by margins, so nothing else on the page shifts to make room. Keep pushing past the edge and the element lifts out of its container, so it can go anywhere without being clipped. Hold Shift to lock it to one axis. ■ Overlapping is fine — decide what sits on top Once things overlap, say which one wins: send to back, back, front, to front. The z-index comes out with the rest of your CSS. ■ Several at once Keep clicking to add elements to the list. Shift-click one to drop it back to normal. Everything you changed stays changed, so you can see several edits on one screen at the same time. ■ Per element, or all together With several picked you can give each its own values — try three different colors on three cards and compare. Switch to "All together" and one change applies to every one. The CSS groups elements that share values and splits the selector where they differ. ■ Opacity Text and background colors each get their own alpha, and there is a separate one for the whole element. Dial in a translucent overlay in place and take the rgba / opacity values with you. ■ Try a change and keep before / after CaptureTree captures the sketch twice — once as the page was, once as you made it — and hands you the changed values as CSS, ready to paste into your site builder's custom CSS box. The live website is never modified; you were working on a copy the whole time. ■ Straight to the clipboard Hit Copy on the result page and paste into Figma. No saving, no hunting for the file. ■ Save sections separately Optionally slice each page into its sections (hero, features, CTA…) as separate files. ■ One ZIP, one save dialog No per-file prompts. Review first, then download everything at once. ■ English or Korean Pick either one in settings, or let it follow your browser. ────────────────────────────── Privacy Captured images and extracted values never leave your computer. Nothing is transmitted, and there is no server collecting anything. 레퍼런스 사이트를 통째로 모으는 도구입니다. ■ 보고 있는 페이지를 그대로 확장을 열면 지금 보고 있는 페이지가 이미 골라져 있습니다. 캡처를 누르면 됩니다. 기다릴 것도, 설정할 것도 없습니다. 읽을 내비게이션이 아예 없는 사이트에서도 됩니다. ■ 사이트 메뉴를 트리로 읽습니다 「사이트 메뉴 읽기」를 누르면 그 사이트의 내비게이션을 읽어 상위·하위 메뉴를 생긴 그대로 보여줍니다. 필요한 페이지만 체크하면 됩니다. 메가 메뉴, 드롭다운, 사이트맵에서 동작합니다. ■ 스크롤 애니메이션이 있는 페이지도 찍습니다 요즘 사이트는 스크롤에 맞춰 내용을 드러냅니다. 보통의 전체 페이지 캡처는 그 자리를 빈칸으로 남깁니다. 캡처트리는 한 화면씩 실제로 굴려 내려가며 찍어 이어 붙이므로, 방문자가 실제로 보는 화면이 그대로 남습니다. 아래로 반복해서 찍힐 고정 헤더는 걷어냅니다. ■ 데스크톱과 모바일을 나란히 캡처가 끝나면 결과 탭이 열립니다. 트리에서 페이지를 고르면 데스크톱과 모바일이 나란히 놓이고, 원하면 스크롤이 같이 움직입니다. 모바일은 기기 목업 이미지도 함께 만듭니다. ■ 폰트와 색을 뽑아냅니다 그 페이지가 실제로 쓰는 폰트·굵기·크기·행간과, 많이 쓰인 순서대로 정리한 색을 보여줍니다. 눌러서 복사하면 됩니다. 스크린샷에 스포이드를 댈 일이 없습니다. ■ 스케치 — 진짜로 고칠 수 있는 페이지 복사본 「스케치 열기」를 누르면 그 페이지를 통째로 떠서 새 탭에 정지된 복사본으로 세웁니다. 겉으로 보이는 UI 만 가져오므로 거기서는 스크립트가 돌지 않습니다. 사이트가 방해하지 않습니다 — 프레임워크가 방금 옮긴 것을 다시 그리는 일도, 클릭이 링크로 새는 일도 없습니다. 원본 탭은 건드리지 않습니다. 아래의 모든 일은 그 스케치 안에서 일어납니다. ■ 레이어 — html 을 목록으로 왼쪽 패널이 페이지 구조를 트리로 보여줍니다. 개발자도구에서 보던 그 트리입니다. 줄을 클릭하면 그 요소로 갈아타고, 올려 두면 페이지에서 어디인지 짚어 주고, 한 번 눌러 숨길 수 있습니다. 페이지에서 고르면 목록이 거기까지 알아서 펴지므로 지금 어디에 있는지 늘 보입니다. ■ 클릭하면 바로 고쳐집니다 따로 고르는 절차가 없습니다. 스케치에서 요소를 클릭하면 그 자리에 조절 항목이 나옵니다: 글자, 글자색, 배경색, 폭과 높이, 크기, 행간, 여백, 모서리, 굵기, 불투명도. ↑ ↓ 로 고른 범위를 넓히거나 좁힙니다 — 단어 하나에서 그것을 담은 카드까지. 안쪽을 클릭하면 하위 요소로 들어갑니다. Delete 로 지우고, 되돌리기는 한 번에 한 단계씩 순서대로 물러납니다. ■ 그림은 원본 파일 그대로 그림을 고르면 스크린샷이 아니라 실제로 올라가 있는 파일을 받습니다 — 원본 해상도, 재압축 없음. <img>, <picture>, CSS 배경 이미지에서 됩니다. ■ 끌어서 크기 조절, 또는 확대 고른 요소에 손잡이 여덟 개가 붙습니다. 변을 끌면 상자 크기가 바뀌고 픽셀 값이 바로 보입니다. 모서리를 끌면 안의 내용까지 통째로 커집니다 — 확대하는 것과 같습니다. Shift 를 누르면 비율을 지킵니다. 폭을 무시하던 플렉스 자식도 처리합니다. ■ 끌어서 위치 옮기기 요소 안쪽을 끌면 어디로든 옮겨집니다. 여백이 아니라 위치로 옮기므로 자리를 내주려고 다른 것이 밀리지 않습니다. 가장자리 밖으로 계속 밀면 요소가 담긴 상자에서 들려 나오므로, 잘리지 않고 어디로든 갈 수 있습니다. Shift 를 누르면 한 축으로 고정됩니다. ■ 겹쳐도 됩니다 — 무엇이 위로 올지 정하세요 겹치고 나면 순서를 정합니다: 맨 뒤, 뒤로, 앞으로, 맨 앞. z-index 도 나머지 CSS 와 함께 나옵니다. ■ 여러 개를 한 번에 계속 클릭해서 목록에 담습니다. ⇧클릭하면 그 하나만 원래대로 빠집니다. 고친 것은 고친 채로 남으므로, 여러 군데를 고친 결과를 한 화면에서 같이 볼 수 있습니다. ■ 각각, 또는 전부 같이 여러 개를 골라 두고 각각 다른 값을 줄 수 있습니다 — 카드 세 장에 색을 셋 다르게 넣어 비교해 보세요. 「전부 같이」로 바꾸면 한 번의 변경이 전부에 먹습니다. CSS 는 값이 같은 것끼리 묶고, 다른 곳에서 선택자를 가릅니다. ■ 불투명도 글자색과 배경색이 각각 투명도를 갖고, 요소 전체에 대한 것이 따로 있습니다. 반투명 오버레이를 제자리에서 맞춰 보고 rgba / opacity 값을 그대로 가져가세요. ■ 고치기 전과 후를 같이 캡처트리가 스케치를 두 번 찍습니다 — 원래 모습 한 장, 고친 모습 한 장. 바뀐 값은 CSS 로 내주므로 사이트 빌더의 커스텀 CSS 칸에 바로 붙여넣을 수 있습니다. 실제 웹사이트는 전혀 바뀌지 않습니다. 처음부터 복사본에서 작업했기 때문입니다. ■ 바로 클립보드로 결과 화면에서 복사를 누르고 피그마에 붙여넣으세요. 저장할 것도, 파일을 찾아다닐 것도 없습니다. ■ 섹션별로 따로 저장 원하면 페이지를 섹션(히어로, 기능, CTA…)별로 잘라 따로 저장합니다. ■ ZIP 하나, 저장 창 한 번 파일마다 묻지 않습니다. 먼저 훑어보고 한 번에 내려받습니다. ■ 영어 또는 한국어 설정에서 고르거나, 브라우저 언어를 따르게 둘 수 있습니다. ────────────────────────────── 개인정보 캡처한 이미지와 뽑아낸 값은 이 컴퓨터를 벗어나지 않습니다. 어디에도 전송하지 않으며, 데어터를 수집하는 서버도 없습니다.