5장 BridgePilot 사용자 경험을 설계한다

대시보드의 목적은 숫자를 많이 보여 주는 것이 아니라 “지금 무엇을 믿어도 되는가”를 답하는 것이다. 상단에는 진출 준비도와 의사결정 신호, 중간에는 작업 흐름, 하단에는 근거와 전문 작업자를 둔다. 사람의 시선은 결론 → 근거 → 원문 → 판정 순으로 움직인다.

화면 계약은 데이터 계약처럼 쓴다. 로딩 중에는 프로젝트명 자리에 상태를 표시하고, 출처가 없으면 빈 카드가 아니라 필요한 조치를 설명한다. 신뢰도 92%는 정답 확률이 아니라 에이전트가 반환한 보조 신호임을 툴팁에서 밝힌다. 채택 버튼은 사유 입력 대화상자를 연다. 모바일에서는 사이드바를 숨기고 작업 여섯 개를 한 열로 쌓는다.

public/index.html, styles.css, app.js를 함께 읽는다. HTML은 의미 구조와 접근성, CSS는 반응형 계약, JavaScript는 fixture를 화면에 매핑한다. 외부 UI 라이브러리가 없어 설치 실패가 없고, 독자는 브라우저 개발자 도구에서 모든 흐름을 추적할 수 있다.

실습

브라우저 너비를 1440px, 768px, 390px로 바꾼다. 가로 스크롤이 없어야 한다. 다음 근거를 눌렀을 때 ID·원문·요약·출처가 한 묶음으로 바뀌는지 확인한다. 판정하기를 누르고 사유 없이 채택하면 브라우저와 서버 양쪽에서 거부해야 한다.