April Zero를 만들다

April Zero를 만들다

1부

처음의 April Zero 웹사이트를 어떻게 디자인했는지, 그 첫 번째 이야기예요. 스케치 몇 장과 버려진 구상, 오래된 프로토타입을 보여 드리면서 그것이 어떻게 흘러왔는지 이야기할게요.

직접 써 보고 싶다면 이제 Gyroscope에 가입할 수 있어요.

2014년 3월: 영감

일단 움직이세요

룸메이트와 Paris에 가려던 참이었어요. 사진에 진심인 친구라, 우리가 어딘가에 다녀오면 보통 여행에 대한 미니사이트를 만들어요. 화면을 가득 채우는 좋은 사진과 영상이 가득하죠. 바로 전에 만든 건 우리 일본 모험

이었어요. 몇 달 뒤에 다시 들어가 우리가 한 일의 자세한 기록을, 순간마다 남긴 아름다운 사진과 영상과 함께 보는 건 언제나 즐거웠어요.

이번 여행에서는 우리가 간 곳을 전부 남기려고 Moves 앱을 쓰기로 했어요. SFO 보안검색 줄에 서서 설치했는데, 그게 곧 집착이 될 무언가의 시작이라는 건 그때 몰랐죠.

Moves나 비슷한 앱을 써 봤다가 배터리 때문에 고생한 분도 있을 거예요. 오랫동안 GPS나 움직임을 쓰는 앱은(Nike, Find My Friends, Highlight 같은 것들이요) 배터리를 순식간에 먹어 치워서 형편없었어요. 그러다 iPhone 5S가 나왔어요. 하지만 다들 곧 나온다는 iWatch 소문으로 시끄러웠던 탓에, Apple이 내놓은 획기적인 M7 프로세서는 거의 아무도 알아채지 못했어요. 저도 마찬가지였고요.

갑자기 배터리에 거의 영향을 주지 않으면서 아주 많은 일을 할 수 있게 됐어요. 갑자기 풍성한 내용이 실시간으로 쏟아졌고요. 갑자기 한 세대의 피트니스 기기가 통째로 낡은 것이 됐죠. 하드웨어 문제가 그냥 소프트웨어 문제가 된 거예요. Moves는 그걸 제대로 활용한 몇 안 되는 앱 중 하나였고요.

심장 박동

비슷한 무렵에 누가 Cardiio라는 앱 이야기를 해 줬어요. iPhone 카메라로 심박수를 잴 수 있다더군요. 저는 그게 될 리 없다고 생각해서 내려받았어요. 내 심장이 얼마나 자주 뛰는지 따위는 정말 관심 밖이었거든요.

그런데 며칠 만지작거리고 나니 푹 빠져 버렸어요. 무엇보다 좋았던 건 재는 데 15초쯤밖에 안 걸린다는 점이었어요. 주머니에서 폰을 꺼내고 잠금을 풀고 앱을 여는 시간까지 세도 30초쯤이죠.

저를 완전히 사로잡은 건 잘 훈련된 운동선수일수록 안정 시 심박수가 낮다는 사실이었어요. 낮을수록 좋다는 거죠. 지금 내 상태를 객관적인 숫자로 볼 수 있는 아주 쉬운 방법이었어요. 그리고 재미있었고요.

어느 주에는 심박수가 이상하게 높았어요. 보통 60에 가까운데 80이나 90 가까이 나오더군요. 뭔가에 스트레스를 받고 있었나? 저는 오래 달리기를 하고 다음 날 다시 재 봤어요. 다시 60. 흥미로웠죠…

내 몸에 New Relic을 설치한 것 같았어요. 저는 그래프를 보면서 무언가를 고치는 데 익숙했거든요. 다만 이번에는 서버가 아니라 제 몸이었죠.

달려서 살아남기

그전의 취미는 실내 암벽등반이었어요. Mission Cliffs에서 몇 블록 떨어진 곳에 살아서 거기서 볼더링을 하는 게 매일 밤의 루틴이 됐죠. 그런데 꽤 격한 운동이라 곧 어깨를 여기저기 다쳤어요.

대신 달리기를 시작했어요. 마침 큰 이별을 겪고 추스르던 참이라 버티는 데 아주 좋은 방법이었죠. 전에도 Nike 러닝 앱을 가끔 쓰긴 했지만 여기저기 1마일씩 뛰는 정도였고, 진지하게 거리를 쌓은 적은 없었어요. GPS를 쓰는 앱이 배터리를 다 먹어 버려서 즐겁게 쓰기 어려웠거든요.

그런데 이제 M7 덕분에 폰보다 제 무릎이 먼저 나갔어요. 사려고 생각했던 화려한 Garmin 러닝 워치나 Fitbit도 더는 필요 없어졌죠. 중요한 도구가 없다는 핑계는 대기 쉽지만, 필요한 건 이미 전부 제 주머니에 있었어요.

러닝 사진을 Instagram에 올리는 것이 시작한 뒤로 꾸준히 달리게 하는 힘이 됐어요. 지도와 거리, Nike 로고를 사진 위에 얹는 방법이 간단했거든요. #nikeplus 해시태그를 달아 올리면 세계 곳곳의 러너들에게서 좋아요를 잔뜩 받을 수 있었고요.

제가 좋아하는 세 가지가 한데 모인 셈이었죠. 달리기, 사진, 그리고 주목받기. 훌륭했어요. 러너로 지내기 좋은 시절이었죠. Runkeeper, Strava, Nike 같은 좋은 도구와 커뮤니티가 많았거든요.

달릴 때마다 기록을 전부 보니 최적화하고 더 잘하고 싶은 무언가가 생겼어요. 스스로에게 도전과 목표를 줄 수 있게 됐죠.

그런데 그런 생태계를 가진 건 달리기 말고는 거의 없었어요. 저는 이런 정보와 동기를 삶의 모든 부분에서 갖고 싶었어요. 달리기에만이 아니라요. 결국 이건 애널리틱스였고, 저는 애널리틱스를 만들어 본 적이 있었어요. 스케치를 시작할 때였죠.

혈액 수치

연례 건강검진이 한참 밀려 있었어요. 기본 검사를 다 받으면서, 제가 기록으로 남기려고 혈액 검사 결과를 메일로 보내 달라고 부탁했죠.

그다음 주에 아주 꼼꼼한 PDF를 받았어요. 지금 수치만이 아니라 항목마다 이상적인 범위에 대한 설명과 제 상태 분석까지 들어 있었죠. 비타민 D가 그렇게 낮은 게 놀라웠고, 몇 가지는 이상적이지 않은 범위에 있었어요. 정말 훌륭한 데이터였는데, 받은 편지함 속 텍스트 PDF 첨부 파일에 갇혀 있었어요. 훨씬 더 나은 대접을 받아야 마땅했죠.

그때부터 매달 혈액 검사를 받으면서 변화를 가까이서 지켜봐 왔어요. 이걸 대시보드에 올려 두면 무엇을 개선해야 하는지 계속 상기하게 되죠. 저는 그냥 기록하는 것만으로도 좋아질 수 있다는 제 가설에 걸고 있었어요. 그게 안 되더라도, 최소한 알게 되고 더 노력해 볼 수는 있으니까요.

체지방

Tim Ferriss는 The 4 Hour Body에서 자신을 기록하는 데 쓴 여러 기기와 검사를 이야기해요. 그중 하나가 체지방률을 정확히 재는 휴대용 USB 초음파 기기였어요. 이미 몸무게는 재고 있었지만, 체지방률까지 알면 무엇이 변하고 있는지 훨씬 잘 이해할 수 있겠더군요.

초음파는 조금 번거로워요. 몇 분이 걸리고 전용 젤도 써야 하죠. 그래도 거기서 나온 데이터는 정말 정확했고 매일 보는 게 흥미로웠어요. 지방과 근육, 그 아래 뼈가 몇 밀리미터인지까지 내 몸 안을 눈으로 볼 수 있었으니까요.

주말에 마음껏 먹은 다음 날이면 체지방이 치솟았다가, 그다음 주에는 더 낮게 내려가는 게 보였어요. 얻는 데이터는 훌륭했지만 앱의 화면과 표현은 그렇지 않았죠.

이게 제가 하는 다른 모든 것과 어떻게 이어지는지 보고 싶었어요.

그리고 저는 이 생각도 믿었어요. 무언가를 기록하기 시작하는 것만으로도 좋아지기 시작한다는 것. 지금 상태와 변화 속도를 알면 더 나은 결정을 내리고 빠르게 고쳐 가면서 무엇이 실제로 되고 안 되는지 이해할 수 있어요. 중요한 것들을 계측하지 않으면 사실상 눈 감고 나는 셈이죠.

심박수나 체중처럼 쉽고 자주 잴 수 있는 것과, 체지방이나 혈액 수치처럼 번거롭지만 통찰을 주는 것 사이에서 균형을 찾아야 한다는 걸 깨달았어요. 둘이 합쳐지면 아주 좋은 대시보드가 되고 온전한 이야기를 들려주니까요. 그리고 기술이 빠르게 좋아지리라는 데도 걸고 있었어요. 특히 이게 널리 퍼지고 수요가 늘어나면요. 마이크로칩 이식 버전이 Kickstarter에 올라오거나 Apple이 Apple Watch로 이걸 재기 시작하면, 저는 코드 몇 줄만 고치면 되죠.

2014년 4월: 첫 초안

데이터 포인트의 격자

저는 이 포드 형태 디자인의 발상과 단순함이 마음에 들었어요. 깔끔한 격자에 나중에 업그레이드할 수 있는 모듈형 요소들이죠. 대부분은 API로 100% 자동화할 수 있고, 최근 등반처럼 손으로 넣는 것도 몇 분이면 됐어요.

제가 게을러지거나 정말 바빠져도 사이트가 낡지 않을 거예요. 그래도 저는 달리거나 음악을 듣거나 Instagram에 새 사진을 올리고 있을 테니까요!

스케치의 중요함

프로젝트 초반에는 대부분의 시간을 그냥 스케치하고 생각하는 데 써요. 디자인을 만들든 코드를 쓰든, 먼저 손으로 그려 보면 생각이 훨씬 또렷해지더군요.

종이 위 스케치가 강력한 이유는 빠르기 때문이에요. 아마 생각이 떠오르는 속도만큼 빠르게 기록할 수 있는 유일한 매체일 거예요. 머릿속에만 있던 것 대신 눈에 보이는 선택지를 스스로에게 내밀 수 있고, 그러면 더 잘 알고 결정하게 되죠. 아무리 거칠게라도 두 안을 종이에 나란히 놓으면 어느 쪽이 나은지 대개 분명해져요.

Wacom 태블릿

종이 다음에는 이 안을 Photoshop으로 빠르게 옮겨서 디지털에서도 말이 되는지 확인했어요. 종이에서 작은 썸네일로는 좋아 보이는데 막상 디지털로 옮기면 안 되는 디자인이 많거든요. 스케치의 결에는 나쁜 아이디어조차 고급스럽고 다듬어져 보이게 만드는 무언가가 있어요. 화이트보드나 종이에서는 크기를 슬쩍 속이기가 아주 쉬워서, 들어가지 않을 글자를 억지로 넣거나 요소가 실제보다 훨씬 넓은 자리를 차지하게 되죠.

가끔은 초기 목업까지 스케치 느낌을 유지하는 걸 좋아해요. 여전히 종이 위에 있는 것처럼 생각하면서 한 번에 한 변수씩 다룰 수 있게 해 주거든요. 레이아웃과 내용을 막 정리한 참이라, 이제 색을 넣고 대비와 크기가 여전히 말이 되는지 확인할 수 있었어요. 질감, 타이포그래피, 배경 이미지처럼 시간이 많이 드는 세부는 이게 통과되면 나중에 정하기로 했고요.

이 버전은 꽤 괜찮아 보여서 친구 몇 명에게 보냈어요. 다들 꽤 좋아해 줘서, Photoshop에서 더 현실적인 목업을 계속 만들었죠. 가능성이 있었어요.

며칠 더 세부를 다듬고 여러 변형을 시험했어요. 내용과 정보 구조에는 아주 신이 났는데, 그건 언제나 가장 중요한 부분이죠. 다만 스타일과 레이아웃은 볼 때마다 숨이 멎을 정도는 아니었어요.

탄탄하고 쓸 만한 디자인이었죠. 하지만 세상에서 제일 좋은 건 아니었어요.

April Zero 스타일 가이드

이건 미래였어요. 자기 자신에 대한 모든 것을 마법처럼 분석하고 나눌 수 있다는 건 사람이 나는 일이나 전기만큼이나 굉장한 이야기죠. 그래서 실제로 그런 만큼 미래처럼 느껴지길 바랐어요.

브랜드를 만들 때는 보통 무드보드를 모아서 여러 스타일을 빠르게 시험하고, 그 분위기를 전하는 데 필요한 요소를 찾아요. 조각은 무엇이든 될 수 있어요. 영화 클립, 사진, 옥외 광고, 다른 앱의 스크린샷 같은 것들이죠. 저는 모션 디자인과 광고에서 영감을 많이 얻어요. 예산이 넉넉하고 뛰어난 작가들이 뒤에 있으니까요. Dribbble과 Behance에도 좋은 것이 많고요.

훌륭한 홀로그램 인터페이스나 미래처럼 느껴지는 것의 사례는 많지만, 좀 더 구체적인 갈래로 좁혀야 했어요. 제 삶의 대부분의 결정이 그렇듯, 스스로에게 물었죠. Tony Stark라면 어떻게 했을까?

반복해서 눈에 띈 요소는 이런 것들이었어요. 홀로그램 오버레이, 동심원, 등축 투영 & 가는 선. 쓰기 편함을 잃지 않으면서 이걸 제품에 녹여 넣는 건 어렵겠지만, 출발점으로는 훌륭했어요.

이제 내용과 스타일을 모두 좁혔으니, 다시 도면으로 돌아갈 시간이었죠…

버전 2

앞서의 모듈성과 구조는 지키되 그렇게 지루한 레이아웃은 피하고 싶었어요. 그래서 전체를 “미니 앱”으로 나눠 주제별로 데이터를 보여 주기로 했죠. 처음 둘은 “Sport”와 “Explorer”라고 부를 수 있겠더군요.

각 구역을 하나의 맥락으로 좁히면, 방문자에게 숫자와 통계를 잔뜩 던지는 대신 하나의 이어지는 이야기가 만들어져요.

그리고 나중에 기존 구역을 다시 만들지 않고도 새 구역을 더할 수 있고요. 그때 신났던 다른 아이디어 몇 가지는 이런 것들이었어요.

“Aviation” 조종사 면허를 따는 과정에서 비행 기록을 전부 남기기

“Underwater” 스쿠버 자격을 따는 과정에서 다이빙 기록 남기기

“Digital” 컴퓨터 앞에 있는 동안 무엇을 했는지(디자인, 코드, 화면 녹화 등)

“Finance” 돈 쓰는 습관, 억만장자가 되기까지의 진행 바

“Love” 연애를 수치로 만들기 같은 것들

어떤 건 비밀번호를 걸어야 할지도 모르겠지만요…

Sport를 디자인하다

Sport 구역에는 운동과 의학에 관한 모든 것이 들어가서, 지금의 혈액 수치와 시간에 따른 기록 향상을 보여 줄 예정이었어요.

첫 버전은 여러 활동을 모아 놓은 피드 형태였어요. 혈액 수치를 보여 주는 방식은 정말 마음에 들었지만, 피드는 한눈에 읽기가 너무 어렵게 느껴졌어요. 최근 몇 개만 보이니 전체를 훑기에 좋지 않았죠.

1년치 데이터를 한눈에 보고 싶었어요. 그러려면 집계된 데이터가 더 필요했고, 전체를 더 촘촘하게 만들어야 했죠.

레이아웃은 나아졌지만 그리 앞서 나가는 느낌은 아니었어요. 그건 만들면서 은근한 애니메이션과 세부를 더해 풀 수 있는 문제였고요.

이건 코드로 옮긴 정적 버전이에요. 양옆 열을 어둡게 하니 대비가 조금 더 살고, 콘텐츠 열을 옆으로 밀어 홈페이지와도 이어졌어요.

모든 것을 탐색할 수 있고 반응하게 만들고 싶었어요. 무언가에 마우스를 올리면 더 자세한 내용을 알려 주는 식으로요. 겉으로 드러나지 않은 데이터가 뒤에 아주 많았거든요.

스피너

이전 사이트들의 분석을 보면서 알게 된 한 가지 패턴은, 대부분의 사람이 한두 페이지만 보고 떠난다는 거예요. 아무리 좋은 내용이 한가득이어도 대부분의 방문자는 거기까지 가지 않죠. 무언가를 클릭하는 건 꽤 큰 결심이고, 모든 구역을 꼼꼼히 둘러보는 일은 그냥 일어나지 않아요.

그래서 새로운 종류의 인터페이스를 만들고 싶었어요. 처음부터 클릭을 결심하지 않아도 마우스를 이리저리 움직이며 둘러볼 수 있는, 가볍고 쉽고 재미있는 미세한 반응이 있는 인터페이스요.

그렇게 이 스피너가 태어났어요. 처음의 iPod만큼 쓰기 재미있고 새로운 무언가를 만들고 싶었죠.

덕분에 지루한 사각형 레이아웃에서도 벗어날 수 있었어요. 무드보드에는 둥글고 움직이는 요소가 잔뜩 있었는데, 이 방식이라면 그런 세부가 인터페이스 안에 자연스럽게 자리 잡을 수 있었죠.

충분히 신나는 목업이 나오자 코드를 짤 차례였어요! 예전 블로그 실험에서 만들어 둔 기본 Jekyll 바탕이 이미 있었죠. 새 브랜치를 따고 스피너를 만들기 시작했어요.

초기 코드 프로토타입

이건 하나의 문제를 디자인 & 코드 양쪽으로 다루는 게 아주 쓸모 있는 상황의 좋은 예예요. 페이지가 눈에 좋아 보이는 것도 중요했지만, 그것이 어떻게 느껴지고 & 움직이는지도 똑같이 중요한 문제였거든요. 그래서 원래 블로그에 쓰려던 Jekyll 컨테이너 안에서 가벼운 자바스크립트로 기본 프로토타입을 만들었어요.

첫 버전은 그리 인상적이지 않았어요. 버전 1(위)은 아주 기본적이었죠. 전부 제대로 돌아가고 줄이 맞게 만드는 게 꽤 까다로워서, 만들고 디버깅하는 동안에는 밝은 색 원을 썼어요.

버전 3(아래)에서는 링 요소와, 글자에 마우스를 올리면 원이 돌아가는 것 같은 상호작용을 위한 자바스크립트를 더했어요.

버전 5에는 인트로 애니메이션을 넣었는데, 이미 움직이고 있는 요소에 전환을 걸려다 보니 생각보다 훨씬 까다로웠어요.

버전 8에서는 인트로와 다른 설정의 퇴장 애니메이션을 넣어서, 무언가를 클릭했을 때 더 보람 있게 느껴지도록 했어요.

버전마다 특정한 문제를 고치거나 새 기능을 더해 조금씩 나아졌어요. 쓰는 게 점점 재미있어지는 게 기분 좋게 놀라웠죠. 여기에 시간을 들일 만한 무언가가 있다는 제 생각을 확인해 준 셈이었어요. 조금 더 개선하고 디자인 세부를 다듬으면 훌륭한 경험이 될 수 있었어요.

그래서 계속 붙들고, 하루에 몇 시간씩 페이지를 새로 고치며 애니메이션을 더 부드럽고 더 흥미롭고 더 좋은 박자로 만들려 애썼어요.

즐거웠지만, 디자인에 문제가 없는지 확인하려면 검증이 더 필요했어요. 그때는 이런저런 카페에서 일하고 있어서, 모르는 사람들을 붙잡고 사이트를 만져 보게 했죠.

아무 안내 없이 “이거 한번 써 보세요” 라고만 하고 노트북을 건넨 다음, 무엇을 하는지 가까이서 지켜봤어요. 몇 가지 문제가 보였는데, 대부분은 링크가 아닌 부분을 클릭하는 것이었어요. 자주 잘못 눌리는 영역까지 링크 범위를 얼른 넓히고, 누를 수 있다는 걸 알려 주는 호버 효과를 더했죠. 곧 테스트를 도와준 분들은 사이트를 오가거나 이해하는 데 아무 문제가 없었어요.

바라던 만큼 직관적이었던 거예요. 더 중요한 건, 이리저리 마우스를 올리고 구역을 눌러 보는 걸 정말 즐기는 것 같았다는 점이에요. 자기가 일으킨 애니메이션에 조금 놀라고 신나 하면서요.

홈페이지의 핵심 디자인에 만족하고 나니, 이제 가장 두려워하던 부분을 붙들 차례였어요.

Explorer

여기서부터 기술적인 문제가 잔뜩 등장하려 하고 있었어요. 앞의 구역들은 기본 데이터만으로 Photoshop에서 그리고 목업을 만들기가 꽤 쉬웠지만, 이건 진짜 내용이 필요했거든요. API 키를 만들고 Moves에서 제 데이터를 가져오기 시작했어요.

San Francisco에서 몇 주를 보내고 나니, 더 다양한 데이터가 필요하다는 걸 알겠더군요. 그래서 맥북과 여권을 챙겨 조사차 New York으로 갔어요. 이 구역에서 그 느낌을 전하려면 제가 먼저 탐험과 모험의 마음가짐에 제대로 들어가야 했으니까요.

이제 비행과 시간대 변화, Central Park에서의 러닝, 그리고 피자를 얼마나 먹었는지를 어떻게 보여 줄지 알아내야 했어요. 다녀오길 정말 잘했어요. Moves가 시간대를 다루는 방식에서 제가 감안해야 할 문제를 금방 잔뜩 마주쳤거든요. San Francisco에만 있으면서 예전 Paris 데이터로 해외 테스트를 대신했다면, 다음에 시간대를 넘나들 때 전부 무너졌을 거예요.

돌아오는 비행기에서 Moves의 데이터를 처리해 기본적인 타임라인으로 늘어놓기 시작했어요. 읽기 어려운 엉망이었지만, 여행에서 나온 진짜 데이터로 돌아가고 있었죠!

가장 큰 디자인 결정 중 하나는 타임라인을 가로로 두고 날짜를 위아래로 쌓는 것이었어요.

비슷한 디자인은 거의 전부 세로로 배열해서, 제가 겪던 글자 겹침 문제를 편하게 피해 갔어요. 하지만 저는 모든 날을 서로 견줘 보는 게 꼭 필요하다고 믿었어요. 나중에 풍성한 데이터를 담을 수 있도록 하루하루가 하나의 축이 되길 바랐거든요. 라벨을 보여 주는 문제는 다른 방법으로 풀어야 했죠.

라벨을 4단으로 보기 좋게 어긋나게 놓는 알고리즘을 만지작거리기 시작했어요. 장소 사이의 시간 차이를 분석해서 글자가 들어갈 자리가 늘 남아 있게 하는 것이었죠.

버전 9는 밝은 배경이었는데, 버전 10에서는 어두운 배경으로 바꿔서 장소가 더 도드라지고 사이트의 나머지 분위기와도 맞게 했어요.

처음에는 의미 있는 장소만 보여 주고, 마우스를 올리면 그날에 대한 자세한 내용과 작은 글자가 드러나게 하기로 했어요. 집이나 호텔처럼 반복되는 장소는 표시를 약하게 했고요. 머문 시간은 훨씬 길어도 다른 장소만큼 흥미롭지는 않았거든요.

그러던 어느 날 공원에서 일해 보기로 했어요. 구역 이름이 Explorer였으니까요.

그런데… 아무것도 읽을 수가 없었어요.

흰 배경이던 원래 버전은 괜찮았는데, 색을 다듬은 새 어두운 버전은 햇빛 아래에서 완전히 쓸 수 없었어요.

그래서 제품을 실제 맥락에서 써 보는 게 정말 중요해요. 사소해 보이는 방식으로라도 실제 상황에서 멀어질수록 뒤통수를 맞거나 디자인에 구멍이 생길 가능성이 커져요. 제가 비행기에서, 카페에서, 거꾸로 매달려서, 그리고 이상한 눈길을 받을 만한 여러 방식으로 일하는 걸 좋아하는 이유가 그거예요. 다른 관점으로 생각이 열리고, 그러지 않았으면 지나쳤을 문제가 드러나거든요.

이제 결정해야 했어요. 실내에서는 95%의 사람에게 더 좋아 보이니 어두운 채로 둘 것인가, 아니면 전부 밝게 다시 만드는 게 말이 되는가. 나에게 일어난 일이면 다른 사람에게도 일어날 수 있고, 더 중요하게는 나에게 또 일어날 수 있으니까요.

막히거나 과속방지턱을 만났을 때는 그냥 계속 밀어붙이며 풀릴 때까지 시간을 쏟아야 할 때가 있어요. 반대로 방향을 틀어 다른 각도에서 접근하는 게 나을 때도 있고요. 저는 기록용으로 어두운 버전(11)과 밝은 버전(12)을 만들어 두고 다른 문제로 넘어가기로 했어요.

이동을 표현하기

첫 버전은 이동과 장소가 같은 줄에 있었어요. 더 직관적으로 보이게, 지점에서 지점으로의 이동을 도약처럼 표현해 보고 싶었죠.

집계된 수치

위쪽에 지금 있는 곳을 보여 주는 세계 지도는 그대로 두되, 페이지에 전체 통계도 넣고 싶었어요. 타임라인 30개를 다 훑지 않아도 페이지를 빠르게 요약해 주도록요. 그래서 구조를 한 겹 더하고 전부를 달 단위로 나누기로 했어요. 달마다 각자의 통계를 갖고 서로 견줄 수 있게요.

달마다 제 습관이 어떻게 달라지는지 보는 게 흥미로웠어요. 어떤 달은 여행과 공항에서 보냈고, 어떤 때는 등반을 잔뜩 하거나 하루의 대부분을 카페에서 보냈죠. New York에서 돌아오자 이탈리아 식당은 금세 줄고 그 자리를 부리토가 채웠어요.

반응형으로 가기

반응형 버전을 만들기 시작하면서 일이 꼬이기 시작했어요. 데스크톱에서 훌륭했던 가로 타임라인이 작은 화면에는 들어가지 않았거든요. 세로여야 했지만, 모바일 하나 때문에 사이트 전체의 기능을 포기하고 싶지는 않았어요. 그래서 두 방향 모두로 돌아가고 화면 크기가 바뀌면 부드럽게 전환되도록 코드를 다시 손보기 시작했죠.

데스크톱을 망가뜨리지 않고 모바일 버전을 따로 두는 코드가 돌아갔어요. 이제 큰 버전을 좁은 자리에 억지로 밀어 넣는 대신, 모바일을 처음부터 디자인할 수 있게 됐죠.

같은 데이터만 계속 만지는 게 슬슬 지겨워졌어요. 디자인은 나아가고 있었지만 여전히 무언가가 빠져 있었죠. 풍경을 바꾸고 새로운 시선이 필요했어요.

카페에서 일하고 있을 때(5월 6일, Coffee Bar였어요) 친구가 메시지를 보냈어요.

완벽한 타이밍이었죠.