AI 분석
동일한 SaaS 사이드바를 확장, 아이콘 레일, 2단 패널, 툴팁 상태로 펼쳐 라이트·다크 두 벌로 보여주는 컴포넌트 시안이다.
옅은 그리드 배경 위에 같은 사이드바의 네 가지 상태를 좌에서 우로 나열한 컴포넌트 스터디다. 확장형은 워크스페이스 스위처, 단축키 힌트가 붙은 검색 필드, 배지와 하위 항목을 가진 내비 목록, 즐겨찾기 섹션, 하단 사용량 게이지와 계정 행까지 한 칼럼에 쌓고, 축소형은 아이콘만 남긴 좁은 레일로 줄어들며 옆에 트리형 2차 패널을 붙이거나 호버 툴팁을 띄운다. 타이포그래피는 중간 굵기의 산세리프 한 종류로 통일하고 색은 무채색 위주에 알림 배지의 빨강과 사용량·상태 점의 초록만 강조로 쓰며, 라운드 카드형 패널과 얕은 그림자가 배경에서 떠 있는 느낌을 만든다. 라이트와 다크 두 장이 같은 구성으로 대응해 표면 단계와 구분선 대비가 테마별로 어떻게 달라지는지 비교할 수 있다. 사이드바의 축소·확장 상태와 2단 계층 내비를 한 화면에서 설계할 때 상태 정의 레퍼런스로 쓰기 좋다.
minimal · light-mode · dark-mode · high-contrast
claude-opus-5 · 2026-09-07 18:11 · 신뢰도 0.93
