[오늘가챠] 프론트엔드 UI/UX 디테일 다듬기 (카드 상세 및 레이드)
·
◈ Yermi Project/오늘가챠🃏
가챠(뽑기) 게임에서 가장 중요한 경험은 "카드를 획득하고 수집품을 감상하는 순간"입니다. 초기 프론트엔드 UI는 카드의 기본 정보만 단순히 텍스트로 나열하는 밋밋한 구조였습니다. 특히, 레이드 시스템과 피로도(스태미나/소진) 시스템이 추가되면서 카드의 상태를 직관적으로 유저에게 전달할 필요가 생겼습니다. React 컴포넌트(CardDetail, CardFaces, ActionSheet)를 재설계하여 정보의 밀도와 시각적 피드백을 강화했습니다.1. 카드 피로도(소진) 상태 시각화카드가 레이드에 참여하여 피로도가 소진되었을 때, 텍스트("소진됨")로만 표시하는 대신 흑백 처리나 게이지바를 도입했습니다.// CardFaces.jsx 내의 렌더링 로직 일부const isExhausted = card.isEx..