Agentic UI 상태: AI 사고, 도구 호출 및 진행 상황을 표시하는 방법

에이전트 실행에 자체 상태가 필요한 이유

클래식 요청에는 로드 및 완료라는 두 가지 표시 상태가 있습니다. AI 에이전트 실행은 다릅니다. 몇 초 또는 몇 분이 걸릴 수 있으며 검색, 파일 읽기, API 호출 등 여러 단계를 거쳐 결과에 따른 조치를 취할 수 있습니다. Nielsen Norman Group의 응답 시간 연구는 여전히 적용됩니다. 약 0.1초는 즉각적으로 느껴지고, 약 1초는 생각의 흐름을 유지하며, 약 10초 후에 사람들은 무슨 일이 일어나고 있는지, 대략 얼마나 걸릴지에 대한 피드백이 필요합니다. 대부분의 에이전트는 마지막 그룹에서 실행됩니다.

디자인할 상태

하나의 스피너가 아닌 고유한 모양과 단어를 사용하여 각 상태를 고유한 상태로 디자인합니다.

• 수신됨: 예를 들어 스레드에 메시지를 표시하여 요청을 즉시(0.1초 미만) 확인합니다.
• 생각하기: 답이 나타날 위치 근처에 있는 차분한 표시입니다. 가짜 진행률을 피하세요.
• 도구 호출: 알고 있는 경우 개수와 함께 일반 단어("문서 검색", "3개 파일 읽기")로 단계 이름을 지정합니다.
• 승인 대기 중: 에이전트가 작업을 수행하기 전에 허가가 필요한 경우 명확한 일시 중지입니다.
• 스트리밍: 출력이 도착하면 표시합니다. 텍스트가 시작되자마자 생각 표시를 중지합니다.
• 완료: 변경 사항에 대한 간략한 요약입니다. 가능한 경우 실행 취소가 가능합니다.
• 중지 및 실패: 무슨 일이 일어났는지, 무엇이 유지되었는지, 재시도 방법을 알려주세요.

원시 로그가 아닌 계획을 표시하세요.

긴 도구 호출 로그는 디버깅에 유용하지만 대부분의 사용자에게는 부담스럽습니다. 좋은 기본값은 현재 단계에 대한 한 줄 상태와 사람들이 확장할 수 있는 완료된 단계의 축소된 목록입니다. 개발자와 고급 사용자는 세부 정보를 열 수 있습니다. 다른 모든 사람들은 일반 언어로 진행 상황을 봅니다. 에이전트를 사용자 대상 앱에 연결하기 위한 개방형 이벤트 기반 표준인 AG-UI와 같은 프로토콜이 부분적으로 존재하므로 프런트 엔드는 이러한 단계 이벤트를 일관된 방식으로 수신할 수 있습니다.

통제와 신뢰

사람들은 에이전트가 통제력을 유지할 때 에이전트를 더 신뢰합니다. 전체 실행 중에 중지 버튼이 보이도록 유지하십시오. 전송, 결제, 삭제 등 되돌릴 수 없는 작업을 하기 전에 확인을 요청하고 어떤 일이 일어날지 정확히 보여주세요. 실행 후에는 다시 시작하는 대신 단일 단계를 쉽게 실행 취소, 편집 또는 재시도할 수 있습니다.

상담원 상태에 대한 동의

모션은 "뭔가 일어나고 있다"는 강력한 신호이지만 루프는 장기적으로 피곤해집니다. 생각을 위해 부드럽고 낮은 대비 루프를 사용하고, 도구 호출이 시작될 때 뚜렷한 변화를 사용하고, 실행이 끝날 때 명확하게 안정됩니다. 미묘한 불투명도 변경을 위해 움직임을 교환하여 모션 감소 설정을 존중합니다. 음성 비서는 유휴, 듣기, 생각 및 말하기 상태가 확실히 다른 애니메이션 구체를 사용하는 경우가 많습니다.