리존딱

문제

2018년 1월, 연합 IT 개발동아리 NEXTERS 10기에서 한 달짜리 신규 서비스 구축 프로젝트를 시작했습니다. 주제는 리플(XRP)이었고, 이름은 리존딱, "리플은 존버가 딱이야"의 줄임말입니다. 저는 전체 페이지 기획과 Interaction 제작을 맡았습니다.

프로젝트가 시작될 때, 2017년 내내 0.5달러 아래에 머물던 XRP 시세는 2018년 1월 초 2.5달러를 넘겼습니다. 우리가 첫 회의를 하던 1월 말에는 이미 1달러 근처까지 내려와 있었습니다. 코인 시장 중 유동성이 가장 큰 리플의 상승·하락폭이 가장 극심했고, 그만큼 손실을 경험하는 시장 참여자가 많아지고 있었습니다.

이 상황을 세 개의 문제로 정리했습니다.

하락 시세 알림이 보유를 방해합니다. 거래소 앱은 오를 때도 내릴 때도 알림을 보냅니다. 하락 알림을 받은 사람이 할 수 있는 일은 손절뿐이고, 그 손절이 다시 하락을 만듭니다.

같은 처지의 사람을 찾을 수 없습니다. 커뮤니티에는 모든 가격대의 사람이 섞여 있습니다. 3,800원에 산 사람과 1,200원에 산 사람은 같은 뉴스를 전혀 다르게 읽습니다. 나와 같은 가격에 들어온 사람이 몇 명이고 지금 무슨 생각을 하는지 알 방법이 없었습니다.

버티는 일에 목표가 없습니다. "존버"는 언제까지 얼마나 버틸지 정해지지 않은 상태를 말합니다. 끝이 보이지 않으니 중간에 내려오게 됩니다.

접근

시나리오 설계

첫 결정은 알림의 방향을 하나로 고정하는 것이었습니다. 훗날 암호화폐가 실질적인 통화로서 기능할 때의 가치를 기준으로, XRP 화폐가치가 상승할 때만 알림을 주는 시나리오를 구성했습니다.

이 전제 위에 사용자의 여정을 세 단계로 나눴습니다.

• 구매가격 등록. 내가 산 가격을 층으로 등록합니다. 100원이 1층이라서, 2,600원에 샀다면 26층입니다.
• 목표가격 등록. 도달하고 싶은 층을 고릅니다. 좌우 스와이프로 층을 고르면 뒤의 배경 그래픽이 함께 위아래로 움직입니다. 단, 현재 XRP 시세에서 최소 +3층부터 선택할 수 있게 제한했습니다. 지금 시세보다 낮은 목표는 존버가 아니니까요.
• 메인. 등록이 끝나면 "존버를 위한 준비가 끝났습니다"라는 안내와 함께 내 층으로 들어갑니다.

UX 모티브 - 엘리베이터

구매 평단가를 부를 때 한국 사람들은 자연스럽게 "몇 층에 샀어?"로 물어봅니다. 이 말 덕분에 자연스럽게 엘리베이터가 떠올랐습니다. 같은 층의 사람들끼리 대화가 가능한 상승지향 공간이라고 생각이 들었어요.

메인 화면은 층 하나가 카드 하나입니다.

• 카드 상단에는 현재 층 코인과 주민수가 표시됩니다.
• 카드 안에는 그 층의 대화가 쌓입니다. 메시지 앞에는 작성자의 층 번호가 붙어, 누가 어디에서 말하는지 드러납니다.
• 스크롤로 층간 이동이 가능합니다. 위아래로 넘기면 다른 층의 카드가 이어지고, 배경도 함께 바뀝니다.

디자인 모티브

엘리베이터라는 하나의 비유에서 세 가지 시각 규칙을 뽑아냈습니다.

• 앱 아이콘은 상승 버튼을 형상화했습니다. 엘리베이터의 ▲ 버튼을 노란 코인 위에 올렸습니다. 이 앱에는 ▼ 버튼이 없습니다.
• 층은 코인의 개수로 표현합니다. 1층은 코인 한 개, 11층은 한 무더기, 51층은 다섯 무더기입니다. 금액을 읽지 않아도 카드의 코인 양만으로 층의 높이를 짐작할 수 있습니다.
• 배경은 대기권입니다. 상승에 따라 고도가 바뀝니다. 1층부터 19층까지는 구름과 언덕이 보이는 대류권, 20층부터 39층까지는 비행기가 지나가는 성층권, 40층부터 60층까지는 로켓이 떠 있는 열권입니다. 메인 화면의 24층이 짙은 남색 하늘인 이유가 여기에 있습니다.

세 규칙은 서로를 참조합니다. 코인이 쌓일수록 배경은 어두워지고, 위로 갈수록 볼 수 있는 것이 달라집니다. 사용자가 층을 옮길 때 느껴야 하는 것은 숫자의 변화가 아니라 고도의 변화였습니다.

프로토타입과 인터렉션 가이드

한 달짜리 프로젝트에서 디자이너가 개발자에게 줄 수 있는 가장 좋은 문서는 움직이는 문서입니다. ProtoPie로 프로토타입을 만들고, 층 카드의 스크롤 페이징, 층 코인의 이동과 투명도 변화, 플로팅 버튼의 탭 반응 같은 인터렉션을 실제 값으로 구현했습니다.

여기에 Android 앱 개발 시 필요한 모션 에셋과 인터폴레이션 수치를 기재한 인터렉션 가이드를 붙여 전달했습니다. 어떤 레이어가 몇 픽셀을 어떤 곡선으로 움직이는지 프로토타입에서 그대로 읽어낼 수 있으니, 개발자가 눈으로 보고 다시 추측할 필요가 없습니다.

메뉴 드로어에는 "목표까지 14층 남았드아", "120일째 존버 중"처럼 버티는 시간과 남은 거리를 함께 보여주도록 했습니다. 구매금액과 목표금액을 이 자리에서 다시 설정할 수 있고, 알림 허용 토글도 여기에 두었습니다.

결과

스플래시, 온보딩, 카카오 계정 로그인, 구매가격·목표가격 등록, 등록 완료, 메인, 메뉴, 공유하기, 축하 페이지까지 서비스 전체 화면을 한 달 안에 기획했습니다. 공유하기는 축하 화면을 스크린샷으로 저장한 뒤 카카오톡·페이스북·트위터로 보낼 수 있게 구성해, 목표에 도달한 순간이 다음 사용자를 데려오도록 했습니다.

알림은 상승할 때만 옵니다. 하락장에서 시작한 프로젝트가 사용자에게 건넨 약속은 "떨어질 때는 조용히 있겠다"였고, 시나리오의 모든 분기가 이 약속 하나를 지키도록 설계되었습니다.

엘리베이터라는 비유 하나에서 앱 아이콘, 층별 코인, 대기권 배경이라는 세 가지 시각 규칙을 만들어 전체 화면에 일관되게 적용했습니다. 어느 화면에서든 사용자는 자신이 지금 몇 층에 있고 얼마나 더 올라가야 하는지를 숫자보다 먼저 그림으로 읽습니다.

ProtoPie 프로토타입과 인터렉션 가이드는 Android 개발자에게 그대로 전달되어, 모션의 수치를 두고 오가는 커뮤니케이션을 줄였습니다.

이 프로젝트에서 배운 것은 기능을 빼는 일이 곧 정서를 설계하는 일이라는 점입니다. 하락 알림을 없애고, 아래로 가는 버튼을 그리지 않고, 목표를 현재보다 위에서만 고를 수 있게 한 것은 모두 무언가를 제거한 결정이었습니다. 그 제거의 합이 "같이 버티자"라는 서비스의 태도가 되었습니다.