콘텐츠로 건너뛰기
Home » 20110228 :: 가볍고 간단한 브라우저 확장, 북마클릿 만들기

20110228 :: 가볍고 간단한 브라우저 확장, 북마클릿 만들기

사실 팁이라고 하기에도 부끄러운 간단한 장치지만 살짝 소개해봅니다.

북마클릿 : Bookmarklet

북마크[1. 익스플로러 사용자에겐 ‘즐겨찾기’라는 이름이 더 익숙하지만, 대부분의 다른 브라우저들은 북마크(책갈피)라고 하니 이렇게 부르도록 합니다.]는 보통 인터넷 주소(http:// 로 시작하지요)를 저장해둡니다. 하지만 웹 주소 대신에 자바스크립트를 등록해 두고 쓸 수도 있습니다. 페이스북 공유 북마클릿과 같은 것들이 대표적이지요. 별도의 플러그인을 설치하지 않고서도 간단히 웹 브라우저에 부가적인 기능을 더할 수 있고 또 (대부분) 브라우저 별 특성을 타지 않기 때문에 제가 무척 좋아하는 방식이기도 합니다.
이러한 북마클릿을 북마크 도구모음 (북마크가 표시된 툴 바, 보통은 주소창 아래에 있지요)에 등록해 두고 쓴다면 웹 서핑시 유용하게 쓸 수 있습니다. 인터넷 익스플로러에서도 사용 가능하므로 확장기능이 거의 없다고 봐도 좋은[3. 물론 일부 있긴합니다만, 별도의 프로그램(BHO)으로 설치해야 하고 또 그만큼 브라우저 안정성도 떨어질 수 있습니다.] IE에서 부족한 기능을 조금이나마 채울 수 있다고나 할까요. (물론 active하게 동작하는 크롬/파이어폭스의 확장 기능을 대신할 수는 없지만 말이지요.)

북마클릿 예시

북마클릿은 자바 스크립트를 조금만 할 줄 알면 아주 쉽게 만들 수 있습니다. 아래 북마클릿은 사실 별 것 아니지만, 제가 유용하게 쓰고 있는 것들 중 일부입니다. 특히 페이스북 쓸 때 스크롤을 미친 듯이 위로 올릴 필요 없이 간단히 복귀하게 해주니까 편리하게 쓸 수 있더군요.

북마클릿 만들기

북마클릿 그 자체는 북마크와 완전히 동일하다고 할 수 있으므로, 이것을 만드는 방법은 파이어폭스 및 구글 크롬에서는 북마크를 추가하는 것과 똑같으며 아주 쉽습니다. 북마클릿이 될 자바스크립트 링크를 북마크 툴바로 끌어다 놓으면 됩니다. 예시로 소개한 위의 두 북마클릿을 그냥 북마크 도구 막대에 끌어다 놓기만하면, 됩니다.
만약 완전히 새로 작성하고자 한다면, 역시 북마크 도구 막대에서 마우스 오른쪽 클릭을 한 다음 ‘새 북마크’를 만들고 주소 대신에 자바 스크립트 코드를 입력해 주면 됩니다.
인터넷 익스플로러는 이런 점에서는 조금 불편합니다. 1) 링크를 끌어다 옮기는 것이 아예 불가능하며[2. 윈도XP IE8 기준. 비스타 이상에서는 잘 모르겠습니다.] 2)현재 페이지만을 즐겨찾기에 추가할 수 있는 구조이기 때문입니다. 그리하여 편법을 쓰는 수 밖에 없습니다.

  1. 먼저 추가할 스크립트 코드를 복사해 둡니다. 북마클릿으로 동작하기 위해서는 javascript: 로 시작해야 하므로, 이 부분까지 복사합니다. 링크를 우클릭해서 “바로가기 복사”를 하면 모두 복사됩니다.
  2. ctrl+D를 눌러서 현재 페이지를 즐겨찾기에 우선 추가합니다. 즐겨찾기를 추가할 위치는 “즐겨찾기 모음”으로 하면 됩니다.
  3. 만들어진 즐겨찾기를 마우스 오른쪽 클릭하여 “속성”을 선택합니다.
  4. 즐겨찾기 속성창에서 웹 문서 탭내에 URL에 아까 복사한 자바스크립트를 붙여 넣습니다.
  5. 일반 탭을 클릭하고 북마클릿 이름을 입력해줍니다. 이 때, javascript 프로토콜이 지정된 응용 프로그램이 없다고 경고가 나옵니다. 가볍게 무시하고 ‘확인’ 버튼을 클릭합니다.

보너스

몇 가지 북마클릿을 더 소개해 봅니다. 페이스북, bit.ly를 제외하고는 자작 북마클릿입니다.


updates

  • 이미지만 추출해서 보기 추가 (2011.04.23)