Lolly URL Screenshot 확장 프로그램을 사용하면 웹 앱이 브라우저 안에서 어떤 웹페이지든 스크린샷할 수 있습니다. 이것이 없으면 URL 캡처에는 데스크톱 앱이 필요합니다 - 브라우저 페이지는 다른 사이트의 픽셀을 스스로 읽을 수 없기 때문입니다. 이 확장 프로그램은 데스크톱 앱이 쓰는 것과 동일한 캡처 방식을 사용해 그것을 해냅니다.
같은 방식으로 하는 일이 하나 더 있어요: 지정한 페이지 하나를 읽어서 Brand Studio가 실제 운영 중인 웹사이트에서 브랜드를 추출할 수 있게 해요. 두 가지 모두 아래에서 다뤄요.
Chromium 기반 브라우저에서 동작합니다: Chrome, Edge, Brave, Arc, Opera - Chrome 111 이상.
설치하기 전에도 URL Screenshot은 열려서 샷을 구성할 수 있으며, 도구 컨트롤 상단의 안내문이 무엇이 빠졌는지 알려줍니다.
signed by Lollyvector SVG직접 확인하기Get the signed file4 paths~2.4k nodes4 groups29 KB
signed by Lollyvector SVG직접 확인하기Get the signed file4 paths~2.4k nodes4 groups29 KB
기다리는 동안에도 모든 컨트롤은 살아 있습니다: 대상 URL, 스크롤 깊이, 정착 지연시간, 크롭 여백, 리컬러까지. 오직 캡처 자체만 호스트가 필요합니다.
signed by Lollyvector SVG직접 확인하기Get the signed file52 paths~3.6k nodes158 groups1 image62 KB
signed by Lollyvector SVG직접 확인하기Get the signed file52 paths~3.6k nodes158 groups1 image62 KB
설치
Chrome 웹 스토어에서
곧 제공됩니다. 게시되면 클릭 한 번으로 설치한 뒤 Lolly를 새로고침하면 됩니다.
직접 로드하기 (개발자용)
확장 프로그램은 저장소의 shells/chrome-extension/에 있습니다.
chrome://extensions를 엽니다.- 개발자 모드(오른쪽 위)를 켭니다.
- 압축해제된 확장 프로그램을 로드합니다를 클릭하고
shells/chrome-extension/폴더를 선택합니다. - Lolly를 새로고침합니다 - 이제 브라우저에서 URL Screenshot이 동작합니다.
동작 방식
- 작은 스크립트가 Lolly에 확장 프로그램이 있다는 것을 알려주므로, URL Screenshot 도구가 자동으로 켜집니다 - 별도 설정이 필요 없습니다.
- 렌더링을 실행하면 확장 프로그램이 백그라운드 탭에서 대상 페이지를 열고, DevTools 프로토콜을 통해(데스크톱 앱이 쓰는 것과 동일한
Page.captureScreenshot) 캡처한 뒤 탭을 닫고 이미지를 돌려줍니다. - 전적으로 사용자의 브라우저, 사용자의 네트워크 안에서 실행되므로
localhost나 내부 사이트 캡처도 가능합니다. 캡처 자체는 어디에도 업로드되지 않으며, 유일한 네트워크 트래픽은 요청한 페이지를 불러오는 브라우저 자신의 통신뿐입니다.
캡처가 진행되는 동안 임시 탭에 "…이 브라우저를 디버깅하기 시작했습니다" 배너가 잠깐 보일 수 있습니다. 이는 DevTools 프로토콜이 동작 중이라는 뜻이며, 샷이 끝나면 저절로 사라집니다.
Brand Studio를 위한 사이트 읽기
Brand Studio의 Website 소스는 이미 가지고 있는 사이트로부터 브랜드를 시작합니다. Chromium에서는 확장 프로그램이 이를 읽고, 데스크톱 앱에서는 네이티브 fetch가 같은 일을 하며, 확장 프로그램이 없는 일반 브라우저에서는 이 타일 자체가 제공되지 않습니다.
누르면 일어나는 일:
- 주소 하나, 페이지 하나. 확장 프로그램은 같은 종류의 백그라운드 탭에서 이를 열어 렌더링된 마크업, 스타일시트 텍스트, 그리고 몇 개의 아이콘·로고 이미지를 읽은 뒤 탭을 닫습니다. 링크를 따라가거나 크롤링하지 않습니다.
- 다른 곳에서 호스팅되는 스타일시트와 폰트(CDN, 폰트 서비스)도 함께 가져옵니다. 페이지의 색상과 서체 정보가 그 안에 들어 있기 때문입니다. 교차 출처 요청은 쿠키 없이 보내지고, 동일 출처 요청은 페이지 자체가 그러하듯 쿠키를 사용합니다.
- 모든 것에 상한이 있습니다 - 시트, 이미지, 바이트 수 모두 한도가 있어, 악의적이거나 절반쯤 망가진 페이지라도 멈추는 대신 부분적인 자료를 반환합니다.
- 바이트는 요청한 Lolly 탭으로 곧장 돌아갑니다. 색상, 서체, 로고로 파싱하는 작업은 사용자 기기에서 이루어지며, 아무것도 업로드되지 않습니다.
누르기 전에는 아무것도 읽지 않습니다. 주소를 붙여넣는 것은 입력란을 채울 뿐입니다.
설치 후
Lolly 탭을 새로고침하세요. "확장 프로그램 받기" 안내가 사라지고 갤러리와 Batch 모드에서 URL Screenshot을 사용할 수 있게 됩니다.
권한
manifest.json은 네 가지 권한과 호스트 접근 권한을 선언합니다:
debugger- DevTools 프로토콜을 통해 백그라운드 탭을 제어합니다. 스크린샷을 찍는 부분이 바로 이것입니다.tabs- 임시 백그라운드 탭을 열고 이후 다시 닫습니다.scripting- Brand Studio의 Website 소스를 위해, 지정한 사이트 안에서 한 페이지 리더를 실행합니다.storage- 열었던 탭의 id를 세션 저장소에만 기록해, 브라우저가 확장 프로그램을 읽는 도중 중단시키더라도 탭이 닫히도록 합니다. 다음 시작 시 지워지며, 사용자에 대한 어떤 정보도 저장되지 않습니다.host_permissions: ["<all_urls>"]- 모든 사이트에 대한 호스트 접근 권한입니다. 원하는 어떤 URL이든 지정할 수 있기 때문입니다. Chrome은 설치 시 이를 "모든 웹사이트에서 내 데이터를 읽고 변경"이라는 광범위한 경고로 표시합니다.
그 경고에도 불구하고, 캡처하거나 가져오도록 요청한 단 하나의 페이지만 읽으며 사용자의 브라우징 데이터를 읽거나 전송하지 않습니다 - 아무것도 어디에도 업로드되지 않습니다.
매니페스트는 minimum_chrome_version: 111도 설정합니다. 현재 버전은 0.2.1입니다.
문제 해결
- 여전히 "확장 프로그램 받기"가 보이나요? Lolly 탭을 새로고침하세요 - 감지는 페이지 로드 시점에 이루어집니다.
- 이 사이트에서 아무 일도 일어나지 않나요? 확장 프로그램은 Lolly 자체 출처에서만 활성화됩니다. 다른 도메인에서 커스텀 빌드를 실행 중이라면, 확장 프로그램의
manifest.json에서content_scripts.matches에 추가하세요. - 캡처가 실패하나요? URL에 접근 가능한지,
http://또는https://로 시작하는지 확인하세요. 일부 페이지는 자동화된 캡처를 적극적으로 차단합니다.