냥이 놀이터 소개

냥이 놀이터는 SD(Super Deformed) 스타일의 고양이 캐릭터가 화면을 자유롭게 뛰어다니는 인터랙티브 웹사이트입니다. 외부 라이브러리 없이 순수 HTML, CSS, JavaScript만으로 제작된 미니 프로젝트입니다.

제작 동기

복잡한 프레임워크 없이도 생동감 있는 웹 경험을 만들 수 있다는 것을 보여주고 싶었습니다. CSS 애니메이션과 requestAnimationFrame만으로 부드러운 캐릭터 움직임을 구현하는 데 집중했습니다.

기술 스택

HTML5 CSS3 Animation Vanilla JS requestAnimationFrame Cloudflare Pages

주요 기능

• 상태 머신 — 걷기, 달리기, 쉬기 세 가지 상태가 무작위 타이머로 전환됩니다.
• 충돌 감지 — 화면 가장자리에 닿으면 각도를 조절하며 자연스럽게 반사됩니다.
• 클릭 인터랙션 — 고양이를 클릭하면 깜짝 반응과 말풍선이 나타납니다.
• 순수 CSS 캐릭터 — 이미지 파일 없이 CSS div로 SD 고양이를 렌더링합니다.
• 반응형 레이아웃 — 모바일과 데스크탑 모두 최적화된 레이아웃을 제공합니다.

문의

피드백이나 문의사항은 [email protected]으로 보내주세요.