Chrome Extension
읽던 페이지를 바로 저장하는 ClippingMini 크롬 확장 프로그램
확장 프로그램을 설치하고 현재 페이지를 저장하는 방법부터 우클릭 저장과 최근 항목 활용법까지 차근차근 살펴봅니다.
· 6분 읽기
인터넷에서 괜찮은 글을 발견하면 일단 저장부터 한다. 그런데 막상 자료를 모으다 보면 이 간단한 일에도 손이 꽤 많이 간다. 저장할 서비스를 열고, 폴더를 고르고, 제목을 입력하다 보면 어느새 읽던 흐름이 끊겨 있다.
ClippingMini 크롬 확장 프로그램은 이 과정을 지금 보고 있는 탭 안에서 끝낼 수 있게 해준다. 아이콘을 누르면 페이지 제목과 URL이 자동으로 들어오고, 폴더를 고른 뒤 저장 버튼만 누르면 된다. 필요하면 짧은 메모도 함께 남길 수 있다.
자료 하나 저장하자고 읽던 흐름까지 끊을 필요는 없으니까.
아래 내용은 현재 배포된 확장 프로그램의 동작을 기준으로 정리했다. 설치와 로그인부터 팝업 저장, 우클릭 저장, 최근 항목을 다시 여는 방법까지 순서대로 소개한다.
1. 설치한 뒤 로그인하기
Chrome 웹 스토어에서 ClippingMini 설치하기
설치가 끝나면 브라우저 도구 모음에서 ClippingMini 아이콘을 누른다. 처음에는 로그인 화면이 열린다. 기존에 웹에서 ClippingMini를 사용하고 있었다면 같은 계정으로 로그인하면 된다. 웹에서 만들어 둔 폴더도 그대로 불러온다.
로그인 방법은 두 가지다.
- Google 계정으로 계속하기
- 이메일과 비밀번호로 로그인하기
ClippingMini
로그인 필요
웹 앱과 같은 계정으로 로그인하세요.
Google 계정으로 계속하기
확장 프로그램용 계정을 따로 만드는 것은 아니다. 로그인한 계정의 Firebase 인증 토큰으로 ClippingMini API를 호출하기 때문에 웹과 확장 프로그램이 같은 폴더와 저장 목록을 함께 쓴다.
2. 현재 페이지 저장하기
로그인한 뒤 아이콘을 다시 누르면 현재 탭의 정보가 팝업에 자동으로 채워진다.
- 폴더에서 저장 위치를 선택한다.
- 자동으로 채워진 페이지 제목과 URL을 확인한다.
- 필요한 경우 메모를 입력한다.
- ClippingMini에 저장을 누른다.
ClippingMini
저장 준비됨
제목과 URL은 자동으로
현재 탭에서 Open Graph 제목과 설명, 대표 이미지, 파비콘을 읽어 저장할 때 함께 보낸다. 팝업에서 URL을 직접 바꾸면 원래 페이지의 정보는 제외한다.
폴더 목록은 웹에서 만들어 둔 것과 같다. 마지막으로 고른 폴더도 기억해 두기 때문에 같은 곳에 자료를 연달아 저장할 때는 폴더를 매번 다시 선택하지 않아도 된다. 네트워크 응답이 늦을 때는 이전에 받아 둔 폴더 목록을 먼저 보여준 뒤 최신 목록으로 바꾼다.
http:// 또는 https://로 시작하는 일반 웹 페이지라면 저장할 수 있다. 다만 chrome://으로 시작하는 설정 화면처럼 브라우저 내부에서만 사용하는 페이지는 저장할 수 없다.
3. 자주 쓰게 되는 우클릭 저장
제목을 고치거나 메모를 남길 필요가 없다면 팝업조차 열지 않아도 된다. 페이지에서 마우스 오른쪽 버튼을 누른 뒤 ClippingMini에 페이지 추가를 선택하면 된다.
Building a calmer reading workflow
Designing tools that stay out of the way.
ClippingMini에 페이지 추가
검사
저장 위치는 마지막으로 선택했던 폴더다. 현재 탭에서 제목과 메타데이터를 가져와 저장하고, 작업이 끝나면 크롬 알림으로 결과를 알려준다. 로그인이 풀렸거나 저장 한도에 걸린 경우에는 오류 알림이 사라지지 않는다. 알림을 누르면 무엇을 확인해야 하는지 별도 창에서 볼 수 있다.
현재 버전에서 주의할 점도 있다. 링크 위에서 우클릭하더라도 링크가 가리키는 주소가 아니라 지금 열려 있는 페이지가 저장된다. 링크 주소 자체를 저장하고 싶다면 링크를 먼저 열거나, 팝업의 URL 칸에 주소를 직접 붙여 넣어야 한다.
4. 방금 저장한 페이지 다시 열기
팝업 아래쪽에는 최근에 열어 본 항목이 최대 20개까지 표시된다. 웹에 있는 ClippingMini 툴바와 같은 목록이다.
ClippingMini
저장 준비됨
최근 자료로 바로 이동
목록에서 항목을 누르면 현재 탭에서 해당 페이지가 열린다. 방금 선택한 항목은 목록의 맨 앞으로 이동한다.
클릭할 때마다 새 탭을 만드는 대신 지금 탭에서 페이지를 여는 방식이다. 최근 목록을 새로 불러오지 못하더라도 이전 목록이 남아 있으면 그대로 보여준다.
평소에는 이렇게 쓴다
제목이나 폴더를 확인하고 메모까지 남기고 싶을 때는 팝업을 연다. 그냥 현재 페이지를 빠르게 저장하고 싶을 때는 우클릭 메뉴를 쓴다. 어느 쪽으로 저장해도 같은 계정과 폴더에 들어간다.
마치며
이 확장 프로그램을 만들면서 가장 신경 쓴 부분은 기능을 많이 넣는 것이 아니었다. 자료를 발견한 순간에 필요한 기능만 보여주고, 저장까지 걸리는 단계를 줄이는 데 집중했다.
제목과 URL을 자동으로 채우고, 마지막 폴더를 기억하고, 네트워크가 느릴 때는 이전 목록을 먼저 보여주는 것도 모두 같은 이유에서다. 사소해 보이는 차이지만 매일 쓰는 도구에서는 이런 부분이 사용감을 크게 바꾼다.
다음 글에서는 사용법보다 한 단계 안쪽으로 들어가 볼 생각이다. 현재 탭에서 Open Graph 정보를 가져오는 과정과 Firebase 인증을 API에 연결한 방식을 코드와 함께 정리해 보겠다.