 이정수
|
9489365fa2
|
fix(redesign): 카드 4:3 비율·검색바 정렬·다크 고스트버튼 가시성 외 13건
직전 리디자인에서 미해결된 2건(이미지#2 카드 비율, 이미지#3 필터 초기화
가시성)을 다축 UI/UX 평가로 13건 결함으로 확장해 일괄 수정.
비율/레이아웃:
- .card__media aspect-ratio 4/5→4/3 + .card__img object-position:center
(가로형 웹게임 스크린샷 cover 크롭 ~55%→~25% 완화)
- .search-section 풀폭화 + .search-stack 컬럼 wrapper 신설로 검색행과
상세검색 패널 우측 끝선 정렬(검색바 "혼자 짧음" 해소)
- .card-grid 고정 N열 → auto-fill(minmax 11rem)로 소량 카드 좌측쏠림 완화
- recruit .recruit-hero__titles max-width·검색 입력 max-width 48rem로 폭 균형
가시성/대비:
- .btn-ghost color: var(--color-on-accent)→var(--color-text)
(다크 #3A2E15 on #222018 ≈1.1:1 → ≈13:1, WCAG AA 충족)
- 다크 --color-border 0.08→0.20(비텍스트 3:1), .sort-label 대비·위계 보강
- .btn:disabled 하드코딩색 → 토큰화
일관성/위계:
- recruit eyebrow mono/uppercase 통일, 빈상태 시 히어로 CTA 보조강등
(화면당 골드 CTA 1개), .empty-state 패딩 clamp화
런타임 스모크: bibimbap-app 재기동 후 / + /recruit 200,
라이트/다크 양 화면 육안 검증 PASS. errer.jsp(JSTL) 무관·현재 200.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0162BaZnrbiYgWc9JJMZ9Czb
|
2026-06-30 18:24:56 +09:00 |