목차7개 항목
출처와 참고
web.dev의 「Learn AI」 강좌 중 「UX patterns for web AI」 모듈을 바탕으로 재구성한 노트다. 「배경형 AI」 절의 유비쿼터스 컴퓨팅은 CrashCourse의 「Crash Course Computer Science」 강의를 바탕으로 보강했다.
노출의 세 단계
사용자에게 AI는 본질적으로 불확실하다. 결과가 들쭉날쭉하고 실수도 한다. UI는 이 한계로 생기는 좌절을 흡수하고 걸러 낼 기회이고, AI가 어디서 실패할지 가장 잘 아는 개발자가 그 설계의 중심에 있다.
핵심 설계 변수는 사용자가 AI를 얼마나 통제하나다. 노출이 클수록 유연하지만, 관리할 위험과 복잡도도 커진다.
| 유형 | 사용자 경험 | 잘 맞는 플랫폼 | 예 |
|---|---|---|---|
| 배경형(Background) | AI가 있는지 몰라도 혜택을 받는다 | 클라이언트(내장 AI) | 스팸 필터, 추천, 리뷰 요약 |
| 제한형(Constrained) | 버튼·링크로 정해진 작업을 부른다 | 과제에 맞춘 클라이언트 모델 | "제목 보기" 버튼 |
| 개방형(Open-ended) | 자연어로 자유롭게 요청한다 | 서버 모델 + 도구·DB (복합 AI) | 고객 상담 에이전트 |
처음에는 배경형이나 제한형부터 시작하고, 사용자가 다양성을 요구할 때 점차 넓힌다. 많은 팀이 개방형 챗봇부터 만들지만, 일찍 만든 챗봇은 실패하기 쉽다.
배경형 AI
새 기능을 만들지 않고 기존 경험을 조용히 보강한다. 혼란과 실패 가능성이 가장 작다. 대신 유용성·신뢰성·우아한 성능 저하의 책임은 온전히 제품이 진다.
이 방향의 원형은 마크 와이저가 1990년대에 제시한 유비쿼터스 컴퓨팅(ubiquitous computing) 이다. 컴퓨터가 가전·벽·옷 같은 모든 사물 안으로 들어가 의식하지 않고 쓰게 된다는 비전으로, 사람을 화면 앞에 붙잡아 두는 「극적인」 기계 대신 일상에 스며들어 보이지 않는 기계를 목표로 삼았다. 가장 깊은 기술은 사라져서 일상과 구별되지 않는다는 것이 핵심 주장이다. 알림으로 주의를 빼앗는 기능과 배경형 AI는 정반대 쪽에 있다.
언제 쓰나
- 위험이 낮은 작업이다.
- 사용자 제어가 결과를 의미 있게 낫게 하지 않는다.
- AI가 실패하거나 없어도 제품의 핵심 가치는 남는다.
예: 개인화된 리뷰 요약. 상품 페이지의 리뷰 수백 개 위에, 사용자가 검색한 관심사(헤드폰이면 음질·배터리)를 반영한 요약을 얹는다. 사용자마다 다르므로 프라이버시와 속도가 중요하고, 내장 Summarizer API로 기기에서 처리하기 좋다(클라이언트 사이드 웹 AI). 요약은 개별 리뷰와 헷갈리지 않게 시각적으로 구분한다.
모범 사례
- 가볍게 투명하게. "요약", "핵심 인사이트" 같은 중립 라벨과 툴팁으로 점진적 공개.
- 끌 수 있게. AI를 거슬려하는 사람도 있다. 끄는 길을 분명히 둔다.
- 표현에 신경 쓴다. 요약은 주장이 아니라 경향을 말해야 한다. 시스템 프롬프트에 과한 확신 표현을 줄이는 규칙을 넣는다.
- AI 없이도 동작하게. 모델을 못 쓰면 요약 없는 리뷰를 그대로 보여 주고, 모델을 받은 뒤 자동으로 요약을 드러낸다.
- 초기 설정의 방해를 줄인다. 클라이언트 모델 다운로드는 마찰이다. 가치를 먼저 보여 주고, 제한된 서버 대체를 두거나 다운로드를 여정 끝으로 미룬다.
제한형 AI
사용자가 버튼이나 링크로 명시적으로 부른다. 작업·의도·제약·출력 형식은 시스템 프롬프트가 정하고, 사용자는 시작하고 결과를 받는 것 말고는 선택지가 거의 없다. 범위를 좁게 묶어 예측 가능성을 지킨다.
예: 블로그 제목 생성. 편집기의 "제목 보기"를 누르면 글 내용만 넘겨 제목 후보 여러 개를 받는다. 시스템 프롬프트가 작업·문체·구조를 고정한다(시스템 프롬프트 설계 패턴). 과학·의학 저널처럼 깊은 도메인 지식이 필요하면 서버 모델을 검토한다.
모범 사례
- 분명하고 자신 있는 라벨. "AI에게 묻기" 같은 일반적인 말보다 무슨 일이 일어나는지 알 수 있는 라벨을 쓴다. 지연이 짧다면 결과가 이미 있다는 느낌의 "제목 보기"가 "제목 생성"보다 낫다.
- 사용자를 루프 안에 둔다. 후보를 여러 개 주어 마음에 안 드는 결과에 갇히지 않게 하고, 저장 전에 명시적으로 수락하거나 고치게 한다. 가벼운 인지적 마찰이 사용자를 깨어 있게 한다.
- 미리 계산해 둔다. 특히 클라이언트 작업은 결과를 미리 만들어 즉시 보여 준다.
- 빠르게 다시 하게. 재생성은 쉽고, 되돌릴 수 있고, 싸야 한다. 실행 취소를 두고, 그 신호를 모아 기능을 다듬는다.
- 필요하면 세밀한 제어. 어조 태그, 길이 선택, 스타일 프리셋. 이런 요구는 대개 사용자 신뢰가 쌓이며 나중에 생긴다.
배경형과 제한형 사이에서 고르기
같은 기능도 언제 어떻게 보여 주느냐에 따라 둘 다 될 수 있다. 제목을 버튼 없이, 사용자가 쓰는 동안 미리 만들어 두었다가 제목 칸에 포커스하면 제안할 수도 있다. 결정은 능력이 아니라 가시성, 인지 부하, 타이밍이 가른다.
| 배경형(미리 계산해 제안)이 맞을 때 | 제한형(명시적 트리거)이 맞을 때 |
|---|---|
| 필요한 입력이 기본으로 있다 | AI 기능·동작이 여러 개다 |
| AI 기능 수가 적다 | 불필요한 계산을 피해야 한다 |
| 미리 계산하는 비용이 낮다 | 사용자에게 의도와 주도권을 주고 싶다 |
| 제안이 작업을 방해하지 않는다 |
개방형 AI
사용자가 자유 입력으로 AI 행동을 직접 이끈다. 시스템은 의도를 해석하고, 빠진 맥락을 채우고, 다음 행동을 추측한다. 유연성이 가장 크지만 위험도 가장 크다.
- 모호하거나 불완전한 입력
- 예측할 수 없는 출력
- 틀리거나 오해를 부르는 응답 가능성
- 과신 위험
- 부적절한 콘텐츠를 만들게 하려는 공격
예: 고객 상담 에이전트. 주문 추적·반품·상품 질문·배송 문제와 정형 흐름에 안 맞는 경우까지, 제한형 버튼만으로는 화면이 넘친다. 에이전트는 "주문 어디쯤이야?", "두 번 결제됐어"를 받아 의도를 해석하고, 되묻고, 정보를 찾고, 다음 단계를 제안한다. 대부분 서버 모델에 DB·외부 도구·비즈니스 로직을 붙인 복합 AI이고, 모델의 틀린 답에 회사가 책임질 수 있으므로 사람 상담원으로 넘기는 경로가 필요하다.
모범 사례
- 의도를 분명히 말하게 돕는다. "주문을 반품하고 싶어요" 같은 프롬프트 제안과 후속 질문 제안.
- 시스템의 이해와 가정을 보여 준다. "주문 12345에 대한 질문으로 보인다"처럼 무엇을 이해했고 어떤 정보를 쓰는지 말한다.
- 행동 전에 묻는다. 반품·환불·주소 변경처럼 민감한 행동은 요약하고 확인받는다.
- 확인과 정정을 쉽게. 처음부터 다시 하지 않고도 오해를 고치고, 바꿔 묻고, 대화를 되감을 수 있게.
- 제한형 요소와 섞는다. 대화가 길어지면 지친다. 추론한 주문 번호를 클릭해 검색·선택·교체할 수 있는 요소로 보여 주면 다시 타이핑하지 않아도 된다.
- 불확실성과 한계를 드러낸다. 모르면 모른다고 하고, 빠진 정보를 알리고, 확신이 낮으면 사람에게 넘긴다.
개방형 AI는 기술 성능에 아주 자신 있을 때만 쓴다. 사용자가 응답을 비판적으로 보고 언제 사람을 부를지 알아야 하는 경험이기 때문이다.
패턴 표
● 필수, ◐ 선택, ○ 불필요.
| 주제 | 패턴 | 배경형 | 제한형 | 개방형 |
|---|---|---|---|---|
| 투명성 | AI임을 분명히 표시 | ◐ | ● | ● |
| AI 동작의 가벼운 설명 | ◐ | ◐ | ● | |
| 시스템 상태·가정 표시 | ○ | ◐ | ● | |
| 안내 | 프롬프트 제안 | ○ | ◐ | ● |
| 구조화 입력 (태그, 프리셋) | ○ | ◐ | ◐ | |
| 제어 | 명시적 AI 트리거 | ○ | ● | ● |
| 적용 전 미리보기 | ○ | ● | ● | |
| 여러 후보 | ○ | ◐ | ◐ | |
| 재생성 | ○ | ◐ | ● | |
| 실행 취소 | ○ | ● | ● | |
| 신뢰 보정 | 보수적인 표현 | ● | ● | ● |
| 신뢰도 표시 | ◐ | ◐ | ● | |
| 위험·실패 관리 | 의도적 마찰과 검토 관문 | ○ | ◐ | ● |
| 사람에게 넘기기 | ○ | ○ | ◐ | |
| AI 없는 우아한 대체 | ● | ● | ● |
세 유형 모두에 필수인 것은 보수적인 표현과 AI 없이도 돌아가는 대체 경로다. 신뢰 보정의 원리는 책임 있는 AI에 있다.
정리
- 배경형은 기존 여정에 가치를 더하고, 제한형은 잘 정의된 작업에, 개방형은 변동이 큰 영역에 쓴다.
- 노출을 늘릴수록 투명성·제어·검토 관문·사람 연결을 더 갖춘다.
- 라벨은 구체적으로, 결과는 여러 개·되돌릴 수 있게, 민감한 행동은 확인 후에.
- 배경형과 제한형의 선택은 능력이 아니라 가시성·인지 부하·타이밍의 문제다.
좋은 AI UX는 대개 눈에 띄지 않는다.
관련 노트: AI 기능 기획, 책임 있는 AI, 클라이언트 사이드 웹 AI, 웹 AI 플랫폼 고르기, 시스템 프롬프트 설계 패턴