What The Weather Mobile App

프로덕트 디자이너로 오래 지내다 보면 디자인 외에 다른 직군과 마주칠 일이 많습니다.

기획자와 구현 범위를 논해야 하고 개발자들과 구현 가능성에 대해 논해야 합니다.

다른 직군과 논의하다 보면 정작 디자이너들에게 미안해질 때가 많습니다.

기획자와 개발자간에 합의된 내용을 시각화하는 작업은 온전히 디자이너에게 미뤄지기 때문입니다.

UX/UI 분야에선 그런 경향이 좀 적은 편이긴 합니다만 회사 사정마다 다를 것이라 생각합니다.

 

제가 팀장으로 오래도록 몸 담아왔던 솔루션 회사에선 디자이너는 약간 아쉬운 포지션임에 틀림없었습니다.

모든 직군과 사업팀들의 요구는 모두 디자인팀에 전달이 되었고 아쉬운 소리 들으며 시간 벌기에 급급했었습니다.

그때 하소연하며 이런 소리를 많이 했죠.

 

아... 그냥 내가 개발할 수 있으면 차라리 좋겠다..

 

히빈드라이 사업체를 운영하며 IT 기술에 대해 목마르던 와중에, "그래, 까짓 거 개발 한 번 해보지 뭐!"

머리속에 떠오르는 순간 온라인 강좌를 찾기 시작했고, React Native의 Expo를 이용하여 손쉽게 모바일 앱 만드는 강좌를 찾아 그날 앱 제작을 시작하였습니다.

 

Derive

그간 날씨앱은 forecast 와 current만 제공하는 정말 날씨 상태에 대한 데이터만 보여주는 앱이었습니다.

(2018년 말의 이야기입니다. 현재는 상황이 많이 달라진 상태입니다.)

당시 대한민국은 미세먼지 이슈로 몸살을 앓고 있던 상태였고, 어떻게든 날씨와 함께 건강에 연관되는 데이터를 함께 보여주는것이 의미 있었습니다.

또한 현재의 날씨는 잘 표현되었지만 당췌 어제보다 얼마나 추운지, 얼마나 더운지를 알 수 없었습니다.

날씨앱을 사용하며 항상 궁금하던것은 이 부분이었습니다.

상황을 재현해보자면 

01. "오.. 오늘 좀 춥네.. 영하 5도네. 근데 어제보다 더 추운건가? 어제보다 더 두껍게 입어야 하나..?"

02. "마스크를 써야하는거야 말아야하는거야?"

03. "오후에 비 오나? 우산 가져가야하나?"

이 모든 질문을 해결할 수 있어야 했습니다.

 

Progress

우선 날씨앱을 켜자마자 현재의 기상 상황을 보여주는것이 좋겠다 판단했습니다.

날씨는 크게 Sunny와 Coluds, Rain, Snow, Thunderstorm 등으로 나뉘었고 Day와 Night로 낮과 밤이 제공되었습니다.

모두 시각적으로 표현 가능한 상태들입니다.

화면을 위 아래로 쪼개고 그라데이션을 이용하여 중간부터 아래에는 날씨를, 중간부터 위에는 낮과 밤을 표현하기로 하였습니다.

또한, 미세먼지는 농도를 비율로 계산해 날씨와 낮 밤 그라데이션 레이어 위에 노란 그라데이션을 추가하기로 하였습니다.

 

최초 랜딩 화면은 실 생활에서 가장 필요로 하는 수치들로 배치하였고 어제 날씨와의 비교값을 포함하였습니다.

 

 

Result

제가 찾은 강좌는 날씨 앱을 만드는 강좌였습니다.

GPS를 이용해 단순한 날씨 정보를 API를 이용해 화면에 뿌리는 1차원적인 앱을 만드는 강좌였었는데, 막연하게 Javascript의 IF만 조금 작성할 줄 알았던 저에겐 API를 다뤄볼 수 있는 단순한 강좌는 개발을 시도해볼 수 있는 동기를 부여하기에 부족함이 없었습니다.

 

개발만 할 줄 몰랐지 디자인은 이미 숙련공입니다.

최초 기획했던 요소들을 이용해 빠르게 디자인을 진행하였습니다.

최초로 시도했던 풀 스택 프로젝트였기에 나름 압박 요소를 도입하였습니다.

 

100일 내 완성하기.

 

날씨 상태별로 컬러값을 뽑고 그라데이션으로 낮과 밤을 조합해 갔습니다.

날씨별, 낮 밤을 구분하여 세트로 아이콘을 제작하고 기능별 페이지 레이아웃을 제작했습니다.

모든 화면을 디자인까지 완성하는데 단 3일이 소요되었습니다.

 

 

 

개발은 순조롭지 않았습니다.

Javascript의 IF도 제대로 작성하지 못하던 제가 앱을 만든다는 것은 누구도 납득할 수 없었습니다.

하지만 이상하게도 저는 앱을 완성할 거라는 믿음이 있었고 주위의 좋은 개발자 동료들 덕분에 성공적으로 완성하게 되었습니다.

실제로 App Store와 Play Store에 앱을 성공적으로 런칭하였고 몇몇 국가에서 날씨 카테고리 1등을 차지하기도 하였습니다.

 

Term

2019-11-01 ~
2020-02-01

Worker

Design (본인)
Development (본인)

Stack

React Native

Tools & Service

Sketch, Zeplin, Visual studio code, Git, Amplitude, Firebase