brunch

You can make anything
by writing

C.S.Lewis

by 송 재희 Aug 03. 2024

Enterprise LLM 사용자 인터페이스

오늘날 AI, 특히 대규모 언어 모델(LLM)이 우리 일상 생활에 깊숙이 파고들면서, 이러한 첨단 기술과 사용자 간의 상호작용을 어떻게 설계할 것인가는 매우 중요한 문제가 되었다. 이 포스트에서는 LLM 시스템을 위한 효과적인 사용자 인터페이스 설계에 대해 깊이 있게 살펴보고자 한다.


기업 내 디자이너, 프로젝트 관리자, 개발자 등 리소스가 있다면 자체 유저 인터페이스를 개발할 수 있고, 그렇지 않으면 Open WebUI나 GPT4All과 같은 오픈 소스 기술을 기본으로 커스터마이즈하는 것도 고려해 볼 수 있다.


우선 사용자 인터페이스에 최소한 어떤 것들을 포함해야 하는지 하나의 예시로 정리해 보았다


웹/앱 인터페이스: LLM과의 대화의 장

웹/앱 인터페이스는 사용자가 LLM 시스템과 직접 상호작용하는 핵심 접점이다. 이 인터페이스는 단순히 질문을 입력하고 답변을 받는 것 이상의 기능을 제공해야 한다.


1.1 쿼리 입력 섹션   

확장 가능한 텍스트 영역: 사용자가 복잡한 질문이나 긴 문장을 편안하게 입력할 수 있도록 한다.

음성 입력 옵션: 키보드 사용이 불편한 사용자나 이동 중인 사용자를 위해 음성으로 질문을 입력할 수 있게 한다. 이는 접근성 향상에 크게 기여한다.

쿼리 템플릿: 자주 사용되는 질문 유형에 대한 템플릿을 제공하여 사용자의 시간을 절약하고 시스템 사용을 쉽게 만든다.


1.2 응답 표시 영역   

명확한 응답 표시: LLM의 응답을 가독성 높게 표시하며, 필요시 섹션별로 구분하여 보여준다. Markdown (md)를 이용한다. 

출처 및 신뢰도 표시: 응답의 근거가 되는 정보의 출처를 명확히 표시하고, 해당 정보의 신뢰도를 수치나 아이콘으로 나타낸다. 이는 사용자가 정보의 질을 판단하는 데 도움을 준다.


1.3 쿼리 히스토리 관리   

최근 쿼리 표시: 사용자의 최근 질문들을 시간순으로 보여주어 이전 대화 내용을 쉽게 확인할 수 있게 한다.

쿼리 재실행 및 수정: 이전에 했던 질문을 쉽게 다시 물어볼 수 있게 하고, 필요시 약간의 수정을 가능하게 하여 사용 편의성을 높인다.


1.4 대화 컨텍스트 관리   

컨텍스트 유지 및 표시: 현재 진행 중인 대화의 맥락을 유지하고 이를 사용자에게 보여준다. 이는 연속된 질문-답변 과정에서 중요하다.

새 대화 시작 옵션: 사용자가 원할 때 새로운 주제로 대화를 시작할 수 있게 한다.


1.5 설정 및 사용자 프로필   

AI 모델 선택: 기본 AI 모델을 선정하고 필요시 유저가 질문 목적에 맞는 AI 모델을 선택할 수 있는 옵션을 준다. 

응답 형식 설정: 간단한 답변을 선호하는 사용자와 상세한 설명을 원하는 사용자 모두를 만족시킬 수 있도록 한다.

사용자 정보 표시: 현재 로그인한 사용자의 역할과 권한 정보를 명확히 보여준다.


1.6 도움말 및 지원   

상황별 도움말: 사용자가 현재 수행 중인 작업에 대한 구체적인 도움말을 제공한다.

기술 지원 요청: 문제 발생 시 신속하게 지원을 요청할 수 있는 옵션을 제공한다. 사용상 문제가 있을때 기술 지원 티켓을 만들수 있도록 한다. 

사용자 경험 개선을 위한 추가 고려사항. 기능 추가및 소비자 피드백을 할수 있는 창구를 만든다.


2.1 반응형 디자인 

데스크톱, 태블릿, 스마트폰 등 다양한 디바이스에서 최적의 사용 경험을 제공할 수 있도록 반응형 디자인을 적용한다.


2.2 다크 모드 

사용자의 선호도와 사용 환경에 따라 다크 모드를 선택할 수 있게 하여 눈의 피로를 줄이고 배터리 사용량을 절약한다.


2.3 키보드 단축키 

자주 사용하는 기능에 대한 키보드 단축키를 제공하여 파워 유저들의 작업 효율성을 높인다.


2.4 접근성 기능   

화면 읽기 프로그램 호환성: 시각 장애가 있는 사용자도 쉽게 시스템을 사용할 수 있도록 한다.

고대비 모드: 시각적 불편함이 있는 사용자를 위해 텍스트와 배경 간의 대비를 높인 모드를 제공한다.


실제 구현 시 고려사항


3.1 성능 최적화 

LLM의 응답 생성에는 시간이 걸릴 수 있으므로, 응답 대기 중 사용자에게 적절한 피드백을 제공해야 한다. 로딩 인디케이터나 부분적 응답 표시 등을 활용할 수 있다.


3.2 에러 처리 

네트워크 오류, 서버 과부하 등 다양한 에러 상황에 대비한 명확한 에러 메시지와 대안을 제시해야 한다.


3.3 데이터 프라이버시 

사용자의 쿼리 및 대화 내용은 민감한 정보를 포함할 수 있으므로, 강력한 데이터 암호화와 보안 정책을 적용해야 한다.


3.4 지속적인 사용자 피드백 수집

 인터페이스의 사용성에 대한 사용자 피드백을 지속적으로 수집하고 분석하여 지속적인 개선을 진행해야 한다.


결론 LLM 시스템을 위한 사용자 인터페이스 설계는 기술적 복잡성과 사용자 친화성 사이의 균형을 맞추는 작업이다. 사용자의 다양한 니즈를 고려하고, 접근성과 사용 편의성을 최우선으로 하는 설계가 필요하다. 또한, AI 기술의 빠른 발전 속도를 고려할 때, 유연성과 확장성을 갖춘 인터페이스 설계가 중요하다. 이러한 원칙을 바탕으로 설계된 인터페이스는 LLM 시스템의 잠재력을 최대한 활용하면서도 사용자에게 직관적이고 만족스러운 경험을 제공할 수 있을 것이다.


OpenAI ChatGPT

화면 좌측  

사이드바: 

ChatGPT: 기본 채팅 인터페이스로 돌아가는 옵션이다. 다음에 나오는 것들은 특정한 목적을 가진 GPTs들이다. 프롬프트 엔지니어링, 저장된 문서, 간단한 프로그램을 통해 만든 기능 호출, 그리고 LLM 모델을 통하여 특별한 기능을 수행하도록 커스터마이즈해서 저장해 반복적으로 쓸 수 있다. 다음은 필자가 직접 개발한 것들로 GPTs의 예를 잘 들어주고 있다.


One Pager: 기업의 제품이나 서비스를 한 페이지 안에 소개할 수 있도록 하는 잘 정리된 문서를 만들 수 있다. 

Market Scout: 시장 조사를 돕는 도구다. 

Bible Study Guide: 성경 공부를 위한 가이드다. 

Business Proposal: 사업 제안서를 작성하는 도구다. 


Explore GPTs: 다양한 GPT 모델을 탐색할 수 있는 메뉴다. 


Today 섹션: 오늘 Chat 세션들을 보여준다.


Previous 7 days: 과거 7일 동안 사용한 Chat 세션들을 보여준다.


화면 중앙  

상단 좌측은 모델을 선택할 수 있다. 현재 ChatGPT가 설정되어 있다. ChatGPT Plus를 구입하면 좀 더 최신 모델들을 선택할 수 있다. 

ChatGPT 로고: 중앙에 ChatGPT 로고가 있다.


기능 카드: ChatGPT 사용자들에게 질문 예시를 보여준다. 제시한 예문을 볼 때 과거 질문들을 분석하여 사용자에게 적절한 질문을 추천해 주는 것 같지는 않다. 

Fun fact about the Roman Empire: 로마 제국에 대한 재미있는 사실을 알려주는 카드다. 

Overcome procrastination: 미루는 습관을 극복하는 팁을 제공하는 카드다. 

Message to comfort a friend: 친구를 위로하는 메시지를 작성하는 도움을 주는 카드다. 

Morning routine for productivity: 생산성을 높이는 아침 루틴을 제안하는 카드다.


화면 우측  

사용자 아이콘: 우측 상단에 사용자의 프로필 아이콘이 있다.


화면 하단  

입력 창: 메시지를 입력할 수 있는 창이다. 

첨부 파일 아이콘: 메시지에 파일을 첨부할 수 있다. 

전송 버튼: 메시지를 전송하는 버튼이다.


하단 주석  

정보 알림: "ChatGPT can make mistakes. Check important info."라는 문구가 있어, ChatGPT가 실수를 할 수 있으므로 중요한 정보는 반드시 확인하라는 알림이다.


Open WebUI

화면 좌측

 사이드바: 

New Chat: 새로운 채팅을 시작하는 옵션이다. 

Modelfiles: 모델 파일을 관리하는 메뉴다. 

Prompts: 프롬프트를 설정하거나 관리하는 메뉴다. 

Documents: 문서를 관리하는 메뉴다. 

Search 바: 검색 기능을 통해 문서나 프롬프트 등을 검색할 수 있다. 


그 밑의 목록들은 그 동안 사용했던 Chat 기록들이다.   

"ChatGPT의 혁명적 영향 ChatGPT는"

 "시스템 구조" 

"System Components and Workflow"


사용자 정보: 

좌측 하단에 'jsong'이라는 사용자 이름이 표시되어 있다.


화면 중앙
 모델 선택: 

Select a model: 사용할 모델을 선택하는 옵션이다. Llama3.1이나 mistral 같은 오픈 소스 모델을 그대로 사용할 수 있고, 파운데이션 모델을 기본으로 Prompt Engineering 및 RAG를 통한 특수한 기능의 모델을 만들어 사용할 수 있다. 

ollama.com/library/llama3.1:latest 8.0B 

mistral:latest 7B 

business-proposal-genie:latest 8B i

diom-insight:latest 8B 

meeting-summary:latest 8B


환영 메시지: "Hello, jsong"과 "How can I help you today?"라는 환영 메시지가 중앙에 표시되어 있다.


기능 카드: 질문 예시들이다. 

Tell me a fun fact: 로마 제국에 대한 재미있는 사실을 알려주는 카드다.

 Show me a code snippet: 웹사이트의 스티키 헤더에 대한 코드 스니펫을 보여주는 카드다. 

Help me study: 대학 입학 시험을 위한 단어 학습을 돕는 카드다. 

Give me ideas: 아이들의 예술 작품에 대한 아이디어를 제공하는 카드다.


화면 하단


 입력 창: 메시지를 입력할 수 있는 창이다.
 플러스 아이콘: 새로운 요소를 추가할 수 있는 버튼이다.
 마이크 아이콘: 음성 입력을 할 수 있는 버튼이다. 전송 버튼: 메시지를 전송하는 버튼이다.


화면 우측 상단

 아이콘들:
 설정 아이콘: 설정 메뉴를 여는 버튼이다.
 편집 아이콘: 프롬프트나 문서를 편집할 수 있는 버튼이다.


GPT4ALL

화면 좌측  


사이드바: 

 Home: 홈 화면으로 이동하는 버튼이다. 

 Chats: 채팅 기록을 확인하고 새로운 채팅을 시작할 수 있는 메뉴다. 

 Models: 사용 가능한 모델을 탐색하고 선택할 수 있는 메뉴다. 

 LocalDocs: 로컬 파일과 상호작용할 수 있는 메뉴다. 

 Settings: 설정 메뉴로 이동할 수 있는 버튼이다. 

 NOMIC 로고: 인터페이스 하단에 'NOMIC' 로고가 있다.


화면 중앙  

환영 메시지: "Welcome to GPT4All"과 "The privacy-first LLM chat application"이라는 메시지가 중앙에 표시되어 있다.


주요 기능 버튼: 

 Start Chatting: 대규모 언어 모델(LLM)과 채팅을 시작할 수 있는 버튼이다. 

 LocalDocs: 로컬 파일과 채팅할 수 있는 기능이다. 

 Find Models: 모델을 탐색하고 다운로드할 수 있는 기능이다.


화면 하단  

Latest News: New Model Support: 최신 모델 지원 소식이 포함되어 있다 (예: LLaMa 3.1.8b, Gemma, Mixtral 등). 

Suggested Follow Up Questions: 제안된 후속 질문에 대한 정보다. 

로드맵 정보: GPT4All이 지원할 도구에 대한 계획과 제안 사항을 디스코드에서 공유하라는 메시지가 포함되어 있다.


화면 우측 상단  

Subscribe to Newsletter: 뉴스레터를 구독할 수 있는 버튼이다.


화면 하단 메뉴  

Release Notes: 릴리즈 노트를 확인할 수 있는 링크다.

Documentation: 문서화된 정보를 볼 수 있는 링크다.

Discord: 디스코드 채널로 이동할 수 있는 링크다.

X (Twitter): X (트위터)로 이동할 수 있는 링크다.

Github: 깃허브 저장소로 이동할 수 있는 링크다.

GPT4All.io: GPT4All 공식 웹사이트로 이동할 수 있는 링크다.


#GenAI #LLM #Perplexity #Anthropic #Claude #Enterprise #PrivateLLM #인공지능 #생성형AI #StartupConsulting #Seattle #UserInterface #ChatGpT #OpeWebUI #GPT4ALL

매거진의 이전글 Enterprise Private LLM 아키텍처
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari