탐색Component트리 스테퍼 컴포넌트 — 현재 브랜치만 펼치는 보안 점검 체크리스트

1 / 1

다크 브라우저 목업 속 보안 점검 트리 스테퍼에서 다음 버튼을 누를 때마다 하위 점검 항목이 완료 처리되고, 한 브랜치가 끝나면 접힌 뒤 다음 브랜치가 펼쳐지는 흐름을 보여주는 영상이다.

Component

트리 스테퍼 컴포넌트 — 현재 브랜치만 펼치는 보안 점검 체크리스트

2026-10-14 · 동영상 1

AI 분석

다크 모드 브라우저 프레임 안에서 계층형 체크리스트를 한 단계씩 진행하는 트리 스테퍼 컴포넌트 데모다.

브라우저 창 목업 안에서 왼쪽에 계층형 트리 스테퍼, 오른쪽에 현재 점검 항목의 진행 정보와 이전·다음 버튼을 둔 2단 구성이다. 검은 배경에 흰색·회색 산세리프 텍스트를 쓰고, 번호 원형 배지는 완료 단계 녹색과 대기 단계 황색으로 나뉘며 개수 배지와 High·Mild·Review 상태 배지가 색으로 위험도를 구분한다. 하위 항목은 체크 아이콘, 회전하는 진행 링, 점선 원으로 완료·진행·대기 상태를 표시하고, 다음 버튼을 누르면 하이라이트가 아래로 이동하며 한 브랜치를 마치면 그 브랜치는 접히고 다음 브랜치만 펼쳐진다. 긴 체크리스트를 점진적으로 노출하는 온보딩·감사 플로우나 다단계 폼의 상태 표현을 설계할 때 참고하기 좋다.

dark-mode · minimal · techy