브라우저의 마법, 북마크릿(Bookmarklet) 개념부터 개발까지 완벽 가이드

웹 서핑을 하다가 현재 페이지의 모든 이미지를 추출하거나, 복사가 금지된 사이트에서 텍스트를 긁어오고 싶을 때가 있죠? 별도의 확장 프로그램을 설치하기에는 부담스럽고, 매번 콘솔창을 열기엔 번거로울 때 가장 빛을 발하는 도구가 바로 북마크릿(Bookmarklet) 입니다.

오늘은 개발자라면 한 번쯤 들어봤을, 하지만 제대로 파고들면 무궁무진한 활용도를 자랑하는 북마크릿의 모든 것을 정리해 드릴게요.

1. 북마크릿(Bookmarklet)이란?

북마크릿은 '북마크(Bookmark)'와 '애플릿(Applet)'의 합성어입니다. 브라우저의 즐겨찾기(북마크) 모음에 URL 대신 자바스크립트 코드 를 저장해 두고, 해당 북마크를 클릭할 때 현재 웹 페이지에서 그 코드가 실행되도록 하는 작은 프로그램입니다.

북마크릿의 장점

가벼움: 브라우저 확장 프로그램처럼 메모리를 항상 점유하지 않습니다.
플랫폼 독립성: Chrome, Safari, Firefox 등 자바스크립트를 지원하는 대부분의 브라우저에서 동작합니다.
즉각성: 복잡한 설치 과정 없이 북마크바에 드래그 앤 드롭하는 것만으로 사용 준비가 끝납니다.

2. 북마크릿의 작동 원리: `javascript:` 프로토콜

북마크릿의 핵심은 URL 자리에 http:// 대신 javascript: 접두사를 사용하는 것입니다. 브라우저는 이 접두사를 만나면 페이지를 이동하는 대신 그 뒤에 오는 코드를 현재 문서(DOM) 컨텍스트에서 실행합니다.

3. 북마크릿 개발하기 (Step-by-Step)

북마크릿을 만드는 과정은 크게 코드 작성 -> 인코딩 -> 등록 세 단계로 나뉩니다.

Step 1: 자바스크립트 코드 작성

일반적인 스크립트와 같지만, 전역 변수 오염을 방지하기 위해 보통 즉시 실행 함수(IIFE) 형태로 작성합니다.

// 예시: 현재 페이지의 모든 배경색을 핑크색으로 바꾸는 코드
(function () {
  document.body.style.backgroundColor = "pink";
  alert("페이지 색상이 변경되었습니다!");
})();

Step 2: URL 인코딩 (URL Encoding)

북마크 주소창에는 공백이나 특수문자가 포함될 수 없으므로, 코드를 한 줄로 만들고 encodeURIComponent 처리를 해주어야 합니다.

Step 3: `javascript:` 접두사 붙이기

완성된 코드는 다음과 같은 형태가 됩니다.

javascript: (function () {
  document.body.style.backgroundColor = "pink";
  alert("페이지 색상이 변경되었습니다!");
})();

4. 실전! 유용한 북마크릿 예제

개발자에게 유용한 '현재 페이지 URL 및 제목 복사' 북마크릿을 만들어 보겠습니다. 마크다운 형식으로 바로 복사해주는 도구입니다.

javascript: (function () {
  const title = document.title;
  const url = window.location.href;
  const markdown = `[${title}](${url})`;
 
  // 클립보드 복사 로직
  const el = document.createElement("textarea");
  el.value = markdown;
  document.body.appendChild(el);
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
 
  alert("마크다운 링크가 복사되었습니다!");
})();

5. 주의사항 및 보안 (CSP)

최근 웹사이트들은 콘텐츠 보안 정책(CSP, Content Security Policy) 을 강화하고 있습니다. 특정 사이트(예: GitHub, Google 등)에서는 보안상의 이유로 외부 스크립트 실행이나 인라인 스크립트 실행을 차단할 수 있어, 북마크릿이 작동하지 않을 수 있다는 점을 유의해야 합니다.

결론

북마크릿은 작지만 강력한 생산성 도구입니다. 반복적인 웹 업무가 있다면 나만의 북마크릿을 만들어 보세요. 코드를 작성하고 북마크바에 넣는 그 짧은 과정이 여러분의 업무 시간을 획기적으로 줄여줄 것입니다.

다음 포스팅에서는 더 복잡한 라이브러리(jQuery 등)를 북마크릿에 로드해서 사용하는 고급 기법을 다뤄보겠습니다!

Comments