마킹한 문장과 메모를 카드 한 장으로 — Markpin 1.4.0 인용 카드

Markpin은 웹에서 글을 읽으며 문장을 형광펜으로 칠하고 왜 칠했는지 적어 두는 Chrome 확장이다. 1.4.0에는 인용 카드를 넣었다. 마킹한 문장 하나와 그때 적은 메모를 깔끔한 이미지 한 장으로 만들어서, 내 폴더에 남겨 두거나 X나 인스타그램에 올릴 수 있다. 이 글에서는 카드가 어떻게 생겼고 어떻게 쓰는지, 그리고 왜 공유 기능이 아니라 카드였는지를 순서대로 정리해 보고자 한다.

결과부터

사이드패널에서 텍스트 클립 아래의 작은 카드 아이콘을 누르면 미리보기가 있는 창이 올라온다. 카드에는 페이지에서 쓴 펜 모양 그대로 문장이 그려지고(형광펜이면 형광 띠, 올가미면 손으로 두른 듯한 선), 그 아래에 메모, 오른쪽 위에 기호 도장, 맨 아래에 글 제목과 도메인이 들어간다. 테마(라이트·다크)와 비율(1:1·4:5·16:9)을 고른 뒤 PNG로 내려받거나, 복사하거나, 연결해 둔 폴더나 Google Drive의 cards/에 저장하면 끝이다.

왜 공유 기능이 아니라 카드인가

10월 초에 Markpin이 어떤 서비스인지 정리하면서 공유나 토론 기능은 일부러 「언젠가」로 미뤄 뒀다. 마킹한 문장을 다른 사람과 나누려면 서버와 계정이 있어야 하고 올라오는 글을 누군가 관리해야 하는데, 그러면 서버 없이 내 파일로 남긴다는 Markpin의 원칙과 정면으로 부딪힌다. 페이지 위에 토론 공간을 얹은 도구들을 봐도 실제로 대화가 오간 경우는 드물었는데, 생각해 보면 읽기는 혼자 하고 이야기는 다른 곳에서 하는 게 자연스러운 것 같다. 그래서 그때 목록에 남겨 둔 가벼운 대안이 「형광펜과 메모를 이미지 카드로 내보내기」였고, 이야기는 그 카드를 올린 곳에서 나누면 된다고 봤다.

10월 중순에 지인에게 받은 피드백도 같은 방향이었다. 밑줄과 메모가 보이는 채로 내보내고 싶다, 그룹이나 전체 공개로 공유하고 싶다는 두 가지였는데, 첫 번째는 1.2.2에서 「클립 전부 복사」로 Markdown을 한 번에 가져갈 수 있게 하면서 절반쯤 해결했고, 남은 절반이 이번 카드다. 그룹·공개 공유는 여전히 계획에 없다(서버를 두지 않는 이상 답이 잘 안 나온다…).

카드에 들어가는 것

카드 한 장은 클립 하나다. 인용한 문장은 페이지에서 쓴 펜(형광펜, 밑줄, 물결 밑줄, 이중 밑줄, 취소선, 네모, 동그라미, 올가미)과 색 그대로 그려지는데, 올가미는 손떨림을 만들 때 클립 id를 seed로 쓰기 때문에(seed가 같으면 무작위 결과도 같다) 페이지에서 본 것과 똑같이 삐뚤게 나온다. 「펜 모양」을 끄면 펜 자국 없이 글만 남는다. 메모가 있으면 얇은 선 아래에 네 줄까지 들어가고, 메모가 없으면 문장을 세로 가운데에 놓는다.

기호 도장(? ! × ★), 마킹한 날짜, 전체 URL, Markpin 표시는 전부 켜고 끌 수 있다. 카드가 Markpin 광고처럼 보이면 안 된다는 건 처음부터 정해 두고 시작해서, Markpin 표시도 작은 회색 글씨로만 넣었다. 고른 테마와 비율, 켜고 끈 항목은 기억해 뒀다가 다음 카드에도 그대로 쓴다.

인용이 길면 글자 크기를 세 단계까지 줄이고, 그래도 넘치면 끝을 「…」로 자른다(영어 같은 언어는 단어 단위, 한국어·일본어·중국어는 글자 단위로). 카드를 세로로 늘리는 방법도 있지만, SNS에 올리면 긴 이미지는 잘려 보이기 마련이라 쓰지 않았다. 미리보기에는 실제 결과물을 그대로 줄여서 띄우기 때문에, 잘리는 부분이 있으면 저장하기 전에 알 수 있다. 카드의 형광 띠는 폰 화면에서 작게 봐도 형광펜으로 알아볼 수 있게 페이지보다 조금 진하게 그렸다.

만들면서 정한 것들

HTML을 이미지로 바꿔 주는 라이브러리를 쓸까 하다가 줄바꿈, 말줄임, 펜 자국까지 Canvas 2D로 직접 처리하기로 했다. 의존성을 늘리기 싫었고 CSP(콘텐츠 보안 정책)나 글꼴 문제도 피하고 싶었는데, 사실 펜 자국은 라이브러리를 써도 직접 그려야 했다. 네모·동그라미·올가미는 페이지 위에 그리는 콘텐츠 스크립트의 도형 코드를 그대로 가져다 써서, 카드와 페이지에서 모양이 어긋날 일이 없다.

글꼴은 확장에 이미 들어 있는 Pretendard와 JetBrains Mono를 쓰고, 밖에서 받아 오는 건 없다. 다만 Pretendard는 글자 범위(unicode-range)마다 파일이 나뉘어 있어서, 카드를 그리기 전에 그 문장에 든 글자의 파일을 먼저 불러 달라고 브라우저에 요청한다. 이걸 빼먹으면 일부 파일만 불러온 채로 그려져서 한글이 다른 글꼴로 찍힐 수 있다(캔버스는 글꼴이 늦게 와도 다시 그려 주지 않는다).

스토어 스크린샷을 찍다가 줄 맨 앞에 쉼표나 마침표가 오는 걸 보고, 닫는 문장부호가 앞 단어에 붙어 다니게 고쳤다. 기울인 도장이 네모·동그라미 펜 자국에 닿는 경우도 있어서 12px 띄웠다. 실제로 써 보면서는 네모 펜 테두리가 위아래 줄끼리 겹쳐 보여서 글자 상자마다 따로 재도록 고쳤고, 여러 장을 고르는 화면도 처음엔 아무것도 선택하지 않은 채로 열리게 하고 「전체 선택」 버튼을 따로 뒀다.

카드는 한 번 내보내면 Markpin이 더는 손대지 않는다. cards/에 저장한 PNG는 동기화하지도 따로 추적하지도 않아서, 페이지를 지워도 그대로 남는다(내 파일이니까). 이 기능을 넣으면서 새 권한은 하나도 추가하지 않았다.

아직 안 되는 것

영역(스크린샷) 클립은 이번 버전에서 카드로 만들 수 없고 텍스트 클립만 된다. 카드 몇 장을 한꺼번에 내려받으면 Chrome이 여러 파일을 받아도 되는지 한 번 물어볼 수 있는데, 이 확인 창을 없애려면 downloads 권한이 필요해서 그대로 뒀다. 그리고 앞에서 말했듯 카드를 다른 사람과 직접 주고받는 기능은 없다. 이야기는 카드를 올린 곳에서 이어지면 좋겠다.

쓰는 방법

1. 평소처럼 글을 읽다가 문장을 마킹하고 메모를 적는다.
2. 사이드패널에서 그 클립 아래의 카드 아이콘을 누른다. 여러 장이면 클립 목록 위의 「카드」를 눌러 고른 뒤 「카드 n장 만들기」.
3. 테마와 비율을 고르고 넣을 항목을 켜고 끈 뒤 미리보기를 확인한다.
4. PNG 내려받기, 복사(한 장일 때), 내 폴더에 저장 중 하나를 누른다. 폰의 markpin.dev/app에서도 똑같이 된다.

Chrome 웹 스토어에서 1.4.0으로 업데이트하면 바로 쓸 수 있다. 만들면서 제일 궁금했던 건 사람들이 어떤 문장을 카드로 만들까 하는 거였는데, 써 보고 마음에 드는 카드가 나오면(또는 이상하게 잘리면) support@markpin.dev로 알려 주시면 감사하겠다.