AI 분석
좌측 필터 사이드바와 4열 제품 카드 그리드로 구성한 라이트 모드 커머스 목록 화면이다.
고정 폭 필터 사이드바와 넓은 제품 그리드를 나눈 2단 레이아웃이다. 사이드바는 카테고리 라디오, 스크롤되는 브랜드 체크박스, 색상 스와치, 배송일, 가격 구간을 얇은 구분선으로 끊어 쌓고, 본문 상단에는 결과 개수와 검색 입력, 그리드·리스트 전환 토글을 배치한다. 흰 배경에 회색 이미지 플레이스홀더를 쓰고 파란 현재가와 회색 취소선 정가, 빨간 할인율 배지, 노란 별점만 색을 허용해 검정 Add 버튼이 유일한 주요 액션으로 남는다. 프레임 전반에서 뷰포트를 좁히면 사이드바가 접히며 Filters 버튼과 단일 칼럼 카드로 재배치되고, 카테고리를 고르면 결과 수가 12개에서 2개로 줄어드는 필터 반응이 이어진다. 필터·정렬·카드 밀도를 한 화면에서 다루는 커머스 목록 패턴의 참고로 유용하다.
minimal · light-mode · high-contrast
claude-opus-5 · 2026-09-07 06:07 · 신뢰도 0.82