BBB Korea 통역 자원봉사 앱 리디자인

Period 2022.09 – 2023.01

Role iOS UI/UX Design

Affiliation EXPC Lab

Collaborators Juhyuk Yoon, Sangyun Lee, Yeji Park

Project Type UI/UX Design

Topics Communication

1 Overview

BBB Korea의 자원봉사 통역 서비스 앱의 기존 UI/UX를 총체적 고객경험 디자인 방법론에 기반하여 재설계한 프로젝트입니다. iOS와 Android 양 플랫폼과 사용자 및 봉사자 앱 모두를 대상으로 하였습니다.
요구사항 분석, 휴리스틱 기반 진단, 디바이스별 벤치마킹, 와이어프레임 최적화, 상세 화면 설계를 거쳐 iOS와 Android 환경에 맞는 디자인 개선안과 가이드라인을 제안하였습니다. 최종 디자인 결과물은 실제 서비스에 반영되었습니다.

역할: UNIST EXPC 연구실 소속 팀원으로 참여하여 봉사자 앱의 iOS 버전 UI/UX 디자인을 담당했습니다.

2 Context

BBB Korea는 20개 이상의 외국어에 대해 한국어 전화통역 서비스를 제공하는 단체로, 연간 최소 6~7만 건에 달하는 통역 요청을 자원봉사자가 중심이 되어 처리합니다. 서비스의 핵심 주체는 통역을 요청하는 일반 사용자, 통역을 수행하는 자원봉사자, 그리고 이를 관리하는 BBB Korea 운영자로 이루어집니다.

BBB Korea는 통역 과정에서 생성되는 음성 데이터를 바탕으로 Speech-to-Text(STT) 기술을 통해 통역 내용 분석 등 디지털 전환 가능성을 함께 모색하고 있었습니다. 이러한 기술이 실제 서비스에 효과적으로 연결되기 위해서는 사용자와 봉사자가 매일 사용하는 모바일 앱의 경험이 우선적으로 개선되어야 한다는 필요가 제기되었습니다. 기존의 앱은 여러 기능이 분산되어 있어 접근성과 일관성 및 사용성 측면에서 여러 문제가 확인된 상태였습니다.

이 프로젝트에서는 총체적 고객경험(CX)을 개별 화면의 사용성 개선에 한정하지 않고, 서비스 제공자와 최종 사용자가 여러 접점에서 경험하는 전체 과정으로 바라보았습니다. 따라서 UI 스타일 수정을 넘어 앱 구조와 인터랙션 전반을 다시 설계하는 데 초점을 두었습니다.

3 Approach

3-1 요구사항 분석 및 휴리스틱 기반 개선사항 도출

첫 단계로, 현재 BBB Korea의 통역 자원봉사 모바일 앱들을 분석하여 as-is를 명확하게 파악하고 요구사항을 도출하였습니다. 사용자 앱과 봉사자 앱 각각의 모든 화면의 스크린샷을 모아 정보 구조의 뎁스와 플로우를 파악했습니다. 이 과정에서 비효율적인 동선, 중복된 페이지, 사용자에게 혼란을 줄 수 있는 구조적인 오류들을 체계적으로 정리했습니다.

분석 기준으로는 미학-사용성 효과, Hick’s Law, Jakob’s Law, Miller’s Law, Pareto Principle, Peak-End Rule과 닐슨의 휴리스틱 10원칙을 활용하였습니다. 이를 통해 정보량 조절, 익숙한 패턴 유지, 상태 피드백, 실수 예방, 효율성, 도움말 제공 같은 요소가 실제 통역 상황에서 어떻게 경험되는지 조사했습니다.

분석 결과 공통적으로 드러난 문제는 크게 3가지였습니다.

과도한 뎁스로 인해 서비스의 핵심 기능에 접근하기까지 불필요한 단계가 많았습니다. 특히 봉사자 앱의 경우 봉사 시간 설정에만 최대 3~4번의 페이지 이동이 필요했고, 사용자 앱에서도 언어 설정이 여러 곳에 분산되어 있어 통역 요청 전에 혼란이 발생할 수 있는 구조였습니다.
아이콘과 용어의 일관성이 부족하고 기능을 직관적으로 파악하기 어려운 명칭이 사용되고 있었습니다.
피드백 요소가 부족하여 사용자가 자신의 행동 결과를 확인하기 어려웠습니다.

페이지 단위로는 로그인 보조 기능, 비밀번호 표시, 플레이스홀더, 동일 기능 명칭 통일, 필수 입력 표시, 드롭다운 방식 전환, 통계 용어 수정, 연락처 검색 등 보다 구체적인 개선 과제를 도출하였습니다.

이러한 분석 내용은 비기능적 요구사항 중심으로 정리하여 이후 단계의 디자인 기준으로 삼았습니다.

기존 사용자 앱(상)과 봉사자 앱(하)의 와이어프레임 흐름 비교. 뎁스 과잉과 중복 구조를 확인할 수 있습니다.

3-2 벤치마킹을 통한 앱 구조 재정의

요구사항 분석에서 도출된 이슈들을 해결할 방향을 잡기 위해, 다른 유사한 맥락의 서비스들을 대상으로 UI/UX 벤치마킹을 진행하였습니다. BBB Korea 통역 서비스의 특성을 고려하여 빠른 접근이 핵심인 금융 앱(토스, 카카오뱅크), 다수의 기능을 가진 전 연령 대상 앱(네이버, 카카오), 해시태그 기반 커뮤니티 앱(Reddit) 위주로 분석하였습니다. 이 단계에서는 GUI 요소의 크기와 위치, 인터랙션 방식, 메뉴 구조, 정보 표현 방식 등을 비교하면서, BBB Korea 서비스에 적용할 수 있는 구조적 패턴을 정리하였습니다.

기존 서비스들의 벤치마킹 과정 (금융 및 전 연령 대상 앱). 기능별로 빠르게 접근하기 위한 메뉴 구성 등을 벤치마킹하였습니다.

기존 서비스들의 벤치마킹 과정 (Google 및 Reddit). 컨텐츠 및 여백의 배치와 조합 방식, 태그 기반의 컨텐츠 제공 방식 등을 벤치마킹하였습니다.

벤치마킹에서 얻은 핵심 시사점은 두 가지였습니다.

Dock Bar 도입. 기존 앱의 햄버거 메뉴 방식은 모든 기능을 한 눈에 보여준다는 장점이 있지만, 오히려 사용자가 핵심 기능을 찾는 데 어려움을 준다는 것이 여러 사례에서 확인되었습니다. 토스를 비롯한 주요 앱들이 핵심 기능에 즉시 접근할 수 있도록 하단에 Dock Bar를 두고, 중앙에 주요 기능 버튼을 강조하는 방식을 취하고 있었습니다. 이 구조는 빠른 통역 요청이 핵심인 BBBK 서비스에 특히 적절하다고 판단하였습니다.
FAB(Floating Action Bar)와 기능별 영역 분할. 봉사자 앱에서의 봉사 가능 시간 변경과 같이 긴급하게 상태를 변경해야 하는 기능이 있을 때, 분산된 메뉴 대신 한 곳에서 기능을 모아볼 수 있는 구조가 필요하다고 판단하였습니다.

또한 iOS와 Android 각 플랫폼의 디자인 가이드라인 차이(탭 표시줄, 뒤로가기 방식, 타이포그래피 정렬 등)도 체계적으로 분석하여, 이후 OS별 디자인 작업의 기준으로 삼았습니다.

3-3 디자인 가이드라인 수립

평가와 설계의 이론적 기준으로는 제이콥 닐슨의 UI 휴리스틱 평가 10원칙과 여러 인지심리학 기반 UX 법칙들을 적용하였습니다. 특히 Hick’s Law(선택지 수와 결정 시간의 관계), Miller’s Law(화면당 적정 정보 수), Peak-End Rule(핵심 접점에서의 인상 설계), Pareto Principle(가장 자주 쓰이는 기능에 자원 집중) 등을 구체적인 설계 판단 근거로 삼았습니다. 이 기준들을 벤치마킹 결과와 결합하여 Figma 기반의 디자인 가이드라인으로 정리하였으며, Zeplin을 통해 개발자와 공유 가능한 형태로 구조화하였습니다.

3-4 와이어프레임 재설계 및 기능 재배치

분석과 벤치마킹을 바탕으로, 사용자 앱과 봉사자 앱 모두의 와이어프레임을 전면 재설계했습니다. 핵심 원칙은 두 가지였습니다.

홈 화면을 중심으로 자주 쓰이는 모든 기능에 최소 터치로 접근 가능하도록 할 것.
분산되어 있던 유사 기능들을 논리적으로 통합하여 페이지 수와 이동 횟수를 줄일 것.

사용자 앱

사용자 앱에서는 사용자와 직접적인 관련이 낮은 일부 기능을 삭제하고, 흩어져 있던 기능을 통합된 탭 아래 재배치하였습니다. 또한, “출발 언어 / 도착 언어” 방식의 명확한 UX 라이팅을 적용하여 혼란을 줄였습니다. 개선 결과, 모국어 설정 및 도움말 접근에 필요한 터치 수는 최대 3회에서 1회로 줄었습니다.

봉사자 앱

봉사 시간, 활동 부재중 설정 등 봉사 상태와 관련된 기능들이 3곳에 걸쳐 분산되어 있던 것을 홈 화면으로 통합하였습니다. 또한 상태 변경과 시간 조정이 더 빠르게 이뤄지도록 재설계했으며, 핵심 기능 기준으로 기존 대비 평균 1~2회의 터치가 감소했습니다.

사용자 앱(좌) - 언어 선택 및 통역 요청 흐름이 홈 화면 중심으로 재구성되었습니다. 봉사자 앱(우) - 여러 곳에 분산된 봉사 설정 메뉴가 홈 화면 탭 구조로 통합되었습니다.

4 Outcome

두 앱이 하나의 경험처럼 보일 수 있도록 디자인 시안을 제안하였습니다.

재설계된 와이어프레임을 바탕으로 Figma에서 고화질 시각 디자인 시안을 제작하였습니다. 디자인 방향은 네 가지 기준을 중심으로 설정되었습니다.

iOS와 Android OS 각각의 디자인 관습을 지키되, 두 앱이 같은 브랜드라는 느낌을 유지하는 OS 간 Modality
사용자 앱과 봉사자 앱 사이의 시각적 일관성
Neumorphism 등 현행 디자인 트렌드
STT 기반 태그 기능 등 새로운 서비스 요소가 자연스럽게 녹아드는 총체적 UI/UX

스크롤, 드롭다운과 같은 특수 인터랙션을 포함한 상세 페이지까지 Figma로 완성하였으며, Zeplin을 통해 디자인 스펙(폰트 크기, 여백, 색상 코드 등)을 개발팀과 공유할 수 있는 형태로 정리하였습니다. iOS와 Android 양 플랫폼, 사용자와 봉사자 앱 모두를 포함한 최종 결과물이 실제 서비스에 반영되었습니다.

사용자 앱

사용자 앱에서는 스플래시 화면을 개선하여 다양한 성별·인종의 이미지를 사용, BBB Korea의 “언어와 문화의 장벽이 없는 자유로운 소통의 세상”이라는 슬로건과 브랜드 정체성을 첫 화면에서부터 전달하도록 하였습니다.

또한 통역 요청 상황에서 필요한 설정을 더 빠르고 직관적으로 조정할 수 있도록 화면을 개선하였습니다. 통역 요청 화면 안에서 출발 언어와 도착 언어를 직접 설정할 수 있도록 하고, 위치 선택 기능은 지도 기반 UI와 검색 기능을 포함하는 구조로 확장하였습니다. 또한 지원 언어가 늘어날 상황을 고려해, 스크롤 목록뿐 아니라 검색 기반 언어 설정도 가능하도록 설계하였습니다.

또한 상황 전달을 돕기 위해 태그 기반 구조를 새롭게 도입하였습니다. 맥락 태그와 세부 태그를 분리하여 사용자가 현재 상황을 최소한의 선택으로 빠르게 설명할 수 있도록 하였고, 기존에 별도 기능으로 존재하던 “인천공항에서”는 더 넓은 상황에 적용할 수 있는 “빠른 통역” 기능으로 확장하였습니다. 이는 특정 장소 중심 기능을 일반화하여 긴급 상황 전반에서 활용 가능하도록 재구성한 결과입니다.

언어 설정, 위치 선택, 맥락 태그, 세부 태그, 빠른 통역 기능을 포함한 사용자 앱 핵심 화면.

봉사자 앱

봉사자 앱은 봉사자가 수신 대기 중, 봉사 중, 활동 부재 중 등 상태를 빠르게 전환하고 통화 내용을 기록하는 것이 핵심 기능입니다. 따라서 봉사자 앱은 봉사 상태와 시간을 더 빠르게 설정하고 관리할 수 있도록 홈 중심 구조로 재편하였습니다. 자주 사용하는 “우선 봉사”와 “활동 부재중”은 원터치로 조작할 수 있게 단순화하였고, 보다 세밀한 시간 조정이 필요한 “봉사 불가능”과 “봉사 중지”는 별도 설정 화면으로 정리하였습니다. 또한 특정 기능에는 On/Off 버튼을 적용해 뎁스를 줄이고, 메뉴 전환은 Dock형 구조로 단순화하였습니다. 또한 현재 봉사 상태를 색상 변화로 즉각적으로 파악할 수 있도록 하였습니다.

통화 화면은 기존 1×5 그리드에서 2×3 그리드로 변경하여 아이콘 크기를 키우고 조작 오류를 줄였으며, 음성만으로 의사소통 해야 했던 한계를 이미지 전송 및 텍스트 채팅 기능 추가로 보완하였습니다.

이와 함께 봉사 이후의 경험도 앱 안에서 이어질 수 있도록 설계하였습니다. 기존에는 텍스트 메시지나 외부 링크를 통해 이뤄지던 후기 작성 흐름을 앱 내부로 옮기고, 태그를 활용해 설명 부담을 줄이면서 경험을 기록할 수 있도록 하였습니다. 더 나아가 “봉사 이야기”에서는 후기 공유를 게시 형태로 확장하고, 댓글과 좋아요 기능을 추가해 봉사자 간 경험 공유와 공감을 유도하는 구조를 제안하였습니다. 이를 통해 봉사 경험이 통역 직후 종료되는 것이 아니라, 기록과 커뮤니티 활동으로 이어지는 흐름을 만들고자 하였습니다.

봉사 상태 설정, 봉사 불가능 및 중지 설정, 앱 내 후기 작성, 봉사 이야기 공유 화면.

공통 UX 요소

새로운 기능이 추가되면서 기존 사용자와 신규 사용자 모두 적응 부담을 느낄 수 있다는 점을 고려하여, 각 페이지 상단에 도움말 버튼을 두고 단계별 안내를 제공하는 방식도 함께 설계하였습니다. 설명이 필요한 영역은 하이라이트하거나 말풍선 형태의 팝업으로 제시하여, 사용자가 현재 화면 안에서 필요한 정보를 바로 이해할 수 있도록 하였습니다.

5 Reflection

이 프로젝트를 통해, 흔하지 않은 서비스의 UI/UX를 개선하는 일을 경험할 수 있었습니다. 서비스의 특수성을 고려하여 구조와 인터랙션을 설계하는 과정에서 유사한 특성의 서비스를 벤치마킹 하는 것이 큰 도움이 되었습니다. 또한 과도한 뎁스를 줄이고 기능을 홈 중심으로 재배치하며, 용어와 인터랙션을 일관되게 정리하는 일이 서비스 경험의 질을 크게 좌우한다는 점을 실감했습니다.
iOS 봉사자 앱 디자인을 담당하면서는 플랫폼 가이드라인(Human Interface Guidelines)을 실제 화면에 적용하는 과정에서 많은 것을 배웠습니다. Android와 iOS는 뒤로 가기 방식, 탭 표시 위치, 버튼 레이블 대소문자 규칙 등 세부 디자인 관습이 다르며, 이것이 단순히 스타일 차이를 넘어 사용자의 멘탈 모델과 직결된다는 점을 직접 비교하며 파악할 수 있었습니다.