대화의 흐름을 디자인하다: 대화형 AI 챗봇 UX/UI
Chat GPT와 Claud 비교 분석
안녕하세요. 요즘 다양한 웹사이트와 앱에서 챗봇을 적극적으로 활용하고 있을 뿐만 아니라 대화형 AI 챗봇에 대한 관심도 빠르게 높아지고 있는 상황입니다. 이러한 흐름 속에서 저는 단순히 기술로서의 챗봇이 아니라 사람과 AI가 자연스럽게 소통할 수 있도록 돕는 UX/UI 설계에 깊은 흥미를 느끼게 되었습니다.
특히 챗봇은 단순한 정보 전달 도구가 아니라 사용자의 질문을 이해하고 반응하는 하나의 인터페이스이자 사용자 경험 그 자체라고 생각합니다. 그렇기 때문에 챗봇이 어떻게 사용자와 상호작용하고 어떤 방식으로 정보를 제공해야 사용자가 편하게 느끼고 신뢰할 수 있을지 고민하는 것이 매우 중요하다고 느꼈습니다.
저는 사람의 대화를 이해하고 이어가는 흐름, 텍스트의 가독성, 말투나 맥락의 전달 방식 등 텍스트 기반 UI의 감성적 설계에 집중하며 UX/UI 관점에서 챗봇을 분석하고 더욱 사용자 친화적인 대화 경험을 설계하고자 공부를 시작하게 되었습니다.
1. 홈
(공통점)
사용자가 무엇을 해야 할지 명확하게 안내하는 플레이스홀더 텍스트(Placeholder Text)를 제공하여, 자연스럽게 질문을 입력하도록 유도하였습니다. 또한 두 서비스 모두 텍스트 필드(Text Field)에 음성 입력이나 파일 업로드와 같은 보조 기능 아이콘을 하단에 함께 배치하여 사용자가 추가 기능을 쉽게 활용할 수 있도록 제공하였습니다.
그리고 텍스트 필드를 화면 중앙에 배치하여 사용자의 시선을 자연스럽게 유도하고 접근성을 높이는 공통점을 가지고 있었습니다. 그러나 Claude는 버튼만 사용하는 ChatGPT와 달리 드롭다운과 아이콘을 혼합하여 보조 기능을 제공하고 있어, 사용자가 다소 복잡하게 느낄 수 있다고 생각합니다.
(차이점)
홈 화면에서 가장 큰 차이점은 이전 기록을 표시하는 방식이었습니다.
ChatGPT는 왼쪽 사이드 메뉴(Side Menu)에서 이전 기록을 한 줄씩 표시하며 사용자가 스크롤을 통해 전체 기록을 쉽게 확인할 수 있었습니다. 이러한 방식은 대화 창을 방해하지 않으면서도 기록을 빠르게 탐색할 수 있는 장점이 있으며 사용자의 서비스 이용 흐름에 영향을 최소화하였습니다.
반면, Claude는 텍스트 필드 하단에 최근 6개의 기록만 표시하고 전체 기록을 확인하려면 별도의 버튼을 눌러야 볼 수 있었습니다. 이는 사용자가 주로 최근 대화를 참조하며 오래된 기록은 자주 확인하지 않는다는 사용자 행동 패턴을 반영한 설계로 보입니다. ChatGPT의 스크롤형 기록 탐색 방식은 연속적인 사용성을 강조한 반면 Claude는 화면 집중도를 높이기 위해 최소한의 기록만 노출하였습니다.
따라서 ChatGPT는 지속적인 대화 흐름을 중시하는 사용자에게 적합하고 Claude는 새로운 질문 입력에 집중하고 싶은 사용자에게 적합하였습니다.
2. 인터랙션
(공통점)
두 서비스 모두 질문 후 로딩 중일 때 인터랙션을 사용하여 서치 상태를 알려주었습니다. Chat GPT는 본인의 의견을 말할 때는 검은 점이 작아졌다 커졌다 하고 다른 웹 서치가 필요할 경우에는”웹 찾아보는 중” 문구 색상을 변경하면서 알려주었습니다. Claude의 경우 로고를 활용하여 무작위로 작아졌다 커졌다를 반복하는 애니메이션을 활용하여 알려주었습니다. 본인의 로고를 활용하면 사용자의 기억에 오래 남아 브랜드의 인지도를 강화시킬 수 있습니다.
인터랙션은 사용자가 시스템의 상태를 이해할 수 있도록 도와주는 애니메이션입니다.
예시로는 “좋아요를 누르면 하트가 커졌다가 작아지는 애니메이션”, 동영상이 멈추었을 때 뜨는 로딩 스피너(loading spinner)”, 콘텐츠가 로딩되는 동안 어떤 형식으로 자리 잡을지 구조적으로 미리 보여주는 스켈레톤 로딩(Skeleton Loading) 등이 있습니다.
만약 아무 작동 하지 않고 흰 화면만 나온다면 서비스가 작동을 하는지 안 하는지 알 수 없어 고민할 수 있지만 인터랙션을 사용하면 사용자가 서비스가 어떤 것을 작동시키고 있는지 알 수 있고 기다리는 시간을 긍정적으로 보낼 수 있도록 도와줍니다. 또한 심리적으로 로딩 시간을 단축한다는 논문도 있었습니다. 인터랙션은 사람들이 디지털을 사용하면서 보는 눈이 높아지며 섬세해졌다고 생각합니다. 그렇기 때문에 ux 디자이너는 사용자의 섬세한 감정을 알아내는 것이 중요해졌습니다.
3. 텍스트
ChatGPT는 정보 전달과 사용자 경험 측면에서 훨씬 더 정돈되고 직관적인 구성을 보여줍니다.
우선 첫인사말과 본문의 사이에 충분한 여백을 두고 구분선을 삽입함으로써 정보의 흐름이 명확하게 구분되어 사용자가 글을 읽기 전 내용의 구조를 쉽게 파악할 수 있게 도와줍니다. 이러한 시각적 구분은 사용자로 하여금 심리적인 '휴식 공간'을 제공하며 집중력을 높이는 데에도 긍정적인 영향을 줍니다.
또한 제목에는 이모티콘과 함께 굵고 큰 글씨를 사용하여 콘텐츠의 주제를 즉각적으로 인식할 수 있도록 유도하고 본문에서는 중요한 문장에 굵은 글씨 처리를 하여 정보의 우선순위를 자연스럽게 드러냅니다. 이러한 방식은 시각적 위계를 통해 독자가 어떤 정보를 먼저 주목해야 하는지를 알려주며, 불필요한 인지적 부담을 줄여줍니다. 전체적으로 사용자 입장에서 글을 읽는 흐름을 고려한 ‘배려 있는’ 시각 설계가 돋보입니다.
반면에 Claude는 모든 문단이 동일한 글꼴 크기, 두께, 행간으로 구성되어 있어 정보 간의 경계가 불분명하고 시각적 포인트가 부족합니다. 이로 인해 사용자는 글의 핵심을 빠르게 파악하기 어렵고 긴 텍스트를 읽을 때 집중력이 쉽게 분산될 수 있습니다. 시각적 위계가 없다 보니 글 전체가 단조롭게 느껴지며, 정보가 머릿속에 효과적으로 정리되지 않는다는 단점도 있습니다.
디지털 환경에서 텍스트 정보는 그 자체로도 중요하지만 그것을 ‘어떻게 보여주느냐’는 관점 역시 매우 중요합니다. 시각적 설계는 단순히 보기 좋은 것을 넘어서 사용자가 정보를 빠르고 정확하게 받아들이도록 돕는 핵심적인 역할을 합니다. 특히 주의 집중 시간이 짧은 모바일 환경에서는 가독성과 정보의 우선순위를 명확히 표현하는 것이 사용자 경험의 질을 좌우합니다.
결국 같은 정보를 전달하더라도 어떻게 보이느냐, 어떻게 읽히느냐에 따라 사용자의 반응은 크게 달라질 수 있으며 이는 콘텐츠를 설계하는 데 있어 반드시 고려해야 할 중요한 요소입니다.
이렇게 실제 대화형 AI 챗봇들을 비교 분석해 보면서 겉으로는 비슷해 보이는 서비스라도 작은 디테일이 사용자 경험에 큰 차이를 만든다는 사실을 느낄 수 있었습니다. 앞으로도 변화하는 기술 환경 속에서 사람 중심의 인터페이스를 설계할 수 있도록 지속적으로 탐구해 나가겠습니다.^^
