{
  "schema": "tesign-radar/item/1",
  "generated_at": "2026-09-17T01:56:13.055Z",
  "lang": "ko",
  "slug": "page-mascot",
  "url": "https://tesign.com/item/page-mascot/",
  "alternates": {
    "ko": {
      "html": "https://tesign.com/item/page-mascot/",
      "json": "https://tesign.com/item/page-mascot/index.json",
      "markdown": "https://tesign.com/item/page-mascot/index.md"
    },
    "en": {
      "html": "https://tesign.com/en/item/page-mascot/",
      "json": "https://tesign.com/en/item/page-mascot/index.json",
      "markdown": "https://tesign.com/en/item/page-mascot/index.md"
    }
  },
  "name": "page-mascot",
  "use_label": "웹페이지용 커서 반응 마스코트",
  "one_liner": "마우스를 따라 고개를 돌리고 클릭하면 표정을 짓는 캐릭터를 웹페이지에 붙이는 작은 리액트 컴포넌트입니다.",
  "text": {
    "why": "page-mascot는 캐릭터 하나를 3×3 방향 시트와 3×3 표정 시트, 두 장의 이미지로 표현합니다. 커서 각도에 따라 방향 시트의 한 칸을 보여주고(커서가 가까우면 정면에서 멈추는 죽은 구간이 있음), 클릭하면 표정 시트의 한 칸을 0.5초간 보여줍니다. 같은 캐릭터를 색·잉크·스케치·리소·종이·픽셀 여섯 스타일로 그릴 수 있고 정렬은 그대로 유지됩니다. 이미 52개의 캐릭터가 준비되어 있어 그림 없이 바로 골라 쓸 수 있고, 원한다면 코딩 에이전트에게 새 캐릭터를 그려 달라고 시킬 수도 있습니다.",
    "take": "그림을 직접 그릴 필요 없이 \"에이전트에게 그려 달라고 하면 바로 페이지에 붙는다\"는 흐름이 재미있는 지점입니다.",
    "build": [
      "개인 블로그나 포트폴리오 페이지에 재미로 마스코트 하나 올리기",
      "브랜드 색에 맞는 캐릭터를 코딩 에이전트에게 그려 달라고 해서 바로 페이지에 붙이기",
      "prefers-reduced-motion을 지키는 작은 인터랙션 위젯의 참고 사례로 보기"
    ],
    "who": [
      {
        "role": "개인 사이트·블로그 운영자",
        "situation": "페이지에 작은 재미를 더하고 싶을 때"
      },
      {
        "role": "코딩 에이전트를 쓰는 개발자",
        "situation": "그림 도구 없이 커스텀 캐릭터를 만들고 싶을 때"
      }
    ],
    "start": [
      {
        "command": false,
        "text": "캐릭터 고르기: https://koboyo.com/page-mascot 에서 캐릭터를 고르고 두 시트를 내려받기"
      },
      {
        "command": false,
        "text": "설치: npm i page-mascot"
      },
      {
        "command": false,
        "text": "<Mascot directions=\"...\" reactions=\"...\" />"
      },
      {
        "command": false,
        "text": "직접 그리기(이미지 생성 도구 필요): npx skills add nilbuild/page-mascot --skill page-mascot --global --yes"
      }
    ],
    "caveat": [
      "MIT © Kamran Ahmed",
      "직접 그리기 기능은 이미지 생성 도구가 필요합니다(Codex는 자체 도구, Claude Code는 OpenAI 이미지 API 키 필요)",
      "포인터가 없는 기기(터치 전용)에서는 커서 추적이 꺼집니다"
    ]
  },
  "cta": {
    "type": "use_package",
    "label": "USE PACKAGE",
    "url": "https://koboyo.com/page-mascot"
  },
  "ready": "developer",
  "categories": [
    "design"
  ],
  "categories_confirmed": true,
  "tags": [
    "react-component",
    "mascot",
    "cursor-tracking",
    "fun",
    "npm-package"
  ],
  "platform": [
    "web"
  ],
  "license": {
    "spdx": "MIT",
    "scope": "permissive",
    "scope_text": "상업 이용·수정·재배포 가능. 저작권 고지는 유지.",
    "url": "https://spdx.org/licenses/MIT.html",
    "note": null,
    "open_source": true
  },
  "language": "Python",
  "source_urls": {
    "canonical": "https://koboyo.com/page-mascot",
    "github": "https://github.com/nilbuild/page-mascot",
    "huggingface": null,
    "app_store": null,
    "sightings": [
      {
        "source": "github",
        "url": "https://github.com/nilbuild/page-mascot",
        "posted_at": "2026-09-14T15:00:00.000Z",
        "hn_url": null
      }
    ]
  },
  "numbers": {
    "as_of": "2026-09-16T21:00:00.000Z",
    "stars": 307,
    "stars_unit": "GitHub stars",
    "stars_checked_at": "2026-09-15T03:29:45.508Z",
    "stars_observed_since_check": 25,
    "star_delta_24h": 4,
    "star_delta_7d": 39,
    "star_delta_30d": 39,
    "star_delta_unit": "GitHub stars gained in the window, GH Archive events summed to as_of",
    "spark_14d": [
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      8,
      29,
      2
    ],
    "hf_likes": null,
    "hf_likes_observed_at": null,
    "hn_points": null,
    "hn_points_observed_at": null,
    "store": null,
    "method": "별 총합 = GitHub에서 마지막으로 확인한 값(stars_checked_at) + 그 뒤 GH Archive에서 관측한 증가. 24h·7d·30d 증가는 GH Archive 시간별 이벤트를 기준 시각(as_of)까지 합한 값. 우리 점수는 없습니다."
  },
  "ranks": null,
  "activity": {
    "pushed_at": "2026-09-14T10:26:58.000Z",
    "owner_type": null,
    "open_issues": null,
    "contributors": null,
    "releases_count": null,
    "latest_release": null,
    "checked_at": null,
    "core_checked_at": "2026-09-15T03:29:45.508Z"
  },
  "signals": [
    {
      "kind": "new",
      "label": "신규",
      "value": "생성 16h 만에 포착"
    }
  ],
  "images": {
    "og": "https://tesign.com/img/page-mascot-0346198536.png",
    "cover": "https://tesign.com/img/page-mascot-0346198536.png",
    "cover_width": 938,
    "cover_height": 446,
    "gallery": [
      "https://tesign.com/img/page-mascot-0346198536.png",
      "https://tesign.com/img/page-mascot-c348bd0af9.png"
    ],
    "alt": "같은 여우 캐릭터를 그린 두 시트. 왼쪽은 아홉 방향으로 고개를 돌린 모습, 오른쪽은 아홉 가지 표정입니다.",
    "tier": 2
  },
  "dates": {
    "first_seen_at": "2026-09-14T23:20:51.574Z",
    "source_created_at": "2026-09-14T06:55:59.000Z",
    "discovery_hours": 16.414603888888887,
    "launch_signal_at": "2026-09-14T15:00:00.000Z",
    "kept_at": "2026-09-17T01:24:00.673Z",
    "first_published_at": "2026-09-17T01:24:00.858Z",
    "updated_at": "2026-09-17T01:26:30.179Z",
    "ingestion_mode": "live"
  },
  "notes": [
    "이 파일은 tesign.com 항목 페이지와 같은 빌드에서 같은 데이터로 만들어졌습니다. 소개 글은 편집자가 쓴 것이고, 숫자는 저장된 관측값입니다.",
    "JSON의 null은 관측하지 않았다는 뜻입니다 — 0이 아닙니다. 마크다운에서는 [확인 필요]로 적습니다.",
    "별 총합 = GitHub에서 마지막으로 확인한 값(stars_checked_at) + 그 뒤 GH Archive에서 관측한 증가. 24h·7d·30d 증가는 GH Archive 시간별 이벤트를 기준 시각(as_of)까지 합한 값. 우리 점수는 없습니다.",
    "요약이며 법적 조언이 아닙니다."
  ]
}