Magix Tarot 개발 일지 - 카드 선택(CTA) 인터랙션 개선

📅 작업 날짜

2025-08-08

🎯 문제 인식

리딩 페이지 접속 시, 일부 사용자들이 무엇을 해야 하는지 직관적으로 이해하지 못하는 문제가 있었다.
카드 모음이 화면에 보이지만,

• 카드를 클릭해야 하는지
• 어떻게 선택하는지 명확하게 인지하지 못하는 경우가 있었음.

CTA(행동 유도)가 부족해 첫 진입 경험이 부드럽지 않았다.

 

---

🛠 개선 작업

1. 카드 선택 hover/active 효과 강화

• 카드 위에 마우스를 올리면(hover) 밝기(brightness)를 높이고 살짝 떠오르는 듯한 애니메이션 추가
• 클릭(active) 시 미세한 눌림 효과 적용
• 기존 카드의 기본 회전값 유지로 입체감 손실 방지
• 그림자(box-shadow) 대비 조정으로 겹침 상황에서도 hover 카드가 확실히 부각되도록 구현

2. 카드 모음 하단 안내 문구 추가

• 카드 목록 아래에 마음이 끌리는 카드를 클릭하세요 형태의 문구 배치
• 시각적으로 CTA임을 인식할 수 있도록 배경과 폰트 스타일 개선
• 다국어 지원(한국어·영어) 반영

3. 카드 간 간격 조정

• 카드 간 간격을 넓혀서 클릭 시 오동작 가능성을 줄임
• 간격 확보로 선택 영역이 더 명확해져 사용성 향상
• 모바일 환경에서도 손가락 터치가 용이하도록 여백 최적화

 

---

💡 기대 효과

• 페이지 진입 시 사용자가 즉시 무엇을 해야 하는지 직관적으로 이해
• 카드 hover/active 시 몰입감과 선택 의지가 강화
• 안내 문구로 첫 이용자 진입 장벽 완화
• 카드 간 간격 확보로 데스크톱·모바일 모두에서 클릭/터치 정확도 향상
• 브랜드 톤에 맞는 세련된 인터랙션 제공

 

Magix Tarot – AI 타로 카드 리딩