지난달 카카오는 카카오톡(카톡) ‘친구’ 탭을 피드형으로 개편한 이후 사용자들의 강력한 반발에 시달렸다. 잘나가는 소셜미디어(SNS)의 UX·UI를 벤치마킹한 결과 ‘쉰스타그램’이라는 불명예스러운 별명까지 획득했다.

피드형은 이미 글로벌 SNS들의 성공 사례를 통해 검증된 UX·UI 형태. 따지고 보면 카톡뿐 아니라 요즘 구글이나 네이버 등 주요 포털들도 다 도입하는 추세다. 문제는 카톡이 5000만 명이 거의 매일 사용하는 메신저 앱이라는 것이다. 업계에선 다른 평가는 차치하더라도 ‘속도’의 문제를 지적한다. 매일 쓰는 앱에서 이 정도 규모 개편이 어느 날 한 번에 이뤄졌다면, 사용자 입장에선 매우 갑작스럽고 거부감도 컸을 거라는 분석이다.

한 업계 관계자는 “카카오가 개편 전 A/B 테스트를 왜 충분히 하지 않았는지 의문이다. 순차 배포 등을 통해 속도를 조절했더라면 사용자 반응이 조금은 달랐을지 모른다”고 했다. 그렇게 카톡 사태는 주요 IT 기업 UX·UI 담당자들에게 ‘급진적인 UX·UI 개편의 부작용’ 사례로 남았다.

‘사용자 인터페이스(User Interface)’의 약자인 UI는 사용자가 제품·서비스와 직접적으로 상호작용하는 화면·버튼·레이아웃 등 시각적 요소다. ‘사용자 경험(User Experience)’인 UX는 사용자가 제품이나 서비스를 사용할 때 느끼는 경험을 의미한다.

백정민 당근 중고거래실 프로덕트 디자이너는 “앱·웹 속 다양한 기능과 화면이 하나의 흐름으로 자연스럽게 이어지도록 설계하는 게 UX·UI 디자이너의 역할”이라며 “이 과정에서 사용자가 원하는 행동을 불편함 없이 해내고 긍정적인 인상을 남기는 디자인이 좋은 UX·UI”라고 설명했다.

박경민 기자

◆그 버튼이 거기 있는 이유=올해 피드형 UI로 앱 홈 화면을 개편한 네이버. 왼쪽 상단 ‘네이버페이’ 아이콘 옆에 있던 장바구니 아이콘을 없앴다.

이재빈 네이버앱 메인서비스 리더는 “장바구니도 사용성 높은 아이콘이었지만, 홈 화면 개편 과정에서 개인화된 메인 피드 화면의 집중도를 높이기 위해 빼기로 결정했다”고 말했다. 군더더기는 최대한 덜어내고, 사용자들의 최근 검색 결과 등을 바탕으로 인공지능(AI)이 선정한 맞춤형 콘텐트 피드를 위로 올렸다. 피드 첫 줄에 이미지를 나란히 두 개 둘지 아니면 하나만 둘지, 피드 썸네일 모서리 모양은 어떻게 할지까지 고민했다.

결정은 사용자에게 맡겼다. A/B테스트를 진행해 각 시안별 CTR(클릭률)이나 재방문율, 체류시간, 네이버 내 다른 서비스(뉴스 등) 사용량 등 데이터를 고루 파악한 뒤 정한 게 지금의 형태(이미지 두개, 각진 썸네일)다. 외부에선 피드형으로 개편한 네이버를 두고 ‘검색 포털 정체성을 버렸다’며 설왕설래가 오갔지만, 개편 이후 네이버의 DAU(일간 활성 이용자 수)는 최대 30% 늘었다고 한다.

배달의민족은 올해 메인홈 상단을 ‘T자형 탭 구조’로 재설계했다. 기존에는 한 화면에 배민배달·가게배달·B마트·장보기 등 각각의 기능이 경중의 차이 없이 공존하고 있는 상태였다. 개편을 결정한 건 ‘어디를 눌러야 할지 혼란스럽다’는 사용자 피드백이 쌓이면서였다. T자형으로 구조를 개편하며 현재 사용자가 음식배달 탭에 있는지, 아니면 장보기 탭에 있는지 등 위치를 명확히 구분할 수 있게끔 했다.

김나래 배민 공통주문디자인 팀장은 “각 서비스의 계위(hierarchy)를 명확히 보여주면서 사용자가 자연스럽게 ‘내가 지금 어디에 있는가’를 인식할 수 있도록 하는 게 핵심이었다”며 “개편 후 실시한 NPS 조사(사용자 조사) 결과 ‘메인 홈을 혼란 없이 사용할 수 있다’는 응답이 유의미하게 상승했다”고 밝혔다.

당근에서 중고물품을 판매하려는 사용자가 가장 어려워하는 건 ‘판매 가격’을 결정하는 일이다. 많은 사람은 판매 글을 올리기 전 당근 내에서 같은 물품을 여러 번 검색하며 평균가를 찾는다. 당근은 사용자들이 판매 글을 쓰다가 가격을 확인하려고 화면을 나가야 하는 상황이 ‘사용자의 맥락을 끊는 지점’이라고 판단했다. 그래서 최근 글쓰기 화면에 추천 가격을 보여주는 UI를 추가했다.

백정민 당근 디자이너는 “‘추천 가격’만 보여주는 안, 그리고 추천 가격과 당근 내 게시글을 함께 보여주는 안을 두고 테스트한 결과 두 번째 방안이 선택됐다”며 “이후 글쓰기 도중 사용자 이탈이 줄고, 작성 완료율이 높아지는 걸 지표로 확인할 수 있었다”고 말했다.

기업들은 앱 화면에 노출되는 버튼 개수부터 문구의 어조, 색, 노출 위치까지 수십 번 사용자들의 반응을 테스트하며 세밀하게 조정해 나간다. 이종석 배민 푸드서비스디자인 팀장은 “혜택을 얼마나 자주 노출하냐보다 사용자가 ‘지금 내게 필요한 정보’라고 느끼는 순간을 정확히 포착하는 게 중요하다”며 “실제 환경에서 테스트를 진행하며 작은 버튼 하나도 열 번 넘게 형태와 문구를 바꾼다”고 말했다.

◆모두를 위한 디자인=UX·UI 논의의 중심엔 사용자가 있다. 그렇기 때문에 모든 사용자의 상황을 고려한 접근성 문제도 빼놓을 수 없는 UX·UI 분야 화두다. 토스에는 아예 ‘유니버설 디자인’ 팀이 따로 있다. 이 팀에서는 저시력자를 위한 ‘큰 글씨 모드’, 화면 정보를 소리 내 읽어주는 ‘스크린리더’ 기능 등을 도입하고 꾸준히 사용성 테스트를 진행하고 있다. 한 업계 관계자는 “좋은 UX는 UI의 명확성에서 온다는 점으로 볼 때 시니어나 장애인 중심의 UX·UI 설계는 곧 모두를 위한 UX·UI”라고 덧붙였다.

사용자 파악에 실패한 UX·UI는 독이 되기도 한다. 무신사는 지난해 6월 PC 웹페이지를 없애기로 결정했다. 명분은 ‘일관된 사용자 경험과 안정된 서비스 이용 환경 제공’이었다. 하지만 이 결정은 사용자들의 반발로 10개월 만에 ‘롤백(기존 기능을 되살리는 것)’됐다. 옷을 구매하는 사용자들은 작은 스마트폰 화면보다 PC의 큰 화면에서 옷의 소재나 크기 등 세부 정보를 확인하길 원했던 것이다.

웹·앱 상에서 특정 행동을 유도하기 위해 교묘히 설계된 ‘다크패턴’도 남발했을시 사용자의 신뢰 하락으로 이어진다. 쿠팡은 지난해 4월 와우멤버십 인상 과정에서 기존 회원에게 팝업을 띄워 ‘즉시 동의’ 또는 ‘나중에 하기’ 중 하나를 선택하도록 했다. ‘즉시 동의’ 버튼은 크고 명확한 파란색으로 중앙 하단에, ‘나중에 하기’ 버튼은 작고 희미한 흰색으로 우상단에 배치했다. 지난 15일 공정거래위원회는 이 UX·UI를 두고 “소비자들이 의도치 않게 인상된 가격에 동의하게 만드는 기만적 행위”라며 쿠팡에 과태료를 부과했다.

같은 앱이라 해도 모든 사람이 똑같은 화면을 보는 시대는 지났다. AI는 사용자 개개인의 행동 패턴을 분석해 UX·UI를 실시간으로 조정하고 있다. 이재빈 네이버 리더는 “AI 추천이 반영된 메인 홈 피드를 통해 다양한 콘텐트가 공존하는 네이버라는 시장 안에 사용자들을 더 오래 머물게 하려 노력하고 있다”고 말했다. 사용자들의 ‘거래후기’가 주요 지표 중 하나인 당근은 거래후기 작성 단계에서 사용자들이 다른 사용자와 나눈 따뜻한 대화를 AI가 선별해 노출하고 있다.

혁신의 최전선에서 비즈니스의 미래를 봅니다. 첨단 산업의 '미래검증 보고서' 더중플에서 더 빨리 확인하세요.

QR코드를 스캔해 The JoongAng Plus에 접속하면, 혁신의 최전선을 들여다보는 ‘팩플’의 보다 많은 콘텐트를 볼 수 있습니다.

네이버는 은밀히 바꿨다…“쉰스타그램” 카톡의 실수
https://www.joongang.co.kr/article/25375826

시키지도 않은 19금 그렸다…머스크가 푹 빠진 AI, 그록
https://www.joongang.co.kr/article/25376171

디지털 치킨집만 만든다고? ‘퇴사 후 월 2500만원’ 실체
https://www.joongang.co.kr/article/25377022

“피 섞어도 보통 섞는 게 아냐” 네이버·두나무 빅딜 속사정
https://www.joongang.co.kr/article/25375205