글 끝에 붙이는 '작가 알림 카드' 만들기

매거진에 기고를 시작하고 나서 생긴 고민 하나 — 글은 읽히는데, 다음 글까지 이어지지 않는다

비개발자가 클로드코드로 만든 이미지 카드 한 장, 그리고 만들면서 알게 된 사실들

왜 만들었나

구독 중인 매거진에서 어느 작가님의 글을 읽다가, 본문 맨 아래에 붙은 카드 한 장을 봤습니다. 프로필 사진과 이름, 조회수, 그리고 "최신 콘텐츠 알림 받기" 버튼이 그려진 이미지에 커서 그림까지 얹어서 "여기를 눌러주세요" 하고 안내하는 그림이었습니다.

글을 다 읽은 독자가 그냥 나가버리는 것과, 알림을 켜고 나가는 것은 다음 글의 출발선이 다릅니다. 저도 만들기로 했습니다. 캡처해서 잘라 쓸 수도 있었지만, 숫자가 바뀔 때마다 다시 캡처하는 게 귀찮을 것 같아서 클로드코드에게 카드를 직접 그려달라고 했습니다.

완성한 카드 — 프로필 사진·소개·지표·알림 버튼·주소 한 줄 (직접 그린 것이라 숫자만 고치면 30초 만에 다시 뽑힙니다)

만드는 데 든 것: 대화 몇 줄

코딩을 하지 않았습니다. 참고할 이미지와 제 프로필 화면을 캡처해서 보여주고 이렇게 말했을 뿐입니다.

"내 매거진 글 하단에도 이런 부분을 추가하고 싶어. 만들어줄 수 있을까? 두 번째 이미지 참고해서"

클로드코드가 한 일은 세 가지입니다. ①카드를 HTML로 그리고 ②크롬을 화면 없이 실행해 2배 고화질 PNG로 뽑고 ③결과를 눈으로 검수해서 어긋난 곳을 고치는 것. 저는 "얼굴이 작아 보인다" 같은 감상만 말했고, 확대·정렬 수치는 클로드가 잡았습니다.

캡처 대신 직접 그렸을 때의 이득 — 조회수가 늘면 숫자만 바꿔 다시 뽑으면 됩니다. 캡처본은 매번 새로 찍고 잘라야 하고, 화면이 바뀌면 다시 찍어야 합니다.

여기서 착각했던 것 — "이미지를 누르면 알림이 켜지겠지?"

카드를 다 만들고 원고에 넣은 뒤에야 의문이 들었습니다. 독자가 이 그림을 누르면 진짜로 알림이 켜지나? 확인해 보니 아니었습니다. 셋으로 정리됩니다.

사실 1. 그림만 넣으면 눌러도 아무 일도 일어나지 않습니다. 그림은 그림일 뿐입니다. 제가 참고했던 그 카드도 마찬가지였습니다 — 커서 화살표는 "이런 버튼이 있어요"라는 안내 그림이지 진짜 버튼이 아닙니다.

사실 2. 그림에 하이퍼링크를 걸면 "작가 페이지로 이동"까지는 됩니다. 원고 문서에서 그림에 링크를 걸 수 있습니다. 다만 매체 편집을 거치면서 링크가 살아남을지는 매체마다 다릅니다.

사실 3. 클릭 한 번으로 알림이 자동으로 켜지게 하는 것은 불가능합니다. 특정 매체의 한계가 아니라 모든 사이트의 보안 원칙입니다 — 링크 한 번으로 남의 계정 설정이 바뀐다면 그게 바로 공격이 되니까요. 알림은 반드시 ①본인이 로그인한 상태에서 ②본인 손으로 버튼을 눌러야 켜집니다.

그래서 목표를 바꿨습니다. "누르면 알림이 켜진다"가 아니라 "누르면 알림 버튼이 있는 페이지로 데려다준다"로.

그래서 3중으로 깔았습니다

안전장치	무엇	왜
1겹	카드 그림 안에 내 페이지 주소를 큰 글씨로 새김	링크가 전부 죽어도 눈으로 보고 찾아올 수 있음
2겹	원고 문서에서 그림에 하이퍼링크	살아남으면 클릭 한 번에 이동
3겹	본문 맨 끝에 글자 링크 한 줄	가장 확실 — 편집자가 이미지 링크는 놓쳐도 글자 링크는 대개 그대로 살려줌

워드에서 그림에 링크 거는 법 (5걸음)

원고에 넣은 카드 그림을 한 번 클릭(테두리에 동그라미가 생기면 선택된 것)

그 상태에서 마우스 오른쪽 클릭

메뉴에서 [링크] (또는 [하이퍼링크]) 클릭

창 아래쪽 "주소" 칸에 내 작가 페이지 주소를 붙여넣기

[확인] → 끝

🔍 잘 걸렸는지 확인법: 키보드 Ctrl을 누른 채 그림을 클릭 → 인터넷 창이 열리면 성공입니다.

그리고 편집 담당자에게 한 번 물어두면 다음 글부터는 고민할 일이 없어집니다. "본문 하단에 작가 페이지 링크를 이미지와 텍스트로 넣었습니다. 발행 시 링크가 유지될까요? 이미지가 어렵다면 텍스트 링크만이라도 살려주시면 감사하겠습니다."

같은 방식으로 만들고 싶다면

준비물은 프로필 사진 파일 하나와, 내 작가 페이지에 표시된 숫자 몇 개뿐입니다. 클로드코드에게 이렇게 말하면 됩니다.

"내 작가 페이지 카드를 만들어줘. 이름은 ○○○, 소개 한 줄은 ○○○, 조회 수 ○○, 좋아요 ○○, 스크랩 ○○.
프로필 사진은 작업 폴더에 '프로필.jpg'로 넣어뒀어. 카드 아래에 내 페이지 주소도 한 줄 넣어줘."

그다음 숫자가 늘면 이 한마디면 끝입니다.

"카드 숫자 갱신 — 조회 18.2K, 좋아요 45, 스크랩 30"

숫자는 매번 갱신하지 않아도 됩니다. 앞자리가 바뀔 만큼 늘었을 때만 바꾸면 충분합니다.

남는 이야기

이 작업에서 제일 오래 걸린 건 카드를 그리는 일이 아니라 "이미지를 누르면 알림이 켜지는 줄 알았던 착각"을 확인하는 일이었습니다. 만들기 전에 물었으면 5분이면 알았을 것을, 다 만들고 나서 물었습니다.

그래도 손해는 아니었습니다. 확인하는 과정에서 왜 그게 불가능한지(링크 한 번으로 계정 설정이 바뀌면 그게 공격이라는 것)를 알게 됐고, 그래서 3중 장치라는 차선책이 나왔으니까요. 비개발자가 도구를 쓰면서 배우는 건 대부분 이런 순서로 옵니다 — 먼저 만들고, 부딪히고, 그제야 원리를 알게 되는.