page-mascot

웹페이지용 커서 반응 마스코트

누가 쓰나개인 사이트·블로그 운영자 · 코딩 에이전트를 쓰는 개발자

개발자용

마우스를 따라 고개를 돌리고 클릭하면 표정을 짓는 캐릭터를 웹페이지에 붙이는 작은 리액트 컴포넌트입니다.

패키지

5분 안에 시작하기 ↓

같은 여우 캐릭터를 그린 두 시트. 왼쪽은 아홉 방향으로 고개를 돌린 모습, 오른쪽은 아홉 가지 표정입니다.

TESIGN TAKE

그림을 직접 그릴 필요 없이 "에이전트에게 그려 달라고 하면 바로 페이지에 붙는다"는 흐름이 재미있는 지점입니다.

관측 데이터와 선정 근거

★ 1.2k기준 11-01 21:00 UTC

별 1,222 · GitHub에서 11-02 02:16 UTC 확인 · 7일 별 증가 관측 없음 (GH Archive) (기준 11-01 21:00 UTC)

신규 생성 16h 만에 포착

한눈에 보는 사실

라이선스: MIT
사용 범위: 상업 이용·수정·재배포 가능. 저작권 고지는 유지.
언어: Python
플랫폼: web
활동: 마지막 커밋 47일 전 (2026-09-15) · 릴리스 없음 기준 11-02 02:16 UTC
커뮤니티: 기여자 1명 · 열린 이슈 3개 (PR 포함) · 만든 이: 개인 기준 11-02 02:16 UTC
출처: GitHub
오픈소스: 예
처음 본 시각: 2026-09-14 23:20 UTC
분류: 디자인

요약이며 법적 조언이 아닙니다.

왜 볼 만한가

page-mascot는 캐릭터 하나를 3×3 방향 시트와 3×3 표정 시트, 두 장의 이미지로 표현합니다. 커서 각도에 따라 방향 시트의 한 칸을 보여주고(커서가 가까우면 정면에서 멈추는 죽은 구간이 있음), 클릭하면 표정 시트의 한 칸을 0.5초간 보여줍니다. 같은 캐릭터를 색·잉크·스케치·리소·종이·픽셀 여섯 스타일로 그릴 수 있고 정렬은 그대로 유지됩니다. 이미 52개의 캐릭터가 준비되어 있어 그림 없이 바로 골라 쓸 수 있고, 원한다면 코딩 에이전트에게 새 캐릭터를 그려 달라고 시킬 수도 있습니다.

이걸로 무엇을 만들 수 있나

개인 블로그나 포트폴리오 페이지에 재미로 마스코트 하나 올리기
브랜드 색에 맞는 캐릭터를 코딩 에이전트에게 그려 달라고 해서 바로 페이지에 붙이기
prefers-reduced-motion을 지키는 작은 인터랙션 위젯의 참고 사례로 보기

누구에게 맞나

개인 사이트·블로그 운영자: 페이지에 작은 재미를 더하고 싶을 때
코딩 에이전트를 쓰는 개발자: 그림 도구 없이 커스텀 캐릭터를 만들고 싶을 때

5분 안에 시작하기

# 캐릭터 고르기: https://koboyo.com/page-mascot 에서 캐릭터를 고르고 두 시트를 내려받기
# 설치: npm i page-mascot
# <Mascot directions="..." reactions="..." />
# 직접 그리기(이미지 생성 도구 필요): npx skills add nilbuild/page-mascot --skill page-mascot --global --yes

주의할 점

직접 그리기 기능은 이미지 생성 도구가 필요합니다(Codex는 자체 도구, Claude Code는 OpenAI 이미지 API 키 필요)
포인터가 없는 기기(터치 전용)에서는 커서 추적이 꺼집니다

영수증

처음 본 시각: 2026-09-14 23:20 UTC
출처 등록: 2026-09-14 06:55 UTC
선정: 2026-09-17 01:24 UTC
생성에서 포착까지: 16h
처음 봤을 때: 282 ★
출처: GitHub

이 항목의 사실을 기계가 읽기 쉬운 형태로 — 마크다운으로 보기 · JSON

비슷한 도구

디자인 분야에서 ★ 총합 순으로 최대 5개. 편집 항목 먼저, 그다음 저장소 카드이며 이 항목은 강조되어 있습니다. 순위와 같은 저장 스냅샷에서 뽑은 비교표이고 추천은 아닙니다. 기준 11-01 21:00 UTC

이름	★ 총합	▲ 7d	라이선스	플랫폼	마지막 push
UI UX Pro MaxAI 코딩에 디자인 감각	★ 144k	▲ +14	MIT허용적	cli	2026-11-01
Taste-Skill에이전트의 화면 디자인 감각	★ 108k	▲ +15	MIT허용적	—	2026-10-31
archify에이전트 사용자용 구조도 생성	★ 92.4k	▲ +11	Apache-2.0허용적	—	2026-10-31
page-mascot웹페이지용 커서 반응 마스코트이 항목	★ 1.2k	—	MIT허용적	web	2026-09-15
toeverything/affine카드	★ 72.5k	▲ +2	라이선스 미확인미확인	—	2026-09-13

타임라인

2026-09-14 06:55 UTC저장소 생성
2026-09-14 23:20 UTCTESIGN이 처음 본 시각
2026-09-17 01:24 UTCTESIGN 게재

같은 날 고른 것

01
BG0
계정 없이 쓰는 배경 제거
사진을 서버에 올리지 않고, 브라우저 안에서만 배경을 지웁니다. WebGPU가 있으면 그걸 쓰고 없으면 WebAssembly로 돌아갑니다.
설치 없이 바로
★ 48611-01 21:00 UTC
02
ZapFast
가벼운 왓츠앱 클라이언트
브라우저 엔진 없이 러스트로 새로 만든 왓츠앱 클라이언트로, 리눅스에서 유휴 메모리 약 150MB — 왓츠앱 웹(1.13GB)의 8분의 1 수준입니다.
설치해서 쓰기
★ 2.4k▲ 4 HN11-01 21:00 UTC
03
Wealthfolio
로컬 우선 자산관리 앱
투자·순자산·소비를 내 기기에만 저장해서 추적하는 오픈소스 자산관리 앱으로, 클라우드 계정이 필요 없습니다.
설치해서 쓰기
★ 9.3k11-01 21:00 UTC
05
Podroid
폰용 리눅스 컨테이너 VM
루트 권한 없이 안드로이드 폰에서 별도 커널을 가진 진짜 알파인 리눅스 VM을 띄워, Podman·Docker·LXC를 서버와 똑같이 돌립니다.
설치해서 쓰기
★ 3.7k11-01 21:00 UTC
06
Capsule
단일 파일 앱 플레이어
HTML 앱과 그 데이터를 SQLite 파일 하나에 통째로 담아, 계정도 서버도 없이 파일 하나로 주고받는 데스크톱 플레이어입니다.
설치해서 쓰기
▲ 379 HN11-01 21:00 UTC
07
SparkyFitness
가족용 자가호스팅 건강 추적
영양·운동·수면·단식·기분·체성분을 한 앱에서 추적하는 자가호스팅 건강 트래커로, 데이터는 내가 띄운 서버에만 남습니다.
직접 서버에
★ 6.7k11-01 21:00 UTC
08
Inkstone
자가호스팅 마크다운 노트
마크다운 메모를 Cloudflare Workers 위에 직접 올려 쓰는 자가호스팅 노트 앱으로, 실시간 동기화와 검색·백링크까지 갖췄습니다.
직접 서버에
★ 1.2k11-01 21:00 UTC
09
MartinLoop
에이전트 실행 통제
코딩 에이전트에게 예산 한도와 검증 절차를 채워, "완료했다"는 말 대신 증거가 붙은 영수증을 받게 만듭니다.
★ 39411-01 21:00 UTC
10
OpenHunterAI
로컬 AI 보안 점검
내가 소유하거나 테스트 허가를 받은 웹·API 서비스만을 대상으로, 공격자 시각의 보안 점검을 로컬 워크스페이스에서 돌리는 알파 단계 도구입니다.
직접 서버에
★ 33511-01 21:00 UTC