2.8 KiB
FE 디자인 검토 findings (1라운드)
검토 환경: claude-in-chrome, localhost:8080 (docker dev), 데스크탑 1440 캔버스, 다크+라이트.
검토 화면: index / login / signup / game-detail (다크·라이트). profile = 로그인 필요(보류).
viewport 한계: resize_window 가 실제 viewport(innerWidth=2560 retina)에 미반영 → 모바일은 CSS @media 코드 점검으로 검증. 전 핵심 화면 @media 보유(반응형 마크업 존재).
theme: theme-init.jsp + header.jsp 토글 핸들러 정상(localStorage bibimbap-theme 영속 + 페이지이동 유지 실측 확인).
findings (축별 심각도)
F1. index 검색영역 이중구조 — [완성도/정보구조 · 중]
상단 큰 "게임·제작자 검색" 바 + [검색], 바로 아래 "게임이름·소개 검색"/"제작자(개발자) 검색" 2칸 + 정렬 드롭다운 + [상세 검색]. 검색 진입점이 시각적으로 둘로 중복 → 어느 걸 써야 할지 혼란. 위계/그룹핑 정리 필요(상세검색을 접이식 or 명확한 1차/2차 구분). 근거: index.jsp 검색 폼 영역.
F2. 다크모드 입력 필드 테두리 대비 부족 — [a11y/완성도 · 중]
login/signup 다크에서 input border 가 배경(거의 검정)과 동일 톤 → 필드 경계 식별 곤란. 라이트모드는 옅은 회색 테두리로 양호. 다크 전용 input border 색 상향 필요(WCAG 비텍스트 대비 3:1 목표). 근거: login.jsp / signup.jsp + 다크 토큰.
F3. 와이드스크린 콘텐츠 정렬·여백 — [레이아웃 · 하~중]
콘텐츠 max-width 좁고 상단 정렬 → 1440px+ 에서 하단 여백 과다 + 카드 그리드 좌측 쏠림(카드 1개일 때 특히 휑함). 콘텐츠 적은 현 데이터 탓도 있음 → 우선순위 낮음. 그리드 중앙정렬/최소 채움 검토.
F4. game-detail — [정보 · 양호]
제목+3분할 카드(번호/제작자/좋아요) · WebGL 플레이 · 제작자 한마디 · 리뷰(3.8★) 구성 완성도 높음. 큰 이슈 없음. (모바일 3분할 카드 wrap 거동만 코드 확인)
F5. 모바일 반응형 — [반응형 · 확인필요]
자동 viewport 제어 불가로 시각 미확인. 수정 단계에서 index/header/game-detail/login/profile 의 @media breakpoint·터치타깃(체크박스 작음 F2 연계)·가로스크롤 코드 점검으로 검증.
수정 우선순위 제안
P1: F2(다크 input 대비) — a11y, 저위험 토큰 수정. P2: F1(검색영역 위계) — 정보구조, JSP 구조 손봄(중위험). P3: F5(모바일 점검) — 코드 검증 후 필요 시 수정. P4: F3(와이드 여백) — 데이터 적은 현 상태 영향 작음, 후순위.
전반: 현 디자인 완성도 양호(다크 주황 액센트·카드 UI 일관). 과한 비주얼 리프레시보다 a11y·정보구조 정리 ROI 우선.