Interviews·

만들면 안되는 AI UX 3가지

만들면 안되는 AI UX 3가지

안녕하세요! 디스콰이엇 정민교입니다.

최근 3주동안 20개 이상의 AI 제품에 온보딩했고, 이 제품들로 결과물을 만들면서 불편했던 UX가 많이 있었습니다. 그런데 마침 저의 컨텐츠를 읽은 분들께서 이런 피드백을 주셨어요.

"실제 AI 제품을 만들 때 참고할 수 있는 UX를 알려주세요"

"저는 개발자라 UX에 대한 지식이 부족합니다. 어떤 레퍼런스를 참고해야할지 모르겠어요"

사실 'AI SaaS가 따라야하는 필수 UX'는 많은 AI 팀들이 시행착오를 겪어가며 찾아가는 중인 것 같습니다. 하지만 제품을 사용하다보니 사용성이 좋지 않은 UX는 확실히 느껴졌어요.

그래서 오늘은 AI 제품을 사용하면서 가장 불편했던 3가지 유형의 UX와 개선방안을 적어봤어요.

  • AI 제품의 비용구조는 복잡할 수 있기 때문에 명확한 비용정보가 제공되어야 해요.
  • AI가 작업을 처리할 때, 그 과정과 방법에 대한 상세한 정보가 사용자에게 전달되어야 해요.
  • 유저가 정보를 탐색하게 하지 말고, 선별된 정보를 검토할 수 있게 경험을 설계해보세요.

1. 보험약관 유형 : 비용 구조를 친절하게 공개하지 않음

문제상황

meme1.png첫 번째 유형은 비용에 대한 정보를 친절하게 제공하지 않는 경우입니다. 지난 주에 제품에 대한 설명, 사용할 기술, 아키텍처 구조 등을 작성하면 PO agent, DevOps agnet 등이 풀스택 웹앱을 만들어주는 Pythagora.ai를 사용해봤는데요.

놀라울 정도로 제 아이디어에 대해 구체적으로 질문하고, 세부 개발 스펙까지 제안해주는 것이 인상깊었어요. 하지만 본격적으로 제품 개발을 시작하려고 할 때, 무료 토큰이 소진되어 Pro 플랜을 구독해야한다는 아래와 같은 모달이 떴어요.

Screenshot 2024-06-13 at 9.24.32 AM.png// 무료 체험판이 끝났다

이때 CTA 버튼을 누르면 Pro 플랜을 구독할 수 있는 결제 모듈 링크가 메일로 전달되는데요. 전 별도의 구독료가 필요하지 않다는 것을 알고 있었기 때문에 의아함을 느끼고 구글링을 해봤어요.

알고보니 무료 체험판이 끝났을 때, 자신의 OpenAI API 키로 API key를 바꿔주면 그대로 서비스를 활용할 수 있다는 것을 알게 되었어요. 저와 비슷하게 혼란을 겪는 사람들이 정보를 주고받는 모습도 볼 수 있었습니다.

2.png// 비용에 대한 안내가 친절하지 않아 헷갈린다는 유저의 코멘트

'Free trial ended'가 헷갈리네요.

사실 .env 파일에서 당신의 OpenAI API 키로 수정만 하면 됩니다. 그럼 계속 제품을 사용할 수 있어요.

만약 당신이 OpenAI API 키를 제공하지 않으면, 그들의 키를 사용하게 되고, 따라서 그들이 비용을 지불하게 됩니다. 이러한 비용은 기본적으로 당신에게 전가되지만, 이것이 잘 문서화되어 표시되어 있지 않았습니다.

...

정리하면, 자신이 OpenAI API 키를 가지고 있다면 별도의 결제를 할 필요가 없습니다. 키가 없다면 결제하면 되고요.

이걸 인지하고 다시 모달을 보니 마치 보험약관처럼 작은 글씨로 아래의 메세지가 적혀있었어요.

다만, 이 모달이 아니면 어디에서도 자신의 API 키를 사용할 수 있다는 안내가 없어 아쉬웠습니다.

If you have your own OpenAI API key,
please read How to use your own OpenAI key with Pythagora

원인정리

이러한 불편함이 생기는 이유에는 두 가지 이유가 있어요.

  • 중요정보에 대한 접근성 낮음 : 비용은 제품 사용여부를 결정할 때 중요한 요소에요. 하지만 가격에 대한 정보를 알 수 있는 방법이 제한되어있어요. 또한 Pythagora를 구독하는 것과 자체 API 키를 사용하는 것의 차이에는 어떤 것이 있는지 안내되지 않아 유저에게 혼란을 줄 수 있습니다.
  • 가독성이 떨어지는 표기 : 사용자가 구독료를 지불하도록 유도하는 다크패턴의 일환으로, 중요한 정보를 작은 글씨로 배치한 경우에요.

개선방법

고정된 구독료를 지불하는 것이 아닌, 비용의 변동성이 생길 수 있는 구조라면 유저가 자신의 상태를 명확하게 인지할 수 있도록 정보를 제공하는 것이 중요해요.

아래는 프롬프트로 리액트 컴포넌트를 생성해주는 v0의 사용자 대시보드인데요. 프롬프트를 실행할 때마다 크레딧이 소진되고, 부족한 크레딧을 충전할 수 있는 비용구조를 가지고 있어요. 그래서 아래와 같은 대시보드를 제공해요.

image.png이러한 형태의 대시보드는 유저가 얼만큼의 비용이 지불되는지 일일이 계산하거나 파악하지 않아도 되는 장점이 있어요. 특히 AI 제품의 경우 비용구조가 복잡할 수 있기 때문에 유저에게 명확한 비용산정 방식 또는 비용을 안내할 필요가 있습니다.

2. 나만 믿어 유형 : 프롬프트 처리 과정을 공유하지 않음

문제상황

이번에는 프롬프트를 입력했는데 그 처리 과정이 공유되지 않는 경우입니다. 먼저 문제가 되는 상황을 볼까요?

Frame 17.png// 프롬프트로 디버깅을 요청했더니 everything is ok라고 답변. 하지만 여전히 버그가 고쳐지지 않음

지난 컨텐츠에서 '프롬프트 하나로 풀스택 웹앱을 만들어주는 Marblism'을 소개한 적이 있는데요. 이때 불편했던 UX가 바로 프롬프트로 디버깅을 하는 경험이었습니다.

먼저 Marblism을 잘 모르는 분들을 위해 짧게 설명하면, Marblism은 프롬프트를 입력했을 때 풀스택 웹앱을 구현할 수 있고, 코드베이스도 제공해요. 그리고 여기서 나아가 프롬프트를 작성해 코드에서 발생한 버그를 고치거나, 기능을 더할 수도 있고요.

위의 이미지는 프롬프트를 작성해 디스콰이엇을 똑같이 만들어 배포했더니 특정 기능이 작동하지 않아 디버깅을 시도하는 장면입니다. 이때 문제는 버그가 생긴 원인이 무엇인지 설명해주지 않고, 어디를 어떻게 디버깅하고 있는지도 설명해주지 않는다는 점이에요.

원인정리

이런 불편함이 생기는 이유는 작업을 처리하는 과정에서 유저를 완전히 배제하고, 처리과정에 대한 구체적인 정보를 유저에게 제공하지 않았기 때문이에요. 유저가 대체되는 느낌을 받아서는 안되는 것이죠.

개선방법

해당 경험을 잘 구현한 제품이 ChatGPT인데요, 파일을 삽입하고 특정 작업처리를 요청하면 '작업 처리 중' 상태 메세지와 함께 코드 인터프리터에서 어떻게 작업이 처리되고 있는지 볼 수 있어요. 만약 결과물에 이상이 있다면 코드 인터프리터를 보고 수정할 수 있는 여지가 있는 것이죠.

그래서 AI 제품은 AI가 어떤 근거로 작업물을 생성했는지에 대해 상세하게 정보를 전달할 필요가 있습니다.

ChatGPT Code Interpreter: What It Is, How It Works | 365 Data Science// 작업 처리를 위해 생성한 python 코드를 볼 수 있다

3. TMI 유형 : 너무 많은 정보가 나열되어 있음

문제상황

Screenshot 2024-06-12 at 6.04.18 PM.png마지막으로 너무 많은 정보가 있어 유저에게 부담을 주는 경우입니다.

Lindy는 AI 기반의 자동화와 각종 AI 어시스턴스를 제공하는 플랫폼인데요. 현재 시리즈 B 투자를 유치했고, zapier처럼 AI 기반의 뛰어난 자동화 솔루션을 제공할 수 있지 않을까 싶어 초기 단계부터 응원하는 팀입니다. 

또한 지금의 소프트웨어 마켓플레이스에서는 사람이 공급자이지만, 앞으로는 AI도 소프트웨어 마켓 플레이스의 공급자가 될 수 있다고 생각하기 때문에 Lindy 같은 팀을 더 관심가지게 되는 것 같고요.

원인

다만, 일반 유저들이 Lindy를 잘 사용하려면 러닝커브가 있는데요. 그 이유는 나에게 적합한 솔루션을 탐색하는 과정에서 소비되는 에너지가 크기 때문입니다. 위의 이미지는 Lindy에 접속하면 가장 먼저 보게되는 화면인데 그냥 봐서는 내 문제를 해결해줄 수 있는 솔루션이 무엇인지 탐색하는게 어렵습니다.

해결방법

사람이 인터넷에서 원하는 정보를 얻는 방식은 **'내가 정보를 찾아가는 방식'에서 '선별된 정보를 검토하는 방식'**으로 변하고 있어요.

검색하기 → 검색한 정보를 필터링하기 → 프롬프트를 작성해 선별된 정보를 받아 검토하기

예를 들어, Zapier도 이전에는 Lindy와 같이 여러 자동화 템플릿을 나열하고 탐색하는 방식의 UX를 제공했지만, 현재는 제공되는 정보의 양을 확 줄이고 프롬프트를 입력해 자동화 솔루션을 생성하는 방식으로 경험을 바꿨어요.

아래의 두 이미지를 비교하면서 어떻게 UI가 변경되었는지 확인해보세요 :)

image.png// 이전의 Zapier 탐색 탭

image.png// 현재 변경된 UX. 자연어로 유저가 원하는 자동화를 입력하면 자동화 템플릿을 생성해준다.

정리

결국 ‘유저에게 필요한 정보를 간결하고 명확하게 전달하는 UX’로 수렴되는 것 같습니다. 이에 대해 사용성 높았던 제품은 최대한 단순하게 UI를 구성하고, 정보를 덜어냄으로써 유저가 자신의 문제를 해결하는 것에 집중할 수 있는 환경을 만들어주는 것이 특징이었어요.

특히 AI 기술의 잠재성이 크다보니 지나치게 발산적인 사고를 하게되는 경우도 많다고 생각하는데요. 그래서 이것저것 창의적인 솔루션을 생각하며 기능개발에 많은 리소스를 쓰게 되는 것 같아요. 그래서 이럴 때일수록 더 유저의 문제에 집중해서 최대한 단순하게 문제를 정의하고 솔루션을 만드는 자세가 중요하게 느껴지네요!


혹시 대신 리뷰를 맡기고 싶은 제품이 있나요?

매주 컨텐츠에 대한 피드백을 받고 있는데요, 특히 아래와 같은 피드백이 눈에 띄게 많아요.

AI 제품은 쏟아져 나오는데 일일이 사용해보기는 귀찮고, 직접 써보자니 우선순위에서 밀려 결국 사용해보지 못하고 넘어가는 경우가 많다.

대신 프로덕트를 사용해서 리뷰 남겨주는 컨텐츠가 좋은 것 같다.

그래서 여러분을 대신해서 프로덕트를 직접 사용해보고, 특징, 인상깊은 UX, 창업가의 스토리, GTM 전략 등을 큐레이션해보려 합니다.

큐레이션 해줬으면 하는 제품이 있다면 아래 링크에 남겨주세요 :)