4.5 KiB
2026-06-30 게임 카드 비율·모집 가시성 — 다축 평가 후 13건 시각 결함 수정
세션: sid 20260630-175023
브랜치: feat/v2
선행: 2026-06-30-visual-redesign-bibimbap-css.md / 2026-06-30-redesign-token-coherence-fix.md — 리디자인(cf1e7ce 등) 미해결 결함 2건의 재검·수정
배경
직전 리디자인 세션이 마감했음에도 사용자가 지적한 시각 결함 2건이 남아 있었다.
- 이미지 #2 (메인 게임 허브): 게임 카드 썸네일 "비율" 문제.
- 이미지 #3 (팀원 모집 빈 상태): "가시성" 떨어지는 케이스.
"비율"을 카드 종횡비 단일 축으로 조기 협소화해 첫 AskUserQuestion 옵션을 설계했으나,
사용자가 "이미지 미리보기뿐 아니라 상단에 검색바도 혼자 짧다"로 레이아웃 비율 축을 직접 교정.
이를 받아 multi-axis 멀티에이전트 평가(관찰 1 → 레이아웃비율·카드종횡비·대비가시성·타이포간격
4축 병렬 → 종합 1, 총 6 에이전트)로 전환해 13건 결함 + 1 결정필요(카드 종횡비)로 복원했다.
사용자 결정: 카드 4:3 + 전체 13건 적용.
변경 (13건)
| 파일 | 항목 | 내용 |
|---|---|---|
views/index.jsp |
#1 검색바 풀폭 | .search-section 풀폭 + .search-stack wrapper(검색행/상세검색을 우측 끝선 정렬, 픽셀 margin 대신 컬럼 wrapper로 버튼 텍스트 가변 대응) |
views/index.jsp |
카드 그리드 | .card-grid auto-fill |
views/index.jsp |
#13 카드 종횡비 | .card__media aspect-ratio 4/5→4/3, .card__img object-position:center |
css/bibimbap.css |
#2 고스트 버튼 대비 | .btn-ghost color on-accent→text(다크 #3A2E15 on #222018 ≈1.1:1 → --color-text 적용 ≈13:1) |
css/bibimbap.css |
다크 보더 가시성 | 다크 --color-border 0.08→0.20 |
css/bibimbap.css |
#6·#7 정렬칩/라벨 | .sort-label 대비·위계 정리, 정렬칩 보더 |
css/bibimbap.css |
#11 빈상태 패딩 | .empty-state padding clamp |
css/bibimbap.css |
disabled 토큰화 | .btn:disabled 토큰화 |
views/recruit-list.jsp |
#10 히어로 폭 | .recruit-hero__titles max-width |
views/recruit-list.jsp |
#8 eyebrow 통일 | eyebrow mono 통일(공용 클래스 대신 로컬 시각스펙 일치 — index/bibimbap 토큰계열 분리 + font-mono 토큰 부재) |
views/recruit-list.jsp |
#9 빈상태 CTA 강등 | 빈상태 시 .recruit-write 조건부 ghost(골드 CTA 1개로 위계 정리) |
views/recruit-list.jsp |
검색 폭 | 검색 max-width 48rem |
조정 사항: #4 는 픽셀 margin 대신 .search-stack 컬럼 wrapper(버튼 텍스트 가변 대응 결정적),
#8 은 공용 클래스 대신 로컬 시각스펙 일치(토큰계열 분리 제약). recruit-empty.jspf 는 무편집.
검증
| 레벨 | 결과 |
|---|---|
| L1 — 정적 | index.jsp div 18/18·recruit 6/6 균형, scriptlet 균형, U+FFFD 0, stray taglib 0(적신호 없음) |
| L2 — 런타임 스모크 | bibimbap-app(mvn spring-boot:run) 재기동 → GET / + /recruit = 200 → 브라우저 육안 라이트+다크 양 화면 |
| L2 — 결함 해소 | 이미지 #2(비율): 검색바 풀폭 정렬 + 카드 4:3(object-position) 해소. 이미지 #3(가시성): 필터 초기화 흰글자+보더 명확(zoom 확정) 해소. 부수 #6·#7·#8·#9·#10·#11·푸터 비잘림 육안 확인 |
error.jsp JSTL 로그(07:35Z JasperException)는 재기동(09:19Z) 이전의 stale 라인 — 현재 /error 200, 회귀 아님.
커밋
9489365— 수정 13건c688aa6— 교훈 + 회고
needs_user_verification
- 로그인 상태 1회 스모크(본 검증은 로그아웃 상태만): (a) 메인 '신규 게임 개시' 버튼 노출 시 #4
search-stack우측 끝선 정렬, (b) 모집글 ≥1건 시 #9 히어로 골드 CTA 유지. - 실게임 가로 썸네일 업로드 시 4:3 cover 크롭 인상 최종 확인(더미는 폴백 로고만 노출).
교훈 연결
development/verification-strategies.md ### 모호한 시각 결함 어휘는 단일 결정축 협소화 전 다축 스캔 선행 신규 레슨으로 등록(근거: 본 세션). 외부 ATP 번들 §4.4 item5
(가시성·표현·레이아웃 축 누락 주의)를 선행 게이트(옵션 설계 전 다축 스캔)로 강화 권고와 상호참조.