Lolly URL Screenshot 확장 프로그램을 사용하면 웹 앱이 브라우저 안에서 어떤 웹페이지든 스크린샷할 수 있습니다. 이것이 없으면 URL 캡처에는 데스크톱 앱이 필요합니다 - 브라우저 페이지는 다른 사이트의 픽셀을 스스로 읽을 수 없기 때문입니다. 이 확장 프로그램은 데스크톱 앱이 쓰는 것과 동일한 캡처 방식을 사용해 그것을 해냅니다.
같은 방식으로 하는 일이 두 가지 더 있어요. 이미지 슬롯에 붙여넣은 웹 주소를 그 페이지의 스크린샷으로 바꿀 수 있고(이 페이지 스크린샷), 지정한 페이지 하나를 읽어서 Brand Studio가 실제 운영 중인 웹사이트에서 브랜드를 추출할 수 있게 해요. 모든 요청은 확장 프로그램에서 여러분이 승인할 때까지 기다려요.
Chromium 기반 브라우저에서 동작합니다: Chrome, Edge, Brave, Arc, Opera - Chrome 111 이상.
설치하기 전에도 URL Screenshot은 열려서 샷을 구성할 수 있으며, 도구 컨트롤 상단의 안내문이 무엇이 빠졌는지 알려줍니다.
signed by Lollyvector SVG4 paths~2.4k nodes4 groups30 KB직접 확인하기서명된 파일 받기
signed by Lollyvector SVG4 paths~2.4k nodes4 groups30 KB직접 확인하기서명된 파일 받기
기다리는 동안에도 모든 컨트롤은 살아 있습니다: 대상 URL, 스크롤 깊이, 정착 지연시간, 크롭 여백, 리컬러까지. 오직 캡처 자체만 호스트가 필요합니다.
signed by Lollyvector SVG31 paths~1.7k nodes38 groups30 KB직접 확인하기서명된 파일 받기
signed by Lollyvector SVG31 paths~1.7k nodes38 groups30 KB직접 확인하기서명된 파일 받기
설치
Chrome 웹 스토어에서
곧 제공됩니다. 게시되면 클릭 한 번으로 설치한 뒤 Lolly를 새로고침하면 됩니다.
직접 로드하기 (개발자용)
확장 프로그램은 저장소의 shells/chrome-extension/에 있습니다. 이 폴더는 프로덕션 빌드이며, https://lolly.tools의 Lolly에서만 동작합니다.
chrome://extensions를 엽니다.- 개발자 모드(오른쪽 위)를 켭니다.
- 압축해제된 확장 프로그램을 로드합니다를 클릭하고
shells/chrome-extension/폴더를 선택합니다. - Lolly를 새로고침합니다 - 이제 브라우저에서 URL Screenshot이 동작합니다.
로컬 개발 서버를 쓴다면 pnpm run pack:chrome-extension:dev를 실행하고 대신 dist/chrome-extension-dev를 로드하세요. 이 패키지는 http://localhost:5173도 허용하며 이름에 Development가 붙습니다.
동작 방식
- 작은 스크립트가 Lolly에 확장 프로그램이 있다는 것을 알려주므로, URL Screenshot이 별도 설정 없이 캡처를 저장할 수 있습니다.
- 모든 요청은 사용자가 승인합니다. Lolly가 요청하면 확장 프로그램이 자체 Approve page request 창을 열어, 요청한 사이트, 스크린샷을 원하는지 페이지 내용을 원하는지, 그리고 페이지 주소를 보여줍니다. Approve once를 누르기 전에는 아무것도 읽지 않습니다. Cancel을 누르거나 창을 닫으면 요청이 끝납니다.
- 어떤 사이트의 요청을 처음 승인하면 Chrome이 확장 프로그램에 그 사이트 접근을 허용할지도 묻습니다. 한 번 허용하면 Chrome이 그 접근 권한을 유지하지만, 이후의 요청도 매번 Approve once가 필요합니다.
- 승인은 요청 한 건에만 유효하며 30초 후에 만료됩니다. 한 번에 하나의 요청만 대기하거나 실행될 수 있고, 승인된 요청은 55초 후에 중단됩니다. Lolly 페이지가 닫히거나 이동하거나 대상 페이지가 다른 사이트로 넘어가면 요청이 취소됩니다.
- 승인하면 확장 프로그램이 백그라운드 탭에서 대상 페이지를 열고, DevTools 프로토콜을 통해(데스크톱 앱이 쓰는 것과 동일한
Page.captureScreenshot) 캡처한 뒤 탭을 닫고, 요청한 Lolly 탭으로 이미지를 돌려줍니다. - 전적으로 사용자의 브라우저, 사용자의 네트워크 안에서 실행되므로
localhost나 내부 사이트 캡처도 가능합니다. 페이지는 사용자의 브라우저 세션으로 불러오므로, 로그인한 페이지라면 결과에 비공개 정보가 담길 수 있습니다. 캡처 자체는 어디에도 업로드되지 않으며, 유일한 네트워크 트래픽은 요청한 페이지를 불러오는 브라우저 자신의 통신뿐입니다.
캡처가 진행되는 동안 임시 탭에 "…이 브라우저를 디버깅하기 시작했습니다" 배너가 잠깐 보일 수 있습니다. 이는 DevTools 프로토콜이 동작 중이라는 뜻이며, 샷이 끝나면 저절로 사라집니다.
Brand Studio를 위한 사이트 읽기
Brand Studio의 Website 소스는 이미 가지고 있는 사이트로부터 브랜드를 시작합니다. Chromium에서는 확장 프로그램이 이를 읽고, 데스크톱 앱에서는 네이티브 fetch가 같은 일을 하며, 확장 프로그램이 없는 일반 브라우저에서는 이 타일 자체가 제공되지 않습니다.
누르면 일어나는 일:
- 주소 하나, 페이지 하나. 승인하면 확장 프로그램은 같은 종류의 백그라운드 탭에서 이를 열어 렌더링된 마크업, 스타일시트 텍스트, 그리고 몇 개의 아이콘·로고 이미지를 읽은 뒤 탭을 닫습니다. 링크를 따라가거나 크롤링하지 않습니다.
- 다른 곳에서 호스팅되는 스타일시트(CDN, 폰트 서비스)도 함께 가져옵니다. 페이지의 색상과 서체 정보가 그 안에 들어 있기 때문입니다. 교차 출처 요청은 쿠키 없이 보내지고, 동일 출처 요청은 페이지 자체가 그러하듯 쿠키를 사용합니다.
- 모든 것에 상한이 있습니다 - 시트, 이미지, 바이트 수 모두 한도가 있어, 악의적이거나 절반쯤 망가진 페이지라도 멈추는 대신 부분적인 자료를 반환합니다.
- 바이트는 요청한 Lolly 탭으로 곧장 돌아갑니다. 색상, 서체, 로고로 파싱하는 작업은 사용자 기기에서 이루어지며, 아무것도 업로드되지 않습니다.
주소를 붙여넣는 것은 입력란을 채울 뿐입니다. 읽기를 시작하고 Approve once를 누르기 전에는 아무것도 읽지 않습니다.
설치 후
Lolly 탭을 새로고침하세요. "확장 프로그램 받기" 안내가 사라지고, URL Screenshot(Utilities 안)이 캡처를 파일로 저장할 수 있게 되며, 이 도구를 Batch 모드에서도 사용할 수 있게 됩니다.
권한
manifest.json은 네 가지 권한을 선언하며, 사이트 접근 권한은 한 사이트씩 요청합니다:
debugger- DevTools 프로토콜을 통해 백그라운드 탭을 제어합니다. 스크린샷을 찍는 부분이 바로 이것입니다.tabs- 임시 백그라운드 탭을 열고 이후 다시 닫으며, 승인한 뒤로 Lolly 페이지와 대상 페이지가 이동하지 않았는지 확인합니다.scripting- Brand Studio의 Website 소스를 위해, 지정한 사이트 안에서 한 페이지 리더를 실행합니다.storage- 열었던 탭의 id를 세션 저장소에만 기록해, 브라우저가 확장 프로그램을 읽는 도중 중단시키더라도 탭이 닫히도록 합니다. 다음 시작 시 지워지며, 사용자에 대한 어떤 정보도 저장되지 않습니다.optional_host_permissions: ["http:///", "https:///"]- 사이트 접근 권한으로, 설치 시에는 부여되지 않습니다. Approve once를 누르면 확장 프로그램이 그 요청의 사이트 하나에 대한 접근을 Chrome에 요청하고, Chrome은 각 사이트마다 처음에 사용자에게 묻습니다.
사용자가 승인한 단 하나의 페이지만 읽으며 사용자의 브라우징 데이터를 읽거나 전송하지 않습니다 - 아무것도 어디에도 업로드되지 않습니다.
매니페스트는 minimum_chrome_version: 111도 설정합니다. 현재 버전은 0.4.0입니다.
문제 해결
- 여전히 "확장 프로그램 받기"가 보이나요? Lolly 탭을 새로고침하세요 - 감지는 페이지 로드 시점에 이루어집니다.
- 이 사이트에서 아무 일도 일어나지 않나요? 확장 프로그램은
https://lolly.tools에서만 동작하며, 개발용 패키지에서는http://localhost:5173도 대상입니다. Lolly를 직접 호스팅한 사본 같은 다른 출처에는 그 출처를manifest.json과policy.js양쪽에 적은 별도의 확장 프로그램 빌드가 필요합니다. 매니페스트만 고치는 방식은 더 이상 통하지 않습니다. - 캡처가 실패하나요? URL에 접근 가능한지,
http://또는https://로 시작하는지 확인하세요. 일부 페이지는 자동화된 캡처를 적극적으로 차단합니다. Cancel을 눌렀거나 승인 창을 닫았거나 30초 넘게 기다렸다면 캡처를 다시 시작하세요.