# page-mascot

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

- 페이지: https://tesign.com/item/page-mascot/
- JSON: https://tesign.com/item/page-mascot/index.json
- 영어 마크다운: https://tesign.com/en/item/page-mascot/index.md
- 생성 시각: 2026-09-17 01:56 UTC

## 숫자

- 별 307 — GitHub에서 2026-09-15 03:29 UTC 확인 (+25 확인 이후 관측)
- 7일 +39은 GH Archive 관측 (기준 2026-09-16 21:00 UTC)
- 24h +4 ★ · 30d +39 ★ (기준 2026-09-16 21:00 UTC)
- 별 총합 = GitHub에서 마지막으로 확인한 값(stars_checked_at) + 그 뒤 GH Archive에서 관측한 증가. 24h·7d·30d 증가는 GH Archive 시간별 이벤트를 기준 시각(as_of)까지 합한 값. 우리 점수는 없습니다.

## 한눈에 보는 사실

- 라이선스: MIT (허용적) — https://spdx.org/licenses/MIT.html
- 사용 범위: 상업 이용·수정·재배포 가능. 저작권 고지는 유지.
- 오픈소스: 예
- 언어: Python
- 플랫폼: web
- 분류: 디자인
- 태그: react-component · mascot · cursor-tracking · fun · npm-package
- 바로 쓰기: 개발자용
- 출처: GitHub https://github.com/nilbuild/page-mascot
- USE PACKAGE: https://koboyo.com/page-mascot

## 활동

- 마지막 커밋: 2026-09-14 10:26 UTC
- 최근 릴리스: [확인 필요]
- 기여자: [확인 필요]
- 열린 이슈 (PR 포함): [확인 필요]
- 만든 이: [확인 필요]
- GitHub 확인 시각: 2026-09-15 03:29 UTC

## 선정 신호와 근거

- 신규 · 생성 16h 만에 포착

## TESIGN TAKE

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

## 왜 볼 만한가

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
```

## 주의할 점

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

## 영수증

- TESIGN이 처음 본 시각: 2026-09-14 23:20 UTC
- 출처 등록: 2026-09-14 06:55 UTC
- 선정: 2026-09-17 01:24 UTC
- TESIGN 게재: 2026-09-17 01:24 UTC
- 소개 글 마지막 수정: 2026-09-17 01:26 UTC

## 읽는 법

- 이 파일은 tesign.com 항목 페이지와 같은 빌드에서 같은 데이터로 만들어졌습니다. 소개 글은 편집자가 쓴 것이고, 숫자는 저장된 관측값입니다.
- JSON의 null은 관측하지 않았다는 뜻입니다 — 0이 아닙니다. 마크다운에서는 [확인 필요]로 적습니다.
- 별 총합 = GitHub에서 마지막으로 확인한 값(stars_checked_at) + 그 뒤 GH Archive에서 관측한 증가. 24h·7d·30d 증가는 GH Archive 시간별 이벤트를 기준 시각(as_of)까지 합한 값. 우리 점수는 없습니다.
- 요약이며 법적 조언이 아닙니다.

[대표 이미지] https://tesign.com/img/page-mascot-0346198536.png