brunch

라이킷 48 댓글 5

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 조은비 May 22. 2023

내 디자인 낯설게 보기

맨투맨 | Product Designer

맨투맨 앱은 개발자, PM 팀원과 함께 일본여행을 하면서 직접 느낀 문제점에서 시작됐어요.

일본어를 배운 적 없는 우리는 식당에서 주문할 때, 기차를 예매할 때, 일본인과 스몰토크를 할 때 번역 앱을 사용해 의사소통은 했지만 매끄러운 대화를 이어나가기 어려웠어요. 저희는 한국으로 돌아오자마자 같은 문제에 공감하고 "매끄러운 소통이 가능한 여행용 번역 앱을 만들자!"라고 외쳤죠.

문제

파파고, 구글 번역 등 이전의 번역기 앱들은 여행지에서 활용하기 불편했어요. 대부분 학술적인 긴 글을 번역하는데 용이하지만 여행지에서 캐주얼한 대화에 사용하기엔 부적절했죠.

보통 여행지에서 대화할 땐 주변이 시끄러운 경우가 많아 내가 번역할 말을 텍스트로 미리 입력해 상대방에게 결과창을 보여주는 식이었어요. 번역창을 본 상대방은 바로 외국어로 답변을 해주는데 이때 마이크를 켜주기도 전에 말을 시작해 음성 인식 오류가 자주 발생해요.

이런 문제로 인해 상대방에게 다시 말해달라고 자주 요청하게 되며 다시 나의 답변 차례가 돌아오면 내 말을 번역하는 동안 상대방은 기다려줘야 했어요.

즉, 번역하는 과정 자체가 대화의 타이밍을 계속 어긋나게 하고 있었어요.

가설

대화를 할 때 일어나는 발화-대답의 반복인 핑퐁을 번역기가 따라가지 못해서 타이밍이 어긋났어요. 내가 말을 하면 내가 앱을 사용하고, 상대방이 말을 하면 상대방이 앱을 사용해야 하기 때문에 하나의 폰을 주고받으며 대화해야 했죠.

그럼 하나의 앱 화면을 마주 보고 대화하면 어떨까?라는 생각이 들었고, 다음과 같은 가설을 세웠어요.

해결책

마주 보고 대화하는 두 사람이 하나의 앱 화면을 보고 대화하려면 각자의 위치에 맞는 번역창을 볼 수 있어야 했어요. 그래서 상대방의 말은 내 번역창에서 실시간으로 번역해 주고, 내가 번역하는 말은 상대방이 반대쪽에서 실시간으로 읽을 수 있도록 상대방 번역창을 상하 반전시켰어요. 이렇게 한 화면을 마주 볼 수 있는 구조로 디자인했어요.

이때, 중요하게 생각한 점은 앱을 조작하는 주체자는 한 명이어야 한다는 점이었어요.

하나의 폰을 두 사람이 같이 조작하려고 하면 타이밍이 꼬일 수밖에 없었거든요.

따라서 상대방 번역창을 뒤집어 줄 수 있는 버튼도 내가 조작할 수 있도록 하단에 배치했어요.

또한 상대방이 대답하는 타이밍에 맞춰 마이크를 빠르게 켜줄 수 있는 마이크 조작 방식을 고민했어요.

이때 하나의 버튼이 여러 기능을 수행하는 아이폰의 카메라 기본 앱이 떠올랐어요. 버튼을 클릭하면 촬영이 되고, 버튼을 옆으로 당기면 연속 촬영이 가능했죠.

맨투맨 앱에서도 하나의 마이크 버튼으로 내 음성인식 기능과 상대방 음성인식 기능을 같이 사용할 수 있도록 했어요. 대화를 주도하는 한 명이 앱을 조작해야 했기 때문이에요.

두 기능을 동시에 수행할 수 있는 버튼 방식을 고민하며 실제 행동을 버튼 인터렉션을 통해 경험하게 해주고 싶었어요. 마이크 버튼을 클릭하면 내가 마이크를 사용하는 것이고, 마이크 버튼을 드래그하면 마이크가 위로 길어지며 상대방에게 마이크를 건네주는 듯한 느낌을 제공했어요.

이렇게 간편한 제스처 방식 차이로 음성 인식 주체를 빠르게 전환할 수 있도록 하고, 사용자가 인지하기 쉽도록 마이크를 건네주는 행동을 메타포로 사용해 마이크로 인터렉션을 디자인했어요.

결과

그렇게 '맨투맨' 앱을 빠르게 출시한 후에 디스콰이엇, 여행 커뮤니티, 인스타그램에 앱을 홍보하며 반응을 지켜봤어요. 마주 보며 대화할 수 있는 이 앱에 관심을 갖고 한 달 만에 100명의 사용자가 유입됐어요.

앱의 필요성에 공감해 주시고 좋아해 주시는 유저들을 보며 뿌듯함과 행복감에 젖었어요. 이게 내가 줄 수 있는 직업적 가치임을 생생하게 느낄 수 있었죠.

유저의 피드백을 자세히 듣고자 세 가지 미션으로 유저 테스트를 실시했어요.

1. 질문을 입력해 번역한 문장을 상대방에게 보여주기

2. 들려주는 상대방 음성을 번역해 읽기

3. 언어를 바꿔서 번역해 보기

그런데, 테스트의 결과는 처참했어요. 90%의 사용자들이 두 개의 미션에 실패했죠.

대부분의 유저들은 앱의 기능을 제대로 사용하지 못하고 있었어요.

온보딩을 제공했음에도 상대방 번역창을 뒤집는 버튼을 마이크 음성 인식 주체 전환 버튼으로 인지하는 유저도 있었고, 상대방 음성을 어떻게 번역해야 할지 아예 모르는 유저들도 있었어요.

앱에 관심을 갖고 다운로드한 유저들이 정작 앱의 기능을 어떻게 사용해야 할지 헤매고 있다니, 예상치 못한 난관에 당황했죠.

1. 유저들은 상하 반전 버튼을 음성 인식과 관련된 기능으로 오해했어요.

50%의 유저들이 상하반전 버튼을 마이크 기능과 연관 지어서 생각하고 있었어요. 그 이유는 마이크 버튼 옆에 위치해 '근접성의 원리'로 인해 마이크와 연관되어 있다는 인지 오류가 발생하기 때문이었어요.

이후 여러 번의 UT를 통해 마주 보고 대화하는 유저의 공통적인 행동을 발견했어요. 번역창을 함께 보기 위해 핸드폰을 마주 보는 상대방 쪽으로 기울이는 것이었죠. 이 행동을 통해 상대방 번역창을 뒤집어 주는 기능을 자동화할 수 있겠다는 생각을 했어요. 유저가 상황에 따라 직접 버튼을 클릭하지 않아도 핸드폰의 기울기가 약 45도 이상이면 마주 보고 앱을 함께 보고 있다고 판단하고 상대방 번역창을 자동을 뒤집어주도록 수정했어요.

2. 온보딩만으로는 마이크를 드래그하는 기능을 인지하지 못했어요.

마이크를 드래그할 생각을 하지 못했어요. 애초에 내 음성 인식과 상대방 음성 인식을 분리해서 생각하지 못하고 있었죠.

우선 내가 하는 말과 상대방이 하는 말을 직관적으로 구분할 수 있도록 도와야 했어요. 내가 한 말과 상대방이 한 말의 색을 다르게 했고, 현재 말하고 있는 사람의 번역창에 테두리를 넣어 활성화된 창으로 보이게 했어요.

또한 마이크 버튼이 클릭과 드래그가 동시에 가능해 보이도록 디자인하기 위해 수많은 시안을 만들었어요. UT를 통해 사용자에게 다양한 버튼 시안을 보여줬을 때 하는 행동을 관찰하며 적절한 버튼 모양을 디자인할 수 있었어요. 슬라이더, 토글, 버튼의 중간 지점을 찾아가며 클릭과 드래그가 가능해 보이는 버튼을 디자인했어요.