AI 분석
빈 상태에서 동기화 진행, 연결 완료까지 이어지는 다크 모드 지식 베이스 패널이다.
사선 패턴 배경 중앙에 둥근 모서리의 단일 패널이 놓이고, 상단 헤더·아이소메트릭 일러스트 영역·상태 문구와 버튼·소스 목록·모노스페이스 푸터 순으로 쌓인다. 거의 검은 회색 톤 위에 흰 산세리프 제목과 회색 보조 텍스트를 쓰고, 청크 수와 상태 라벨은 대문자 모노스페이스로 처리하며 주황 SYNCING, 초록 CONNECTED 배지만 색을 갖는다. 연결을 누르면 행 아래에 점선 진행 바와 퍼센트가 나타나고, 일러스트의 데이터 스택으로 청록·분홍 그라데이션 연결선이 하나씩 켜지며, 하단에 연결 완료 토스트가 쌓인다. 호버 시 Connect 버튼이 Disconnect로 바뀌는 등 상태별 마이크로 인터랙션이 세밀하다. AI 도구의 데이터 연결·인덱싱 흐름과 빈 상태에서 완료 상태까지의 상태 디자인 참고로 유용하다.
dark-mode · minimal · techy · monochrome
claude-opus-5-5 · 2026-10-21 18:02 · 신뢰도 0.75
