티스토리 뷰

Mobile app study

네이버 날씨 모바일 사이트

디자이너 도리스 2016. 1. 2. 15:26

 

네이버 날씨 모바일 사이트. 

특징

  1. 배경이미지 조차 정보를 전달하는 컨텐츠 
  2. 적절한 스와이프의 활용  
  3. 알고보면 의미있는 날씨 그래프 

 


1. 배경이미지

배경이미지가 시간과 날씨에 따라 달라지는데 그 변화가 섬세하다. 단순히 오전, 오후로 나누고 해, 비, 구름 등의 아이콘을 첨부해서 보여주는 수준이 아니다. 하루종일 구름 낀 날이라도 새벽과 오전, 오후, 저녁의 밝기가 다르게 적용되고, 구름의 종류까지 달라진다. 아마도 구름의 양에 따라 달라지는 것으로 추측된다. 비 내리는 날도 마찬가지다. 가랑비냐 폭우냐에 따라 배경이미지의 비가 달라진다. 

이정도면 거의 배경이미지도 날씨 정보를 전달하는 컨텐츠로 봐야 한다. '많은 구름이 예상됩니다' 라는 텍스트보다 더 직관적으로 와닿는다. 나는 배경 속 구름의 양으로 얼마나 흐릴지 감을 잡곤 한다. 

 

아래에서 같은 날 아침과 낮을 비교해 보자. 좌측 이미지는 아침이고 우측 이미지는 낮 시간이다. 하루종일 구름 낀 날이지만 시간에 따라 구름 이미지와 밝기가 다르다.  

  

 

2. 스와이프

스와이프 하면 다른 지역의 날씨를 설정해서 볼 수 있다. 자주 다니는 지역을 추가해 두면 편하다. 스와이프와 지역 이동. 왠지 어울린다. 

 

 

 

 

3. 날씨 그래프

날씨 그래프는 보는 법을 한번만 익히면 아주 유용하다. 

그래프 속 2개의 선. 당연히 흰색 선을 관심있게 보겠지만 투명 선의 의미가 궁금하다면 제일 앞으로 스와이프해보자. 범례가 나타난다. 흰색 선은 오늘, 투명 선은 어제다. 어제와의 비교를 제안해 준 점은 최고다. 

아래 그래프를 보면 어제 이맘때 보 5도가 높다. 사실 '온도 그래프'는 화면 맨 위에서 '어제보다 5도 높음' 이라고 안내하기 때문에 잘 보지 않는다. 나는 '바람 그래프'를 자주 보는데 외출을 하기 전 이곳에서 바람세기를 확인하곤 한다. 요즘같은 겨울날씨는 바람에 따라 체감온도가 많이 달라지기 때문에 외출 전 바람이 센지, 약한지 전날과 비교해 보고 외출준비를 한다. 

 

아이콘의 활용이 정말 잘 된 듯하다. 바람 방향을 '남동풍' 이런 식으로 표현하는 것 보다는 훨씬 보기 편하다. 습도의 경우 시간대별로 습도 차이가 거의 없는 경우 아이콘 내의 변화가 미미해서 무의미해질 때가 있다. 그래도 눈, 비 내리는 날은 볼만하다. 

 

 

정말 중요한 데이타는 텍스트로 표시하고, 부가적인 데이타인 바람 방향이나 물기 양을 아이콘으로 표현해서 정보도 전달하고 꾸미기 용도로 사용했다. 

아이콘은 읽지 않고 보는 것이라 직관적이다. 반면 명확성은 떨어진다. 주관적으로 자기 경험에 의해서 해석하기 때문이다. 그렇지만 화면 내에서 우선순위가 낮은 정보의 경우 정보 전달은 감만 잡을 수 있는 선에서 하고 꾸밈 요소로 전환해서 화면에 생동감을 주는 것도 좋다.

 

 

4. 기타

맥락에 맞게 있어야 할 자리에 있으면 박스도 불릿도 필요 없다. 대기오염정보 타이틀 우측의 '오늘', '내일' 이기 때문에 버튼모양이 아니어도 탭해보게 된다. 

 

 

화살표 아이콘의 위력. 한 번 탭하면 두배로 긴 미래의 날씨를 미리 예상할 수 있다. 

 

 

 

비슷한 구성의 컨텐츠를 2가지 모양으로 배치. 

디자이너 입장에서 비슷한 구성이라 말할 수 없지만. 표현해야 할 요소가 3개냐 4개냐, 데이타 양이 얼마냐 따라 그리드가 달라지기 때문에. 어쨋든. 참 깔끔하다. 

  • 구성요소 3개 (아이콘, 아이템, 데이타) 
  • 구성요소 4개 (아이콘, 아이템, 데이타, 코멘트) *데이타의 의미를 색으로 구분.


 

마음에 드는 일출일몰. 

'일출', '일몰' 이라는 텍스트 명칭 대신 아이콘으로 표현한 점. 숫자로된 날짜보다 인지부하를 덜 주는 '오늘', '내일' 이라는 표현을 더 부곽시켜 표시한 점 모두 마음에 든다. 날짜를 빼도 정보를 이해하는데 아무 불편이 없을 것이다. 

 

[타이틀 이미지 배경사진] JD Hancock