AI 서비스를 위한 UI는 따로 있다

최근 AI는 그 어떤 기술보다 빠르게 발전하고 있습니다. 대나무 자라나듯 성큼성큼 성장해 특정 분야의 전문 지식은 물론 언어, 코딩, 최신 정보까지 많은 사람의 일상에 큰 도움을 주고 있죠. 챗GPT(ChatGPT), 제미나이(Gemini), 클로드(Claude) 등 대형 AI 파운데이션 모델1) 기반 서비스가 새롭게 등장했고, 기존 서비스 역시 AI 활용 기능을 도입하는 추세인데요. 

기술과 서비스가 급격히 변화한 만큼, 사용자 인터페이스(User Interface, 이하 UI)에도 새로운 바람이 불었습니다. 다양한 AI 서비스가 공통으로 특정한 UI 패턴을 보이죠. 이 글에서는 최근 AI 서비스에서 관찰할 수 있는 주요 UI 유형과 함께 ‘AI를 위한 UI’란 무엇인지를 살펴보겠습니다. 

1) AI의 한 종류로, 방대한 데이터를 학습한 딥러닝 네트워크 기술을 바탕으로 용도에 따라 다양한 서비스에 적용할 수 있는 기반 모델 

AI 서비스의 주요 UI 패턴 네 가지

AI 서비스의 주요 UI는 크게 네 가지로 나뉩니다. 가시적인 형태와 사용자가 활용하는 방식에 따라 구분한 것이죠. 이전에 존재하지 않았던 생소한 UI라기보다는 기존 UI를 AI 기능에 맞게 적용, 발전시킨 유형이라 볼 수 있습니다. 

1. 자유형(Freeform) UI

첫 번째는 사용자와 AI가 대화로 상호작용하는 자유형(Freeform) UI입니다. 서로 말을 주고받는 채팅 형태를 띠죠. 사용자는 채팅창에서 텍스트나 이미지를 입력하고 때로는 항목을 선택함으로써 필요한 내용을 요청합니다. 그에 대한 결과는 서비스에 따라 채팅창에서 대화 상대의 응답처럼 나타나거나, 채팅창 외부 공간에 표시됩니다. 자유형 UI는 아래 두 가지로 세분화할 수 있습니다.

• 대화형 구조(Conversational Structure)

구조: 완전한 자유형 대화 중심
용도 : 주로 텍스트로 소통. 사용자의 질문 또는 요청에 답하는 서비스

생성형 AI를 대중에게 널리 알린 챗GPT(ChatGPT)가 대표적인 사례입니다. 채팅창이 화면 대부분을 차지하며, 이를 중심으로 요청 입력과 결과 출력, 이전 대화 기록 열람 기능 등을 제공합니다. 

최근에는 멀티 모달, 외부 사이트 접근과 같은 기능이 추가돼 텍스트뿐 아니라 이미지, 링크, 파일 등 다양한 형식의 정보를 입출력할 수 있죠. 또, 퍼플렉시티(Perplexity)를 비롯한 일부 AI 서비스는 결과 데이터의 출처, 관련 이미지, 예상 질문 등 웹 검색에 특화된 UI를 지원합니다. 

• 내장형 채팅 패널(Embedded Chat Panel)

구조: 채팅 또는 단건 프롬프트 입력이 가능한 사이드 패널 내장
용도: 대화형 AI 기능을 기존 서비스에 추가하거나 플러그인으로 지원하는 서비스

기존 UI에 영향을 주지 않으면서도 대화형 AI 기능을 추가할 때 유용한 형태입니다. 마이크로소프트 오피스(MS Office), 구글 워크스페이스(Google Workspace)와 같은 업무 도구가 대표적이죠. 사용자가 필요할 때만 내장된 패널을 꺼내 쓸 수 있다는 장점 덕에 AI 시대 이전부터 두루 쓰였던 패턴이기도 합니다. 

2. 작업 중심(Task-Driven) UI

사용자가 원하는 일을 선택하거나 입력해 결과를 만들어내는 방식입니다. 기존 도구의 버튼, 메뉴, 또는 마법사(Wizard) UI의 연장선에 있다 볼 수 있죠. 이전에는 사용자가 원하는 결과를 위해 필요한 행동을 생각하고 명령을 내려야 했다면, 작업 중심 UI는 사용자의 몫이었던 작업까지 AI가 대신 수행합니다. 

• 단순 작업(Simple Task)

구조: 버튼, 메뉴 등으로 특정 작업을 수행하고 즉시 결과 제시
용도: 사용자의 의도가 명확한 AI 기능을 기존 서비스에 추가하거나 플러그인으로 지원하는 서비스

사용자에게 바로 드러난 페이지에서 언제든 작업할 수 있는 AI 기능을 제공합니다. 사용자의 의도와 예상 결과가 비교적 명확할 때 쓰이죠. 사용자가 버튼 또는 메뉴로써 AI에게 명령하면 작업을 시작하는 서비스가 다수지만, 사용자의 명령 없이 미리 작업을 수행하는 서비스도 있습니다. 실시간 자막 생성 서비스 오터(Otter)의 회의록 요약 탭이 대표적이죠. 이때 작업물은 패널, 팝업 등 덧붙이는 UI 없이 즉시 확인할 수 있는 구조를 취하기도 합니다. 

• 복합 작업(Complex Task)

구조: 페이지 전체에 걸쳐 단계적으로 입력된 작업을 수행하며 최종 결과 도출
용도: 사용자가 의도나 목표를 단번에 전달하기 어렵고 복잡한 작업을 위한 AI 서비스 

여러 차례에 걸쳐 사용자의 의도를 입력하면서 원하는 결과물을 만들어내는 과정에서 주로 쓰이는 UI입니다. 예를 들어, 하나의 발표 자료를 만들기 위해 주제 선정, 글쓰기, 미디어 삽입, 레이아웃 설정 등 복합적인 작업이 필요한 것처럼요. 

이 경우 입력과 출력을 반복하면서 점진적으로 최종 결과물을 만들어가는 방식과 미리 여러 단계의 옵션을 선택한 뒤 한 번에 결과물을 내는 방식으로 나눌 수 있습니다. 전자는 감마(Gamma), 후자는 파이어플라이(Firefly)가 대표적입니다. 

3. 지원형(Assistive) UI

평소에는 AI 기능이 크게 드러나지 않지만, 특정 상황 또는 사용자의 호출에 따라 가이드, 버튼, 예상 결과 제시 등으로 나타나는 방식입니다. 앞선 작업 중심 UI가 결과를 내기 위해 필수로 AI를 사용한다면, 지원형 UI는 더 나은 결과를 위해 보조적, 선택적으로 AI 기능을 활용합니다.

• 초기 지원(Initiation Assist)

구조 : 빈 화면에 플레이스홀더, 버튼 등으로 AI 기능 가이드 제공
용도 : AI를 활용해 콘텐츠를 제작, 편집하는 서비스

사용자가 작업을 시작할 때 ‘선택적으로 활용할 수 있는 AI 기능’을 안내하는 형태입니다. 이에 따라 사용자는 적절한 액션을 취해 AI 기능을 불러올 수 있습니다. 예를 들어, 노션(Notion)은 스페이스바를 누르면 노션AI에 작업을 요청할 수 있습니다. 최근 여러 텍스트 기반 업무 도구가 AI와 무관한 스마트 기능에도 이러한 UI를 도입하는 추세입니다. 

• 상황별 지원(Contextual Assist)

구조: 사용자의 작업 과정 또는 맥락에 따라 AI 기능 등장
용도: AI를 활용해 다양한 포맷의 콘텐츠를 제작, 편집하는 서비스

사용자가 작업 과정 중 원하는 AI 기능을 불러올 수 있는 형태입니다. 텍스트 기반 서비스를 예로 들면, 글을 쓰다가 ‘복사’, ‘붙여넣기’를 수행하듯 요약, 교정, 번역 등을 AI로 수행할 수 있죠.

대부분 사용자가 마우스 우클릭할 때 AI 기능 메뉴를 표시하지만, 특정 영역이나 시점에 따라 자동으로 관련 버튼 또는 프롬프트 입력란이 나타나는 적극적인 방식도 있습니다. 포토샵(Photoshop)이 대표 사례입니다. 

구글의 경우, 기존 스마트 입력 UI에 AI를 도입해 사용자가 원하는 결과물을 미리 파악하고 제시하는 기능을 지원합니다. 구글 시트(Sheet)의 스마트 필(Smart Fill), 지메일(Gmail)의 스마트 컴포즈(Compose) 기능이 데이터를 기반으로 사용자에게 필요한 결과를 제안하고 취사선택할 수 있도록 돕죠.