마지막 업데이트: 2026-03-20
pxd
마지막 업데이트: 2024-12-17T22:00:00.000Z
pxd, inc.

© 2026 pxd, inc. All Rights Reserved.

Office
04783 서울시 성동구 성수이로20길 16 JK타워 5층
Tel
02. 499. 2951
Fax
02. 499. 2960
Contact
info@pxd.co.kr
Careers
recruitmentjob@pxd.co.kr

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

series
AI를 위한 UI/UX
published date
2024.12.17

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


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

 

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

 

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

 

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

 


1. 자유형(Freeform) UI

 

0_1_AI 서비스를 위한 UI는 따로 있다.webp

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

 

  • 대화형 구조(Conversational Structure)


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


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


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

 

1_1_1_AI 서비스를 위한 UI는 따로 있다.webp
챗GPT(ChatGPT)
1_1_2_AI 서비스를 위한 UI는 따로 있다.webp
퍼플렉시티(Perplexity)

 

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


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


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

 

1_2_1_AI 서비스를 위한 UI는 따로 있다.webp
마이크로소프트 파워포인트(MS Powerpoint)
1_2_2_AI 서비스를 위한 UI는 따로 있다.webp
노션(Notion)


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

 

0_4_AI 서비스를 위한 UI는 따로 있다.webp

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

 

  • 단순 작업(Simple Task)


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


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

 

2_1_1_AI 서비스를 위한 UI는 따로 있다.webp
클릭업(ClickUp)의 서브태스크 제안 버튼
2_1_2_AI 서비스를 위한 UI는 따로 있다.webp
오터(Otter)의 회의록 자동 요약 탭

 

  • 복합 작업(Complex Task)


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


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


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

 

2_2_1_AI 서비스를 위한 UI는 따로 있다.webp
감마(Gamma.app) 
2_2_2_AI 서비스를 위한 UI는 따로 있다.webp
어도비 파이어플라이(Adobe Firefly)

 


3. 지원형(Assistive) UI

 

0_2_AI 서비스를 위한 UI는 따로 있다.webp

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

 

  • 초기 지원(Initiation Assist)


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


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

 

3_1_1_AI 서비스를 위한 UI는 따로 있다.webp
노션(Notion) 새 페이지 생성 시
3_1_2_AI 서비스를 위한 UI는 따로 있다.webp
노션 Space 키 입력 시

 

  • 상황별 지원(Contextual Assist)


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


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


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


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

 

3_2_1_AI 서비스를 위한 UI는 따로 있다.webp
구글 독스(Google Docs)
3_2_2_AI 서비스를 위한 UI는 따로 있다.gif
구글 시트(Google Sheet)

 

 

4. 비가시적(Invisible) UI

 

0_3_AI 서비스를 위한 UI는 따로 있다.webp사용자에게 직접적으로 AI 기능을 노출하지 않고 기능적으로 활용하는 서비스에 주로 쓰입니다. 넷플릭스(Netflix)를 비롯한 OTT 서비스의 콘텐츠 추천으로 인해, 대중에게 이미 익숙한 UI라 할 수 있죠. 기존 콘텐츠 추천 시스템의 UI과 크게 다르지 않으나, 대부분 툴팁과 같은 도움말로 ‘AI 추천 결과’라는 점을 안내한다는 차이점이 있습니다. 

 

4_1_AI 서비스를 위한 UI는 따로 있다.webp
AI 개인 추천 서비스 에이아이템즈(AiTEMS)가 적용된 네이버쇼핑
4_2_AI 서비스를 위한 UI는 따로 있다.webp
넷플릭스(Netflix)

 

 

AI가 불러올 UI의 네 번째 패러다임? 
 

최근 AI 서비스에서 나타나는 UI 패턴은 새롭지만 동시에 낯설지 않은 것입니다. 닐슨 노먼 그룹의 공동설립자 제이콥 닐슨(Jakob Nielsen)은 생성형 AI의 등장이 UI의 패러다임 전환을 불러왔다고 분석했는데요. 앞선 UI가 사용자가 명령한 바를 수행하는 데에 그쳤다면, 이젠 사용자가 의도를 설명하고 결과를 기대하는 ‘의도 기반 결과 구체화(Intent-Based Outcome Specification)’ 방식이 새롭게 떠올랐다는 것이죠. 

 

그에 따르면, ‘의도 기반 결과 구체화’는 1945년 컴퓨터가 등장하면서 생겨난 ‘일괄 처리(Batch Processing)’, 1964년 여러 사용자가 메인 프레임을 공유하는 시분할 시스템이 야기한 ‘명령 기반 상호작용(Command-based Interaction)’을 잇는 세 번째 UI 패러다임이라 볼 수 있습니다.

 

다만, 제이콥 닐슨은 이러한 UI 패러다임이 사용자가 원하는 결과를 도출하기 위해서는 결국 AI에 맞춘 프롬프트를 작성해야 한다는 점에서 한계가 있다고 지적했습니다. 사용자가 컴퓨터를 통제하는 게 아니라, 컴퓨터가 사용자를 통제하는 것으로 주체가 바뀐다는 주장이죠. 따라서 미래의 UI는 사용자가 화면을 탭하거나 클릭하는 등 직관적으로 명령하고 이에 따라 상호작용하는 기존 GUI 요소를 유지하면서, 의도에 기반해 결과물을 생성하고 전달하는 ‘하이브리드 UI’로 발전할 것이라고 예측했습니다. 

 

0__AI 서비스를 위한 UI는 따로 있다.webp

요컨대 현재 AI 서비스의 UI는 앞선 UI 패턴을 토대로 하되 AI라는 새로운 기능에 맞게 발전하고 있습니다. 기술이 발전하고 관련 산업이 고도화하면서 더 다양한, AI 서비스에 최적화된 UI들이 나타나겠죠. 이에 발맞춰, UX 디자이너 역시 실제 서비스에 적용된 UI 패턴을 파악하고 AI 기능의 작동 방식을 이해한다면, 더 나은 UI를 만들어낼 수 있을 것입니다. 

 


 

[참고 자료]

  • AI: First New UI Paradigm in 60 Years
  • Designing better UX for AI — 8 best practices to follow
글
김선기(UX 디자이너)
그래픽
김은정(그래픽 디자이너)
편집
임현경(UX 라이터)
전체 글 보기