커서에 반응하는 인터랙티브 마스코트 컴포넌트 활용 가이드
nilbuild/page-mascot
GitHub웹페이지에 커서 움직임이나 클릭 같은 사용자 상호작용에 반응하는 인터랙티브 마스코트를 쉽게 추가할 수 있는 컴포넌트입니다.
- 기존 이미지를 사용하는 것을 넘어, 텍스트 프롬프트만으로 원하는 콘셉트의 캐릭터를 직접 생성하고 웹사이트에 구현할 수 있습니다.
- 캐릭터는 방향과 표정별 스프라이트 시트를 기반으로 움직이며, 복잡한 애니메이션 코딩 없이도 독특하고 생동감 있는 사용자 경험을 제공합니다.
- AI를 활용해 마스코트를 생성하는 기능은 이미지 처리 도구(예: OpenAI API)가 필요하며, 색상, 스케치 등 다양한 스타일로 커스터마이징할 수 있습니다.
이 컴포넌트는 커서를 추적하고 사용자의 상호작용(예: 클릭) 시 반응하는 인터랙티브 캐릭터를 웹페이지에 추가할 수 있게 합니다. 기존의 마스코트를 사용할 경우, 데모 페이지에서 원하는 캐릭터의 두 스프라이트 시트(directions와 reactions)를 다운로드하여 `public/mascots` 폴더에 배치한 후, `<Mascot>` 컴포넌트에 해당 경로를 지정해 사용합니다. 이 과정은 NPM 설치 및 특정 props(`directions`, `reactions`) 설정을 통해 구현할 수 있습니다.
기존 에셋을 넘어 텍스트 만으로 새로운 마스코트를 생성하는 기능도 제공됩니다. 전용 스킬이 설치된 후, 사용자들은 채팅 UI에서 `/page-mascot` 명령어를 사용하여 원하는 콘셉트(예: 'chibi otter with chocolate-brown fur')를 요청할 수 있습니다. 이 과정은 이미지 도구(예: OpenAI images )가 필요하며, AI가 방향과 표정별 스프라이트 시트를 생성하고 컴포넌트에 적용합니다.
마스코트는 총 두 개의 3x3 스프라이트 시트로 구성되어 있으며, 각각 아홉 가지의 머리 방향과 아홉 가지의 표정을 담고 있습니다. 커서의 각도에 따라 방향 시트에서 셀을 선택하며, 클릭 시에는 반응 시트의 특정 셀이 반사됩니다. 이 컴포넌트는 색상, 잉크, 스케치, 리소, 종이, 픽셀 등 여섯 가지 스타일로 캐릭터를 그릴 수 있으며, 스타일 변경에도 정렬이 유지되도록 설계되었습니다.
용어 풀이
- 프롬프트
- AI에게 주는 지시나 질문 글.
- API
- 프로그램끼리 기능을 주고받는 약속된 창구. AI 모델은 보통 API로 불러 써요.