AI Agent UI/UX 설계 - 질문 입력부터 결과 표시까지 어떤 형태로 구현할까

이 글이 기존 Agent 글과 다른 이유

이미 AI Agent 아키텍처, 서비스 설계, Tool Calling에 대한 글은 많이 다뤘습니다.
하지만 실제 제품을 만들 때 사용자 입장에서는 훨씬 더 단순한 질문이 먼저 생깁니다.

• 질문은 어디에 입력하는가
• 처리 중이라는 느낌은 어떻게 주는가
• 최종 답변만 보여주면 충분한가
• 근거 문서와 도구 실행 결과는 어디서 확인하는가
• 다시 질문하거나 수정 요청할 때 흐름이 자연스러운가

즉, Agent의 품질은 모델만이 아니라 화면 구조와 상호작용 설계에 의해 크게 달라집니다.

먼저 정해야 하는 핵심 UX 원칙

AI Agent UI를 설계할 때 가장 먼저 잡아야 할 원칙은 아래 다섯 가지입니다.

1. 입력은 단순하게, 출력은 구조화해서

사용자는 자연어로 쉽게 묻고 싶어합니다.
반대로 결과는 문장 한 덩어리보다 구조화된 형태를 더 신뢰합니다.

예를 들면 아래 흐름이 좋습니다.

• 입력: “최근 3개월간 엔비디아 관련 악재를 반영해서 리스크를 요약해줘”
• 출력:
  • 핵심 요약
  • 주요 근거 뉴스
  • 관련 공시/리포트
  • 리스크 포인트
  • 한계와 주의사항

입력은 자유롭게, 출력은 일정한 포맷으로 만드는 것이 Agent UI의 기본입니다.

2. Agent가 지금 무엇을 하는지 보여줘야 한다

사용자가 가장 불안해하는 순간은 “멈춘 것처럼 보일 때”입니다.

그래서 아래와 같은 중간 상태가 필요합니다.

• 질의 해석 중
• 문서 검색 중
• 외부 도구 실행 중
• 답변 생성 중
• 결과 검증 중

이 단계가 보이지 않으면 사용자는 느리다고 느끼고, 실패했는지 성공했는지 판단하기 어렵습니다.

3. 최종 답변만이 아니라 근거를 함께 보여줘야 한다

특히 RAG나 업무 자동화 Agent는 답변 그 자체보다 “왜 그런 답이 나왔는지”가 중요합니다.

그래서 결과 영역은 보통 아래 요소를 함께 가져갑니다.

• 최종 답변
• 참조 문서 목록
• 사용한 도구 목록
• 데이터 시점
• confidence 또는 주의 문구

4. 재질문이 쉬워야 한다

실제 사용자 흐름은 단발성 질문보다 후속 질문이 더 많습니다.

예를 들면:

• “좀 더 보수적으로 다시 분석해줘”
• “뉴스 말고 실적 발표 기준으로 다시 봐줘”
• “이 결과를 표로 정리해줘”

따라서 입력창은 대화의 마지막에만 있는 것이 아니라, 결과를 본 직후 다시 행동할 수 있도록 항상 가까이에 있어야 합니다.

5. 신뢰가 필요한 서비스일수록 한 화면에 더 많은 맥락이 필요하다

일반 챗봇은 채팅 UI만으로 충분할 수 있습니다.
하지만 투자, 리포트, 운영 자동화, 장애 분석처럼 판단 책임이 큰 Agent는 하나의 말풍선만으로 충분하지 않습니다.

이때는 “답변”, “근거”, “도구 결과”, “히스토리”가 함께 보이는 워크스페이스형 UI가 훨씬 적합합니다.

AI Agent UI는 보통 세 가지 형태로 나뉜다

1. 채팅형 UI

가장 익숙한 구조입니다.

+--------------------------------------------------+
| 대화 히스토리                                    |
| User: 질문                                       |
| Agent: 응답                                      |
| User: 추가 질문                                  |
| Agent: 응답                                      |
+--------------------------------------------------+
| 입력창                                           |
+--------------------------------------------------+

장점:

• 사용자가 바로 이해할 수 있음
• 모바일 대응이 쉬움
• 빠르게 MVP를 만들기 좋음

단점:

• 긴 결과를 구조화해서 보여주기 어려움
• 근거 문서, 차트, 표, 실행 로그를 함께 보여주기 불편함
• 복잡한 업무형 Agent에는 정보 밀도가 부족함

적합한 경우:

• 사내 문서 QA
• 고객 지원 챗봇
• 일반적인 생산성 assistant

2. 워크스페이스형 UI

실무형 Agent에 가장 추천되는 구조입니다.

+-------------------+-------------------+------------------+
| 대화/질문 목록     | 최종 답변          | 근거/도구 결과     |
| 이전 세션          | 요약               | 문서 검색 결과      |
| 프롬프트 기록      | 추천 액션          | API 응답/차트       |
|                   | 경고/주의          | 실행 로그           |
+-------------------+-------------------+------------------+

장점:

• 답변과 근거를 동시에 보여줄 수 있음
• RAG 문서와 Tool Calling 결과를 시각적으로 분리 가능
• 투자/분석/운영 Agent처럼 설명 책임이 큰 제품에 적합

단점:

• UI 설계 복잡도가 높음
• 모바일 최적화가 어려움
• 구현해야 할 상태 관리가 많아짐

적합한 경우:

• RAG 기반 Analyst Agent
• 주식/리서치 Agent
• 운영 자동화 Agent
• 장애 분석 Agent

3. 폼 + 결과 대시보드형 UI

질문이 아니라 “목적 수행”이 핵심일 때 좋은 구조입니다.

예:

• 종목 분석 요청
• 보고서 생성 요청
• 리스크 진단 요청
• 운영 점검 체크 실행

구성 예시는 아래와 같습니다.

• 상단 입력 폼: 종목, 기간, 전략, 리스크 성향
• 중앙 결과 카드: 핵심 요약, 판단 이유, 추천 액션
• 하단 데이터 패널: 차트, 뉴스, 지표, 로그

장점:

• 결과를 정형화해서 보여주기 좋음
• 전문 서비스처럼 보이기 쉬움
• 보고서형 출력에 적합

단점:

• 자유로운 대화 흐름은 약해질 수 있음
• 사용자가 질문을 계속 바꿔가며 탐색하기엔 덜 유연함

어떤 형태를 선택해야 할까

결론부터 말하면 대부분의 AI Agent 서비스는 아래 조합이 현실적입니다.

• 초반 MVP: 채팅형
• 프로덕션 전환: 워크스페이스형
• 특정 목적형 기능: 폼 + 결과 대시보드형 병행

특히 RAG 기반 AI 투자 Agent 같은 경우에는 채팅형만으로는 부족합니다.

추천 구조:

• 좌측: 대화 히스토리 / 이전 분석 세션
• 중앙: 최종 답변 / 요약 / 투자 의견
• 우측: 뉴스, 공시, 재무지표, 근거 문서, Agent 로그

이렇게 해야 사용자가 답변을 “읽는 것”을 넘어서 “검토”할 수 있습니다.

질문 입력 UX는 어떻게 설계할까

입력창은 단순해 보여도 실제로는 많은 요소를 포함합니다.

기본 입력 요소

• 자유 질문 textarea
• 전송 버튼
• 첨부 문서 업로드
• 빠른 프롬프트 예시
• 최근 질문 재사용

실무에서 자주 넣는 보조 옵션

• 모델 선택
• 검색 범위 선택
• 기간 필터
• 결과 형식 선택
• 보수적/공격적 톤 조절

예를 들면 투자 Agent에서는 아래처럼 확장할 수 있습니다.

[질문 입력창]
"TSMC와 NVIDIA를 비교해서 단기 리스크를 정리해줘"

[옵션]
- 분석 기간: 최근 90일
- 데이터 범위: 뉴스 + 공시 + 실적발표
- 출력 형식: 요약 / 표 / 보고서
- 리스크 성향: 보수적

이런 구조는 자연어 입력의 자유도는 유지하면서도 결과 품질을 높여줍니다.

결과 화면은 어떤 블록으로 나누는 것이 좋은가

결과 화면은 보통 아래 블록으로 나누면 안정적입니다.

1. 최종 답변 블록

사용자가 가장 먼저 보는 영역입니다.

포함 요소:

• 3줄 요약
• 상세 답변
• 추천 액션
• 주의사항

2. 근거 블록

RAG 기반 서비스에서 핵심입니다.

포함 요소:

• 참조 문서 제목
• 출처 링크
• 문서 발행 시점
• 인용된 문단 일부

3. 도구 실행 결과 블록

Agent가 외부 시스템을 호출했다면 별도 구역에서 보여주는 것이 좋습니다.

예:

• 주가 데이터 API 결과
• 재무 지표 계산 결과
• 스크리닝 결과
• 내부 검색 인덱스 조회 결과

4. 상태 및 메타 정보 블록

신뢰를 위해 꼭 필요합니다.

• 생성 시각
• 응답 시간
• 사용 모델
• 검색된 문서 수
• 실행된 도구 수

스트리밍 UX는 거의 필수다

사용자 체감 성능을 높이려면 응답을 한 번에 다 보여주기보다 스트리밍하는 편이 훨씬 좋습니다.

보통 아래 두 기술 중 하나를 씁니다.

SSE

가장 구현이 단순합니다.

장점:

• 서버에서 클라이언트로 토큰 스트리밍하기 쉬움
• 프록시 환경에서 상대적으로 다루기 편함
• 채팅형 UI에 잘 맞음

적합한 경우:

• 답변 토큰 스트리밍
• 단계 상태 업데이트
• 단방향 이벤트 전달

WebSocket

양방향 통신이 필요한 경우에 적합합니다.

장점:

• 양방향 실시간 이벤트 처리 가능
• 협업형 워크스페이스나 긴 작업 상태 관리에 유리

적합한 경우:

• 복수 도구 실행 상태 동기화
• 협업형 세션
• 실시간 제어가 많은 Agent

초기에는 보통 SSE로 시작하는 편이 개발 효율이 좋습니다.

추천 기술 스택

웹 UI 기준으로 가장 무난한 선택지는 아래 조합입니다.

프론트엔드

• Next.js
• React
• Tailwind CSS
• shadcn/ui
• 상태 관리: Zustand 또는 React state

이 조합은 개발 속도, SSR/SEO 대응, 컴포넌트 생산성 면에서 균형이 좋습니다.

실시간 응답

• 기본 추천: SSE
• 고급 상호작용: WebSocket

차트와 데이터 시각화

• Recharts
• ECharts

특히 투자나 분석형 Agent는 표와 차트가 중요하므로 텍스트 중심 UI만으로 끝내지 않는 편이 좋습니다.

백엔드

• FastAPI
• 또는 Node.js / NestJS

Agent 실행 계층, RAG 검색 계층, 세션 저장소, 비동기 작업 큐를 분리하기 쉽습니다.

화면 예시를 텍스트로 그려보면

가장 추천하는 워크스페이스형 AI Agent UI는 아래와 같습니다.

+----------------------------------------------------------------------------------+
| Header: 서비스명 / 모델 / 세션 상태 / 사용자 메뉴                                 |
+----------------------+--------------------------------------+--------------------+
| 좌측 세션 패널        | 중앙 응답 패널                        | 우측 근거 패널       |
| - 이전 대화          | - 최종 답변                           | - 검색 문서 목록      |
| - 즐겨찾기 세션      | - 요약                                | - 뉴스 / 공시         |
| - 최근 질문          | - 상세 분석                           | - 툴 실행 결과        |
|                      | - 경고 / 한계                         | - 로그 / trace        |
+----------------------+--------------------------------------+--------------------+
| 하단 입력창: 질문 입력 / 파일 업로드 / 옵션 선택 / 전송                           |
+----------------------------------------------------------------------------------+

이 구조는 단순한 챗봇보다 구현 비용이 크지만, 사용자가 결과를 믿고 다음 행동으로 이어가기에 훨씬 좋습니다.

모바일은 데스크톱과 다르게 생각해야 한다

데스크톱에서 3열 워크스페이스가 좋아 보여도 모바일에서는 그대로 쓰기 어렵습니다.

모바일에서는 보통 아래 방식이 좋습니다.

• 기본은 채팅형 단일 컬럼
• 근거 문서와 도구 결과는 하단 sheet 또는 탭으로 분리
• 입력창은 하단 고정
• 최근 질문과 세션 목록은 drawer로 처리

즉, 데스크톱은 워크스페이스형, 모바일은 채팅형에 가까운 적응형 UI가 현실적입니다.

구현할 때 자주 놓치는 문제

1. 답변만 예쁘고 근거 확인이 어렵다

이 경우 사용자는 금방 신뢰를 잃습니다.

2. 처리 중 상태가 보이지 않는다

체감 속도가 급격히 나빠집니다.

3. 긴 답변에서 재질문 동선이 멀다

탐색 흐름이 끊깁니다.

4. 모바일에서 패널이 과도하게 많다

실사용성이 떨어집니다.

5. Agent 로그를 모두 노출해 화면이 복잡하다

일반 사용자에게는 필요한 정보만 보여주고, 상세 로그는 접을 수 있게 설계하는 편이 좋습니다.

추천하는 초기 구현 순서

처음부터 완벽한 워크스페이스를 만들기보다 아래 순서가 현실적입니다.

1. 채팅형 UI + SSE 스트리밍 답변
2. 근거 문서 패널 추가
3. 도구 실행 상태 표시
4. 세션 히스토리 저장
5. 워크스페이스형 2열 또는 3열 UI 확장
6. 차트/표/보고서형 출력 추가

이 순서로 가면 사용자 가치가 빠르게 나오고, 이후 복잡한 Agent 기능도 자연스럽게 붙일 수 있습니다.

마무리

AI Agent의 UI/UX는 단순히 “챗봇처럼 보이게 만드는 것”이 아닙니다.
사용자의 질문을 자연스럽게 받고, Agent의 처리 과정을 신뢰감 있게 보여주고, 근거와 결과를 함께 검토할 수 있도록 만드는 제품 설계입니다.

정리하면:

• 단순한 Agent는 채팅형으로 시작해도 충분합니다.
• RAG, 투자, 분석, 운영 Agent는 워크스페이스형이 더 적합합니다.
• 결과는 문장보다 구조화된 카드, 표, 근거 패널로 보여주는 편이 좋습니다.
• 실시간 응답은 SSE를 중심으로 시작하는 것이 가장 현실적입니다.
• 데스크톱과 모바일 UX는 분리해서 생각해야 합니다.

좋은 Agent는 모델만 똑똑한 것이 아니라, 사용자가 결과를 이해하고 다음 행동으로 이어갈 수 있게 화면이 설계되어 있습니다.