이 글은 지금은 서비스를 접은 예전 러닝 앱에 대한 이야기예요.
Gyroscope Running을 만들다
코드네임 Quicksilver: 우리의 첫 React Native iPhone 앱
얼마 전 Running by Gyroscope라는 실험적인 iPhone 앱을 내놨어요. 방금 뛴 러닝을 공유할 수 있는 예쁜 이미지를 만들어 주는 앱이에요. 이 앱을 어떻게 디자인했고, 무엇으로 만들었고, 그 과정에서 무엇을 배웠는지에 대한 이야기예요.
이 앱은 우리의 가장 인기 있는 연동 두 가지, Runkeeper와 Strava로 굴러가요. 두 서비스는 활동 기록을 정말 잘해 줘요. 러닝을 마치면 Gyroscope가 원본 데이터를 알아서 동기화해요. 그다음부터는 재미있는 시간이에요. 어떤 이야기를 공유할지 고르면 되니까요.
경치 좋은 코스를 담은 위성 지도? 아니면 숨 막히게 아름다운 노을을 찍은 사진? 도넛 7개어치였다는 사실은 어때요? 심박수가 유난히 높았다면 그걸 내세우고 싶을 수도 있죠. 고르는 건 여러분 몫이에요.
1장
2015년 3월
Gyroscope 웹사이트를 막 공개한 참이었어요. 시스템은 아주 잘 돌아갔죠. 제가 뛰면 바로 동기화되어 aprilzero.com에 올라왔어요. 온갖 수치는 물론이고 Spotify로 들은 음악까지요.
멋진 대시보드를 만들어 두긴 했지만, 공유하는 방법은 통째로 링크를 보내는 것뿐이었어요.
다음 큰 과제는 모바일과 공유였어요.
3월의 어느 오후, Twin Peaks로 달려 올라갔어요. 맑고 아름다운 날이라 저 멀리 두 다리가 다 보였죠.
도시를 내려다보면서 이 순간을 공유할 방법이 있으면 좋겠다고 생각했어요. 저는 모든 걸 기록하고 수치로 만들어 두었어요. 고도, 심박수, 거기까지 간 경로, 듣고 있던 음악, 그리고 눈앞의 풍경(사진으로요). 그런데 그것들을 다시 하나의 경험으로 합칠 방법이 없었어요.
산을 올라간 경로를 증강현실로 보는 장면이 머릿속에 그려졌어요. 그러다 공유할 수 있는 카드 아이디어가 떠올랐어요. 제가 찍은 사진 위에 몸 상태와 위치를 겹쳐 올리는 거예요. 그 정보는 이미 전부 Gyroscope 안에 있었어요. 제대로 디자인만 하면 됐죠.
이거 Instagram에 올리면 근사하겠다 싶어서, 당장 해 보고 싶은 마음에 집까지 내처 달렸어요.
2장
될 때까지 흉내 내기
집에 도착하자마자 Photoshop을 열고 찍어 둔 사진 몇 장을 끌어다 놨어요. 러닝의 지도 데이터를 얹고 수치를 몇 개 붙여서 기본적인 인포그래픽을 만들었죠. 언젠가는 근사한 자동화 도구가 생기겠지만, 그때는 그냥 처음부터 직접 만드는 게 빨랐어요.
도시와 거리 같은 기본 데이터는 구석에 두었어요. 사진에서 글자 색(청록색)을 뽑아 쓰고, 사진을 찍은 자리에 마커도 하나 찍었죠. 몇 시간 뒤, 제가 올린 사진에 좋아요가 잔뜩 달렸어요. 어떻게 만든 거냐고 묻는 사람들도 있었고요.
이 실험을 계속해 보기로 했어요. 달릴 때마다 손으로 이미지를 만들고 새로운 디자인을 시도해 보기로요.
그 뒤 몇 주 동안 달릴 때마다 새 이미지를 만들어 공유했어요. 여러 스타일의 지도를 써 보고, 음악이나 날씨, 심박수 같은 정보도 넣어 봤죠. 이런 작은 장식들이 러닝에 더 많은 결과 깊이를 더해 줬고, 사람들도 좋아하는 것 같았어요.
달리고 나서 카드를 만들어 공유하는 이 창작 활동이 정말 기다려지기 시작했어요. 엔도르핀까지 더해지니 꽤 중독적이었죠. 새로운 창작과 이야기의 층이 여럿 생겼어요. 찍어 둔 사진들을 훑어보고, 지도 경로를 여러 각도로 보고, 예쁜 강조색을 고르는 일 같은 것들이요.
제가 좋아하는 것들이 한데 모였어요. 사진, 달리기, 그리고 관심받기.
사진에 수치 몇 개와 로고를 얹었을 뿐인데, 그냥 사진이던 것이 그래픽 디자인, 나아가 작품처럼 느껴지게 만드는 무언가가 있었어요. 요소들의 구성과 형태가 서로 맞물리면 부분의 합보다 훨씬 큰 것이 되더라고요.
여행 중에도 이걸 만드는 게 즐거웠어요. 카드는 제가 다녀온 여러 곳을 담아 두는 좋은 방법이었어요. 일종의 엽서처럼요.
음악이나 지도 같은 데이터를 켜고 끄면 같은 내용도 다른 이야기가 됐어요. 예를 들어 좀 빡센 러닝이면 심박수를 넣었고요. 유난히 덥거나 추운 날이면 날씨가 흥미로운 수치가 됐죠. 노을이나 풍경이 아름다우면 대개 좋은 배경이 됐고, 지형이 재미있으면 위성 뷰가 그걸 살려 줬어요.
몇 달 동안 이 실험을 하다 보니, 이게 꽤 근사한 제품이 되겠다는 걸 알게 됐어요. 저부터 정말 갖고 싶었고, 자기도 써 보고 싶다는 사람도 많았거든요.
몇 가지 콘셉트를 스케치하기 시작했고, 그동안의 실험을 가장 좋은 레이아웃 몇 개로 추렸어요.
3장
앱을 디자인하다
새 디자인을 시작할 때 저는 목표부터 적어 봐요. 알맞은 목표를 고르는 일은 보기 좋게 만드는 것보다 더 중요하고 더 어려울 때가 많아요. Quicksilver에는 중요하다고 느낀 원칙이 몇 가지 있었어요. 우리가 만들 모든 픽셀과 코드 한 줄을 정하는 원칙이었죠.
- 좋아요를 최대한 많이 받을 것
- 방금 뛴 러닝을 곧바로 볼 수 있을 것
- 꾸미는 일이 재미있을 것
최대한 반응을 끌어내는 디자인
좋아요를 최대한 많이 받으려면, 남들에게 가닿을 수 있게 알맞은 시각적 멋과 초점, 맥락을 넣어야 했어요. 우리의 대상이 운동 좀 하는 사람들만이 아니라 일반 대중이라는 걸 깨달은 게 방향을 잡는 데 도움이 됐고, 다른 곳들과 크게 달라지는 지점이기도 했어요.
대부분의 앱은 기록을 끌어올리는 데 도움이 되는 상세한 수치를 보여 줬어요. 하지만 달리기를 안 하는 친구에게 그런 정보는 훨씬 덜 재미있죠. 그보다는 도넛 5개어치였다는 걸 보고 엄지를 세워 주고 싶을 거예요. 아니면 힘들게 오른 산 정상에서 찍은 예쁜 사진이거나요.
우리는 레이아웃 하나하나를 저마다의 브랜드처럼 만들려고 했어요. 고유한 이름과 아이콘을 붙여서요. 이게 앱의 핵심 기능이었으니 무척 직관적이고 쓰는 재미가 있어야 했죠.
몇 가지 방식을 시도해 본 끝에, 레이아웃을 아래쪽에 긴 목록으로 두는 형태가 됐어요. 여러 레이아웃을 넘겨 보며 하나를 고르는 게 정말 즐거웠어요.
달리기를 위한 Instagram 필터 같았어요
실행 화면
사진과 사용자의 콘텐츠가 이 앱의 큰 부분이었으니, 앱을 처음 열었을 때부터 그게 느껴지길 바랐어요.
배경으로 쓸 좋은 사진을 찾아다녔어요. 제가 아는 최고의 사진가 중 한 명인 친구 Adam이 고맙게도 Mt. Tam에서 찍은 사진을 한 장 쓰게 해 주었어요.
앱에 넣자마자 완전히 반해 버렸어요. 앱 전체의 분위기를 잡아 줄 고요함과 자연의 느낌이 딱 그거였거든요.
따로 떨어진 앱
가장 큰 디자인 결정 중 하나는 이걸 달리기 전용의 별도 앱으로 만드는 것이었어요. 홈 화면에서 “Running”이라는 단어를 보고, 내 콘텐츠로 곧장 들어가고 싶었거든요.
나중에 사이클링이나 수영처럼 기능을 더 붙이더라도, 원하는 것만 골라 설치하면 되니까요. 화면이 어수선해지고 여러 겹의 내비게이션에 파묻히는 걸 피하고 싶었어요.
활동 피드
다른 러닝 앱들은 기록 버튼이 앞에 나와야 하지만, 우리는 그게 없으니 콘텐츠가 늘 주인공일 수 있었어요. 최근 러닝 말고는 전부 사이드바에 감춰 뒀죠.
러닝 하나하나를 어떻게 보여 줄지 여러 스타일과 비유를 실험했어요. 쌓인 카드일 수도 있고, 타일 여러 개일 수도 있었죠. 정보 밀도를 이리저리 바꿔 보니, 큰 것들은 자리를 너무 많이 차지했어요. 몇 분 써 보니 제가 너무 확대된 상태라 원하던 큰 그림이 안 보이더라고요. 웹사이트의 뷰가 꽤 잘 작동했기 때문에, 결국 같은 막대를 다시 쓰고 페이스에 따라 색을 입혔어요.
가장 빠른 & 가장 긴 러닝을 헤더에 넣어 봤어요. 아래로 내리지 않아도 늘 바로 보이게요. 다정한 도전 같은 것이었죠. 앱을 열 때마다 내 기록을 깰 기회가 생기니까요. 누군가 마라톤을 뛰었거나 정말 대단한 걸 해냈다면 언제든 쉽게 볼 수 있고요.
사이트에서 계속 올라가던 나이 카운터가 인기가 아주 좋았어요. 그래서 여기에도 비슷한 타이머를 넣어 마지막 러닝 이후 흐른 시간을 표시했어요. 그 숫자가 커질수록 더 뛰고 싶어지길 바랐죠.
4장
도넛 카운터
그해 여름 우리는 San Francisco의 True Ventures 사무실에서 일하고 있었어요. 어느 날 누군가 도넛 몇 상자를 사무실에 가져왔어요. 점심을 먹고 나서 누군가가 도넛을 8등분했는데, 제 기억이 맞다면Phil Black이었어요 . 작은 조각만 먹으면 먹은 걸로 안 친다고 했죠. 과학적으로 맞는 말이 아니라는 건 알았지만, 저도 이런저런 맛을 하나씩 맛보기 시작했어요.
러닝 앱을 만들면서 글레이즈드 버터밀크 도넛 4분의 1 조각을 먹고 앉아 있자니, 이 간식을 없던 일로 만들려면 그날 밤 얼마나 달려야 하나 궁금해졌어요. 검색해 보니 일반적인 도넛 하나가 약 200칼로리였고, 러닝의 칼로리는 대략 (체중 × 0.75 × 거리)였어요.
지도 데이터가 없는 러닝, 예를 들어 트레드밀에서 뛰거나 Fitbit으로 기록한 러닝이 우리를 많이 괴롭히고 있었어요. 앱은 모든 뷰를 지도에 기대고 있었는데, 더 유연한 대안이 필요했죠.
그렇게 앉아서 여러 러닝의 계산을 해 보다가 두 가지를 깨달았어요. 내 러닝 대부분이 도넛 몇 개어치인지 전혀 모르고 있었다는 것, 그리고 그걸 알아내는 게 꽤 재미있다는 것.
그렇게 도넛 카운터가 태어났어요.
계산을 좀 해서 대략의 도넛 개수를 뽑기로 했어요. 도넛 하나짜리 짧은 러닝이든, 아주 긴 러닝이든요. 그날 남은 시간은 1개부터 6개까지 예쁜 도넛 스톡 사진을 사러 다니는 데 썼어요.
5장
베타 테스트
앱의 기본 버전이 돌아가기 시작하자, 사이트에서 가장 많이 달리는 사람들에게 초대장을 보냈어요. 러닝을 백 건 넘게 남긴 분들이요. 계정에 수천 건씩 쌓아 둔 사람이 꽤 많다는 걸 보고 놀랐고 감탄했어요.
저도 달리기를 좋아했지만 그분들 수준에는 한참 못 미쳤어요. 이걸 좋은 제품으로 만들려면 그분들의 피드백과 제안이 꼭 필요했죠.
처음에는 그냥 손으로 이메일을 보냈어요. 사람들이 버그나 제안을 답장으로 보내 주면 저는 다들 무슨 말을 했는지 어떻게든 정리해 두려고 했고요.
그러다 누군가 Facebook 그룹을 만들어 보라고 했어요. 다른 베타 테스트에서 해 봤는데 정말 유용했다면서요. 비공개 그룹을 새로 만들어 주요 테스터 몇 분께 링크를 보냈어요. 그 그룹은 점점 커져서 백 명이 넘었고, 그중 많은 분이 매일 달리며 앱을 쓰고 있었어요.
버그 신고와 제안이 잔뜩 들어온 건 물론이고, 원하는 걸 직접 목업으로 그려 보내는 분들까지 있었어요.
새 기능을 함께 궁리하고, 그룹의 모두에게 내보내고, 실제 콘텐츠로 곧바로 확인할 수 있었어요.
6장
도구 & 요령
Gyroscope에는 이 앱이 나오도록 정말 열심히 일한 훌륭한 팀이 있어요 (고마워요 Mahdi, Eric, Robbie!). 하지만 바깥의 도움도 많이 받았어요. 엔지니어링 시간을 크게 아껴 준, 없어서는 안 될 자료와 제품들을 소개할게요.
React Native
웹을 하던 사람으로서 Javascript와 CSS/Flexbox 같은 레이아웃 시스템을 쓰는 건 아주 직관적이었어요. iPhone 앱을 디자인해 본 적은 있었지만 코드를 직접 써 본 적은 없었거든요. React Native가 없었다면 다른 사람이 개발해 줄 때까지 기다려야 했을 거예요. 이런 사이드 프로젝트는 아마 시작조차 못 했겠죠.
Brent Vatne은 우리 초기 베타 테스터 중 한 명이자 React Native 기여자이기도 했어요. 막히거나 문서에 아직 없는 걸 물어볼 때 정말 많이 도와줬어요. 고마워요 Brent!
우리가 시작한 뒤로 React는 많이 좋아졌어요. 새 버전이 나올 때마다, 0.3쯤부터 출시할 무렵의 0.12까지, 성능이 올라가고 우리가 씨름하던 문제들이 고쳐졌어요.
아직 손볼 데가 있지만(애니메이션 성능이 더 좋았으면 해요) 아주 빠르게 나아지고 있어요. 적어도 우리처럼 아주 단순한 앱에서는 제 몫을 해냈고, 다른 방법보다 훨씬 빠르게 움직일 수 있게 해 줬어요.
React Native가 네트워크로 해 주는 라이브 리로딩 덕분에 새 아이디어를 빠르게 굴리거나 미세한 조정을 몇 분 만에 할 수 있었어요. 이제는 다시 컴파일해 놓고 결과를 기다리는 건 상상도 안 돼요.
Mapbox
Mapbox는훌륭한 지도 도구를 만들어요. 우리 사이트 곳곳에서 쓰고 있죠. 에디터에서 스타일과 색을 마음대로 바꿀 수 있어요. 이걸로 여러 스타일을 만들었는데, 어둡고 간결한 이 타일셋도 그중 하나예요.
처음에는 Mapbox의 iOS GL 구현을 만져 봤는데, 사실 사람들이 지도를 끌거나 확대하게 하고 싶지는 않다는 걸 알게 됐어요. 단순하게 가려고 웹뷰로 기존 웹 구현을 그대로 쓰기로 했죠. 몇 달을 들여 테스트하고 다듬은 코드를 그대로 살릴 수 있었어요.
Imgix
우리 앱의 독특한 기능 중 하나는 사진에 따라 카드 스타일이 바뀌는 거예요. Imgix는색 팔레트를 분석하는 걸 도와줘요. 덕분에 글자와 다른 요소를 어울리는 색, 보색으로 맞출 수 있어요.
이미지를 또렷하게 만들거나 흐리게 처리하는 특수 효과에도 Imgix를 써요. 사진을 클라우드로 처리한다는 건 처음에 준비 시간이 조금 든다는 뜻이에요. 폰에서 전부 처리하는 대신 사용자가 사진을 올려야 하고, 올린 뒤 처리된 사진을 다시 받는 데 1분쯤 걸리기도 하죠. 하지만 아껴 주는 시간과 덤으로 얻는 기능을 생각하면 그만한 값어치가 있었어요.
Twitter의 Fabric
우리는 Fabric/Crashlytics를 써서 크래시를 추적하기 시작했어요. 앱 초기에는 크래시가 정말 많았거든요. 시간이 지나면서 크래시를 다 잡았는데, 그 뒤에도 저는 사용 통계를 보려고 그 대시보드를 계속 열고 있더라고요.
분석 도구를 따로 붙일 생각이었는데, 알고 보니 필요한 건 거의 다 그 대시보드에 있었어요. 제가 제일 좋아한 건 지금 접속 중인 사용자였지만, 월간 활성 사용자(MAU), DAU/MAU 비율, 리텐션 같은 다른 수치도 정말 많은 걸 알려 줬어요.
베타 기간 내내 앱을 손볼 때마다 세션당 시간, 리텐션 같은 것이 실제로 달라지는 게 보였어요. Parse로 푸시 알림을 넣은 뒤로는 다시 돌아오는 비율이 크게 올랐고, 사람들이 알맞은 때에 다시 오게 됐어요.
Parse
앱의 초기 버전에서는 사람들이 직접 앱을 열어 최신 러닝이 들어왔는지 확인해야 했어요. 그러다 Parse를 써서 새 러닝에 푸시 알림을 보내기 시작하자, 리텐션이 껑충 뛰었어요.
7장
도넛 77개
어느 날 Instagram에서 우리를 언급한 글들을 훑어보고 있었어요. 노을 사진이 몇 장 있었는데, 그러다 도넛 77개어치를 달린 것 같은 사람이 눈에 들어왔어요.
칼로리 계산에 버그가 있거나, 누가 가짜 데이터를 올린 게 분명하다고 생각했죠. 자전거를 러닝으로 잘못 표시한 걸까요?
Nate가 말한 “Fat Dog”을 눌러 보고 검색해 봤어요. 알고 보니 Canada에서 열리는 120마일 울트라마라톤이었어요 . 세계에서 가장 힘든 대회 중 하나로 꼽힌다더군요. 우와!
그의 글을 베타 테스터 그룹에 공유했어요. Nate의 굉장한 러닝을 보고 나니, 이런 특별한 러닝을 모두가 볼 수 있게 소개하는 방법이 있으면 좋겠다는 생각이 들었어요.
그래서 앱 사이드바에 기능을 두 가지 추가했어요. 소개된 러닝의 피드, 그리고 최근에 달린 친구들의 목록이에요.
Nate의 기록은 아직 깨지지 않았어요. 77개는 여전히 Gyroscope에 기록된 도넛의 최고 개수예요. 다만 이 프로젝트를 시작한 뒤로, 사람을 절대 얕보면 안 된다는 걸 배웠어요. 다음 버전에서는 혹시 모르니 세 자릿수까지 지원할 거예요.
11장
다음은 무엇일까요?
이 앱을 App Store에 내놨고, 많은 분이 자기 삶을 기록하고 나누는 데 쓰고 있어요.
Tatiana는 걸음 수를 전부 기록하고 공유하면서 40파운드 가까이 뺐어요.
Dan Grant는 심장마비를 겪은 뒤 회복하고 건강을 지키려고 England 곳곳을 자전거로 달리고 있어요.
Running에서 배운 것을 살려 새 Gyroscope 앱을 만들었어요. 여러분 삶의 온전한 이야기를 보여 주는 앱이에요. 이것도 React Native로 만들었어요. 어떻게 만들었는지 읽어 보거나 아니면 App Store에서 앱을 받아 보세요.