Two-level hierarchical List

사이드 네비게이션 UX 인터렉션을 비교해서 디자인에 적용하기

좌측 사이드 네비게이션 리스트에서 하위 메뉴 선택이 필요한 인터랙션에 대해, AI를 활용해 UI/UX를 비교 분석했습니다.

레퍼런스는 클로드 화면과 구글 스튜디오 화면입니다.

세 패턴의 본질적 차이

A. Push (Claude Code 방식) : Flyout navigation

공간으로 계층을 표현합니다. 1depth 메뉴를 클릭하면 오른쪽에 2depth 패널이 붙어 나옵니다.

"지금 어디 있는지"가 가장 명확하지만, 패널이 두 개로 늘어나 콘텐츠 영역이 좁아집니다.

B. 아코디언 (Google AI Studio ①)

사이드 내에서 완결됩니다. 폭을 유지하면서 계층을 인라인으로 펼치는 방식이라 데스크톱 관리자에서 가장 무난한 선택입니다.

C. 드릴다운 (Google AI Studio ②)

패널 자체를 교체합니다. 모바일 앱 네이티브 패턴이라 직관적이지만, 데스크톱 관리자에서는 사이드 메뉴 내에서의 "뒤로가기"가 낯설고 상위 구조가 숨겨진다는 단점이 있습니다.