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. Choose capture to get started, even on sites without a navigation menu. Desktop capture keeps the current tab’s viewport size and captures the current page without reloading it. ■ Reads the menu as a tree Press "Read the site menu" to see the site's navigation as a tree. Check the pages you need. Supports common mega menus, dropdowns and sitemaps. ■ Scrolls and captures the page CaptureTree scrolls through the page and stitches viewport captures into one image. Detected fixed or sticky headers are cropped from subsequent captures to reduce repetition. Results may vary with animation timing and dynamically loaded content. ■ Compare desktop and mobile side by side When capturing finishes, a result tab opens. Pick a page from the tree to compare desktop and mobile captures, with optional synced scrolling. Mobile captures also include a device mockup image. ■ Extracts fonts and colors See the font family, weight, size and line height used on the page, plus its colors ordered by usage. Click to copy the values. ■ Sketch — an editable copy of the page Press "Open sketch" to create a still copy of the page in a new tab. The original site's scripts do not run in the sketch, so you can experiment with the layout without changing the live website. Videos, embedded frames and some dynamic content may appear differently or may not be included. ■ Layers — the page structure as a list A panel on the left shows the page structure as a tree. Click a row to select an element, hover to locate it on the page, or hide it with one click. Selecting an element on the page expands the tree to it. ■ Click an element to edit it Click an element in the sketch to adjust its text, text color, background, width, height, font size, line height, padding, corner radius, weight and opacity. Use ↑ and ↓ to move between parent and child elements. Delete hides an element. Undo steps back one change at a time. ■ Save the displayed image file Download the image file used on the page without screenshotting or re-encoding it. Supports <img>, <picture> and CSS background images. Resolution and download availability depend on the file provided by the site. ■ Drag to resize or scale Eight handles appear on the selected element. Drag a side to resize its box with a live pixel readout. Drag a corner to scale the element and its contents. Hold Shift to preserve the aspect ratio. ■ Drag to reposition Drag inside an element to move it without shifting surrounding elements to make room. Keep dragging past its container edge to lift it out of the container. Hold Shift to lock movement to one axis. ■ Control overlapping elements Choose which element appears on top: send to back, move backward, move forward or bring to front. The z-index is included in the generated CSS. ■ Work with several elements Click other elements to add them to your selection. Shift-click a selected element to remove it and restore its original appearance, while keeping at least one element selected. Your other edits stay in place so you can compare changes on one screen. ■ Edit individually or all together Give selected elements different values, or switch to "All together" to apply a change across the selection. Generated CSS groups shared values and separates element-specific changes. ■ Adjust opacity Text and background colors have separate alpha controls, alongside opacity for the whole element. Try translucent colors and copy the resulting rgba and opacity values. ■ Keep before and after Capture the sketch before and after your edits. Changed style values are also provided as CSS to copy and adapt for your site. Edits happen in the sketch, without changing the live website. ■ Copy to the clipboard Copy a capture from the result page and paste it into Figma or another application that accepts clipboard images. ■ Save sections separately Optionally save detected page sections, such as a hero, features or CTA, as separate images. ■ One ZIP, one save dialog Review the results, then download them together in one ZIP. ■ English or Korean Choose either language in settings, or follow your browser's language. ────────────────────────────── Privacy CaptureTree processes and stores captured images and extracted style values locally on your computer. It does not upload this data to an external server. 레퍼런스 사이트를 통째로 모으는 도구입니다. ■ 보고 있는 페이지부터 캡처 확장을 열면 지금 보고 있는 페이지가 이미 선택되어 있습니다. 캡처를 누르면 시작합니다. 내비게이션 메뉴가 없는 사이트에서도 사용할 수 있습니다. 데스크톱 캡처는 현재 탭의 화면 크기를 유지하며, 현재 페이지를 새로고침하지 않고 찍습니다. ■ 사이트 메뉴를 트리로 읽습니다 「사이트 메뉴 읽기」를 누르면 사이트의 내비게이션을 트리로 보여줍니다. 필요한 페이지만 체크하세요. 일반적인 메가 메뉴, 드롭다운, 사이트맵 구조를 지원합니다. ■ 실제로 스크롤하며 캡처합니다 페이지를 한 화면씩 스크롤하며 찍고, 하나의 이미지로 이어 붙입니다. 감지한 고정 헤더는 두 번째 화면부터 반복 영역을 잘라내어 중복을 줄입니다. 애니메이션 타이밍과 동적으로 불러오는 콘텐츠에 따라 결과가 달라질 수 있습니다. ■ 데스크톱과 모바일을 나란히 캡처가 끝나면 결과 탭이 열립니다. 트리에서 페이지를 골라 데스크톱과 모바일 캡처를 비교하세요. 원하면 스크롤을 함께 움직일 수 있습니다. 모바일은 기기 목업 이미지도 함께 만듭니다. ■ 폰트와 색을 뽑아냅니다 페이지에서 사용하는 폰트, 굵기, 크기, 행간과 사용 빈도순으로 정리한 색을 보여줍니다. 필요한 값을 눌러 복사하세요. ■ 스케치 — 편집할 수 있는 페이지 복사본 「스케치 열기」를 누르면 새 탭에 페이지의 정지된 복사본을 만듭니다. 스케치에서는 원래 사이트의 스크립트가 실행되지 않으므로, 실제 웹사이트를 변경하지 않고 레이아웃을 바꿔 볼 수 있습니다. 영상, iframe과 일부 동적 콘텐츠는 원본과 다르게 표시되거나 포함되지 않을 수 있습니다. ■ 레이어 — 페이지 구조를 목록으로 왼쪽 패널이 페이지 구조를 트리로 보여줍니다. 목록을 클릭해 요소를 선택하고, 마우스를 올려 페이지에서 위치를 확인하거나, 한 번 눌러 숨길 수 있습니다. 페이지에서 요소를 선택하면 트리도 해당 위치까지 펼쳐집니다. ■ 클릭해서 바로 편집 스케치에서 요소를 클릭하면 글자, 글자색, 배경색, 폭과 높이, 글자 크기, 행간, 안쪽 여백, 모서리, 굵기, 불투명도를 조절할 수 있습니다. ↑ ↓ 키로 상위 요소와 하위 요소 사이를 이동하세요. Delete는 요소를 숨기고, 되돌리기는 한 번에 한 단계씩 이전 상태로 돌립니다. ■ 페이지에 표시된 이미지 파일 저장 스크린샷으로 찍거나 재압축하지 않고, 페이지에서 사용하는 이미지 파일을 내려받습니다. <img>, <picture>, CSS 배경 이미지를 지원합니다. 해상도와 다운로드 가능 여부는 사이트에서 제공하는 파일에 따라 달라집니다. ■ 끌어서 크기 조절 또는 확대 선택한 요소에 손잡이 여덟 개가 나타납니다. 변을 끌면 상자 크기가 바뀌고, 픽셀 값을 바로 확인할 수 있습니다. 모서리를 끌면 안의 내용까지 함께 확대하거나 축소합니다. Shift를 누르면 비율을 유지합니다. ■ 끌어서 위치 옮기기 요소 안쪽을 끌어 위치를 옮기세요. 주변 요소가 자리를 내주려고 밀리지 않습니다. 요소를 담고 있는 상자의 가장자리 밖으로 계속 끌면 상자 밖으로 꺼내 옮길 수 있습니다. Shift를 누르면 한 축으로만 움직입니다. ■ 겹친 요소의 순서 조절 맨 뒤, 뒤로, 앞으로, 맨 앞을 선택해 어떤 요소가 위에 보일지 정하세요. z-index도 생성되는 CSS에 포함됩니다. ■ 여러 요소를 한 화면에서 편집 다른 요소를 클릭해 선택 목록에 추가하세요. 선택한 요소를 ⇧클릭하면 목록에서 빼고 원래 모습으로 되돌립니다. 최소 한 개의 요소는 선택된 상태로 남습니다. 다른 요소의 편집은 유지되므로 여러 변경 사항을 한 화면에서 비교할 수 있습니다. ■ 각각 또는 전부 같이 선택한 요소마다 서로 다른 값을 주거나, 「전부 같이」로 바꿔 한 번에 적용하세요. 생성되는 CSS는 공통된 값을 묶고 요소별로 다른 값은 나누어 보여줍니다. ■ 불투명도 조절 글자색과 배경색의 투명도를 각각 조절하고, 요소 전체의 불투명도도 따로 설정합니다. 반투명 색을 직접 적용해 보고 rgba와 opacity 값을 복사하세요. ■ 고치기 전과 후를 함께 스케치의 편집 전 모습과 편집 후 모습을 캡처합니다. 변경한 스타일 값은 CSS로도 제공하므로 복사해 사이트에 맞게 적용할 수 있습니다. 편집은 스케치에서 이루어지며 실제 웹사이트는 변경하지 않습니다. ■ 클립보드로 바로 복사 결과 화면에서 캡처를 복사해 피그마 등 클립보드 이미지를 지원하는 앱에 붙여넣으세요. ■ 섹션별로 따로 저장 원하면 감지한 페이지 섹션을 별도 이미지로 저장할 수 있습니다. 히어로, 기능 소개, CTA 등을 나누어 모으세요. ■ ZIP 하나, 저장 창 한 번 결과를 확인한 뒤 ZIP 하나로 모아 내려받으세요. ■ 영어 또는 한국어 설정에서 언어를 고르거나 브라우저 언어를 따르게 할 수 있습니다. ────────────────────────────── 개인정보 캡처트리는 캡처한 이미지와 추출한 스타일 값을 컴퓨터 안에서 처리하고 저장합니다. 이 데이터를 외부 서버에 업로드하지 않습니다.