April Zero를 만들다: 2편

April Zero를 만들다

2편

제 디자인 과정은 매번 달라요.

예를 들어 theory11을 할 때는 LA 거리에서 낯선 사람들에게 마술을 보여 주며 마음가짐을 잡았어요. 그리고 Quizlet 스타일가이드는 Hawaii 상공에서 스카이다이빙을 하다가, 자유낙하 중에 파란 바다와 황갈색 모래, 하얀 파도를 보면서 떠올랐어요. 예전 사이트의 색 조합은 빨간 Ducati에서 빌려 왔고요.

그리고 이 사이트를 만든 과정은 훨씬 더 빙 돌아갔어요. 세계 곳곳을 돌아다니고, 새 기기를 써 보고, 제 몸으로 실험을 했죠. 물론 전부 연구 & 개발을 위해서요.

몇 달 동안 여러 앱과 하드웨어를 시험해 본 끝에, 최종 스택을 정했어요. 가장 자동으로 감지되고 시간은 가장 적게 드는 조합이었어요.

• Moves iPhone 앱: 위치 데이터
• Cardiio iPhone 앱: 심박수
• Instagram: 사진
• Runkeeper iPhone 앱 ‐ 러닝 기록
• Withings 무선 체중계: 매일의 체중
• Withings 혈압계: 심박수와 혈압
• Bodymetrix 초음파: 체지방률
• 매달 받는 혈액 검사: 중성지방과 영양 수치

2014년 5월: Thailand

저는 Dustin Curtis와 함께 Asia를 여행하면서 사이트의 모바일 버전 아이디어를 스케치하고 있었어요. 모바일이라는 맥락을 살릴 수 있는 것, 이동 중에도 매일 쓸모 있다고 느낄 만한 것을 떠올려 보려고 했죠.

한 번 둘러보고 잊히는 것은 만들고 싶지 않았어요. 저는 그것이 끊임없이 변하고 실시간으로 갱신되면서, 그때그때 가장 중요한 것을 짚어 주기를 바랐어요. 새로운 장소, 심박수가 높아졌다는 알림, 아니면 그저 건강 수준을 한눈에 보여 주는 그림 같은 것이요.

저는 이 모든 데이터가 늘 곁에 있을 아주 가까운 미래를 겨냥해 디자인하고 싶었어요. 지금의 한계는 좀 무시하고요. 지금 이 숫자들은 계속 갱신되지 않아요. 체중은 하루에 한 번쯤, 혈액 수치는 한 달에 한 번, 심박수는 제가 잴 때만, 하루에 몇 번이죠.

몇 년 안에, 어쩌면 그보다 빨리 이 데이터를 훨씬 자동적이고 연속적으로 만들어 줄 새 하드웨어가 나올 거라고 봐요. Apple이나 다른 큰 회사가 내년 안에 못 해낸다면, Kickstarter의 누군가가 해낼 거예요.

제가 설렜던 모바일 경험 하나는 제 몸 상태를 전부 겹쳐 보여 주는 증강현실 화면이었어요. 카메라 화면을 흐리게 해서 폰이 투명해 보이게 만들고, 정보가 그 위 여러 층에 떠 있는 거죠. 브라우저에서는 불가능하다는 걸 알게 됐지만, 언젠가 앱으로 다시 꺼내 볼지도 몰라요.

폰에서 모든 정보를 한눈에 볼 수 있다는 게 신났고, 그래서 계속 모든 걸 하나의 직관적인 대시보드에 담아 보려고 했어요.

다이빙 학교

저는 Thailand 동쪽 해안의 작은 섬 Koh Tao에 닿았어요. 스쿠버 다이빙으로 유명한 곳이라 자격증을 따기로 했죠.

낮에는 다이빙 학교에 가고, 밤에는 새 모바일 목업을 만들었어요. 저는 Macbook의 Photoshop을 iPhone의 Skala Preview에 연결해서 각 디자인을 실제 맥락에서 봤어요. 폰을 들고 페이지를 하나씩 열어 둔 채 돌아다니며 느낌이 어떤지 가늠해 봤죠.

덕분에 크기나 가독성 같은 디자인 세부를 많이 정할 수 있었어요. “글씨를 얼마나 작게 해도 될까?” “야외에서 읽으려면 대비가 얼마나 있어야 하지?” “한 화면에 정보를 얼마나 넣을 수 있을까?”

맨 위에서 은은하게 도는 고리들은 데스크톱 버전을 떠올리게 하면서 개성을 더해 줬어요. 처음에는 너무 강해서, 거의 눈에 띄지 않을 때까지 투명도와 색을 계속 낮췄어요.

저는 폰에 스크린숏을 담아 다니며 주변 사람들에게 보여 줬어요.

“이 페이지가 뭘 말하려는 것 같아요?” “어디를 눌러 볼 것 같아요?”

처음에 사람들은 페이지에 빼곡히 들어찬 것들을 이해하기 힘들어했어요. Dan은 어느 열을 먼저 봐야 할지 몰랐고요. Dustin은 다 너무 작다고 투덜댔죠. 배에 탄 나머지 사람들은 아마 제가 왜 노트북을 들고 왔는지 궁금했을 거예요.

모든 걸 한 페이지에 어떻게든 욱여넣겠다는 생각은 통하지 않는다는 걸 깨닫고, 가장 중요한 수치만 남기고 덜어 내기 시작했어요.

Bangkok에 있을 때는 값싼 전신 MRI를 찍어 보려고 병원 몇 군데를 다녔는데, 너무 비쌌어요. 몇천 달러가 넘었죠. 그런데 그러는 사이에 제 몸을 의학적으로 통째로 보는 그림에 푹 빠져 버려서, 더 임상적이고 과학적인 느낌을 주려고 그걸 페이지에 넣기로 했어요. 우선은 평범한 사람의 스톡 이미지를 쓰고, 나중에 제 진짜 이미지로 바꿀 생각이었죠.

인체 단면의 느낌이 정말 마음에 들었어요. 지도처럼 무난한 것과 견주면 더욱요. 페이지를 슬쩍 보기만 해도 무슨 일이 벌어지는지 감이 왔고, 막대와 숫자를 가까이 들여다보면 데이터가 바로 보였죠. 좋은 애니메이션까지 붙이면 더 나아질 것 같았어요. 저는 이게 살아 있는 사람과 실시간으로 이어진 것이지, 지루한 의료 그래프 묶음이 아니라는 걸 분명히 하고 싶었어요.많은 앱이 빠지는 함정, 그러니까 비슷비슷한 파이 & 도넛 그래프를 수십 개 늘어놓는 일은 피해야 했어요.

저는 의료 측정값을 잔뜩 늘어놓는 게 아니라 이야기를 들려주려 하고 있었어요.

이쯤에서 디자인에 신이 나기 시작했어요. 심박수는 실시간 데이터가 들어오면 특히 근사할 것 같았죠. MRI 애니메이션이 가능할지는 확신이 없었지만, 데스크톱 경험과 나란히 놓아도 되겠다 싶은 첫 모바일 디자인이었어요.

코드로 옮길 준비가 됐어요. Malaysia로 남쪽으로 내려가면서 며칠 동안 애니메이션을 만들어 봤어요.

며칠 실험한 끝에 MRI의 스캔과 발광을 CSS로 흉내 내는 법을 알아냈어요. 600px 언저리에 브레이크포인트를 넣고, 브라우저에서 모바일 레이아웃을 만들기 시작했죠. 어느 정도 되자 컴퓨터의 IP 주소로 폰에서 불러와 iPhone 하드웨어에 맞춰 직접 시험하고 다듬었어요.

이렇게 모바일을 드디어 풀어냈으니, 이제 Explorer의 데스크톱 경험을 마무리하러 돌아갈 때였어요.

이전 버전은 아름다웠지만 정보가 너무 넘쳤어요. 일상 활동을 더 압축적이고 이해하기 쉽게 보여 줄 방법을 찾아야 했어요. 해답은 내비게이션의 층을 더 두는 것, 그러니까 그날의 세부를 요청하기 전까지는 각 타임라인을 더 단순한 형태로 줄여 두는 것이라고 짐작했죠.

저는 배가 고프면 생각이 잘 안 돼요. 그래서 먼저 스시로 배를 채우고 최종 디자인을 정하기로 했어요.

2014년 6월: Japan

Tsukiji에서의 아침

다음 날 아침 Tokyo에 내려서 세계에서 가장 신선한 생선이 모이는 Tsukiji 수산시장으로 갔어요.

울퉁불퉁한 배와 느린 기차로 한 달을 다니다가, 정확하고 효율적인 일본 지하철로 이동하니 정말 좋았어요. 제 사이트도 그런 느낌이면 좋겠다고 생각했어요. 여기저기 눌러 새로운 곳에 닿아도 아무 문제 없을 거라는 믿음이 드는 느낌이요. 빠르고 깔끔하게. 모든 타이밍이 밀리초까지 완벽하게.

한 시간 뒤, 저는 영감을 얻었고 배도 부르고 사이트 디자인을 끝낼 준비가 되어 있었어요.

호텔에 작은 책상을 하나 마련하고 일을 시작했어요. 작은 화면에서는 절대 통하지 않을 이상한 걸 만들지 않으려고, 모바일을 먼저 풀고 거기서 키워 가기로 했죠.

지난 한 달 동안 저는 모바일에서 시간이 어느 방향으로 흘러야 하는지를 두고 고민했어요. 최신 활동이 위에서 들어와야 할까요? Facebook이나 Twitter 같은 대부분의 피드가 그런 방식이었죠. 아니면 달력처럼 첫날부터 시간순으로 놓아야 할까요?

문제는 정답이 하나가 아니라는 것이었어요. 이건 제 활동의 실시간 피드이기도 하고, 제가 지나온 날들의 달력이기도 했으니까요. 둘은 정반대의 디자인을 요구했지만, 저는 하나만 고를 수 있었죠.

실제 데이터로 양쪽을 잔뜩 만들어 본 끝에, 제가 더 자주 시간순을 기대하고 있고 그렇지 않으면 페이지를 자주 잘못 읽는다는 걸 알게 됐어요.

결국 각 월 페이지는 첫날 자정에서 시작하기로 했어요. 최신 내용이 아래에, 오래된 것이 위에 오도록요.

저는 다닐 때 Google Maps를 쓰고 있었는데, 그 모바일 디자인에서 영감을 받았어요. 경로 타임라인이 늘 깔끔하고 믿음직하거든요.

비슷한 느낌을 내려면 여백에 욱여넣으려던 데이터를 많이 덜어 내야 했어요. 모바일에서는 쓰기 쉬움과 단순함이 더 중요했어요. 모든 정보를 한 화면에서 볼 수 있게 하는 것보다요.

일출과 일몰, 그날의 사진 같은 걸 보여 줄 영리한 방법을 궁리하고 있었어요. 좋은 데이터였지만 복잡함이 너무 늘었죠. 새 버전은 훨씬 단순했어요. 제가 다녀온 장소의 목록뿐이었죠.

그날의 활동으로 내용을 갱신하고 나머지는 거의 다 지웠어요. 정보는 많지 않았지만 훨씬 깔끔해지기 시작했어요. 드디어 폰에서 편하게 보고 남들과 나눌 수 있는 것이 되었죠.

그날 늦게, Apple이 HealthKit을 발표했어요. WWDC에서요. 기대만큼 대단하지는 않았어요. 혁신적인 하드웨어가 함께 나오지는 않았으니까요. 하지만 이제 공식적으로 시계가 돌기 시작했죠.

그들의 디자인이 임상적이고 의학적이라는 점 덕분에 Explorer가 얼마나 중요한지도 깨달았어요. 처음 생각했던 것보다 훨씬요. 위치와 여행 데이터는 맥락과 의미를 만들어 줘요. 그게 없으면 서로 이어지지 않은 데이터 조각들, 그저 잡학에 지나지 않았을 것들에요.

이걸 만들고 세상에 내놓으러 집에 돌아가기까지 Japan에 있을 날이 며칠 남지 않았어요. 어쨌든 진짜 아티스트는 내놓으니까요.

다도

다음 날 아침에는 공원을 길게 달렸어요. 머리를 비우고 영감이 찾아오게 하고 싶었죠. HealthKit 소식을 읽은 뒤라, 운동을 게임처럼 만들거나 알고리즘으로 심장마비를 막는다는 엉뚱한 생각으로 머릿속이 가득했어요.

그러고 나서 전통 일본 다도를 보러 갔어요. 잉어 연못과 초록으로 둘러싸인 아름다운 정원에서 열렸죠. 기모노를 입은 여성이 옆에서 물고기와 놀고 있었어요.

첫 순서는 육각형 나무 받침에 올려 나온 작은 과자였어요. 얼마 전 스케치하던 콘셉트가 떠올랐죠. 육각형은 사각형처럼 서로 겹쳐 담을 수 없어서 거의 포기한 상태였거든요.

각 월 페이지 맨 위에 놓을 상징적인 헤더를 찾아 헤맸지만 소득이 없었어요. 이전 버전의 원들은 깔끔했지만 기억에 남거나 설레지는 않았죠. 다도 경험을 하고 나니 육각형 아이디어를 다시 꺼내 볼 때가 됐다는 생각이 들었어요.

시각적으로 흥미로우면서도 풍부한 정보를 담을 수 있다는 점이 마음에 들었어요. 아이디어 자체가 콘텐츠 중심이라, 실제 데이터로 바로 만들기 시작하는 편이 나았어요. 동적인 아이콘 수백 개가 들어간 정확한 목업을 그리려 애쓰는 것보다요.

이게 처음 코드로 옮긴 버전이에요. 특별히 예쁘지는 않았지만, 실제 콘텐츠가 들어갔고 앞으로 만지작거릴 요소들의 기본 배치를 잡아 뒀어요.

각 항목을 육각형으로 만드는 건 간단한 CSS 이미지 마스크였어요. 장소 전체는 좀 더 흥미로운 원근감을 주려고 3D 공간에서 살짝 기울였고요. 가장자리에 옅은 그림자를 둬서 시선이 가운데에 머물게 했어요.

여기서는 Foursquare의 장소 분류가 큰 몫을 했어요. 분류 체계를 만들어 주고, 그걸 나타내는 좋은 아이콘까지 제공해 줬거든요.

장소를 쉽게 구분하려고 색을 입혔더니 달마다의 패턴이 드러났어요. 자연과 공원은 초록, 공항이나 기차역은 청록, 식당과 카페는 대체로 주황, 집이나 호텔은 은은한 회색이에요.

다이빙을 많이 한 달에는 초록이 많았어요. New York에 있을 때는 이탈리아 식당 때문에 빨강이 많았고요. Japan 여행에는 스시 덕분에 분홍이 많았죠.

페이지 위쪽을 디자인하고 코드로 옮기고 나니, 아래 타임라인을 어떻게 채울지 정해야 했어요. 데이터는 다 있었고, 제대로 보여 주기만 하면 됐죠.

Roppongi에서 길을 잃다

다도를 마치고 돌아오는 길에 늦고 있었어요. 기모노를 입은 여성과 일본어를 연습해 보느라 시간 가는 줄 몰랐거든요. 한 시간도 안 남기고 Park Hyatt Tokyo에서 체크아웃해야 했는데, 저는 도시 반대편에 있었어요. Google Maps로는 지하철로 43분이었죠.

Azabujuban역 쪽으로 가는 열차를 타고 출발했어요. “괜찮을 거야.” 스스로에게 말했죠. “보통 5분이면 짐을 싸니까.”

열차에 타고 나서는 Instagram 사진에 붙일 재치 있는 문구를 궁리하느라 정신이 팔렸고, 고개를 들었을 때는 내릴 역이 막 지나가고 있었어요. 이런. 다음 역에서 내렸어요. 바로 Roppongi역이었죠.

돌아가야 할지 더 가야 할지 지도를 노려보면서, 그토록 좋아하던 지하철이 정작 필요할 때 저를 배신했다는 생각에 화가 났어요. 제가 무엇을 보고 있는지 깨닫는 데는 시간이 좀 걸렸죠.

거기엔 장소들이 죽 늘어서 있었어요. 글자가 많은 가느다란 선 위에요. 라벨은 모두 살짝 기울어져 있었고요. 크고 선명한 색의 원들이 구역을 구분해 줬어요. 제가 찾던 게 바로 이거였어요!

타임라인 위에 정보를 놓는 이 방식이 제게 필요했던 마지막 영감이었어요. Explorer 2.0의 디자인을 끝내게 해 준 영감이요. 기울어진 라벨이 겹침 문제를 풀어 줬고, 크고 굵은 원은 좁은 공간에서도 이해하기 쉬웠어요.

페이지의 절반은 그날의 다른 정보를 그리는 데 남겨 두고, 위쪽 장소들로 언제 어디서 일어난 일인지 맥락을 만들고 싶었어요. 남는 공간을 지도로 채우는 것도 만지작거려 봤죠.

하루마다 그리고 싶은 것이 많았어요. 수면, 음식, 이동, 기분, 혈당 같은 것들이요. 우선은 쉽게 구할 수 있고 날마다 가장 많이 달라지는 데이터를 쓰기로 했어요. 이동, GitHub 커밋, 그리고 심박수요.

장소 이름에 색을 입히니 간격을 더 잘 벌리면서도 색깔 아이콘과의 연결이 또렷하게 유지됐어요.

배경에 지도를 두는 것도 해 봤어요. 보기에는 그 풍성한 배경 효과가 정말 마음에 들었죠. 하지만 그 위에 관련 없는 데이터가 놓이니 너무 헷갈렸어요.

지도 대신 Instagram 사진을 흐리게 깔아 봤어요. 그러니 하루하루가 자기만의 흥미로운 배경 위에 데이터를 얹게 됐죠. 아무것도 안 한 날이 많았는데, Github 커밋과 배포 기록이 그 빈틈을 채워 줬어요.

며칠 동안 더디게 나아가고 실험하며, 말 그대로 세계를 돌아다니며 답을 찾던 끝에, 갑자기 모든 것이 맞아떨어졌어요. 마지막 층을 얹은 순간, 이거다 싶었어요.

드디어 디자인 단계가 끝났어요. 이제 만들 차례였죠.

2014년 7월: San Francisco

그때까지 저는 이걸 실제로 어떻게 만들지, 어떤 기술 스택을 쓸지 정하는 걸 미뤄 두고 있었어요. 인프라나 코드에 정신을 뺏기지 않고 디자인과 프런트엔드에만 시간을 다 쓰고 싶었거든요. 프로토타이핑에는 아주 단순한 Jekyll을 계속 쓴 게 빠르게 움직이고 여러 아이디어를 시도하는 데 결정적이었어요. 전부 정적이니 흥미로운 버전을 나중에 참고하려고 손쉽게 챙겨 둘 수 있었고요.

이웃은 Node를 밀고 있었어요. Rails를 써 보라는 사람도 여럿이었죠. 예전에 Django를 써 봤고 좋았어요. 언어가 그렇게 중요하지 않다는 건 알고 있었어요. 하나 골라서 쓰기 시작하면 되는 거였죠.

하루 정도 Ruby on Rails를 만져 봤어요. 추천하는 사람이 많았거든요. 나중에 다른 개발자를 합류시키기에도 든든한 선택 같았고요. 한 시간을 들여 Hello World 예제를 띄우고 & 배포하고 나니, 이건 너무 느리다는 걸 깨달았어요. 새 프레임워크의 속사정을 배우는 게 아니라 만드는 데 시간을 다 써야 했으니까요.

그래서 Python과 Django로 가기로 했어요. 오래전에 분석 스타트업을 만들 때 써 본 적이 있었거든요. Heroku 덕분에 배포와 서버 관리가 제가 익숙하던 AWS보다 훨씬 쉬웠어요. 몇 분 만에 사이트가 살아났고, 몇 시간 만에 빈 템플릿으로 모든 페이지 URL을 연결했어요. 며칠 만에 대부분의 모델이 돌아가면서 여러 API에서 데이터를 가져오고 있었죠. 이제 제대로 불이 붙었어요.

연동하고 싶던 서비스 대부분이 문서가 잘 갖춰진 OAuth 2.0 API를 갖고 있어서, 계정을 잇고 필요한 데이터를 가져오는 게 뜻밖에 쉬웠어요. Heroku 스케줄러에 10분마다 새 데이터를 확인하고 있으면 가져오는 작업을 걸어 뒀어요.

프런트엔드

• SASS
• Compass
• CoffeeScript
• LiveReload
• jQuery
• PJAX
• jQuery Throttle
• D3

사이트는 전역 CSS 파일 하나와 전역 JavaScript 파일 하나를 불러와요. 그 파일들은 작은 SASS와 Coffee 파일 여러 개를 이어 붙여 만들어요. 개발하는 동안 모든 걸 정돈되고 모듈처럼 유지하려고요.

개발할 때는 Mac 앱 LiveReload를 써서 CSS나 JavaScript를 고칠 때마다 사이트를 곧바로 새로 고쳐요. 뭔가 바꿀 때마다 몇 초씩 아껴 주는데, 수천 번을 반복할 때는 정말 큰 도움이 돼요.

백엔드

• Python
• Django
• Postgres
• Memcached
• Heroku

Heroku에는 자기네 스택을 세우는 좋은 튜토리얼이 있어요. 배포는 정말 간단해요. “git push heroku master” 한 줄이면 변경이 바로 반영되죠. 저는 GitHub에는 자주 푸시하고, 배포하고 싶을 때 Heroku에 푸시해요.

한동안은 쿼리가 무거운 페이지의 성능이 걱정이었는데, Memcached가 구세주였어요. 사이트가 워낙 정적이고 & 새 데이터가 들어올 때만 바뀌니까, 거의 모든 템플릿을 캐시해 두고 & 곧바로 내보낼 수 있었어요.

막바지

디자인 과정은 관점을 자주 바꾸고 중간에 끊기는 데서 도움을 받아요. 대화를 나누다가, 또는 길에서 뭔가를 보고 답을 찾을 때가 있거든요.

하지만 개발할 때는 방해받지 않는 날이 며칠쯤 있으면 좋아요. 집중해서 수천 줄의 코드를 머릿속에 담아 두어야 하니까요. 마침 룸메이트 둘 다 일주일간 도시를 비워서 조용하고 평온했어요.

디자인이 정해지고 데이터가 흘러 들어오니, 출시 전에 고쳐야 할 버그와 성능 문제 목록만 길게 남았어요. 이게 세상에 나갈 때까지 방에 틀어박히기로 했죠.

프런트엔드와 백엔드를 오가며 페이지에 실제 데이터를 더 얹고, 다시 정리하고를 반복했어요.

CSS로 무언가를 만들 때면, 저는 먼저 아주 단순한 스타일로 레이아웃부터 잡아요. 목표는 모든 것을 제자리에 놓는 것이지 예쁘게 만드는 게 아니에요. 첫 단계는 백엔드가 필요한 걸 다 내보내는지 확인하는 거예요. 그걸 먼저 끝내 두고 나면 남은 시간은 같은 CSS 파일 안에서만 보낼 수 있거든요. 셀렉터가 제대로 먹는지만 확인하려고 전부 background: red나 background: blue를 줘요. 그다음에 반응형이나 예외 상황을 생각하면서 레이아웃과 배치를 잡고요. 그게 다 정리되면 보통 새 스타일시트를 만들어 디자인 세부를 채우고 보기 좋게 다듬어요.

위쪽 육각형과 같은 색과 아이콘을 쓰니 하루에 어떤 종류의 장소에 갔는지 감을 잡기가 아주 쉬웠어요. 집은 계속 반복되는데 딱히 흥미롭지는 않아서, 다른 장소가 더 두드러지도록 은은하게 만들었어요. 파란 원 대신 흰 원으로요.

이제 라벨은 모두 숨겨져서 각 타임라인이 더 단순하고 가벼워졌어요. 하루를 누르면 펼쳐지면서 더 많은 정보가 나와요.

가장 먼저 넣은 건 이동 데이터였어요. 걷기, 달리기, 자동차 같은 것으로 장소와 장소를 이어 줬죠. 전부 절대 위치로 배치해서 시작 시각과 끝 시각으로 하나하나 그릴 수 있었어요.

흐릿한 Instagram 사진 덕분에 하루하루가 데이터를 보여 줄 더 흥미롭고 다채로운 배경을 갖게 됐어요. 그다음에는 날마다의 실제 심박수 데이터를 넣었고요.

스타일을 조금 입히니 페이지가 하나로 모이기 시작해요. 장소와 장소 사이에 호가 그려져 이동의 종류와 시간을 보여 주죠. 걷기처럼 밋밋한 건 아주 작지만, 긴 러닝이나 비행은 눈에 잘 띄도록 밝은 색으로 칠했어요.

오른쪽에는 도시와 어제, 내일로 가는 내비게이션을 보여 줄 공간을 남겨 뒀어요.

어떤 날은 빈 공간이 많았어요. 하루 종일 집에 앉아 있거나 잠만 잔 것처럼 보였죠. Github 커밋이 그 남은 빈틈을 채워 주면서, 제가 언제 무슨 일을 하고 있었는지 드러내 줬어요.

월 페이지

하루 & 한 달마다 페이지가 생겼으니, 이제 월 목록과 페이지들을 오가는 애니메이션을 만들기 시작했어요.

처음에는 달들이 세로 목록으로 놓였고, 도시와 다녀온 장소의 종류가 함께 표시됐어요. 그달의 대표 사진들도 무슨 일이 있었는지 훑어보는 데 도움이 됐고요.

원래는 반응형 모바일 버전으로 디자인한 것이었는데, 각 달을 하나의 덩어리로 만드는 편이 목록보다 훨씬 재미있겠다는 걸 깨달았어요. 그러면 달마다 더 눌러 보고 싶고, 만질 수 있는 물건처럼 보이니까요.

Mapbox

제 러닝에 맥락을 주려고 지형과 도로가 은은하게 깔린 배경을 두고 싶었어요. Google Maps는 훌륭하지만 좀 더 자유롭게 바꿀 수 있는 걸 원해서 Mapbox를 써 보기로 했죠. 값은 좀 있어 보였지만 설정이 정말 쉬웠고, 좋은 지도가 있는 근사한 홈페이지를 위해서라면 그만한 값을 할 거라고 봤어요.

Runkeeper는 러닝 중 5초마다 GPS 좌표를 배열로 줘요. 저는 Mapbox의 javascript 라이브러리로 그 점들을 이어 SVG 선을 만들었어요. 처음에는 선이 시작부터 끝까지 자라나는 애니메이션을 만들려면 복잡한 코드가 필요할까 걱정했는데, 알고 보니 stroke-dash 계열 CSS 속성을 쓴 간단한 CSS 트랜지션이면 됐어요. 이 예시에서는, 오프셋을 0으로 줄이면 선이 점점 드러나요.

path.line {
	/* Assuming a stroke length of 100px */
	stroke-dasharray: 100px;
	stroke-dashoffset: 100px;
	transition: all 500ms ease;
}

path.line.loaded {
	stroke-dashoffset: 0;
}

비평 시간

밤마다 Stammy가 퇴근해 돌아오면 우리는 새 기능과 바뀐 점을 함께 살펴봤어요. 막히거나 다른 의견이 필요할 때는 Yuri, Dustin을 비롯한 친구들에게 링크나 스크린숏을 보내기도 했고요. 다른 사람의 관점을 듣고 새로운 눈으로 프로젝트를 자주 보는 건 정말 도움이 돼요. 아이디어의 상당수가 대화에서 나왔거나, 뭔가 어색하다는 피드백에 대한 답으로 나왔어요.

피드백을 받는다는 건 사람들이 말하는 걸 다 따르거나, 싫다는 걸 다 없애는 게 아니에요. 피드백은 내가 한 것이 말이 되는지, 잘 굴러가는지를 알려 주지, 무엇을 해야 하는지나 어떤 비전을 가져야 하는지를 알려 주지는 않아요. 비전은 크라우드소싱할 수 없어요. 불만이 나올 때마다 땜질과 꼼수를 덧댄 프로젝트는 결국 고치기도 유지하기도 어려워져요.

강한 피드백은 대개 좋은 신호예요, 부정적이더라도요. 감정적으로 몰입할 만큼 관심을 가졌다는 뜻이니까요. 사실 흔한 일도 아니에요. 모두의 피드백이 밋밋하거나 할 말이 없다면, 그건 대체로 마음을 움직이지 못하는 디자인이라는 나쁜 신호예요. 모두가 싫어한다면, 형편없거나 훌륭하거나 둘 중 하나죠. 가끔은 구분하기 어려워요.

피드백을 꾸준히 받는 건 중요하지만, 부정적인 말이 나왔다고 모든 걸 내려놓거나 아이디어를 통째로 버려서는 안 돼요. 저는 보통 다음 개정판을 위해 모아 둬요. 처음부터 다시 그려야 할 만큼 치명적인 문제가 아니라면요.

예를 들어 지금 버전에서는 이동을 나타내는 호가 이해되지 않는다는 피드백을 많이 받았어요. 그걸 고치려고 출시를 미룰 이유는 없었지만, 다음에 내놓을 버전에서는 다른 방식을 쓸 거예요.

여러 종류의 사람에게 피드백을 받는 것도 값져요. 특히 기술과 거리가 멀거나 비슷한 인터페이스에 익숙하지 않은 분들이요. 사람들이 얼마나 다르게 생각하고 다루는지를 보는 건 답답하기도 하지만 눈이 트이는 일이에요. 그래서 저는 카페나 완전히 모르는 사람과 시험해 보는 걸 정말 좋아해요. 놀라운 통찰을 얻고, 당연해 보였는데 남들에게는 전혀 그렇지 않은 것들을 발견하게 되거든요.

아무리 잘 다듬고 깊이 생각한 디자인에도 거친 구석이 있고, 꼼꼼한 테스트로 나아져요.

채팅 헤드

문의 양식은 2006년 감성이죠. 저는 방문자와 재미있게 주고받을 방법을 두고 싶었어요. 제 생각에 하고 싶은 말이 있는 사람은 많지만, 대부분은 격식 차린 문의 양식 앞에서 주눅이 들어요. 저부터 보통 그렇거든요.

사이트의 나머지 분위기가 꽤 미래적이고 자동화된 느낌이었어도, 이건 재미있고 다정하고 사람 냄새가 나면 좋겠다고 생각했어요. 사이트가 멋졌으면 했지만, 사람들이 겁먹을 만큼은 아니길 바랐죠.

저는 Facebook 채팅 헤드로 매일 사람들과 이야기하곤 했어요. 아주 자연스러운 디자인이자 & 소통 방식이었죠. 여기에도 비슷한 방식을 두고 싶었어요. 대부분이 이미 익숙한 방식이니까요. 언젠가는 사이트를 채팅 클라이언트처럼 써서 Messenger로 실시간으로 이야기하게 할 수도 있겠죠.

소개 페이지

이 프로젝트는 다른 소프트웨어와 하드웨어에 많이 기대고 있어요. 그들 모두를 제대로 언급하고, 제가 쓰는 도구를 공유할 좋은 방법을 두고 싶었어요. 그래서 파트너들의 로고를 “powered by” 순서로 늘어놓고, 마우스를 올리면 이름과 기여가 보이도록 만들기로 했죠.

의료 대시보드처럼만 보이지 않고 더 재미있고 개인적으로 느껴지도록 부리토에 대한 통계도 넣었어요. 부리토 싫어하는 사람이 어디 있겠어요?

설탕으로 굴러가는

막바지에는 집중하고 밤새 일하려고 설탕을 어마어마하게 먹었어요. 몸에는 최악이었지만, 몇 시간 동안 머리가 맑아져서 거의 모든 문제를 풀 수 있었죠. 문제가 어려울수록 설탕이 더 필요해요.

2014년 7월 11일

출시일

금요일이었어요. 사이트가 거의 준비되어서 마지막 손질을 하러 Alex의 집으로 가기로 했어요. 이런 일에는 다른 눈이 하나 더 있으면 늘 좋고, 세계에서 손꼽히는 Javascript 전문가가 곁에 있다면 더 좋고요.

제 할 일 목록에는 자잘한 것들만 남아 있었어요. 채팅 헤드가 실제로 메시지를 보내게 연결하기, 트위터 버튼 넣기, 메타 설명 고치기, 첫 글 쓰기, CDN 자산 갱신하기, 출시 트윗 정하기 같은 것들이요.

같이 앉아 일한 그 몇 시간 사이에, 그는 우리 나이 카운터를 시작 화면으로 띄우는 Chrome 확장 프로그램을 만들었어요.

금요일 저녁에 내는 게 너무 늦은 건지, 아니면 다들 컴퓨터 앞으로 돌아오는 월요일까지 기다리는 게 나은지 잠깐 이야기했어요. 며칠 더 기다리는 게 아마 현명했겠지만, 그때 저는 아드레날린으로 버틴 일주일의 코딩 끝에 완전히 지쳐 있었고, 지금이 아니면 안 될 것 같았어요.

DNS 설정을 몇 개 바꾸고 트윗을 올렸어요. 그렇게 사이트가 살아났어요!

금요일 저녁이었으니 초기 방문의 대부분이 모바일에서 왔어요. 저는 데스크톱 버전을 쓰며 시간을 거의 다 보냈는데, 정작 대부분의 사람은 기본적인 모바일 구현을 겪고 있었죠.

막바지에 반응형에 시간을 많이 쓴 게 다행이었어요. 다들 마음에 들어 하며 폰만으로 공유하고 있었거든요. 다시 한다면 모바일 경험에 더 시간을 쓸 거예요. 많은 사람에게 그게 첫 번째이자 종종 유일한 통로라는 걸 알았으니까요.

모든 게 순조로워 보였는데, Stammy에게서 제 체중이 1517파운드라는 DM이 왔어요. 참 이상했죠. 저는 훨씬 가볍게 느껴졌거든요.

Sport 페이지 코드는 오랫동안 건드리지 않았으니 갑자기 망가질 리가 없었어요. 페이지 소스를 보니 원래 값에 점 대신 쉼표가 들어가 있었어요. 151.7이 아니라 151,7이었죠. Javascript가 쉼표를 무시하고 잘못 해석하고 있었어요. 캐시를 비웠더니 페이지가 정상으로 돌아왔어요. 이상하네…

그날 밤 늦게, 바에서 친구에게 폰으로 사이트를 보여 주다가 알아챘어요. 페이지 제목 하나가 러시아어로 되어 있었어요. 이상하죠. 앞선 버그와 곧바로 연결됐어요. 둘 다 어딘가에서 제멋대로 도는 국제화 코드 탓일 테니까요.

당연히 집에 가서 파헤쳐야 했죠.

알고 보니 Django의 간단한 설정 하나 때문이었어요. 숫자와 날짜 같은 것에 국제화(흔히 i18n으로 줄여 쓰죠)가 켜져 있었던 거예요. 캐싱 시스템과 맞물리면서, 다른 나라에서 요청이 들어오면 어떤 부분이 망가지고 있었어요. 그 기능을 끄는 건 한 줄이면 되는 수정이었고, 그 덕분에 전 세계 어디서든 똑같은 화면을 보게 됐어요.

작고 알아채기 힘든 실마리가 어딘가의 버그를 가리키는 수많은 예 중 하나였어요.

그날 밤, 긴 한 주의 일을 마치고 지쳤지만 행복하게 잠들었어요. 사이트가 드디어 살아났고, 제 트윗을 보고 몇천 명이 들렀죠. 저는 주말에는 좀 쉬고 다음 주에 세상에 알릴 방법을 궁리하려고 했어요. 그런데 그럴 필요가 없어졌죠…

다음 날 아침

제가 자는 동안 몇 시간 만에 사람들이 Reddit과 Hacker News를 비롯해 인터넷 곳곳에 이걸 올렸어요. 다음 날 아침 7시에 친구와 달리기로 해 둔 터라, 저답지 않게 일찍 일어났죠. 그게 다행이었어요.

폰이 알림으로 터져 나가고 있었어요. 트윗 수백 개에 이메일도 잔뜩이었죠. 사이트를 열어 봤더니 지독하게 느렸어요. 분석을 보니 몇 시간 사이에 트래픽이 천장을 뚫었고, 부하 때문에 거의 응답을 못 하고 있었어요. 다행히 Heroku에서 규모를 키우는 건 꽤 쉬워서, dyno를 2개에서 8개로 올렸어요. 폭주하는 트래픽을 감당할 만큼 웹 서버가 생기니 모든 게 다시 곧바로 열렸죠.

두어 시간 만에 사이트 방문자가 십만 명을 넘었어요. 오후에는 이십만 명이었고요. 사람들이 마음에 들어 했나 봐요. 트윗과 메시지가 계속 밀려들었어요!

온갖 사람들이 댓글을 달고 공유하는 걸 보니 정말 겸손해졌어요. 누가 이걸 이해하거나 좋아할지 확신이 없었으니 더욱요. 제가 무척 존경하는 분들이 남긴 트윗 몇 개는 그날을 특별하게 만들어 줬어요.

수백 명이 비슷한 질문을 하고 있다는 걸 알아챘어요.

• 애니메이션은 어떻게 만들었나요?
• 어떤 기술을 쓰고 있나요?
• 혈액 수치는 어떻게 아나요?
• 저도 이걸 가지려면 어떻게 하나요?

처음 열 개, 스무 개쯤 답하고 나서, 처음부터 끝까지 전체 이야기를 올려야겠다고 생각했어요. 세상에 나누지 않기에는 너무 신나는 과정이었거든요. 아무도 본 적 없는 옛 스케치와 목업, 프로토타입이 수백 개나 있었고요.

그렇게 이 글이 시작됐어요…

에필로그

저는 이 사이트를 거의 제 개인적인 장난감으로 디자인했어요. 이게 미래라는 건 알았지만, 이 데이터를 다 모으려고 매일 수고할 만하다고 남들도 생각할지는 확신이 없었어요. 그런데 적어도 몇몇은 아주 관심이 있었나 봐요. 공개한 뒤로, 자기도 갖고 싶다는 메시지를 수백 통 받았어요.

몇 달 뒤, 저는 Gyroscope라는 회사를 시작하기로 했어요. 지금은 잘 굴러가고 있고, 누구나 가입해서 자기 삶을 기록할 수 있어요.