[앱인토스] 오늘의 냥타로(MeowTarot)

[ 오늘의 냥타로(MeowTarot) ]

고양이가 타로로 전하는 오늘의 조언

 

스크린샷 / 데모

https://minion.toss.im/TjbUelEC

 

https://youtube.com/shorts/_yLHmIPWXMI?feature=share

 

 

 

 

기술 스택

Frontend	React 18 + TypeScript + Vite
스타일링	Tailwind CSS + Framer Motion으로 UI/애니메이션 구현
모니터링	Sentry로 Remote 모니터링
배포	Vercel

 

왜 만들었나

 

가벼운 고민을 털어놓을 곳이 마땅치 않은 사람들에게, 고양이가 냥체로 건네는 한마디가 작은 위로가 될 수 있겠다고 생각해서 기획했습니다. 심각한 고민도 귀여운 고양이와 함께하면 즐겁게 해결하고자 하는 마음에 여러종류의 고양이를 일러스트화 해서 타로 카드를 만들게 되었습니다.

 

배운 점
    - html2canvas로 화면을 이미지로 캡처할 때 Tailwind CSS 클래스나 Framer Motion 속성이      
  제대로 반영되지 않는 문제를 경험하고, 캡처 영역은 인라인 스타일로 분리해야 한다는 점을    
  배움
  - 가챠 애니메이션의 단계별 타이밍 제어를 위해 setTimeout과 useRef를 조합하면서, 클로저에  
  의한 stale state 문제와 타이머 메모리 누수 방지법을 익힘

 

어려웠던 점

 - 결과 카드 이미지 저장 기능에서 화면과 캡처 결과의 레이아웃이 달라지는 문제가 반복 발생. 
  뱃지 위치, 카드-조언 간격 등을 6차례 이상 수정하며 최종 구조를 확정
  - 1,000가지 조언 메시지를 카테고리별로 겹치지 않게 작성하면서 냥체 말투의 일관성을        
  유지하는 작업이 예상보다 까다로웠음

  링크
  
   - GitHub: https://github.com/miracle380301/catPersonalityTest
   - 서비스: 토스 앱인토스 https://minion.toss.im/TjbUelEC

 
 다음 계획

  - 토스 앱인토스 심사 제출중 -> 심사 통과(26.02.13)
  - 사용자 피드백 반영 및 UI 개선
  - 카드 이미지 리소스 교체
  - 광고 SDK 연동