AI 분석
접힘과 펼침 두 상태를 함께 보여주는 온보딩 진행 체크리스트 컴포넌트다.
화면 중앙에 단일 카드 컴포넌트를 접힘 상태와 펼침 상태로 나란히 배치해 상태 변화를 비교하게 한다. 배경은 옅은 격자 가이드가 깔린 캔버스이고 카드는 큰 라운드 코너와 얕은 그림자로 떠 있으며, 헤더에는 접기 셰브론과 눈금형 세그먼트 진행 표시, 진행 카운터가 한 줄로 정렬된다. 리스트는 완료 항목을 초록 체크 원과 흐린 텍스트로 낮추고, 현재 단계는 채워진 숫자 배지로 강조하며 남은 단계는 옅은 숫자 배지와 오른쪽 셰브론으로 구분해 단계 위계를 색이 아닌 명도 대비로 만든다. 같은 구성을 라이트와 다크 두 벌로 제시해 뉴트럴 계열과 단일 강조색만으로 테마를 전환하는 토큰 설계를 보여준다. 온보딩 진행률 UI의 상태 표현과 다크 모드 대응 참고로 유용하다.
minimal · light-mode · dark-mode · high-contrast
claude-opus-5 · 2026-09-07 18:29 · 신뢰도 0.93
