React Native로 Gyroscope 앱을 만들다
iPhone 앱을 만들면서 20파운드를 뺀 이야기
얼마 전 새 iPhone 앱 Health Tracking by Gyroscope를 내놓았어요. HealthKit 데이터를 Gyroscope로 동기화하고, 내 삶의 모든 것을 한눈에 볼 수 있는 대시보드를 주는 앱이에요.
새 앱을 시험하고 다듬는 동안 저는 20파운드 넘게 빠졌어요. 2년 넘게 데이터를 기록하고 동기화해 왔지만, 내 데이터를 실시간으로 보게 된 뒤에야 비로소 행동을 바꾸고 하루하루 더 건강해질 수 있었어요. 정량화된 자아가 꿈꾸던 바로 그것이죠.
우리 목표는 사람들이 자기 데이터로 실제 목표를 이루도록 돕는 앱을 만드는 것이었어요. 체중을 줄이고, 더 생산적으로 지내고, 중요한 순간을 나누는 것 같은 목표요.
이 야심찬 목표를 이룬 앱은 아직 아무도 만들지 않았지만, 다른 경험들 속에 이미 훌륭한 디자인 요소들이 있어서 좋은 출발점이 됐어요.
영감
Feltron 연간 리포트
지난 10년 동안 Nicholas Felton은 자기 삶에 대한 아름다운 연간 리포트를 만들었어요. 한 해 내내 데이터를 꼼꼼히 기록한 다음 여러 주제로 분석하고 디자인했죠. 지난 해의 리포트는 feltron.com 이나 SF MOMA에서 볼 수 있어요.
그 리포트는 다른 사람의 삶을 들여다보는 매혹적인 창이었어요. 우리에게도 비슷한 데이터가 매일 자동으로 들어오고 있었고, 저 자신에 대해 어떤 리포트를 얻을 수 있을지 정말 궁금했어요. 재미로도 그렇고, 유용한 패턴을 찾아 건강을 좋게 만드는 쪽으로도요.
웹 분석
일할 때 저는 여러 대시보드와 서비스에 매일 기대요. 아주 중요하거나 돈을 버는 일이라면, 그걸 이해하고 최적화하도록 돕는 대시보드를 만드는 회사가 수십 곳은 있죠.
우리 서버는 의도대로 돌아가는지 확인하고 문제가 생기면 바로 알려 주도록 잘 계측되어 있어요. 그리 멀지 않은 어느 날엔 여러분의 몸에도 비슷한 대시보드가 생길 거예요.
Google Analytics나 Fabric 같은 다른 분석 도구는 트래픽을 비롯한 복잡한 지표를 이해하도록 도와줘요. 큰 숫자와 스파크라인, 눈에 띄게 표시한 이상치 같은 디자인 요소 덕분에 많은 데이터를 빠르게 읽어 낼 수 있어요.
비디오 게임
비디오 게임은 분석을 훨씬 재미있게 쓰는데, 레벨과 체력, 경험치 같은 속성을 가진 가상의 캐릭터가 자주 등장하죠.
제대로 보여 주기만 하면, 내가 어떤 상태인지 이해하고 무엇에 집중할지 정하는 아주 재미있고 직관적인 방법이 돼요. 살아남기, 레벨업하기, 체력 물약 쓰기 같은 것들이요.
사람들은 이 가상의 숫자를 올리는 데 수백 시간을 쓰지만, 현실의 삶에는 그런 게 없어요. 아직은요…
코드명 Magneto
우리 프로젝트에는 모두 X-Men 캐릭터의 이름을 붙이는데, 이 앱에는 "Magneto"라는 이름이 갔어요.
2015년 초에 Facebook이 React Native라는 멋진 새 기술을 내놨어요. React를 좋아하던 Eric이 간단한 React Native 프로젝트로 실험을 시작해서, 우리 API에서 실시간 데이터를 가져와 화면에 띄웠어요.
앱은 XCode로 돌아갔지만 애플리케이션 코드는 대부분 JavaScript라서 Sublime Text 같은 아무 텍스트 편집기로도 고칠 수 있었어요. 몇 시간 만에 저는 화면의 요소를 고치고 Flexbox/CSS 같은 문법 으로 스타일을 줄 수 있었어요. 마법 같았죠.
웨어러블
비슷한 시기에 Apple Watch가 나왔고, 기대와 혼란이 함께 있었어요. 사람들은 대개 Watch의 앱과 알림을 이야기했지만, 우리가 가장 설렜던 건 건강 기능이었어요.
차기 시작하자 Watch는 백그라운드에서 제 심박수와 걸음 수를 기록했어요. 저는 그걸 제 건강에서 중요한 다른 데이터와 합치고 싶었어요. Fitbit 체중계에서 오는 체중과 체지방, Spotify에서 들은 음악, 매일 일한 시간 같은 것들이요.
Health 앱은 모두의 휴대폰에 깔려 있었고 걸음 수 같은 기본 데이터를 재고 있었어요. 제가 하고 싶었던 간단한 일이 몇 가지 있었는데, 기존 Health 앱으로는 불가능하거나 아주 번거로웠어요.
- 최근 운동의 심박수 그래프 보기
- 스크롤하거나 누르지 않고 오늘 정보를 한눈에 보기
- 오늘만이 아니라 어제 무엇을 했는지 쉽게 보기
초기 사용자였다가 정규 엔지니어로 막 합류한 Mahdi가 이 HealthKit 동기화 기능을 Objective-C로 만들기 시작했어요.
러닝 앱
Mahdi가 HealthKit 동기화를 만드는 동안, 저는 여러 필터와 레이아웃으로 달리기 기록을 꾸며서 공유할 수 있는 또 다른 간단한 앱을 만들기 시작했어요.
그 러닝 앱을 내놓자 수천 명이 자기 운동을 창의적인 이미지로 올리기 시작했어요. 그런데 자기는 달리기를 하지 않아서 운동 지도를 즐기거나 칼로리가 도넛 몇 개인지 볼 수 없다는 불만도 많이 들어왔죠.
운동선수만이 아니라 모든 Gyroscope 사용자에게 그 창의성과 동기를 그대로 전할 방법을 찾아야 했어요. 우리가 찾은 답은 누구나 하는 것들로 비슷한 경험을 만드는 것이었어요. 음악, 심장 박동, 수면, 컴퓨터 사용, 걸음, 이동 같은 것들이요.
초기 앱 목업 몇 가지
모든 정보를 앱 안에 압축해 넣으려고 모바일 대시보드를 디자인하기 시작했어요. 자세히 보는 화면은 전부 정사각형 카드로 만들고, 그 아래에 바꿀 수 있는 옵션을 여럿 두기로 했어요.
공유도 화면 아래쪽에서 더 눈에 띄게 넓혔어요. 가장 큰 성취를 Instagram에 올리거나 친구들과 나누는 것이 이 경험의 큰 부분이 될 테니까요.
이 화면들은 데이터가 곧 내용이라, 처음 목업은 대략적인 출발점밖에 되지 못했어요. 최종 디자인 대부분은 우리 서버에서 온 실제 데이터와 그래프 위에서 진짜 앱을 만들어 가며 잡혔어요.
주간 리포트
일일 카드는 데이터 하나에 집중했지만, 주간 리포트에는 훨씬 많은 정보가 담겨서 전체를 보여 주고 패턴을 짚어 줄 수 있었어요.
한편 웹사이트에서는…
Fitbit 연동과 HealthKit 동기화 같은 새 기능 덕분에 심박수와 걸음 수, 혈압, 체지방률처럼 새로운 건강 데이터가 많이 들어오고 있었어요. 그런데 원래 웹사이트는 위치와 사진에 더 초점이 맞춰져 있었죠. 사람들이 새 데이터를 쉽게 볼 수 있도록 웹 경험을 손봐야 했고, 제가 정말 좋아하는 디자이너 Shane Mielke와 함께 새 웹 프로필 테마 작업을 시작했어요.
이 새 테마는 내 모든 기록을 담은 더 진지한 대시보드를 목표로 했어요. Shane이 목업을 열두 개쯤 만들었고, 그러다 이 안에서 우리 마음이 확 움직였죠.
전환점 중 하나는 내용을 사람 몸의 부위별로 직관적인 영역으로 나눈 것이었어요. 처음에는 이 비유가 통할지 확신이 없었는데, 우리가 가진 데이터에 꽤 잘 맞았고 앞으로 더 넣을 자리도 생겼어요.
사람 몸의 3D 렌더(Shane이 간단한 남성용과 여성용을 만들었어요)를 두고, 몸 자체를 길잡이 구조로 쓰면서 열린 영역을 밝게 강조할 수 있었어요.
수면과 생산성, 컴퓨터 사용 시간 같은 정신 건강 기록은 뇌 영역으로 갔어요. 나중에는 기분이나 명상 같은 것도 넣을 수 있겠죠.
심박수와 혈압 같은 심혈관 기록은 가슴 쪽에 모으고, 걸음과 달리기 같은 운동 활동은 다리 쪽에 두었어요.
각 영역은 나중에 더 채워 넣을 수 있는 중요한 개념이었어요. 예를 들어 음식 기록을 나중에 넣더라도 전체를 다시 디자인할 필요 없이 몸통 영역에 들어가면 되니까요.
이 구조가 뜻밖에 잘 맞아서, 앱에서도 이어 가 보기로 했어요. Shane과 저는 모바일 홈 화면을 이리저리 만져 보면서 각 영역의 카드를 화면에 눌러 담았어요.
여기까지의 목업은 대부분 가상의 데이터로 만든 것이었어요. 큰 글씨로 읽기 쉬운 제목과 데이터를 보여 주는 그래픽이 대부분이었죠. 다음 단계는 실제로 만들어서, 제 진짜 데이터로 현실에서 얼마나 쓸모 있는지 보는 것이었어요.
상태를 색으로 알려 주기
이 대시보드의 목표는 한 번 흘끗 보고도 필요한 정보를 이해하게 만드는 것이었어요. 큰 숫자와 색으로 구분한 카드가 오늘 그 영역이 "좋았는지"를 빠르게 알려 주죠.
예를 들어 걸음 수가 몇천 보도 안 되면 피트니스 카드가 빨강이나 주황이 되어 더 움직이라고 일깨워요. 목표를 채웠거나 체육관에서 막 돌아왔다면 초록이 되고, 다른 일로 넘어가도 되고요. 한 영역만 초록으로 만드는 건 그리 어렵지 않지만, 진짜 어려움은 모든 영역의 균형을 맞추는 데 있었어요.
시작 화면
첫 화면은 미래적이면서도 사람 냄새가 나기를 바랐어요. 몇 년 전 일본에서 찍은 이 사진이 딱 그 감정을 담고 있는 것 같았어요.
그 위에 Gyroscope 로고와 글자를 얹으니 첫 로그인 화면이 됐어요.
베타 테스트
9월 중순쯤에는 사람들이 써 볼 수 있는 앱 시제품이 나왔어요. 우리 스스로 써 보긴 했지만, 우리에게만 맞춘 게 아니라 세계 수백만 명에게도 똑같이 쓸모 있게 만드는 것이 큰 숙제였어요.
베타 프로그램의 시작으로 친구들과 Pro 사용자 몇 분에게 보내기로 했어요. 소식을 알리고 피드백을 쉽게 받으려고 Facebook 그룹도 만들었고요.
업데이트를 올릴 때마다 사용자들이 피드백을 보내 주고 버그를 빠르게 찾아 줬어요. 이 모든 게 몇 시간, 몇 분 안에 일어나서 빠르게 다듬을 수 있었어요. 비공개 베타라 App Store 심사를 기다리지 않고 새 버전을 거의 바로 내보낼 수 있었거든요.
그전까지는 우리 짐작과 몇 사람의 피드백으로 디자인해 왔는데, 이제는 사용자들의 기록과 의견을 더 많이 참고해서 결정을 내릴 수 있었어요.
초기 베타 테스터들의 경험을 듣는 건 정말 신나는 일이었어요.
"Gyroscope는 내 삶을 기록하는 일을 쉽게 만들어 주는 유일한 제품이에요. 한 번 보면 내가 잘하고 있는 것과 더 애써야 할 것을 알 수 있어요. 앱을 확인하지 않고 지나가는 날이 없어요."
– Brandon Littell
테스트는 단순히 충돌과 버그를 찾는 것보다 훨씬 협업에 가까웠어요. 요청과 제안을 해 주신 분이 많았고, 덕분에 사람들이 자주 쓸 기능에 집중할 수 있었어요.
내 삶을 지도로
우리가 가진 데이터 중 가장 흥미로운 것 하나가 Swarm이나 Moves로 기록되는 위치예요. 달리기와 자전거를 비롯한 활동도 지도에 점을 더해 주고요.
우리는 웹사이트에서 Mapbox를 쓰는 게 좋아서 앱에도 같은 지도 기술을 넣기로 했어요. 처음에는 확대하고 움직일 수 있는 지도로 실험했지만, 곧 경험을 단순하게 만들어 지도를 고정된 배경으로 쓰기로 했어요. 필요한 것이 다 보이도록 가장 좋은 확대 수준과 구도를 우리가 계산해서 잡아 주는 거죠.
Moves로 이동을 기록한 분은 자기가 다닌 모든 곳의 히트맵과 시간을 어떻게 썼는지 볼 수 있었어요. 건강 관점에서는 걷는 시간과 차를 타는 시간을 비교해 보는 게 흥미로워요. 저는 그 뒤로 더 일찍 나서서 미팅에 걸어가기 시작했어요.
어떤 화면은 운동에 대한 통찰을 주고, 어떤 화면은 이동이나 어떤 식당에 갔는지를 보여 주는 데 가까웠어요.
푸시 알림
사람들의 삶을 편하게 만드는 방법 중 하나는 매일 간단한 푸시 알림으로 몇 가지 통찰을 보내는 것이었어요.
보내는 시간과 문장을 두고 이야기와 실험을 많이 했어요. 처음에는 하루를 정리하는 뜻으로 저녁에 보내고 싶었어요. 그런데 데이터가 들어오는 데 시간이 걸릴 때가 있어서 불완전한 내용을 알릴 위험이 있었죠. 그래서 다음 날 아침 9시로 정했어요.
우리의 우선순위는 돈을 벌거나 원하는 지표를 채우는 것을 조금 포기하더라도 사용자의 삶을 편하게 만드는 거예요. 궁금하게 만들어서 앱을 열게 하는 대신, 필요한 정보를 다 담아서 앱을 열지 않고도 도움이 되게 했어요.
"Gyroscope는 꽤 오래전부터 썼는데, 딸이 태어나고 나서야 제게 정말 큰 의미가 됐어요. 몸을 관리하는 데 필요한 데이터가 정리되는 방식과 아주 자세한 분석이 마음에 들어요. 게다가 늘 뭔가 새로 좋아지고 있다는 느낌이 들어요. 팀이 사용자를 정말 아끼는 게 보여요.
전반적인 건강을 한눈에 보는 것 말고도, 생산성 수준을 지켜보면서 정신이 얼마나 건강한지도 살펴요. 저는 제 스타트업 Iris에서 일주일에 평균 38~42시간을 일하고 동시에 전업 엄마예요. Gyroscope는 제가 그 시간을 관리해서 제대로 된 "균형"을 잡도록 도와줬고, 그게 정말 고마워요. 결과요? 엄청난 생산성이요. 예전에는 40시간 중 상당 부분을 흘려보냈어요. 지금은요? 아기와 함께라 하루가 어떻게 흘러갈지 알 수 없으니 시간을 정말 알뜰하게 써요…"
– Cat Noone
월간 리포트
한 달에 한 번 새 월간 리포트가 나오는데, 그때는 진행 상황을 돌아보고 스스로를 더 들여다보는 시간으로 쓰고 싶었어요. 이 데이터로 답하고 싶은 간단한 질문이 몇 가지 있었어요.
충분히 움직였나요?
충분히 잤나요?
얼마나 생산적이었나요?
"대학생에게는 건강한 균형을 지키는 게 성공의 열쇠예요. Gyroscope는 제 삶의 데이터를 눈으로 보여 줘서 수면과 운동, 생산성의 균형을 잡게 해 줘요. 아름다운 시각화에 정말 유용한 앱이에요!"
– Victoria Spiegel
체중 감량
1년 전 Gyroscope를 시작한 뒤로 저는 조금씩 체중이 많이 늘고 있었어요. 큰 미스터리는 아니었어요. 스트레스와 부족한 수면, 밤늦게까지 일하며 군것질하는 날들이 겹치면서, 그나마 하던 적은 운동을 다 지워 버렸던 거죠.
이 앱에 걸었던 목표 중 하나는 제가 체중을 줄이도록 돕는 것이었어요. 매일 아침 Fitbit Aria 체중계에 올라가 체중과 체지방을 확인해요.
하루 동안 Gyroscope가 그 숫자를 계속 일깨워 줬어요. 저 자신에게 솔직해지도록, 최근 기록을 맥락과 함께 보여 주는 레이아웃도 몇 개 만들었죠. 빨리 알아차리고 스스로 고치는 것이 핵심이었어요.
그전까지는 주간 리포트가 나오거나 가끔 사이트를 들여다볼 때까지 그 생각을 잊고 지내기 쉬웠어요. 그사이 건강하지 않은 결정을 많이 내렸죠. 걸어갈 거리를 Uber로 가고, 디저트를 시키고, 커피에 쿠키를 하나 더 얹고요. 그런 것들이 쌓였어요. 늘 인식하고 있으면 매일 맛있는 단것을 먹고 싶은 충동에 맞서는 데 도움이 됐어요.
여섯 달 뒤 앱을 내놓기 직전에, 체중이 20파운드쯤 줄고 체지방이 5% 빠진 걸 보고 정말 기뻤어요. 특별히 다르게 한 건 없었어요. 매일의 사소한 변화와 결정이 쌓여서 훨씬 건강해진 거예요. 어디든 걸어 다니려고 하다 보니 하루 걸음 수가 늘었고, 앱을 열어 그 변화를 볼 때마다 이 흐름을 이어 가고 싶어졌어요.
다른 베타 테스터 여러분도 비슷한 이야기를 들려줬어요. 아직 더하고 다듬고 싶은 것이 많지만, 모두가 자기 삶을 좋게 만드는 데 쓸 수 있도록 App Store에 내놓았어요.