노션 위젯으로 실시간 검색어 카드 넣는 법: 깃허브 프로필까지 한 줄
노션 위젯은 이미지 URL 한 줄로 완성되는 임베드 블록이다. 프로그램 설치도, 코드 작성도 필요 없다. 이미지 주소를 붙여넣을 수 있는 지면이라면 노션 대시보드든 깃허브 프로필이든 실시간 검색어 카드가 그대로 들어간다. 매일 여는 화면에 지금 뜨는 검색어가 박혀 있으면, 트렌드 확인은 따로 챙기는 일이 아니라 저절로 되는 일이 된다.
이 글은 이미지 URL 임베드의 원리부터 노션 /image 블록 설치 3단계, 깃허브 README 마크다운 한 줄, 네이버 블로그 대응, 특정 검색어 뱃지 활용, 30분 자동 갱신 원리, 설치 후 자가점검표까지 순서대로 다룬다.
이미지 URL 임베드 원리: 마크다운이 되면 어디든 들어간다
깃허브 프로필 꾸미기 문화에서 뱃지는 기본 문법이 된 지 오래다. 기술 스택 뱃지, 방문자 카운터, 잔디 그래프가 전부 같은 원리로 움직인다. 서버가 요청을 받을 때마다 이미지를 새로 그려서 돌려주는 동적 이미지다. 붙여넣는 쪽에서는 그림 한 장을 넣은 것 같지만, 실제로는 열 때마다 최신 내용이 렌더링된다. 개발자들이 프로필에 뱃지를 다는 이유가 바로 이것이다. 한 번 붙이면 관리 없이 계속 살아 있는 정보가 되기 때문이다.
실시간 검색어 카드도 똑같다. 키팡의 이미지 카드 주소 https://keypang.kr/badge/today.svg 는 URL이 고정된 SVG 이미지이고, 서버가 30분마다 내용을 다시 그린다. 네이버 실시간 검색어 폐지 이후 지금 뜨는 검색어를 확인할 창구가 흩어졌는데, 경로별 정리는 지금 뜨는 검색어 확인하는 법에서 다뤘다. 카드 한 장이면 매일 쓰는 대시보드가 그 창구가 된다.
핵심은 하나다. 마크다운이든 HTML이든 이미지 URL을 받아주는 지면이라면, 그 지면이 곧 실시간 트렌드 보드가 된다.
실시간 카드가 지면에 들어가는 구조
URL은 고정되고 내용만 바뀐다. 설치한 뒤 지면 쪽에서 손댈 것이 없다.
| 지면 | 지원 방식 | 쓸 카드 | 설치 시간 |
|---|---|---|---|
| 노션 | /image 블록에 URL 임베드 | 이미지 카드(today.svg) | 약 1분 |
| 깃허브 README | 마크다운 한 줄 | 이미지 카드 | 약 1분 |
| 티스토리 | HTML 편집 모드 | iframe 위젯 또는 이미지 카드 | 약 2분 |
| 네이버 블로그 | 이미지 첨부만 허용 | 이미지 카드(발행 시점 스냅샷) | 약 3분 |
노션 대시보드: /image 블록에 붙여넣는 3단계
노션은 이미지 블록에서 외부 URL 임베드를 공식 지원한다. 자세한 사양은 노션 도움말(이미지, 파일, 미디어)에 나와 있다. 절차는 3단계다.
- 노션 페이지에서 "/image"를 입력하고 이미지 블록을 선택한다.
- "링크 임베드" 탭에 아래 URL을 붙여넣는다.
- 블록 모서리를 끌어 폭을 조절하고 대시보드 상단에 배치한다.
https://keypang.kr/badge/today.svg주의할 점은 하나다. 파일 업로드가 아니라 반드시 "링크 임베드"여야 한다. 업로드하면 그 순간의 스냅샷이 박제되고, 링크로 임베드해야 서버 갱신이 그대로 반영된다.
아침에 노션부터 여는 습관이 있다면 데일리 페이지 최상단이 가장 좋은 자리다. 카드 확인에서 글감 선정까지 이어지는 아침 15분 흐름은 크리에이터 아침 루틴 3단계에 정리되어 있다.
깃허브 프로필 README: 마크다운 한 줄이면 끝
깃허브는 계정명과 같은 이름의 공개 저장소에 README.md를 만들면 프로필 상단에 그 내용을 노출한다. 스택 뱃지와 방문자 카운터 아래에 실시간 검색어 카드 한 줄을 추가하면, 방문자가 들어올 때마다 내용이 달라지는 살아 있는 프로필이 된다.
[](https://keypang.kr)첫 줄은 카드만 표시하는 기본형, 둘째 줄은 클릭하면 순위 전체 페이지로 이동하는 링크형이다. 둘 중 하나를 README.md에 붙여넣고 커밋하면 반영된다.
깃허브는 외부 이미지를 캐시 프록시를 거쳐 보여주기 때문에 갱신 반영이 몇 분 지연될 수 있으나, 별도 설정 없이 자동으로 따라온다.
3분 실행. 노션이든 깃허브든 붙여넣을 URL은 결국 하나다. 설치 안내 페이지에서 지면별 코드를 복사해 지금 쓰는 대시보드에 넣어보면 원리가 바로 잡힌다.
키팡 위젯 설치 안내에서 코드 복사하기
네이버 블로그: iframe 차단 지면은 이미지 첨부로
네이버 블로그 에디터는 외부 iframe 삽입을 차단한다. 따라서 자동 갱신형 임베드는 불가능하고, 이미지 카드를 활용한 첨부 방식만 가능하다. 발행 직전 브라우저에서 today.svg를 열어 이미지로 저장한 뒤 본문에 일반 이미지로 첨부한다. 이 경우 카드는 발행 시점의 스냅샷으로 고정되며 자동 갱신되지 않으므로, 본문에 "몇 시 기준"인지 시점을 적어두면 독자 혼란이 없다.
반면 HTML 편집을 지원하는 티스토리는 iframe 위젯을 그대로 넣을 수 있다. 3시간마다 실측 데이터로 갱신되고 무료이며, 위젯 하단에 출처 표기가 고정으로 들어가는 형태다.
<iframe src="https://keypang.kr/widget/embed/?theme=dark&n=10"
width="100%" height="420" title="실시간 검색어 위젯"></iframe>theme는 dark 또는 light, n은 5 또는 10으로 조절한다. 높이는 지면 폭에 맞게 손보면 된다.
네이버 블로그를 운영하면서 노션도 함께 쓰고 있다면, 갱신형 카드는 노션에 두고 블로그에는 스냅샷을 쓰는 이원화가 현실적인 답이다.
특정 검색어 뱃지: 관심 주제 순위만 골라 추적한다
전체 순위 카드가 "오늘 무엇이 뜨는가"를 보여준다면, 특정 검색어 뱃지는 "내 주제가 지금 어디쯤인가"를 보여준다. 주소 형식은 다음과 같다.
https://keypang.kr/badge/k/검색어.svg
예: https://keypang.kr/badge/k/장마.svg노션 프로젝트 페이지에 내가 다루는 주제의 뱃지를 나란히 붙여두면, 페이지를 열 때마다 관심 키워드의 흐름이 눈에 들어온다. 운영 주제가 여러 개인 블로거라면 주제별 뱃지를 한 줄에 모아두는 것만으로 모니터링 보드가 완성된다.
관건은 다루는 주제가 순위권에 진입한 순간을 놓치지 않는 것이다. 그 순간을 실제 콘텐츠로 바꾸는 시간 싸움은 급상승 검색어의 골든타임에서 정리했다.
대시보드는 보기 좋으라고 만드는 물건이 아니다. 카드에서 낯선 검색어를 발견한 순간, 그 자리에서 글감 메모 한 줄을 남기는 사람만 대시보드의 값을 회수한다.
30분 자동 갱신 원리와 설치 후 자가점검표
이미지 카드의 갱신은 지면이 아니라 서버에서 일어난다. 서버가 30분마다 실측 데이터로 SVG를 다시 그리고, 지면은 고정된 URL로 그 결과를 받아올 뿐이다. 노션도 깃허브도 갱신 작업에 관여하지 않기 때문에, 설치가 끝난 뒤에는 어느 지면에서도 손댈 것이 없다. iframe 위젯은 3시간 주기로 실측 갱신된다는 점만 다르다.
임베드 방식별 갱신 주기
이미지 카드는 30분, iframe 위젯은 3시간 주기. 막대가 짧을수록 갱신이 잦다. 두 방식 모두 접속자 쪽 설정은 필요 없다.
설치가 끝나면 아래 표로 한 번만 점검한다.
| 점검 항목 | 확인 방법 | 통과 기준 |
|---|---|---|
| 카드 표시 | 시크릿 창에서 해당 페이지 열기 | 이미지 정상 노출 |
| 갱신 반영 | 30분 이상 지난 뒤 새로고침 | 순위 변화 반영(캐시 지연 감안) |
| 모바일 표시 | 스마트폰에서 페이지 열기 | 가로 스크롤 없이 카드 가독 |
| 클릭 동선 | 링크형이라면 카드 클릭 | 순위 페이지로 이동 |
네 항목이 모두 통과되면 설치는 끝났다.
이후에 남는 일은 하나, 그 대시보드를 매일 여는 습관뿐이다.
자주 묻는 질문
- 노션 위젯에 넣는 실시간 검색어 카드는 무료인가?
- 무료다. 키팡의 이미지 카드와 iframe 위젯 모두 비용 없이 쓸 수 있고, iframe 위젯 하단에는 출처 표기가 고정으로 들어간다. 지면별 설치 방법은 keypang.kr/widget/ 안내 페이지에 정리되어 있다.
- 노션에 넣은 카드가 갱신되지 않는 것처럼 보이면?
- 파일 업로드가 아닌 "링크 임베드"로 넣었는지 먼저 확인한다. 링크 임베드가 맞다면 서버는 30분마다 갱신하지만 브라우저나 플랫폼 캐시 때문에 반영이 늦어질 수 있다. 새로고침하거나 시간이 조금 지난 뒤 다시 열면 최신 순위가 표시된다.
- 깃허브 프로필 README가 없는데 어떻게 만드나?
- 계정명과 동일한 이름의 공개 저장소를 만들고 README.md를 추가하면 프로필 상단에 자동 노출된다. 자세한 조건은 깃허브 공식 문서에 나와 있다.
- 네이버 블로그에도 자동 갱신 카드를 넣을 수 있나?
- 불가능하다. 네이버 블로그는 외부 iframe을 차단하기 때문에, 발행 시점에 이미지 카드를 저장해 첨부하는 스냅샷 방식만 쓸 수 있다. 자동 갱신이 필요하면 노션이나 깃허브, 티스토리 같은 지면을 함께 운용하는 편이 낫다.
오늘 대시보드에 카드 한 장 붙여넣기
원리는 단순하다. URL 하나가 지면에 들어가고, 서버가 30분마다 내용을 갈아끼운다. 노션이면 /image 블록, 깃허브면 마크다운 한 줄, 지면당 걸리는 시간은 3분을 넘지 않는다.
매일 여는 화면에 실시간 검색어 카드가 박혀 있는 것과 필요할 때마다 검색해 찾아보는 것의 차이는, 한 달 뒤 글감 목록의 두께로 돌아온다.
키팡 위젯 설치 안내에서 노션, 깃허브용 카드 URL 복사하기