AI 분석
아이콘 레일부터 라벨 확장까지 사이드바 내비게이션의 세 가지 너비 상태를 나란히 보여주는 UI 컴포넌트 스터디다.
밝은 회색 배경 위에 둥근 모서리의 흰색 패널 세 개를 나란히 두어 사이드바 너비가 좁은 레일에서 아이콘 열, 라벨 확장 패널로 커지는 과정을 비교한다. 타이포그래피는 중간 굵기의 산세리프 한 종류로 통일하고 텍스트는 진회색, 아이콘은 얇은 선형 스타일로 처리해 배경의 무채색과 대비를 낮게 유지한다. 워크스페이스 아바타는 채도가 높은 다색 그라데이션 사각형으로 표현해 무채색 셸 안에서 유일한 색 신호가 되며, 검정 말풍선 툴팁과 옅은 회색 활성 항목 배경, 하단의 추가 버튼이 상태 표현을 담당한다. 반응형 내비게이션의 축소·확장 규칙과 아이콘 전용 상태의 툴팁 처리를 설계할 때 참고하기 좋다.
minimal · light-mode · soft-gradient · corporate
claude-opus-5 · 2026-09-07 21:47 · 신뢰도 0.93
