← Projects로 돌아가기
나무를 누르고 꽃잎을 잡는 흐름을 중심으로 구성한 봄 시즌 인터랙션
Cherry Wish
Cherry Wish
2026.03Published#toy#interaction#animation#seasonal
Cherry Wish는 벚꽃나무를 누르고, 흩날리는 꽃잎을 잡아 오늘의 소원 메시지를 확인하는 단일 페이지 인터랙티브 프로젝트입니다. 짧은 시간 안에 사용자가 바로 이해하고 참여할 수 있는 감성적인 봄 시즌 경험으로 설계했습니다.
나무를 누르면 꽃잎이 흩날리고, 꽃잎을 잡으면 메시지가 열리는 흐름을 중심에 두었습니다. 모바일에서도 가볍고 부드럽게 느껴지도록 애니메이션과 반복 플레이 구조를 단순하게 유지했습니다.
React, TypeScript, Pixi.js, GSAP을 사용해 캔버스 기반 시각 효과와 UI 상태를 연결했고, Vite 기반으로 빠르게 배포 가능한 작은 인터랙션 프로젝트로 완성했습니다.
What I worked on
- 벚꽃나무를 누르고 꽃잎을 잡는 짧은 상호작용을 한 화면 안에서 이해할 수 있도록 기획하고 구현했습니다.
- 꽃잎이 흩날리는 애니메이션과 소원 메시지 표시 흐름을 연결해 사용자의 행동이 즉시 결과로 이어지게 만들었습니다.
- 모바일에서도 부담 없이 실행되도록 화면 구조와 인터랙션 단계를 단순하게 유지했습니다.
- 다시 하기까지 자연스럽게 이어지는 반복 플레이 구조를 만들어 짧은 경험의 완성도를 높였습니다.
Technical highlights
- React와 TypeScript 기반으로 UI 상태를 구성하고 Vite로 가볍게 빌드·배포할 수 있는 구조를 사용했습니다.
- Pixi.js와 GSAP을 활용해 벚꽃나무와 꽃잎 애니메이션을 구현했습니다.
- 단일 페이지 경험에 맞춰 인터랙션 단계와 안내 문구를 최소화해 첫 방문자가 바로 사용할 수 있게 했습니다.
Screens
« Newer
TripMarble
여행지 탐색을 미션형 보드게임 루프로 연결한 웹 서비스