Mobile Fixes, Crypto Upgrades, and Killer Skills
마켓플레이스 팀이 모바일 반응형 그리드 재설계, 25개 암호화폐 스킬 API 엔드포인트 수정, 그리고 Firebase 배포 권한 분리로 UX 버그 제거 및 API 신뢰성 확보
AI 요약
Context
마켓플레이스의 /explore 페이지가 480px 모바일 환경에서 스킬 카드가 겹쳐 설치 버튼과 설명이 클릭 불가능한 상태였다. 또한 25개의 암호화폐 스킬이 더 이상 유효하지 않은 API 엔드포인트(CoinGecko v3, Binance 공개 티커 라우트 등)를 참조하고 있어 무음 실패를 야기했다.
Technical Solution
- 반응형 그리드 breakpoint 수정: 480px 이하 화면에서
.skills-grid를grid-template-columns: 1fr로 단일 열로 변경 및 간격을gap: 0.75rem으로 통일 (PR #340) - 필터 바 레이아웃 조정: 480px 이하에서
.filter-bar의flex-direction을 column으로 변경해 버튼 행의 줄바꿈 문제 해결 - 암호화폐 스킬 API 엔드포인트 업데이트: 25개 스킬의 deprecated API 참조를 현재 유효한 엔드포인트로 교체 (PR #339)
- 암호화폐 스킬 에러 처리 강화: 네트워크 타임아웃, 레이트 제한, 유효하지 않은 토큰 심볼에 대한 입력 검증 및 graceful 에러 처리 추가
- Firebase 배포 권한 분리: 단일
firebase deploy명령을firebase deploy --only hosting과firebase deploy --only functions로 분리해 각 target별 최소 권한 scope 적용 (PR #338)
Impact
25개의 암호화폐 스킬이 모두 A-grade 품질 검증을 통과하고 zero warnings 달성.
Key Takeaway
Responsive 레이아웃 설계 시 데스크톱 테스트만으로는 부족하며, 실제 모바일 디바이스 해상도(480px)의 중간 breakpoint를 명시적으로 정의해야 한다. API 통합 스킬의 경우 타사 엔드포인트 deprecation에 대비해 입력 검증과 타임아웃 처리 같은 defensive 에러 핸들링을 필수로 구현해야 한다.
실천 포인트
마켓플레이스나 플러그인 기반 플랫폼을 운영하는 팀에서 타사 API를 래핑하는 스킬을 관리할 때, 정기적 품질 감사 프로세스를 도입하고 API 엔드포인트 변경 시 graceful degradation(rate limit 재시도, timeout 처리, 명확한 에러 메시지)을 구현하면 무음 실패로 인한 사용자 이탈을 방지할 수 있다. 또한 Firebase 같은 멀티 서비스 배포 환경에서는 IAM 역할을 세밀하게 분리할 때 각 컴포넌트의 배포 명령을 독립적으로 분리해 권한 충돌을 사전에 제거해야 한다.