AI 분석
좌측 사이드바 내비와 번호가 붙은 섹션으로 다양한 빈 상태 패턴을 보여주는 다크 컴포넌트 문서 사이트다.
고정 상단 바와 좌측 사이드바 내비가 있는 2단 구조 위에 번호가 붙은 섹션이 세로로 쌓이고, 각 섹션은 얇은 테두리의 큰 프리뷰 캔버스 안에 실제 화면을 렌더한다. 거의 검정에 가까운 배경에 미묘한 회색 계조로 표면을 나누고 흰색 텍스트와 모노스페이스 라벨, 세리프 제목을 섞어 문서다운 위계를 만든다. 각 프리뷰 헤더에는 변형 토글, 복사 버튼, 코드 보기 버튼이 붙고 내부에는 둥근 사각형 아이콘 타일, 제목·보조 문구, 주/보조 액션, 키보드 단축키 힌트가 반복되는 빈 상태 템플릿이 담긴다. 프로젝트 템플릿 선택, 팀원 초대 아바타 레일, API 키 없음, 활동 타임라인, 일정 인라인 컴포저, 404 검색 목록처럼 상황별 변주를 연속으로 보여준다. 빈 상태를 단순 안내 문구가 아니라 다음 행동을 유도하는 화면으로 설계하는 방법과 컴포넌트 문서의 프리뷰 배치 방식을 함께 참고할 수 있다.
dark-mode · minimal · techy · high-contrast
claude-opus-5 · 2026-09-21 21:08 · 신뢰도 0.82