brunch

매거진 말랑말랑한 서비스기획

라이킷 1,218 댓글 148

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김광섭 Nov 25. 2019

따릉아! 문제는 UX/UI야!

공공기관 앱계의 디아블로 따릉이를 구원해보자!

얼마 전 따릉이를 타려다 스마트폰을 보도블록에 내려놓고

'답답해!!!!! 죽겠다!!!!!!!!’

하고 소리를 지를뻔했다. 따릉이 앱 사용이 미친 듯이 불편했기 때문이다. 서비스 기획일을 하는 사람으로서 어지간해서는 다른 서비스를 욕하지 않는데 우리의 따릉이 앱은 정말 선을 넘다 못해 38선까지 넘어버린 녀석이다. 도대체 어떻게 탄생한 앱인지는 모르겠지만 이 앱이 스트레스로 단축시킨 시민들의 수명이 자전거가 늘려놓은 건강 수명만큼은 길지 않을까 조심스레 추측해본다.

모바일 앱도 이렇게 정갈하면 좋으련만

따릉이 앱이 이토록 환상적으로 만들어진 건 공공기관 특유의 의사결정 구조 때문일 확률이 매우 x100 높다. 감히 예상해 본 시나리오는 이렇다. 서울시의 담당자분은 앱 개발이 처음이었을 것이고, 선정된 개발업체는 하청(1차)에 하청(2차)에 하청(대학생)을 줬을 것이며, 옆 부서에서는 중요하지도 않은 기능을 무조건 넣으라고 박박 우겼을 것이다. 최종 컨펌이 나기 전에는 윗선(높으신 분)에서 한 번쯤 ‘에잉- 맘에 안 드는데?’를 날려주셨을 테고 그러면 개발 담당자가 연중에 교체되었을 확률도 높다. 거기에 말도 안 되는 억지를 부리는 코리안 조커 민원인들은 덤.

그 결과물인 따릉이 앱은 그야말로 공공기관 특유의 대환장 파티를 한 몸에 담고 있는 UX/UI계의 디아블로가 되었다. 오늘은 이 대악마를 처치하는 악마사냥꾼의 마음가짐으로 따릉이 앱이 얼마나 많은 곳에서 UI 원칙을 와작와작 박살내고 있는지, 그리고 이걸 고치려면 어디서부터 손을 대야 하는지 찬찬히 분석해보려고 한다. (혹시 따릉이 앱 담당자님께서 이 글을 보신다면... 화면을 새로 그리는 법부터 하나하나 함께 상의하며 알려드리고 싶다.)

따르릉따르릉... 비켜나세요...ㅎㅎ

1. 스플래시(도입부)

어서오세요.. 번거로운 녀석..

우선 앱의 첫인사라고 할 수 있는 스플래시부터 살펴보자. 우리의 따릉이 앱은 도입 화면부터 예사 앱과 차별화되어있다. 따릉이의 스플래시는 5년 정도 꾸준히 사용한 라면 받침대같이 가장자리가 거무죽죽 그을려있다. 이때부터 사용자는 ‘오우.. 유저를 좀 화나게 할 줄 아는 녀석인가’ 하고 긴장하며 앱의 첫 화면으로 진입하게 된다. 마치 거미줄을 헤치고 고대 잉카제국의 버려진 사원으로 들어가는 인디애나 존스를 보는 기분.

이게 소문의 따릉이 앱인가?

일반적인 앱의 스플래시는 해당 앱이 사용하는 메인 컬러와 로고를 ‘선명하게’ 보여준다. 다른 앱들이 구우지 이렇게 하는 이유는 단순히 그냥 이뻐보이고 싶어서가 아니다. 스플래시는 앱의 사용자에게

첫째, 지금 사용하는 서비스가 어떤 것인지 명확하게 인지시키고

둘째, 앞으로 등장하는 메인 컬러를 무의식 중에 주입해서 위화감을 없앤다.

그런데 따릉이 앱은 디지털 풍화가 심하게 와서 할머니네 사진첩에나 들어가 있을 법한 이미지를 스플래시에 걸어놓고 있다. 사용자들이 처음부터 깝깝해지는 것이 당연하다.

그냥 아무것도 안 하고 흰 바탕에 로고만 넣어도 훨씬 세련되다

2.로그인

악성 민원인이 쏘아 올린 작은 공

스플래시를 지나온 사용자는 그보다도 더 답답한 로그인 화면을 보게 된다. 따릉이 로그인 화면의 가장 큰 문제점은 로그인과 동시에 사용자에게 앱의 ‘세부 기능’까지 제공한다는 것이다. 앱 마켓에 등록된 99%의 앱은 첫 화면에서 사용자에게 오직 로그인 ‘하나만’ 요구한다. 그 이유는

첫째, ’ID’에 따라 사용자 별로 최적화된 서비스를 제공해야 하고 -사용자 관점

둘째, ‘ID’에 따라 운영 데이터(앱의 오류 등)를 추적해야 하기 때문이다. -운영자 관점

따라서 앱의 세부적인 기능들은 반드시 로그인 ‘이후’에 보여주는 것이 원칙이다. 그러나 따릉이는 첫 화면에서부터 ‘지도 검색’, ‘공지사항’같은 곳에서 쓸데없는 유연함을 제공한다.

첫 화면에서 세부 기능을 제공하는 따릉이 앱

따릉이가 이처럼 태평양 오지랖을 부리는 이유는 ‘야!! 로그인 없이 자전거 위치만 보고싶다고오-!! 국민신문고에 신고할거야!!! 빼애액!!’하는 코리안 조커(민원인) 때문일 확률이 매우 x3 높다. 공공기관의 앱들은 보통 이렇게 몰상식하지만 시끄러운 민원인 1%의 말을 들어주기 위해 99% 선량한 사용자를 불구덩이로 몰아세운다.

물론 대안이 없는 것은 아니다. ‘로그인 없이’ 세부 기능을 제공해야 하는 경우에는 로그인 화면 하단에 ‘로그인 없이 이용하기’ 버튼을 넣고 다음 페이지에서 일부 기능만 열어 놓으면 된다. 다시 한번 말하지만 사용자 커스터마이징이 필요한 서비스에서 ‘첫 화면 로그인 단독’은 선택이 아닌 필수다. 남들이 다 그렇게 하는 데는 꼭 이유가 있다.

다른 앱들은 로그인만 시킨다. 심지어 뱅크샐러드는 이름만 쓴다!

로그인 화면의 또다른 문제점은 화면 배치가 비효율적이라는 것이다. 달리 말해, 버튼들의 위치가 직관적이지 않다. 지금의 따릉이 앱에서는 중국발 미세먼지 사진이 메인 화면의 한가운데 떡 하고 박혀있다. 미세먼지의 심각성을 지적하려는 의도라면 모르겠으나 앱의 가장 중요한 화면에서까지 이럴 필요는 없다. 진짜 중요한 버튼들을 현재의 네 귀퉁이 구석에서 정 가운데로 옮겨와야 한다.

이렇게 바꿔보면 어떨까요?

잘 만든 앱은 기본적으로 ‘예쁜 배경 화면’을 지양한다. 또 만약 배경이 있다고 해도 그것은 ‘버튼을 부각하기 위해’ 있는 것이지 ‘예쁘기 위해’ 있는 것이 아니다. 시중에 나온 어떠한 민간 앱도 첫 화면에서 로그인 버튼을 작게 배치하지 않는다. 그냥 아무 앱이라도 똑같이 따라하면 지금보다 월등히 개선될 것이라고 생각한다.

3. 인터랙션

2초 정도는 참을 수 있지? 응 아니야.

따릉이 앱의 전체적인 문제 중 하나는 사용자의 인터랙션이 상당히 느리다는 것이다. 이 말은 쉽게 풀어서 ‘버튼 하나를 눌렀을 때 화면 전환이 매끄럽지 않다’는 의미다. ‘느리다’는 현상은 원칙적으로 앱이 서버와 데이터를 주고받는 방식이 비효율적이기 때문에 발생한다. 하지만 따릉이 앱은 서버까지 가지 않더라도 이미 UI덕분에(?) 앱이 2배는 느리게 느껴진다. 따릉이 앱의 버튼 인터랙션은 크게 2가지 점에서 잘못되어있다.

첫째, 따릉이 앱은 모든 화면이 ‘팝업’ 형태로 전환된다.

여기서 ‘팝업’ 이란 A 화면에서 버튼을 눌렀을 때 다음 B화면이 인터넷 창처럼 반짝! 하고 등장하는 것을 말한다. 이런 통일신라 시대의 화면 전환 방식은 데이터가 로딩되며 버벅거리는 현상이 사용자에게 고대로 보인다. 사용자가 ‘멈춘 화면’을 보는 것은 앱을 구려보이게 만드는 대표적인 독소다.

로딩이 얼마나 느리면 로딩하는 걸 캡처할 수 있음..;

최근 공들여 만든 대부분의 앱들은 버튼을 클릭했을 때 화면이 좌에서 우, 혹은 위에서 아래로 ‘스와이프’ 되면서 넘어간다. 동일한 0.5초의 시간이지만 사용자 입장에서 전자(따릉이 앱)의 경우 0.5초 동안 멈춘 화면(정지)이 보이고, 후자(잘 만든 앱)의 경우 0.5초 동안 화면의 이동(변화)이 보인다. 이런 세세한 설계가 사용자들로 하여금 앱이 ‘빠르고 반응성이 좋다’고 느끼게 만드는 것이다.

정말 간단하게 이 정도 슬라이드 (출처: Paweł Pniewski : Weather App)

둘째, 따릉이 앱은 인앱 브라우저를 너무 많이 사용한다.

인앱 브라우저란 앱이 (서버의) 정보를 앱(App) 화면으로 보여주는 것이 아니라 웹(Web) 화면으로 보여주는 것을 말한다. 보통 일반적인 앱들은 사용자 약관처럼 완전 사소한 기능이나, 이벤트 배너처럼 업데이트가 자주 필요한 곳에 인앱 브라우저를 적용한다.(그나마도 잘 만든 앱들은 이런 방식을 쓰지 않는다.) 하지만 따릉이는 꽤 중요한 기능에도 인앱 브라우저를 마구마구 쓰고 있다.

말을 잇지 못하게 하는.. 인앱 브라우저..

인앱 브라우저를 도입하는 이유는 간단하다. 개발 공수(인건비)가 줄기 때문이다. 앱 화면을 만들기 위해서는 1. 화면 디자인도 해야 하고, 2. 앱에 정보를 주는 서버의 URL을 따로 만들어야 한다. 그런데 이 모든 것들이 이미 만들어진 웹페이지로 연결하면 일사천리로 끝난다. 보통 서버 개발자가 부족하고 완료 일정에 쫓길 때 이런 고육지책을 많이 쓴다. 따릉이 앱의 문제는 주요 기능에까지 인앱 브라우저를 적용했다는 데 있다.

세상에 공짜는 없다. 인앱 브라우저는 개발자가 편한 만큼 사용자가 불편하다. 두 가지 단점이 있다. 첫째, 화면이 망가진다는 점, 둘째, 느리다는 점. 예를 들어 지금 따릉이 앱에서 '이용 안내'나 '비회원 로그인'등의 버튼을 누르면 새로운 창이 뜨는데 이 창은 읽기가 굉장히 곤란하다.(위 그림 참조) 더불어 로딩 시간도 약 3초 정도 걸린다. 일상에서 3초는 무척 짧은 시간이지만 앱 사용에서 3초는 '오류'로 인식할 만큼 긴 시간이다. (보통 앱의 최대 인터랙션 시간은 2초다.) 따릉이 앱은 개발 공수를 줄이기 위해 사용자의 편의성을 많이 희생했다. 주요 기능만이라도 인앱 브라우저를 없애는 것이 반드시 필요하다.

4. 커스터마이징

모두를 위한 앱은 누구를 위한 앱도 아니다.

로그인 화면에서부터 이어지는 따릉이 앱의 대표 문제점 중 하나는 '유저 커스터마이징', 쉽게 말해 사용자의 특성에 따라 최적화된 화면을 보여주지 않는다는 것이다. 앞서 홈 화면에서 로그인 사용자와 미 로그인 사용자를 구분하기 전에 세부기능을 제공하는 것은 잘못되었다고 지적했었는데 이것과 동일한 맥락이다.

일반적인 앱은 유저가 앱을 실행했을 때 '지금 들어온 사람이 어떤 사람인지'를 찬찬히 분류한다. 처음 온 손님인지, 아이디는 있는지, 14세 이상인지, 어느 나라 말을 하는지, 이용권은 있는지, 사용 빈도는 어떻게 되는지 등등이 체크 대상이다. 좋은 앱은 알게 모르게 사용자에게 이런 ‘카테고리 사다리 타기'를 시키고 그 사람에게 딱 맞는 앱 화면을 로딩한다. 해리포터에서 꼬마 마법사가 마법 모자를 쓰면 ‘흠.. 그리핀도르가세요', '응~ 후플푸프야’, ‘넌 슬리데린이네’ 하고 정해주는 것과 비슷한 과정이다.

음.. 너는 자동 로그인하고 이용권까지 있는 녀석이구나..

따릉이 앱은 유저를 제대로 분류하고 있지 않다. 마법모자로 비유하자면 ‘넌 마법사인 건 확실한데.. 적당히 똑똑하고 정의로우면서 좀 간사할 때도 있고 약간 무난한거같아’처럼 말하는 것과 같다. 그래서 따릉이는 모든 유저에게 거의 똑같은 화면울 보여준다. 따릉이 앱도 유저 분류만 제대로 한다면 모든 유저를 만족시킬 수 있다.

간단한 분류 과정은 다음과 같다. 1. 한국말해요? 2. 아이디 있어요?, 3. 따릉이 이용권 있어요? 이 세가지만 초기 세팅에서 물어보면 지금 첫 화면에 있는 쓸데없는 버튼을 최소 4개는 없앨 수 있다. 앱은 깔끔해져서 좋고 사용자는 본인에게 맞는 기능만 볼 수 있으니 좋다. 모두가 행복해지는 과정을 따릉이는 왜 안 하고 있는걸까.

5. 메뉴 구성

뭘 좋아하실지 몰라서 고추장 바질페스토 파스타를 만들어봤습니다. 근데 이제 핫칠리를 곁들인..

따릉이 앱은 메뉴 구성의 원칙이 없다. ‘좋아 보이는 것’을 여기저기 섞어놓았다. 따릉이 앱은 UI 디자이너를 문밖에 쫓아내고 만들어진 것일까. 앱 화면 기획에서 가장 기본은 햄버거형 UI(브런치처럼 좌상단 가로줄 3개 모양의 메뉴바)를 채택할 것인지 하단 탭 UI(카카오톡/쿠팡처럼 하단의 4개 탭)를 채택할 것인지 하나만 정하는 것이다. 따릉이는 놀랍게도 이것들을 둘 다(?!) 채택하고 있다. 문제는 두 원칙을 같은 화면에 동시에 채택하는 좋은 앱이 하나도 없는 것이다.

예를 들어 은행 앱들만 보아도 모바일 친화적인 카카오뱅크, 케이뱅크, 토스 (앱 평가 3-4점 대)는 이 원칙을 지키고(하단 탭과 카드 형태의 구성), IT와 친하지 않은 ‘오프라인 기반 은행’인 신한은행과 하나은행 앱(앱 평가 1점 대)은 이 원칙을 어긴다. 소위 옛날 기업들이 만든 앱이 ‘어쩐지 불편하다’고 느껴지는 건 이런 소소하지만 중요한 차이 때문이다.

4점짜리 앱과 1점짜리 앱의 차이

'햄버거'와 '하단 탭'을 같이 채택하지 않는 이유는 이 둘이 앱의 가장 중요한 기능을 정리하는 상반된 방식이기 때문이다. 예를 들어 브런치의 경우 앱에서 가장 중요한 기능인 ‘글쓰기’, ‘작가의 서랍’, ‘통계’, ‘피드’ 등의 메뉴가 햄버거의 형태로 정리되어 있다. 보통 브런치처럼 기능이 많지 않은 앱들이 이러한 햄버거 UI를 채택한다. (햄버거는 2019년 이후로는 지양하는 UI다.) 우리나라의 대표 앱인 카카오톡은 방대한 기능을 갈무리하기 위해 ‘하단 탭’ UI를 채택하고 있다. ‘친구’, ‘채팅’, ‘뉴스 등’, ’더보기’가 그것이다. 일반적인 앱들은 하단 탭을 통해 큰 기능들을 갈무리하고 주요 탭 안에서 세부 기능을 정리한다.

좌측(브런치)은 햄버거 우측(카카오톡)은 하단 탭

그런데 따릉이는 홈 화면에서 두 가지 구성 방식을 섞어 놓고 있다. 이런 식의 UI 구성은 사용자에게 굉장히 낯설게 느껴지며, 내가 쓰고 싶은 기능이 어디에 있을지 '예측'하는 것을 어렵게 한다. 예를 들어 하단 탭에 이미 이용권이 있는데 햄버거 메뉴바에도 이용권이 또 나온다.(...) 음식에 비유하자면 고추장에다가 바질페스토를 버무리는 것과 똑같은 행동. 이맛도 저 맛도 아닌 상태가 된다는 뜻이다.

따릉이 앱이 한층 더 심각한 것은 그나마 있는 하단 탭조차 하단 탭에 들어갈 만큼 중요한 메뉴로 만들어져 있지 않다는 사실이다. 지금 따릉이의 하단 탭은 크게 2가지 문제점이 있다.

첫째, 탭 구성이 복잡하다. 일반적으로 하단 탭을 만들 때는 4개로 만드는 것이 원칙이다. 기껏해야 7cm밖에 되지 않는 모바일 화면에 탭을 5개 이상 넣는 것은 최대한 지양해야 하는 행동이다. 카카오톡만 해도 하단 탭을 딱 4개만 지원하며 ‘게임별’을 사용하는 사람에게만 5개의 탭을 허용한다. 사용자의 UI 경험을 최대한 정갈하게 보존하기 위한 조치다. 만약 하단 탭을 반드시 5개를 넣어야 하는 경우라면 화면 가독성을 위해 글자를 전부 없애고 아이콘만 남겨야 한다.

그냥 슬쩍 봐도 따릉이 앱이 가장 번잡스럽다.

그러나 따릉이는 5개의 탭을 '그것도 울퉁불퉁한 크기로' 글씨까지 꽉꽉 구겨 넣어 배치하고 있다. 더욱이 어떤 사용자든 한 번만 보면 다시는 보지 않을 이용안내를 하단 탭에, 그것도 가장 가운데(!), 색깔까지 넣어서 큼직하게(!) 박아놓았다. 보통 이런 메뉴는 앱을 처음 깔았을 때 튜토리얼로 제공하거나 더보기 탭에 배치하는 것이 일반적인 구성이다.

둘째, 탭의 항목이 잘못되어 있다. 지금 따릉이의 하단 탭은 ‘나의 공간’, ‘즐겨 찾는 대여소’, ‘이용안내’, ‘QR코드 대여’, ‘이용권 구매’처럼 이름도 너무 길고 하나하나 자잘한 기능들이 들어가 있다. 사실 따릉이의 본질적인 기능을 생각했을 때 4개의 탭은 ‘홈’, '대여’, ‘이용권’, ‘더보기’로 들어가는 것이 가장 합리적이다. 그리고 세부 기능은 각각의 탭안에서 ‘카드’로 구성되어야 한다.

6. 퍼블리싱

This is App not Web

관리가 안 되는 앱들의 대표적인 특징은 퍼블리싱(화면에 정보를 배치하는 방식)을 대충대충 한다는 것이다. 보통 '눈 있으니까 읽을 수 있잖아'같은 고압적인 태도가 원인인데, 까다로운 사용자들에게 적용할 방식은 아니다. 따릉이 앱은 퍼블리싱을 거의 신경 쓰지 않고 있다.

따릉이 앱의 퍼블리싱에는 크게 3가지 문제점이 있다.

첫째 글씨가 너무 작다.

따릉이 앱은 폰트 사이즈가 엄청나게 작다. 중요한 정보를 8-10 정도 크기로, 마치 커닝 페이퍼 만들듯이 적어 놓았다. 가장 완벽한 앱 퍼블리싱이란 사용자 별로 폰트 사이즈를 샤르륵- 조절할 수 있도록 도와주는 것이다. 그렇지만 소수의 개발자가 모든 스마트폰 기기의 ‘줄 바꿈’이나 ‘정렬’을 일일이 맞춰주는 것은 현실적으로 불가능하다. (정렬 관련 코딩은 실제로 해보면 아주 깊은 인내심을 요구한다.) 때문에 많은 앱들은 모든 폰트 사이즈를 14 이상으로 땅땅! 제한하여 가독성 문제를 해결한다.

20대 남성조차 읽기 힘들다.. 침침...

사실 10대-30대까지는 글자 크기가 작은 것이 치명적인 문제가 되지는 않는다. 이 나이까지는 아직 각막이나 수정체가 정상 작동하기 때문에 사용자는 ‘좀 불편한데’라고 느낄 뿐, 앱을 사용하는 것 자체에는 지장이 없다. 문제는 40대 이상의 사용자다. 이 연령대의 사람들은 글자 크기가 작을 경우 앱 사용을 포기한다. 당장 어머니 아버지 또래는 신문을 볼 때도 안경을 끼시는데, 현재 따릉이 앱의 글씨는 그것보다도 작다. 지금이라도 모든 글씨를 14 이상으로 맞추고 줄바꿈을 정확하게 해 준다면 중장년층의 사용자 편의성이 껑충 올라갈 것이다.

둘째 웹 표준을 따르고 있다.

따릉이 앱은 ‘앱의 기준’이 아니라 ‘웹의 기준’을 따르고 있다. 이 말은 쉽게 풀자면 앱의 버튼 배치 방식이 윈도 화면처럼 되어있다는 뜻이다. 예를 들어 우리는 윈도 PC에서 창을 닫을 때 ‘우측 상단’에 있는 x표시를 찾아간다. 하지만 스마트폰에서 창을 닫을 때는 ‘우측 하단’이나 ‘좌측 상단’에 있는 뒤로 가기(<) 버튼을 누른다. 따릉이 앱은 중요한 화면마다 우측 상단(윈도 기준)에 x표시를 넣어 앱 생태계의 무법자처럼 행동하고 있다.

1. 왜 같은 버튼이 2개나 있나요, 2. 심지어 어떤 화면은 왜 없나요..

단순히 종료 버튼만 잘못되어 있는 것도 아니다. 따릉이는 서울에 사는 외국인들을 위해 ‘영어 버전’도 제공하는데, 문제는 한영 변환 버튼이 홈 화면의 우측 상단에 있다는 것이다. 이렇게 한영 버튼을 우측 상단에 두는 것은 일반적인 관공서 ‘홈페이지’가 채택하는 방식이다. 잘 만든 앱은 언어 설정 기능을 앱의 [더보기] 메뉴에 넣어둔다. 또한 현재 사용자가 스마트폰 OS에서 사용하고 있는 언어를 자동으로 탐지하고 영문 메뉴를 곧바로 제공하기도 한다. 여러모로 ‘따릉이 앱’은 모바일 환경을 생각하지 않고 만들어졌다. '앱은 홈페이지의 작은 버전일뿐'이라고 생각했을 때 이런 문제가 생긴다.

셋째 구성 요소가 어그러진다.

따릉이 앱은 첫 화면부터 구성 요소가 겹쳐 보이는 현상이 있다. 이렇게 망가진 화면은 앱의 완성도에 굉장히 치명적인 결함이다. 혹자는 '그냥 정보를 알아볼 수만 있으면 되는 거 아닌가? 왜 이렇게 까다롭게 굴어요 ㅡㅡ'하고 넘어갈 수도 있겠지만 많은 사용자들은 그렇게 생각하지 않는다.

이용권 구매 뒤에는 뭐가 있는걸까

한번 이상한 화면을 본 사용자는 앱의 퀄리티에 대한 신뢰를 잃어버린다. 사용자가 앱을 믿지 않게 되면 그때부터는 모-든 문제가 '앱 때문에' 발생했다고 생각하게 된다. 예를 들어 와이파이 환경이 불안정하거나 사용자가 잘못된 행동을 해서 앱이 종료되는 경우에도 사용자는 '앱이 후져서' 문제가 발생했다고 판단한다. 결국 이렇게 사소해 보이는 틈새가 앱 마켓에서 별점 테러를 유발하고 '이 앱은 구리다'는 안 좋은 버즈를 계속 생산한다.

경험상 개발자분들은 1. 일이 너무 많고, 2. 기능 구현을 최우선시하기 때문에 퍼블리싱에 신경을 덜 쓸 수밖에 없다. 보통 이때는 기획자나 디자이너가 한 화면, 한 화면 꼼꼼히 따져가며 완성도를 높여야 한다. 따릉이 앱을 뜯어보며 정말 안타까운 점은 이렇게 엉성한 화면이 많은데도, 여지껏 어떠한 수정 요청도 받아들여지지 않았다는 사실이다. 다시 한번 공공의 의사결정 구조 탓이 아닌가 생각해 본다.

7. 디자인

알록달록하고 싶어.. 가을이니까..(별)

따릉이 앱은 디자인을 적용하지 않은 앱이다. 디자인 전체를 말하기 시작하면 정말 한도 끝도 없기 때문에 딱! '컬러' 하나만 언급해보려 한다.

지금의 따릉이 앱은 컬러를 남용하고 있다. 서울시 홈페이지를 뜯어보면 따릉이 브랜드의 메인 컬러는 초록색, 민트색이고, 보조 컬러는 청회색, 노란색, 분홍색, 빨간색이다. 일반적으로 깔끔한 UI가 나오기 위해서는 메인 컬러 하나, 보조 컬러 두개 이하로 사용해야 한다. 하지만 따릉이는 온갖 화면에서 색상을 알록달록하게 쓰고 있다. 매직아이를 하고 앱을 지긋이 쳐다보면 저 멀리 단풍이 예쁘게 든 관악산이 보이는 것만 같다.

컬러를 이렇게 복잡하게 사용하는 것은 사용자에게 혼란을 유발한다. 예를 들어 지금의 따릉이 지도는 각 대여소 별로 남은 자전거의 수를 '빨강', '노랑', '초록', '회색', '검정'으로 화려하게 보여주고 있다. 이 구성은 딱 공공기관에서 '위기 대응 매뉴얼'(예: 군대의 MOPP 4단계)을 만들 때 적용하는 색상이다. 이같은 색상 구성은 1. 사용자가 꼼꼼히 읽으며 배워야 하고, 2. 화면의 집중도를 떨어트린다.

대안을 제시하자면 한 가지 색상(노랑)의 '그라데이션'을 사용하면 된다. 예를 들어

자전거 10대 이상 대여소 = 짙은 노랑
자전거 5대 이하 대여소 = 회색 섞인 노랑
자전거가 없는 대여소 = 밝은 회색

으로 표기하면 된다. 더불어 폐쇄된 대여소는 지도에서 아예 지워버리는 거나 '자전거가 없는 대여소'와 동일하게 표시하면 된다. 색깔을 알록달록하게 색칠하는 것보다 채도와 명도를 통해 점진적인 단계를 보여주는 것이 앱을 처음 쓰는 사용자에게도 직관적이고 디자인도 깔끔하게 뽑힌다. 심지어 이렇게 설계하면 색각에 어려움이 있는 분들도 앱을 무리 없이 사용할 수 있다. 그야말로 도랑 치고 가재 잡고 매운탕까지 끓여먹는 변화다.

알록달록 보다는 간결깔끔

앱의 컬러/폰트/도형은 원래 (앱을 만들기 전에!) 브랜드 가이드라인에서 명확하게 지정해주어야 한다. 하지만 따릉이가 그런 가이드라인이 있을 것 같지는 않다. 이런 경우에는 앱 디자이너가 앞서 말한 것처럼 자체적인 가이드를 세우고 앱을 최대한 간결하게 편집해야 한다. 현재 상태에서는 초록색을 메인 컬러, 노란색과 회색을 보조 컬러로 지정하는 것이 가장 합리적인 대안이 될 것이라고 생각한다. 물론 가장 좋은 건 진짜 전문가 손이 맡기는 것이다.

기타

반면교사가 아니라 진짜 교사가 되길

앞서 말한 것 외에도 따릉이 앱은 인증, 알림, 지도, 결제, 공지사항 등등.. 정말 하나하나의 항목마다 또렷한 개선 포인트가 있다. 지금 앱은 UX/UI를 공부하는 사람에게 굉장히 좋은 반면교사만 되고 있을 뿐이다. 모바일 경험을 조금만 손 본다면 지금의 따릉이가 공공 모빌리티의 진정한 교사로 자리잡을 수도 있다.

따릉이 앱은 이미 100만 명이 넘는 사람들이 사용하고 있다. 서울시가 막대한 예산을 통해 반독점적으로 공급하는 요 자전거 시스템은 이제 '사용할 수도 있는 앱'이 아니라 '사용해야만 하는' 앱인 것이다. 인터넷을 조금만 찾아봐도 따릉이 앱 불편하다는 말이 쏟아진 지 벌써 3년째다. 그럼에도 불구하고 여태껏 앱을 이렇게 버려둔다는 것은 아마도 서울시에서 '앱이 문제'라고 생각하지 않기 때문인 것 같다. 오죽하면 대학생들이 따릉이를 대체할 새로운 앱을 만들고 시민들이 칭찬해주는 이런 웃픈 광경이 벌어지고 있을까.

더 슬픈 것은 서울시가 2019년에만 따릉이 자전거 구매 비용으로 88억 원을 썼다는 사실이다. 이 돈의 1/10만 투자했어도 따릉이 앱은 아마 지금과는 차원이 다른 놀라운 앱이 되었을 거라 확신한다. 나뿐만 아니라 정말 많은 서비스 기획자/ UX 디자이너들은 이 좋은 서비스의 모바일 앱이 이처럼 방치되는 걸 진심으로 안타깝게 생각한다.

따릉이 서비스는 이미 정말 잘만든 모빌리티 정책이다. 정말! 딱! 앱 하나만 잘 고쳐도 서울시 대표 혁신 정책이 될 수 있을것이다. 각 분야에 실력있는 전문가 12명 정도면 앱을 완전히 리뉴얼 할 수 있을텐데, 박원순 시장님은 정말 고칠 생각이 없으신걸까? 다음 글에서는 실제 따릉이를 뜯어고친 예시 화면들을 끄적끄적 그려보려고 한다. 목차는 다음과 같다.