tinder 스타일의 카드 인터랙션

안녕하세요. 저는 현재 프론트엔드 개발자로 일하고 있고, 소소하게 진행한 개인 프로젝트를 공유드리고 싶어 글을 작성하게 되었습니다.

우선 이 프로젝트는 Slack의 따라잡기 기능과 Tinder에서 영감을 얻었고 앱의 인터랙션을 FE 기술 스택으로 한번 구현해 보고 싶어 시작하였습니다.

프로젝트 개요

React Swipe Deck은 사용자 경험을 극대화하기 위해 카드 스와이프 기능을 구현한 프로젝트입니다. 이 프로젝트는 다양한 카드들을 좌우로 스와이프하여 직관적으로 탐색할 수 있게 해주며, 주로 데이팅 앱이나 상품 추천 시스템 등에 응용될 수 있습니다.

주요 기능

• 카드 스와이프: 사용자는 카드를 좌우로 스와이프하여 다음 카드로 이동하거나 현재 카드를 삭제할 수 있습니다.

• 애니메이션 효과: 스와이프할 때 부드러운 애니메이션 효과를 적용하여 사용자 경험을 향상시켰습니다.

• 반응형 디자인: 모바일과 데스크탑 환경 모두에서 최적의 사용자 경험을 제공하도록 설계되었습니다.

사용 기술

• TypeScript

• React

• Vite

프로젝트 링크

• GitHub 리포지토리: React Swipe Deck

배운 점

사용자 인터랙션을 구현하기 위해서는 터치 또는 마우스 이벤트를 다룰 일이 많은데 이번 프로젝트를 진행하면서 이 부분을 많이 경험할 수 있어 좋았습니다.

사실 해당 프로젝트를 진행하며 복잡한 위치 계산 로직에는 AI(Copilot, ChatGPT)의 도움을 많이 받았는데 새삼 좋은 시대라는 것이 느껴졌던 프로젝트입니다. 😆

감사합니다.