[정보디자인] 에드워드 터프티를 위한 날씨앱

LeanUX Lab에서는 요즘 날씨앱을 만들고 있습니다.
앱스토어에 별도의 날씨 카테고리가 있을 정도로 날씨앱은 굉장히 많습니다. 만들기 쉽거든요. 시장에서 경쟁도 심하고 더 이상 새로울 것도 없는 날씨앱을 만들기로 한 건 아직 세상에 딱 맘에 드는 날씨앱이 없었기 때문입니다. P랩의 모토는 make a dent in the universe 입니다. (스티브잡스가 한 말이기도 하고 37signals의 rework 책의 한 챕터 제목이기도 합니다) 날씨앱이 세상을 바꾸지는 못하지만 우주에 작은 흠을 낼 정도의 세상에 없던 궁극의 날씨앱을 만들 수는 있을 것 같거든요.

날씨앱을 만들기로 하고 다른 프로젝트와 마찬가지로 먼저 경쟁자 분석과 사용자 조사를 함께 진행했습니다. 현재 날씨앱이 어떤 유형이 있는지 어떤 정보를 어떻게 보여주는지, 어떤 앱이 인기가 있는지를 찾아보면서 동시에 사내에서 민첩하게 인터뷰를 진행했습니다. 어떤 날씨앱을 사용하는지 왜 선호하는지 이야기를 들어보다보니 메신저의 카카오톡처럼 부동의 1위를 하는 시장 주도 상품이 없고 각자 자기 취향에 따라 날씨 앱을 골라서 쓰고 있었습니다. 좋기도 하고 나쁘기도 한 결과였는데, 시장에 강력한 경쟁자가 없으니 진입이 수월하기도 하겠지만 결국 취향에 좌우되는거라서 궁극의 날씨 앱 같은건 없을 수도 있겠다는 우려도 있었습니다.

날씨앱의 경쟁 상대는 엄마

인터뷰를 통해 날씨앱(웹서비스) 사용 유무를 극명하게 나누는 요인을 발견했습니다. 바로 아침에 엄마(와이프)가 날씨를 알려주는가 아닌가였습니다. 아무리 훌륭한 날씨앱이라도 엄마에겐 상대가 안 됩니다. :) 폰을 꺼내서 앱을 실행하고 날씨 정보를 확인하고 그런 번거러운 절차 다 필요없거든요. 엄마가 "오늘 비오니까 우산 챙겨라.","바람 많이 불어서 어제보다 많이 춥다니까 옷 따뜻하게 껴입고 나가라." 라고 뉴스를 통해 얻은 날씨 정보를 요약해서 핵심만 말해주거든요.

엄마가 알려주는 날씨 정보에는 두 가지 중요한 포인트가 있습니다.

첫째는 날씨 정보 자체보다는 날씨에 따라 뭘 해야 하는지 action item 위주로 알려줍니다. 사람들이 일상에서 날씨가 좋은지 나쁜지 기상 상태 자체를 알고 싶은 것 보다 우산을 챙겨야 하는지, 옷을 껴입을지 가볍게 입을지, 세차를 할지 말지, 소풍을 (에버랜드로) 갈지 말지 판단하기 위해서 날씨를 확인하잖아요.
그래서인지 저는 비 올때 날씨 아이콘으로 비구름 대신 우산 모양 심볼을 더 선호합니다. 다른 구름 심볼과 구분도 잘되고 뭘 해야 하는지 직관적이니까요. 네이버랑 다음 날씨도 우산을 사용해서 익숙한데 이게 우리나라와 일본 정도만 그렇고 다른 나라에서는 잘 사용하지는 않는 것 같습니다.(다른 나라는 어떤지 왜 그런지 아시면 알려주세요)

둘째는 수치 보다는 내가 이해할 수 있는 체감 정보를 알려줍니다. 절대음감처럼 온도만 듣고 얼마나 추운지 따뜻한지 감을 잡기는 쉽지 않습니다. 그래서 엄마는 기온이 8.2° 라고 하기보다 어제보다 쌀쌀해졌다고 알려줍니다. 어제의 온도와 비교해서 알려주는 어제오늘 앱이 인기가 있는 것도 이 때문입니다.

날씨 정보 밀도

그럼 이렇게 엄마가 알려주는 요약된 날씨 정보를 그대로 날씨앱으로 옮기면 성공 할 수 있지 않을까요?
성공하기 어렵다고 생각합니다. 날씨 앱을 실행하는데는 보다 큰 비용이 들기 때문에 보다 많은 보상(정보)이 필요 합니다. 또 자신이 신뢰하는 사람이 아닌 경우, 근거가 되는 구체적인 데이타를 제시하지 않으면 추천이나 제안에 대한 신뢰가 낮습니다. 다른 프로젝트에서 이와 관련 있는 실험을 했었는데요. 전문가 시스템에 의한 추천이라해도 데이타를 보여주지 않으면 그것을 신뢰하는 사람과 그렇지 못하고 직접 데이타를 확인하려는 사람이 반반으로 나뉘었습니다. 엄마는 "추우니까 따뜻하게 입어라" 라고만 해도 되지만 앱은 사용자가 판단할 수 있는 근거가 되는 정보를 부가적으로 담아 보여줄 필요가 있습니다.


왼쪽부터 haze,solar,blue

요즘 haze,solar,blue 같은 미니멀하고 조작성을 강조한 날씨앱이 유행입니다. 이런 깔끔한거 저도 참 좋아하는데요. 제가 한 번 먹어 사봤습니다. "와 예쁘다.재밌다."라고 좋아라하고 그 후로 사용하진 않습니다. 정보 전달 측면에서는 완전 꽝이거든요. 날씨 정보는 현재의 날씨와 이후 시간의 예보가 둘 다 중요한데 앞의 앱들은 이후 예보를 보기 위해서 제스처를 통해 시간을 변경해야 해당 시간의 날씨 정보를 보여주는 형태입니다. 터프티가 싫어하는 stacked in time 방식입니다. 손맛도 있고 재밌긴하지만 비효율적입니다. 오후에 비가 내리더라도 시간대를 일일히 다 탐색해보지 않으면 알 수 없거든요. 또 온도 같은 건 상대적 비교를 통해서 따뜻해진다는건지 추워진다는건지를 알아야 하는데 이런 방식은 비교가 어렵습니다. 사람에게 주의는 한정된 자원인데 이런 하찮은 매 시간의 온도를 기억해서 비교해야 하는건 적합하지 않습니다.

터프티는 아이폰의 기본 날씨앱도 정보 밀도가 너무 낮다고 비판하고 있습니다.
동영상 : iPhone Resolution by Edward Tufte
요즘 이런 미니멀한 날씨앱이 인기가 있는건 기본 날씨앱보다 좀 더 많은 날씨 정보를 담아보려고 하다가 너무 복잡해서 질려버리게 하는 날씨앱에 대한 반발에서 나온게 아닌가 싶습니다. 하지만 터프티가 지적하고 있듯이 정보가 많아서 복잡해 보이는 건 아닙니다. 복잡해 보이는건 정보 자체의 속성이 아니라 디자인을 못했기 때문입니다.

한눈에 보이는 하루의 날씨 정보 시각화

날씨 정보에서 가장 중요한 정보는 맑은지 흐린지 비가 오는지 하는 기상의 변화와 추운지 따뜻한지 하는 기온 두 가지 입니다. 그런데 이 둘은 하루 중에도 변화가 심합니다.
출근 할 때는 따뜻했지만 퇴근 할 때는 추워서 떨었던 경험 많이 있었죠? 최고,최저 기온을 함께 표시되어도 언제가 가장 추운지는 알 수 없습니다. 아무리 추워도 그게 출근 전,퇴근 후면 나랑 상관없거든요. 비가 온다고 해서 번거럽지만 우산 챙겨갔는데 낮에 잠깐 내리고 말아서 펴보지도 않은 우산을 뻘쭘하게 다시 챙겨서 집에 돌아가기도 하고요.


아이폰5 기본 날씨앱

하루의 변화를 알려면 시간대별로 예보를 제공해야 하는데, 아이폰 기본 날씨앱처럼 매 시간별로 날씨 아이콘과 숫자를 나열하면 복잡해 보입니다.(그나마 깔끔한 디자인에도 불구하고) 숫자도 결국 심볼의 나열이라 인지적으로 처리해야 할 부하가 커질 뿐입니다. 폰의 작은 화면에서는 한 화면에 보여지지 못하고 스크롤을 해야 하니 더 불편합니다. 또 우리는 절대"온"감을 가진게 아니라서 숫자를 바로 이해하기 어렵습니다. 우리가 알고 싶은 건 온도의 변화지 숫자가 아니거든요. 변화를 이해하려면 다시 값들 간의 차이를 계산해야 합니다.
많은 양의 시계열 정보를 표시하는 가장 효율적인 방법은 그래프를 이용해서 정보를 시각화하는 것입니다.


weatherspark by 무이

그래서 디자인을 해봤는데요. 이 그래프는 기존의 날씨앱이나 뉴스에서 사용되던 그래프와 두 가지 큰 차이가 있습니다.

첫째, 체감적인 온도를 쉽게 가늠할 수 있게 어제와 기온 차이를 비교 그래프로 표시했습니다.
어제와 오늘의 그래프가 겹치면 어제랑 비슷한거고 차이의 면적이 크면 춥거나 더워진거죠. 위의 그림에는 새벽에는 어제보다 따뜻했지만(집에서 나가기 전이니까 관심없고) 9시 이후 부터는 어제보다 온도가 낮다는걸 시각적으로 보여줍니다. 어제 오늘 기온을 비교해주기는 하지만 하루의 기온 변화를 어제와 비교해서 그래프로 시각화해주는 건 없었습니다(찾아보니 없네요). 최고,최저 기온 값뿐 아니라 그게 언제 인지도 알 수 있습니다. 보통 새벽에 최저, 낮에 최고 기온을 기록하지만 위 그래프는 그렇지 않은 날의 경우를 보여줍니다.

이렇게 두 값의 차이를 영역으로 나타낸 그래프를 range area chart 라고 하는데(우리말로는 찾아봤는데 모르겠네요) 손으로는 쉽게 그릴 수 있지만 엑셀에서 제공하지 않기 때문에 우리에겐 익숙하지 않습니다. 하지만 이 그래프가 발명(?)된지는 꽤 오래되었는데요. 터프티의 The Visual Display of Quantitative Information 소개된 바에 의하면 1786년에 발행된 책 The Commercial and Political Atlas 에서 무역수지 (수출과 수입의 차이)를 시각적으로 보여주기 위한 그래프로 사용되었습니다. 이 기념비적인 책의 저자 중 한 명인 Playfair 는 스코틀랜드의 공학자이자 정치경제학자인데 우리가 아는 대부분의 그래프들 line graph(시계열 그래프), area chart, bar chart, histogram,pie chart 를 발명했습니다. 네, 그 놈의 파이차트가 태고부터 세상에 존재했던게 아니라 이 사람이 만들었습니다.

Playfair's trade-balance time-series chart, published in his Commercial and Political Atlas, 1786

둘째는 그래프가 0시에서 24시로 하루의 시간 축이 고정되어 있습니다.
모든 날씨앱의 기온 그래프는 현재 시간에서 부터 시작합니다. 이미 지난 정보라 불필요하니까 굳이 보여줄 필요가 없기도 하지만 날씨 정보를 제공하는 업체의 API가 이전 시간 정보는 제공하지 않기 때문에 그릴 수가 없습니다.
사실 이전 시간의 기온은 어제 오늘을 비교하는 것처럼 아침에 나올 때는 어땠는지 아니까 그걸 기준으로 이후 날씨를 판단하는데 도움을 주는 유용한 정보입니다.
또 우리가 관심 있는 시간은 한 시간 뒤나 세 시간 뒤 처럼 상대적인 것 보다 대부분  출근이나 퇴근 시간처럼 정해져 있어서 시작 시간이 가변적이면 매번 축 상의 시간을 먼저 확인해야 합니다. 하지만 시간 축이 고정되어 있으면 항상 같은 곳을 보면 되기때문에 훨씬 보기 편합니다.

하지만 많은 사람들이 그래프를 보면 반사적으로 어렵다고 생각합니다. 의미 있는 실 데이타가 아니라 시험 문제를 위해서 작위적으로 만들어진 그래프만 보아 온 사람들은 좀 더 그런 경향이 있는것 같고요. 제대로 된 그래프를 보는 것이 익숙하지 않아서 인것 같습니다.
게다가 이렇게 난생 듣도 보도 못한 날씨 그래프를 보면 더 어려워합니다. UI 디자인 회의를 하면 경험이 적은 디자이너들은 알려주기 전에는 모르는(학습비용이 큰) UI는 나쁘다고 뺀찌를 놓는 경우가 많습니다. 하지만 사용자는 초보자도,전문가도 아닌 중간정도의 사용자(perpetual intermediates)가 대부분 입니다. 연말정산 처럼 일년에 한번 사용하는 서비스가 아니라 매일 사용하는 날씨 같은 경우는 학습성보다는 효율성에 비중을 두는게 좋습니다. (그럼 연말정산 서비스는 학습성이 좋게 되어 있냐하면 그건 절대 아니더라구요) 결국 익숙한가 아닌가의 문제인데 익숙해지면 기존의 다른 날씨 정보는 너무 원시적이라 다시 돌아가기 어렵습니다 :)

Data Encoding

하단에 기상 상태를 보여주는 부분은 동일한 날씨 아이콘을 반복해서 그리지 않도록 했습니다. 비슷한 아이콘이 반복되면 정작 날씨가 언제 어떻게 변한다는 보다 중요한 정보가 묻히게 되거든요. 하루 종일 맑다고 태양만 계속 그려놓으면 잉크가 아깝잖아요.
오늘 날씨 어때? 라고 물으면 "계속 맑아"라고 답하지 "1시 맑고 2시 맑고 3시 맑고 4시 맑고.." 라고 말하면 이뭐병 이상하잖아요. 정보를 시각화하는 것도 같습니다.
그래서 동일한 날씨의 시간대를 bar로 묶으니 마치 구름처럼 보였습니다. 기상 상태는 결국 구름이 어떻게 변하느냐입니다. 맑은 날은 태양이 뜬게 아니라(태양은 언제나 떠 있습니다) 구름이 없는 날입니다. 구름이 많은지 적은지, partly인지 mostly인지 별로 중요한 정보는 아니라서 차이를 두지 않고(반투명 구름) 눈,비가 오는 정말 중요한 정보만을 눈에 띄도록 했습니다. 비가 오면 파란 구름이고 눈이 오면 하얀 구름이라 언제 우산을 준비해야 하는지 바로 알 수 있습니다.
참고 : 비오는 날 우산 준비하라고 문자 날려줄게요.

중요한 정보를 부각시키려면 대비를 크게 해야 하고 그러려면 중요한걸 강조하는게 아니라 덜 중요한걸 덜어내야 합니다. 그래서 맑은 날씨는 아무 표시도 없습니다. 구름이 없으면 맑거든요. (맑은 날이 별로 없는 북유럽같은 경우는 태양이 비추는 것이 더 중요한 정보이겠지만요)
날씨 심볼에 따라 좀 더 상세하게 나눠지긴 하지만 구름바는 단순히 맑음(없음),구름있음(반투명),우산 필요(비 또는 눈 - 불투명) 세 가지 상태만으로 표시합니다. 하루의 기상 변화를 이 3가지 상태의 조합 패턴으로 파악할 수 있도록 했습니다. gif 처럼 데이타를 압축하여 표시하므로 24개의 개별 날씨 심볼을 표시하는 것에 비해 효율이 높습니다. 디테일의 손실이 있지만 보다 중요한 정보를 빨리 전달 할 수 있습니다.

추가로 일출 일몰 시간이 기상이나 기온에도 영향을 주기때문에 시간축에 함께 표시하고 일몰시간에 표시한 달은 실제 달모양에 따라 변하도록 했습니다. 구름 위에 태양과 달이 떠 있는 디테일도 세계관을 반영한 디자인이라 만족스럽습니다 :)

일교차의 변화

주간 날씨에서 기온은 최고,최저 기온 두 숫자로 적어서 표시하는데 이 경우에도 기온의 변화나 일교차가 얼마나 되는지 눈에 잘 들어오지 않습니다. 그래서 최고,최저 기온을 두개의 그래프로 그려서 보여주기도 하는데, 최고,최저 각각의 기온 변화는 잘 드러나지만 하루의 기온 변화가 아니라 두개의 독립된 항목처럼 표시되고 있습니다. 일교차가 큰지 작은지도 중요한 정보인데(일교차 크니 주의하라고 알려주잖아요) 그래프에서는 비명시적(공백)으로 표현됩니다.



뉴스에서의 주간 날씨 표시


주간날씨 그래프 by 무이

이 문제의 해결도 역시나 range area chart를 사용하는 것입니다. 차이 자체가 데이타이니까 잉크를 아낄 필요가 없습니다. 리디자인인 된 주간날씨에서는 최고,최저 기온 그래프의 차이를 면으로 채우고 꺾은선이 아닌 곡선으로 표시했습니다. 관습적으로 두 개의 선으로 그려서 두 개의 정보로 나뉘어 인식되던 그래프가 면을 채워주는 것만으로, 일교차 하나의 정보로 인식되어 일교차의 크기도 잘 비교가 되고 경계인 최고,최저 기온의 변화 추세도 더 잘 드러납니다.
또 저 경계안에서 하루 동안 주기 그래프가 반복되는 것이니까 꺾은선 그래프보다는 연속적인 완만한 곡선으로 그리는 것이 자연스럽습니다. 신문이나 방송에서 주간날씨 예보로 이 그래프를 사용하고 싶으면 연락주세요. :)
날짜를 표시하는 레이블도 눈 여겨서 볼 필요가 있는데요. 공간이 충분하면 날짜와 요일을 함께 적겠지만 하나만 적는다면 요일이 좋겠지요. 또 아이폰 날씨 위젯에서는 모두 요일만을 표시하고 있는데 기준이 되는 오늘은 명시하는게 혹시 모를 혼동을 줄여줘서 좋습니다. 위 뉴스 사진에는 내일까지 적고 있는데 아마 맥락 상 저녁 뉴스이지 않을까 싶습니다.


세상에서 가장 예쁜 날씨앱

그럼 이렇게 만들면 누구나 좋아할까요?
인터뷰를 해보면 정보를 잘 보여준다고 좋아하는 사람은 안타깝게도 저 같은 데이타소수자들뿐이었습니다. 날씨 정보를 이해하기 쉽게 전달하는 기능적이고 이성적인 측면과 더불어 날씨 앱에서 중요한 건 역시나 감성적인 부분이었습니다. 대충 날씨만 알 수 있으면 예쁜게 최고였습니다. 그래서 위의 날씨앱은 취미로 만들어서 개인적으로 사용하고 있고 p랩에서는 예쁜 날씨 앱을 만들고 있습니다. :)

다른 날씨앱들을 살펴보면 기상 상태를 보여주는데 아이콘을 사용하거나 사실적인 날씨 풍경 사진이나 동영상을 사용하는 형태가 대부분입니다. 참고 날씨 어플 디자인 스타일,  Comparing iPhone weather apps at a glance
p랩에서는 지금까지 없던 형태를 찾아보기로 했는데요. 그래서 정한 컨셉은 실시간 데이타를 기반으로 날씨가 애니메이션되는 라이브 인포그래픽 입니다. 예쁜 일러스트 풍경을 배경으로 태양,구름,밝기,바람,비,눈,번개,나뭇잎 등의 요소들이 실제 날씨 데이타에 따라서 조합되어 애니메이션 됩니다. 말로 설명하기보다 아래 동영상을 봐주세요.
현재 앱스토어에 올라온 버전은 가장 기본적인 MVP(Minimum Viable Product)만을 구현한 버전입니다. 예쁜 라이브 애니메이션과 엄마가 알려주는 날씨정보를 컨셉으로 하고 있습니다. 최종 버전에서는 배경의 테마가 구글 두들처럼 날씨 이벤트에 따라 달라지도록 하려고 합니다. 아래 그림은 기본 배경이 아니라 벗꽃철에 한해서 제공되는 테마로 바람이 불면 벗꽃이 휘날립니다.
현재는 위의 날씨 그래프같은 정보를 추가한 버전을 준비 중입니다. 상이한 접근의 두 디자인이 잘 합쳐질 수 있을지 아직도 잘 모르겠지만요. 사용해 보시고 의견을 들려주세요.


인포그래픽과 데이타정크의 차이는 뭘까요?


1. Cloudia, 서울날씨(아이폰앱) -> App Store 다운로드
수정: Cloudia(아이폰앱,글로벌버전) 홈페이지

2. Weather Spark(웹앱) -> http://lab.pxd.co.kr/weatherspark/ 
   (iOS 기기에서만 동작합니다. 바탕화면 바로가기를 만들면 웹앱으로 동작합니다.)


Cloudia, 서울날씨



Cloudia, 서울날씨




Weather Spark



[참고##정보디자인##]