AI 사용자 환경 설계

사용자의 관점에서 AI 시스템은 본질적으로 불확실합니다. 일관되지 않은 결과를 생성하고 정기적으로 실수를 할 수 있습니다. 사용자 인터페이스는 AI 제한으로 인한 불만을 흡수하고 필터링하고 줄일 수 있는 많은 기회를 제공합니다. 개발자는 AI 시스템이 실패할 가능성이 있는 방식과 위치에 대한 더 깊은 통찰력을 가지고 있으므로 AI 사용자 환경을 형성하는 데 중심적인 역할을 합니다.

중요한 설계 고려사항 중 하나는 사용자가 AI를 얼마나 제어할 수 있는지입니다. 일부 기회는 사용자에게 표시되지 않지만 다른 기회는 명시적인 상호작용이 있습니다. 노출이 많을수록 유연성이 높아지지만 관리해야 하는 위험과 복잡성도 늘어납니다.

이 모듈에서는 백그라운드, 제한적, 개방형의 세 가지 노출 유형에 대한 사용자 환경 (UX) 패턴을 설계하기 위한 권장사항을 알아봅니다. 각 유형에 대해 기술 및 아키텍처 선택이 AI 시스템의 사용자 환경에 미치는 영향을 강조합니다.

백그라운드 AI

AI를 사용하면 새로운 기능을 도입하지 않고 기존 환경을 미묘하게 보강할 수 있습니다. 이렇게 하면 중단 및 장애 가능성이 최소화됩니다. 이 경우 유용성, 안정성, 점진적 성능 저하에 대한 책임은 전적으로 제품에 있습니다. 사용자는 AI의 작동 방식을 배우거나 AI가 사용된다는 사실을 알지 않아도 AI의 이점을 누릴 수 있습니다.

백그라운드 AI는 다음과 같은 경우에 가장 적합합니다.

  • 작업의 위험이 낮습니다.
  • 사용자 제어 기능이 결과를 유의미하게 개선하지 않습니다.
  • AI 기능이 실패하거나 사용할 수 없는 경우에도 제품은 핵심 가치를 제공할 수 있습니다.

스팸 필터부터 엔터테인먼트 추천, 심지어 BILIBILI의 불릿 스트림 댓글과 같은 복잡한 예까지 웹 전반에 걸쳐 백그라운드 AI의 예가 많이 있습니다. 이러한 기능 중 일부는 'AI'로 생각하지 않을 수도 있습니다.

예: AI 기반 리뷰 요약 및 하이라이트

Example Shoppe를 기억하시나요? 지금까지 고객 지원 기능, 향상된 제품 검색 등 다양한 AI 기능을 위한 두 가지 시스템 청사진을 공유했습니다. 이제 세 번째 기능인 리뷰 요약이 도입됩니다. AI 시스템 청사진을 살펴보세요.

제품 페이지에는 수백 개의 리뷰가 포함되는 경우가 많습니다. 사용자는 실제로 중요한 특성을 평가하기 어려울 수 있습니다.

AI를 사용하여 검색 내에서 반복되는 테마를 제공하여 맞춤 리뷰 하이라이트와 요약을 제공할 수 있습니다. 예시 인터페이스에서 사용자는 헤드폰을 찾고 있으므로 음질과 배터리 수명이라는 테마가 강조 표시됩니다. 이렇게 하면 인지 부하가 줄어들어 더 빠른 구매 결정으로 이어질 수 있습니다.

Shoppe의 리뷰 등록정보 예
그림 1. 사용자가 Example Shoppe에서 무선 헤드폰을 검색했습니다. 제품 페이지에는 최근 검색어, AI가 감지한 관심분야, 고객 리뷰도 강조 표시됩니다. 리뷰 요약은 이러한 관심분야와 관련이 있을 수 있는 기타 관심분야를 기반으로 맞춤설정됩니다. 이 요약은 인증된 고객 리뷰 위에 표시되며 개별 리뷰와 혼동되지 않도록 눈에 띄게 표시됩니다.

요약은 사용자마다 다르므로 플랫폼을 선택할 때 개인 정보 보호와 속도를 우선시해야 합니다. 내장 AI와 Summarizer API를 선택하면 사용자 기기에서 직접 계산이 이루어집니다.

권장사항

AI 기능이 기존 사용자 환경에 원활하게 통합되도록 다음 가이드라인을 준수하세요.

  • 간단한 투명성 제공: AI가 사용자 제작 콘텐츠를 변환하거나 집계할 때 미묘한 신호는 사용자의 기대치를 설정합니다. '요약' 또는 '주요 통계'와 같은 중립적인 라벨을 사용하고, 툴팁이나 기타 UI 요소를 통해 점진적 공개를 추가할 수 있습니다.
  • 선택 해제 허용: AI에 대한 태도는 사람마다 다릅니다. 일부 사용자는 AI를 침입적이거나, 압도적이거나, 짜증난다고 생각할 수 있습니다. 이러한 기능을 사용 중지할 수 있는 명확한 경로를 제공해야 합니다.
  • 표현에 유의: 언어는 AI 생성 텍스트를 비롯한 모든 사용자 경험에서 중요한 부분입니다. 예를 들어 요약에는 주장이 아닌 추세가 반영되어야 합니다. 시스템 프롬프트에 규칙을 추가하여 요약에서 과도하게 자신감 있는 언어를 줄이거나 삭제합니다.
  • 단계적 대체 설계: 가능하면 AI 없이 값을 제공합니다. 모델을 사용할 수 없는 등 기술적인 이유로 요약을 사용할 수 없는 경우 시스템은 요약되지 않은 리뷰를 제공해야 합니다. 모델이 다운로드되면 애플리케이션에서 새 요약을 자동으로 표시할 수 있습니다.
  • 설정 중 중단 최소화: 클라이언트 측 모델의 초기 다운로드로 인해 불편이 발생할 수 있습니다. 기능의 가치를 먼저 보여주세요. 제한된 서버 측 대체를 추가하거나 다운로드를 사용자 여정의 끝으로 이동하여 중단을 최소화할 수 있습니다. 적절한 타이밍과 컨텍스트 구축은 제품을 사용자의 우선순위에 맞추는 데 도움이 됩니다.

제약이 있는 AI

백그라운드 AI는 자동으로 실행되지만 제한된 AI 기능은 사용자가 명시적으로 트리거하며, 링크나 버튼을 사용하는 경우가 많습니다. 시스템 프롬프트 내에서 작업, 의도, 제약 조건, 출력 형식을 결정합니다. 개방형 프롬프트 커서와 달리 사용자는 작업을 시작하고 출력을 받는 것 외에는 선택사항이 거의 없습니다. 시스템은 AI가 할 수 있는 작업을 엄격하게 제한하여 예측 가능성을 유지합니다.

백그라운드 AI와 마찬가지로 제한된 AI 기능은 특정 작업에 맞게 맞춤설정된 클라이언트 측 모델과 잘 어울립니다.

예: 제목 생성

특히 헤드라인 생성은 어려운 작업일 수 있습니다. BlogBuddy는 AI를 사용하여 작성자가 최소한의 노력으로 사려 깊고 맥락에 맞는 헤드라인을 제공할 수 있도록 지원합니다. 이 기능의 AI 시스템 청사진을 검토합니다.

사용자는 제목 표시를 클릭하여 평가 및 개선을 위한 여러 초안을 생성할 수 있습니다.

개인 에세이가 포함된 BlogBuddy의 편집기
그림 2. BlogBuddy에는 AI 기반 작업이 여러 개 있는 콘텐츠 편집기가 있습니다.
BlogBuddy에는 선택할 수 있는 3가지 예시 제목이 있습니다.
그림 3. 선택하면 블로그 콘텐츠를 기반으로 관련 제목이 표시됩니다.

프롬프트 엔지니어링에서 프롬프트 API를 사용하여 이를 구현하는 방법을 살펴봤습니다. 작업, 스타일 제약 조건, 출력 구조를 인코딩하는 시스템 프롬프트를 빌드합니다. 블로그 게시물 콘텐츠만 UI에서 동적으로 전달됩니다. 클라이언트 측 구현을 사용하면 설정 비용 없이 반복할 수 있도록 기능이 최적화됩니다.

권장사항

목표는 사용자가 새로운 기능을 사용하도록 유도하는 것입니다. 이렇게 하려면 가치를 입증하고 결과에 대한 통제권을 부여해야 합니다.

  • 명확성과 자신감 전달: 명확한 작업 라벨은 항상 'AI에 질문하기'와 같은 일반적인 언어보다 선호됩니다. 사용자는 어떻게 발생하는지뿐만 아니라 무슨 일이 일어나는지 직관적으로 알 수 있어야 합니다. 기능 지연 시간이 짧은 경우 결과가 이미 제공되었음을 나타내는 라벨을 추가합니다. 예를 들어 제목 생성 대신 제목 표시를 사용합니다.
  • 사용자에게 알림 제공: 사용자가 계속 주의를 기울일 수 있도록 가벼운 인지적 마찰을 추가합니다. 여러 선택지를 제공하면 사용자가 마음에 들지 않는 결과에 갇혀 있다고 느끼지 않도록 할 수 있습니다. 사용자는 결과가 저장되기 전에 결과를 명시적으로 수락하거나 수정할 수 있어야 합니다.
  • 가능하면 결과를 미리 준비: 특히 클라이언트 측 작업의 경우 결과를 미리 계산하여 즉시 사용할 수 있도록 하는 것이 좋습니다.
  • 빠른 반복 지원: 재생성은 쉽고, 되돌릴 수 있으며, 저렴해야 합니다. 사용자에게는 작업을 실행취소할 수 있는 옵션이 있어야 합니다. 향후 실행을 위해 기능을 미세 조정할 수 있도록 이러한 의견 신호를 수집합니다.
  • 필요한 경우 더 세부적인 제어 제공: 어조 태그, 길이 선택기, 사전 설정 스타일과 같은 구조화된 요소를 추가하여 결과를 개선할 수 있습니다. 대부분의 경우 사용자 신뢰도와 요구사항이 진화함에 따라 시간이 지날수록 추가 제어의 필요성이 발생합니다. 이러한 개발을 추적할 수 있는 피드백 루프를 설정하세요.
BlogBuddy의 더 세밀한 제목 생성
그림 4. 드롭다운을 추가하여 BlogBuddy가 생성한 제목의 어조, 길이, 스타일을 수정할 수 있습니다.

백그라운드 AI와 제한된 AI 중에서 선택하는 방법

그림 5. 사용자가 제목 입력란을 클릭하면 BlogBuddy에서 AI 생성 제목을 표시할 수 있습니다.

일부 기능은 표시하는 방식과 시기에 따라 백그라운드 AI 또는 제한된 AI로 구현할 수 있습니다. 이러한 차이는 사용 가능한 기능이 아닌 가시성, 인지 부하, 타이밍에 의해 영향을 받습니다. 예를 들어 명시적인 버튼 클릭을 요구하는 대신 사용자가 작성하는 동안 백그라운드에서 제목을 사전 준비할 수 있습니다. 사용자가 제목 필드에 포커스를 두면 추천을 표시할 수 있습니다.

이 접근 방식은 다음과 같은 경우에 가장 적합합니다.

  • 기능에 필요한 입력이 기본적으로 제공됨
  • AI 기반 기능의 수가 적음
  • 사전 계산 비용이 낮음
  • 사용자가 작업을 방해받지 않고 추천을 통합할 수 있습니다.

반면, 제한된 AI는 여러 AI 기능이나 작업이 있는 제품에 적합합니다. 명시적 트리거는 불필요한 계산을 방지하고 사용자에게 의도와 주체성을 더 강하게 부여합니다.

Open-ended AI

개방형 AI는 사용자가 자유 형식 입력을 통해 AI 시스템의 동작을 직접 제어할 수 있도록 지원합니다. 사용자는 미리 정해진 작업을 트리거하는 대신 자연어로 맥락을 제공할 수 있습니다. 제출되면 AI 시스템이 의도를 해석하고, 누락된 컨텍스트를 추가하고, 다음에 할 일을 추측합니다.

입력은 매우 개별적이고 예측할 수 없는 경우가 많으므로 AI 시스템이 이러한 변동성을 처리할 수 있어야 합니다. 이 유형은 유연성이 가장 높지만 사용자 경험에 대한 위험도 가장 높습니다.

  • 모호하거나 불완전한 사용자 입력
  • 예측할 수 없는 출력
  • 부정확하거나 오해의 소지가 있는 대답을 할 가능성이 높음
  • 과신 위험 증가
  • 부적절한 콘텐츠를 생성하도록 하는 등 시스템을 손상시키려는 시도

예: AI 기반 고객 지원 에이전트

Example Shoppe의 경우 고객 지원은 주문 추적, 반품, 제품 관련 질문, 배송 문제, 명확한 워크플로에 맞지 않는 특이 사례 등 다양한 문제를 다룹니다. 플랫폼 모듈에서 AI 시스템 청사진을 다시 한번 확인하세요.

가장 일반적인 작업에 제한된 AI 기능을 추가하면 인터페이스가 복잡해질 수 있습니다. 대신, 개방형 AI 지원 에이전트는 유연성을 제공할 수 있습니다.

  • 일반적인 문제를 빠르게 해결하세요.
  • 대기 시간과 지원 비용을 줄입니다.
  • 복잡한 지원 흐름 없이 다양한 주제에 대해 즉각적인 지원을 제공합니다.

지원 상담사의 가치는 대규모로 변동성을 처리하는 데 있습니다. 궁극적으로 이러한 입력을 책임감 있게 처리할 수 있는 시스템을 구축해야 합니다. 사용자가 최선의 판단을 내리고 신뢰를 조정하기를 바라지만, 모델에서 제공하는 잘못된 대답에 대한 책임이 있을 수 있습니다.

사용자는 에이전트와의 채팅을 열고 '주문이 어디에 있나요?' 또는 '두 번 청구되었는데 도와주실 수 있나요?'라고 묻습니다. 상담사가 의도를 해석하고, 명확한 이해를 위한 질문을 하고, 관련 정보를 검색하고, 다음 단계나 조치를 제안합니다.

그림 6. 개방형 고객 지원 에이전트는 모든 사용자 입력을 허용합니다. 사전 정의된 프롬프트 제안을 통해 사용자를 안내할 수 있습니다. 이 이미지를 전체 크기로 보기
그림 7. 개방형 UX에서도 클릭 가능한 주문 ID와 같은 구조화된 요소는 실수를 줄일 수 있습니다. 이 이미지를 전체 크기로 보기

대부분의 개방형 AI 시스템은 서버 측 모델을 사용합니다. 이러한 구성요소는 데이터베이스, 외부 도구, 비즈니스 로직과 같은 다른 구성요소와 결합하여 복합 AI 시스템을 형성할 수 있습니다. 상담사에게 에스컬레이션할 수 있는 경로를 제공해야 합니다.

권장사항

투명성, 신뢰 보정, 제어 메커니즘에 집중하세요.

  • 사용자가 의도를 명확하게 표현하도록 안내: 모호성을 줄이기 위해 프롬프트 제안 ('주문을 반품하고 싶어') 및 제안된 후속 조치를 제공합니다.
  • 시스템 상태와 가정을 표시: 상담사는 이해한 내용 ('주문 12345에 관해 문의하시는 것 같습니다.')과 사용 중인 정보를 명확하게 전달해야 합니다.
  • 행동 전 확인: 반품, 환불, 주소 변경과 같은 민감한 작업을 실행하기 전에 상담사는 작업을 요약하고 사용자 확인을 요청해야 합니다.
  • 확인 및 수정 설계: 사용자는 처음부터 다시 시작하지 않고도 오해를 수정하거나, 요청을 다시 표현하거나, 대화를 되감을 수 있어야 합니다.
  • 제약이 있는 AI 기능과 결합: 너무 많은 양방향 대화는 사용자의 의욕을 저하시킬 수 있습니다. 구조화된 요소를 바로가기로 추가합니다. 예를 들어 추론된 주문 번호는 사용자가 텍스트로 요청을 다시 작성하도록 요구하는 대신 사용자가 검색, 선택 또는 교체할 수 있는 클릭 가능한 요소로 표시될 수 있습니다.
  • 불확실성과 제한사항 표시: 에이전트는 불확실성을 인정하고, 누락된 정보를 알리고, 신뢰도가 낮은 경우 사람에게 원활하게 에스컬레이션해야 합니다.

이 유형의 AI 환경에서는 사용자가 대답을 비판적으로 평가하고 에스컬레이션해야 하는 시점을 이해해야 합니다.

핵심 내용

이 모듈에서는 다음과 같은 다양한 유형의 AI 사용자 경험을 검토했습니다.

  • 백그라운드 AI를 사용하면 기존 사용자 여정에 추가 가치를 더하거나 즐거움을 줄 수 있습니다.
  • 제약이 있는 AI 기능은 AI로 가장 잘 수행되는 명확하게 정의된 특정 사용 사례에 사용할 수 있습니다.
  • 변동성이 높은 도메인에는 개방형 AI가 필요합니다. 시스템의 기술적 성능에 매우 확신이 있는 경우에만 개방형을 사용하세요.

다음 표에는 각 AI 유형에 권장되는 UX 패턴이 요약되어 있습니다.

UX 테마 UX 패턴 배경 제한됨 개방형
투명성 AI가 명확하게 표시됨
AI 동작에 대한 간단한 설명
시스템 상태 및 가정이 표시됨
안내 프롬프트 추천
구조화된 입력 (태그, 사전 설정)
컨트롤 명시적 AI 트리거
출력을 적용하기 전에 미리보기
여러 대안
재생성
실행취소
신뢰 보정 보수적인 표현
신뢰도 표시기
위험 및 실패 관리 의도적인 마찰 및 검토 게이트
실제 상담사에게 전달 / 에스컬레이션
AI 없이 단계적 대체
필수 패턴:
선택사항 패턴:
필요하지 않음:

추가 자료

UX 패턴에 관해 계속 알아보려면 다음 리소스를 참고하세요.

이해도 확인

영상 통화 배경 흐리게 처리는 어떤 유형의 UX 패턴인가요?

백그라운드 AI
잘하셨습니다. 정답입니다. 배경 흐림 효과는 사용자 상호작용 없이 구현되는 경우가 많습니다.
제약이 있는 AI
정답이 아닙니다. 배경 흐림 전환 버튼을 제공하여 제한된 기능으로 만들 수 있지만 그럴 필요는 없습니다.
Open-ended AI
오답입니다.

개방형 AI를 UX 패턴으로 사용해야 하는 경우는 언제인가요?

사용자 입력은 예측할 수 없는 경우가 많으며 맞춤설정됩니다.
잘하셨습니다. 정답입니다.
이 기능에서는 사용자가 선택할 수 있는 옵션이 제한되어 있습니다.
오답입니다. 제약 조건이 있는 AI가 필요할 수 있습니다.
AI를 클라이언트 측에서 실행하고 싶습니다.
오답입니다. 변동성을 처리하려면 서버 측 AI가 필요할 수 있습니다.