최근 2년 동안 AI는 그 어떤 것보다 빠르게 발전하며 일상생활에 사용되고 있습니다. 대나무가 자라는 속도만큼 한달 한달 대단한 성장과 발전을 하며 더 좋아지고 있죠. 기존에도 AI는 있었지만, 모두가 느끼듯 지금과 같은 수준은 아니었습니다. 특히 생성형 AI, 그중에서도 ChatGPT는 이제 제가 컴퓨터를 사용하다가 막히거나 질문이 생길 때 가장 먼저 떠오르는 도구가 되었습니다. 특정 분야의 지식이나 최근 정보, 코딩, 에러 해결, 영어 등 뭐든 내가 필요한 정도는 해 줄 것이란 생각이 들죠.

지금은 ChatGPT, Gemini, Claude 등의 대형 파운데이션 모델과 그 대화형 AI 서비스가 현재는 가장 널리 사용되는 서비스이지만, MS Office나 Google Workspace 같은 업무 도구들, Perplexity나 You.com 같은 AI 기반 검색 엔진 등 AI를 활용한 서비스들이 점점 늘어나고 있습니다. 기존의 서비스에 AI 기능을 추가하거나, AI를 기반으로 새로운 방식의 서비스가 나오는 식으로 말이죠.

이번 글에서는 이런 다양한 AI 활용 서비스들이 취하고 있는 주요 UI 패턴들을 정리해 보려고 합니다. 주로 모바일이 아닌 PC에 대해서 말이죠. 이미 'UX for AI' 주제의 글들이 여럿 있고 글마다 다양한 관점들을 나름대로 엮어 전달하고 있어서 제가 쓰는 글도 어딘가에서 이미 다룬 것들과 사례들이겠지만, 당분간 크게 변하지 않을 큰 구조의 분류를 중심으로 정리했습니다. 이 분류는 ‘Designing better UX for AI — 8 best practices to follow’ 글을 참고하여 저의 관점을 추가했습니다.

이후 설명할 AI를 위한 UI 패턴의 분류를 먼저 소개하면 아래와 같습니다.

AI를 위한 UI 패턴 네 가지

UI 패러다임의 세 번째 전환

UI 패턴을 다루기 전에, Jakob Nielsen의 2023년 글 'AI: First New UI Paradigm in 60 Years'를 먼저 소개하려고 합니다. Jakob Nielsen은 N/N Group의 창업자이자, 오래전부터 사용성 연구와 UX 분야에서 유명한 인물이죠. 이런 분이 과거에서부터 현재를 살피며 AI 시대의 UI에 대해 고민할 때 알아두어야 할 근본적인 패러다임 전환에 대한 글을 공유했는데, 그 패러다임이란 아래와 같습니다.

AI 시대가 도래함에 따라, UI 패러다임은 세 번째 전환을 맞이했음

1st. Batch Processing(아주 예전 천공카드 시절)

2nd. Command-based Interaction(터미널에서 텍스트로 소통하는 CLI, 그리고 GUI)

3rd. Intent-Based Outcome Specification, AI 시대의 새로운 패러다임

과거에는 상호작용이 필요 없거나(1st), 명령을 통해 세부적인 작업을 지시했지만(2nd), 이제는 사용자가 의도를 전달하면 AI가 결과를 제공하는 방식이 되었다는 것입니다(3rd). 이 새로운 상호작용 방식은 앞으로 UX 디자인할 때 항상 염두에 두어야 할 것입니다.

하지만 의도(Intent)를 전달하는 방식이 획기적이고 대단한 장점을 가지고 있지만, 결과물은 사용자가 생각한 것과 다를 수 있습니다. Jakob Nielsen은 이와 관련해 ‘프롬프트 엔지니어링’에 대한 주제를 이야기하며, '문장형 방식'의 한계를 지적했습니다. 그리고 미래의 AI 시스템 UI가 (3rd)의 방식과 (2nd)의 방식을 혼합하는 동시에 많은 GUI 요소를 유지하는 하이브리드 UI를 가질 것으로 예측했습니다.

정리하면, AI 기반의 도구는 '명령'이 아닌 '의도'를 전달하고, 그 의도 기반의 '생성된 결과물'을 전달받는 상호작용이 주류가 된다고 볼 수 있습니다.

머리말에 썼듯 현재는 채팅 방식의 AI 서비스가 가장 주류이고, 그것의 한계를 벗어나 서비스에 특화된 UI의 시도들이 생겨나고 있습니다. 물론 위에서 이야기된 것처럼, 많은 기능이 의도 기반의 상호작용을 하는 방식이죠. 이런 것들은 이제 막 생겨나는 초기의 시도들이고, Jakob Nielsen이 말했듯 미래에는 더 알차고 최적화된 UI 패턴들이 정리되겠지만, 지금은 현재의 시도를 기반으로 탐색해 보겠습니다.

AI 기능의 주요 UI 패턴

1. Freeform UI

사용자와 AI가 대화를 통해 상호작용하는 방식입니다. 그래서 그 형태도 채팅 형태를 취하고 있습니다. 요청은 언제나 채팅창에서 텍스트 입력이나 파일 첨부 혹은 선택을 통해 진행하고, 그 결과물은 동일하게 채팅창에 텍스트 중심으로 표시하기도 하고, 서비스에 따라 채팅창 외부의 UI 공간에 만들어지기도 합니다.

1-1. Conversational Structure

- 구조 : 완전한 자유형 대화 중심의 형태

- 사용처 : 주로 텍스트로 소통하며 일반적인 모든 질문이나 요청에 대한 답과 결과를 내놓는 서비스

생성형 AI가 대중에게 널리 알려지게 된 시발점인 ChatGPT가 취하고 있는 방식이죠. 화면의 대부분을 차지하는 채팅창을 중심으로 서비스가 구성되고, 보통 이전 대화 내역을 볼 수 있는 기능도 제공합니다. 최근에는 멀티모달이나 웹사이트 접근과 같은 기능들이 추가되어, 입력이나 출력도 텍스트뿐만이 아니라 이미지, 파일 등을 입력하거나 출력할 수 있고, 최신의 정보나 웹사이트에 직접 접근하여 정보를 탐색하기도 합니다. 그리고 Perplexity 같은 웹 검색에 특화된 서비스는 출처나 관련 이미지, 예상 후속 질문 등의 UI를 제공하여 '웹 검색'이라는 사용자의 목적을 위한 기능들을 추가로 제공합니다.

좌: ChatGPT, 우: Perplexity

1-2. Embedded Chat Panel

- 구조 : 대화나 단건의 프롬프트를 입력하는 사이드 패널 형태

- 사용처 : 기존 서비스에 대화방식의 AI 기능을 추가하거나 Plugin으로 제공하는 서비스

기존 서비스에 추가로 AI 기능을 제공하는 경우에 주로 쓰이며, 기존 UI에 영향을 주지 않으면서도 대화 형태의 AI 기능을 추가하기 위해 주로 사이드 패널 형태를 취하는 경우입니다. 이런 구조는 필요할 때만 꺼내어 도움을 받을 수 있는 장점이 있고, AI가 아닌 기존의 기능들도 많이 사용하는 패턴이죠.

MS Office, Google Docs 같은 업무 도구들은 AI 관련하여 여러 가지 기능을 제공하고 있고, 그중 하나가 이 채팅 형태의 사이드 패널입니다. 이런 방식은 기본적으로는 '1-1. Conversational Structure'와 같이 자유로운 요청과 결과를 받는 형태의 대화도 가능하고, 특정 요청을 하면 기존 서비스 영역(슬라이드, 시트 등)에 이미지나 테이블과 같은 결과물을 직접 생성하기도 하는 등 여러 방식의 인터랙션이 가능합니다.

좌: MS Powerpoint, 우: Notion

2. Task-Driven UI

기존 도구들의 버튼이나 메뉴 기능들처럼, 한 번의 액션으로 필요한 AI 기능이 실행되어 결과를 만들어내는 방식입니다. 혹은 예전의 '마법사 UI' 처럼, 원하는 일을 단계적으로 선택/입력하여 결과를 만들어내는 방식입니다. 특징은 기존 도구들의 명령이 컬러 변경, 슬라이드 삽입과 같은 작은 기능에 대한 완벽한 형태의 명령과 행동이었다면, 이 AI 기능은 보통 콘텐츠 생성, 변형, 분석과 같이 기존에 사용자가 직접 다양한 명령들이나 사고를 통해 수행했을 일들을 대신해 준다는 것입니다.

2-1. Simple Task

- 구조 : 버튼이나 메뉴로 특정 AI 기능을 수행, 혹은 즉시 결과를 확인할 수 있는 별도 영역을 가지는 형태

- 사용처 : 명확한 의도의 AI 기능을 추가하거나, 비슷한 AI 기능을 Plugin으로 제공하는 서비스

이 방식은 사용자가 접하는 페이지의 UI에 바로 드러나 보이며 언제든 작업을 수행할 수 있는 기능으로 제공됩니다. 보통 사용자의 의도와 예상되는 결과물의 형태가 명확할 때 사용되며, 마찬가지로 기존 서비스에 AI 기능을 추가할 때 많이 사용됩니다. 버튼과 메뉴 형태로 많이 제공되지만, Otter.ai의 회의록 '요약 탭'처럼 서비스의 컨셉과 기대하는 기능이 명확할 때는 사용자의 요청 없이도 미리 작업을 수행하고, 결과물을 보여주기 위해 덧붙여지는 팝업이나 패널 같은 UI 없이도 쉽게 결과물을 확인할 수 있는 구조를 취하기도 합니다.

좌: ClickUp(서브태스크 제안 버튼), 우: Otter.ai(회의록 자동 요약 탭)

2-2. Complex Task

- 구조 : 전체 페이지를 할애해 단계적 입력(선택)을 통해 내용을 정해가며 최종 결과물을 만들어가는 형태

- 사용처 : 복잡하거나, 명확지 않은 목표와 의도를 기반으로 AI를 활용한 결과물을 만들어가는 서비스

이 방식은 기존의 서비스들이 제공하는 방식에서 탈피하여, AI를 기반으로 새로운 방식의 기능을 제공하는 서비스에서 많이 찾아볼 수 있습니다. 예를 들어 프리젠테이션 자료를 만들 때, 지금까지 우리는 파워포인트를 열고 빈 화면에 텍스트를 입력하고 미디어 파일들을 추가하고 레이아웃을 잡아가며 자료를 만들었죠. 이와 대비하여 Gamma의 경우, 어떤 주제의 자료를 만들지 프롬프트를 적고, AI가 만든 목차를 보며 빼거나 새롭게 추가하고, 이후 해당 목차를 기준으로 AI가 생성한 장표들의 레이아웃과 텍스트 및 이미지, 스타일을 보며 조정을 해나가는 방식을 제공합니다. 첫 주제로 이야기했던 의도 기반의, 'UI의 세 번째 패러다임'을 가장 잘 보여주는 방식이죠.

주로 복잡한 작업의 결과물(텍스트 내용, 이미지, 레이아웃, 스타일 등)을 만들어내는데 사용되기 때문에 그 의도를 명확하게, 그리고 순차적으로 전달해야 하고 그러기 위해 다양한 관점의 의도를 입력, 선택하는 과정으로 이루어집니다. 이 방식을 조금 더 나눠보자면, 단계적으로 의도 전달과 중간 결과 생성을 이어가며 최종 결과물까지 만들어가는 방식과(Gamma), 다양한 선택 옵션들을 선택해 의도를 명확히 지정한 뒤 한번에 결과물을 보는 방식(Firefly) 이렇게 두 가지로 정리해 볼 수 있습니다.

좌: Gamma.app, 우: Adobe Firefly

3. Assistive UI

특정 상황에서 AI 기능이 표시되거나 실행되어 사용자를 돕는 방식입니다. 콘텐츠를 제작/편집하는 서비스에 많이 사용되며, 보통은 AI 기능이 드러나지 않다가 특정 상황이 되거나 사용자가 호출하면 가이드나 버튼, 예상 결과물을 제안하는 방식으로 존재를 드러내며 사용자의 작업을 돕습니다.

3-1. Initiation Assist

- 구조 : 빈 화면에 발화 가이드나 기능을 Placeholder, 버튼 등으로 제공되는 형태

- 사용처 : 콘텐츠를 제작하거나 편집하는 전반에 AI를 활용하는 서비스

Notion, Google Docs나 MS Word처럼 텍스트를 작성하는 도구들은 작성 시작 시 빈 페이지에 'AI 기능으로 초안을 작성할 수 있다'는 것을 placeholder나 제안 버튼 등으로 제공합니다. 이런 제안을 보고 사용자가 AI 기능을 쓰기로 마음먹는 액션(space 입력, 클릭 등)을 하며 적극적으로 AI 기능 UI를 펼쳐 보이며 이후 작업을 이어갈 수 있도록 합니다. 이런 식으로 보통은 잘 드러나지 않다가 사용자가 원할 때 AI 기능을 제공하는 방식입니다. 최근에는 AI 기능이 아니더라도 기존 기능이나 기존보다 스마트한 기능(글 템플릿 불러오기 등)도 점점 더 이런 방식으로 제공하는 추세입니다.

Notion, 좌: 새 페이지 생성 시, 우: Space 키 입력 시

3-2. Contextual Assist

- 구조 : 적절한 시기에 버튼이나 AI 기능 UI가 나타나거나, 맥락에 맞게 예상되는 결과물을 표시해 돕는 형태

- 사용처 : 다양한 방식의 콘텐츠를 제작하거나 편집하는 전반에 AI를 활용하는 서비스

Word 같은 문서 도구에서 텍스트를 선택해 우클릭하면 '복사하기', '번역하기' 등과 같이 해당 텍스트를 기반으로 기능을 수행하는 방식이 있습니다. 이와 비슷하게 선택된 텍스트에 대해 '요약하기', '늘리기', '교정하기' 등과 같은 AI 기능을 수행하는 것들이 추가되고 있습니다. 보통 우클릭을 통해 Contextual Menu를 표시해 AI 기능들을 보여주는 방식이 많지만, 최근에는 더 적극적으로 콘텐츠 선택 시 바로 버튼이 표시되거나, PopClip과 비슷하게 구체적으로 할 수 있는 일들을 펼쳐서 제공하기도 합니다. Photoshop에 새롭게 추가된 AI 기능처럼 특정 영역을 선택하면 prompt를 직접 입력할 수 있는 UI를 표시하는 경우도 있습니다.

그리고 위의 방식과는 다르게, 사용자의 작업을 계속 지켜보면서 앞으로 사용자가 할 작업을 파악하여 미리 결과물로 을 표시하여 제안하는 방식도 있습니다. Google Workspace의 Enhanced Smart Fill 기능이 좋은 예시가 될 수 있겠죠.

좌: Google Docs, 우: Google Sheet

4. Invisible UI

우리가 잘 알고 있는 Netflix의 콘텐츠 추천 시스템처럼, 사용자에게 직접적으로 드러나지 않고 백그라운드에서 작동하는 AI 기능입니다. 기존 추천 시스템에서 발전된 것들이 많지만, 최근에는 AI가 부각되기도 하고 AI가 가질 수 있는 불완전성을 고려하여 'AI 추천'이라는 것을 명시적으로 내비치며 콘텐츠를 추천하기도 합니다. 뻔한 구분이기는 하지만 우리가 디자인할 때 염두에 둘 사항입니다. 기존의 추천시스템과 비슷하게 추천의 이유(혹은 추천의 주제), Social Proof, 개인화를 고려한 콘텐츠 그룹 UI 형태 등은 기존의 디테일한 UI 패턴들을 잘 참고해서 디자인해야 하지 않을까 합니다.

그리고 제가 기술적인 것은 아주 잘 알지는 못하지만, 상품이나 영상 같은 콘텐츠가 아니더라도 더 다양한 대상의 콘텐츠(예를 들어 글이나 파일 같은 것들)들도 이제 복잡한 데이터와 로직이 없어도 AI 에게 맡기면 기존보다 더 똑똑하게 추천이나 제시를 할 수도 있으니, 이런 활용도 측면에서도 단순 UI 관점이 아닌 UX 관점에서는 익혀두고 고려해 볼 만한 사항이 되지 않을까 합니다. 관련하여 좋은 예시는 아니겠지만, 제가 전에 OpenAI의 embedding 기능이 궁금하여 그것을 사용하여 만들어본 사이트, 블록체인 용어집 사이트에서는 각 용어의 관련 용어(Related terms)를 임베딩을 기반으로 지정해 봤습니다. 결과적으로 직접적 연관이 아니더라도 용어 설명 간의 유사성을 측정하여 별로 생각치 못했을 용어까지 잘 추천을 해주었습니다.

좌: 네이버 쇼핑(AiTEMS), 우: Netflix

UI 패턴에 대한 정리

이번 글에서 정리한 'AI를 위한 UI 패턴'은 주로 AI 기능과 인터랙션을 시작하는 구조에 대한 패턴 분류로 볼 수 있습니다. 이 시작 방식에 따라 전반적인 구조가 달라지고, 이후 인터랙션을 이어가는 방식도 다르게 제공됩니다. 세부적으로는 더 다양한 구조와 패턴을 나눠볼 수 있겠지만, 이번 글에서는 넓은 시야에서 한눈에 살펴볼 수 있을 정도의 구분만 해보았습니다.

사실 특별히 새로운 UI 패턴이 생겨난 것은 아닙니다. 기존에 다양하게 축적되고 검증된 UI 패턴 중, AI가 제공할 수 있는 기능에 맞는 UI를 사용한 것이라고 볼 수 있습니다. 혹은 원래 서비스에서 제공하고 있던 UI 구조에 AI 기능을 추가하는 경우도 많이 있습니다. 예를 들어 Google Sheet의 Smart fill 기능과 UI 방식은 이전부터 있었지만, AI를 사용해 더 복잡하거나 데이터 해석이 필요한 것들까지 처리할 수 있는 기능으로 발전된 것입니다. 그리고 Notion은 빈 페이지에 '/'를 입력하면 여러 기능이 펼쳐져서 제공되는데, 그와 비슷한 방식으로 Space를 입력하면 바로 AI 기능이 시작되도록 추가했습니다.

대신, 생성형 AI를 중심으로 만든 서비스들은 전반적인 구조와 흐름에서 새로운 방식을 만들어가고 있습니다. 기존의 서비스들이 빈 콘텐츠로 시작해 다양한 도구를 제공하여 유저가 자유롭게 결과물을 만들어가는 방식으로 제공되었다면, 생성형 AI를 기반으로 한 서비스는 사용자의 의도를 명확히 하는 과정들을 단계별로 제공하고, AI가 결과물을 생성해 나가는 과정을 실시간으로 보여주며 생성 후 편집(수동, AI 편집)을 지원하는 UI 구조를 취하고 있습니다.

그리고 당연히 이런 패턴 정리는 '지도(map)의 역할'처럼 구분하여 익히기 위해서지 모든 UI가 이들 중 하나에 포함되는 것은 아닙니다. 변형도 있고, 복합적 사용도 있습니다. 어쩌면 대단한 UI는 명화들이 그렇듯 이런 패턴 안에서 나오지 않고 패턴의 변형에서 나올 수도 있습니다. 그리고 그런 것들은 UI만으로 구상되고 해결되는 것이 아닌, 'AI가 할 수 있는 일들'을 충분히 아는 것에서부터 나올 수도 있습니다. 저는 Arc Browser를 주로 사용하는데, 최근 가장 마음에 들었던 AI 기능과 UI는 여기에 있었습니다. Arc Browser의 페이지 내 검색(CMD+F, Ctrl+F) 기능인데요. 기존의 '텍스트 검색' 기능도 수행하면서도, 찾고자 하는 내용을 문장 형태로 질문하면 페이지 내에서 찾아주고, 페이지 내용 요약이나 해당 요약에 대한 페이지 내 내용의 강조나 이동 기능도 제공되어 새로운 AI 기능이나 UI가 아닌, 기존의 기능에 잘 녹아낸 것이 참 마음에 들었습니다 :)

Arc Browser

마치며

글 초반에 언급했던 내용으로 돌아가서, 지금의 AI 기반의 도구는 '명령'이 아닌 '의도'를 전달하고, 그 의도 기반의 '만들어진 결과물'을 전달받는 과정으로 동작합니다. 이런 주고받음의 방식은 완전히 새로운 UI 패턴은 아니지만, 현재의 AI 기능이 동작하는 방식에 잘 맞는 방식으로 적용되고 진화하고 있죠. 물론 지금은 초기의 단계이기 때문에 앞으로 훨씬 더 다양한 시도를 거쳐 최적화된 모습들로 수렴되지 않을까 합니다.

그래도 현재 실제의 서비스에 반영되고 있는 큰 구조의 UI 패턴들과 그 안에서 AI가 어떤 식으로 동작하는지를 잘 파악하고 있다면 우리가 AI와 관련된 UX 디자인을 할 때, 서비스와 AI가 제공할 수 있는 기능에 맞게 적절한 UI를 만들고, 지금보다 조금씩 더 개선된 UI를 만들어낼 수 있지 않을까 합니다.

다만, 이번에 정리한 것은 큰 구조의 UI 패턴이고 그 안에 제공되는 세부적인 요소들에 대해서도 잘 알고 있어야 올바른 UX 디자인을 할 수 있을 것입니다. 그런 것들은 UI의 디테일이거나, AI 기능이기 때문에 필요한 디테일 요소들일 수 있죠. 예를 들어 AI의 결과물을 신뢰할 수 있게 돕는 디테일이라든지, 혹은 어느 정도 신뢰를 할지에 대한 판단을 할 수 있게 돕는 디테일이라든지, 사용자가 능동적으로 제어할 수 있게 하는 방법이라든지 말이죠. (언제 쓸지 모를) 다음 글에서는 그런 것들을 정리해 보도록 하겠습니다.

*이 글은 pxdstory에도 게시될 예정입니다.

AI를 위한 UI 패턴

댓글