피드로 돌아가기
Dev.toFrontend
원문 읽기
100ms 이내 UI 응답성 확보를 통한 AI 진단 UX 최적화
AI Button UX — Where to Put It, How to Label It, What to Show While Waiting
AI 요약
Context
상단 Toolbar 기반의 AI 진단 트리거 구조로 인한 사용자 인지 부하 및 입력 단계의 복잡성 발생. AI 응답 대기 시간 동안의 피드백 부재로 인한 시스템 크래시 오인 가능성 존재.
Technical Solution
- Error Line 기반 Inline Trigger 배치를 통한 컨텍스트 전환 비용 제거 및 데이터 바인딩 최적화
- 'AI' 명칭을 배제하고 'Diagnose', 'Fix this' 등 Action-oriented Labeling을 적용한 사용자 목적 중심 UI 설계
- Idle, Loading, Done, Error의 4가지 State Machine 구조를 도입한 인터페이스 상태 관리
- Click 이벤트 발생 즉시 1ms 내 Loading State로 전환하여 인지적 지연 시간 최소화
- ESC Key Event Listener 및 외부 영역 클릭 감지를 통한 다중 Exit Path 구현으로 사용자 제어권 강화
- DiagnosisState를 활용한 조건부 렌더링으로 불필요한 DOM 업데이트 방지 및 렌더링 효율 개선
실천 포인트
- AI 호출 전 즉각적인 상태 변경(Loading)을 통해 100ms 이내에 시각적 피드백을 제공하는가? - 트리거 버튼이 데이터 컨텍스트와 인접하게 배치되어 불필요한 입력 단계를 제거했는가? - 기술적 구현 방식(AI, GPT)이 아닌 사용자의 최종 목적(Diagnose, Fix)을 기준으로 레이블링 했는가? - ESC 키를 포함한 보편적인 종료 경로를 제공하여 사용자 이탈 경험을 최적화했는가?