AI 분석
외부 서비스 연동을 단계별 아코디언 폼으로 처리하는 온보딩 화면이다.
좌측 세로 스텝 레일과 우측 본문으로 화면을 나누고, 본문은 완료·진행 중·비활성 상태를 가진 카드형 아코디언 섹션을 세로로 쌓는다. 밝은 회색 배경 위에 흰 카드와 얇은 테두리를 쓰고, 파랑을 진행 상태와 주요 버튼에만 강조색으로 제한하며 산세리프 소형 라벨과 회색 보조 설명문으로 위계를 만든다. 진행 중 섹션 안에는 다시 하위 스텝 레일이 들어가고 라벨·설명·입력·검증 버튼이 한 줄로 묶인 폼 행, 상태 배지, 서비스 아이콘, 하단 고정 액션 바가 배치된다. 우측에는 같은 화면의 좁은 폭 변형이 함께 놓여 반응형 축소 시 레일이 접히고 폼이 단일 칼럼으로 재배열되는 방식을 보여준다. 다단계 설정 플로우의 상태 표현과 반응형 대응을 함께 참고하기 좋다.
minimal · light-mode · corporate
claude-opus-5 · 2026-09-07 21:48 · 신뢰도 0.93
