5. 날씨 확인 웹 구현

제작 기간 : 4월 26일 월요일 - 5월 2일 (약 일주일, 총 10시간 정도)

의도 : async await를 이용한 api 데이터 활용해보기 

 

요약 

  - 싱글 페이지 제작

  - animista / sass

  - openWeatherAPI 활용

  - 원하는 지역의 이름을 입력하면 해당 지역의 날씨 상태와 온도, 최저/최고 온도, 풍속, 습도를 알려줌

 

 

 

제작과정

가장 중요하게 생각한 점은 "가독성"이다

클라이언트가 원하는 정보를 바라 볼 때, 한 눈에 알기 쉽게 표현하고 싶었다. 

가져 올 수 있는 날씨 데이터는 많았지만 방대한 정보는 사람의 눈을 피로하게 만든다.

날씨 데이터를 볼 때 많이 보는 최저/최고/체감 온도 와 풍속, 습도만을 표기하도록 제작하였고 가장 중요한 현재 상태 데이터는 svg 화 하여 쉽게 이해가 가도록 프레임을 짰다. 폰트와 통일감 있는 색감, 데이터 삭제 버튼 역시 클라이언트의 가독성을 염두한 결과물 들 이다.

후기

프로그래밍 언어 보다도 html,css를 하는데 시간이 많이 소요 되었다. 이론적인 부분이 부족한 것은 아니고, 어떤 게 더 나은 것인지 확인하고, 만들어보고, 바꾸고를 반복하는 과정이 상당히 길었다. Toy Project 임을 감안하면 현업에서 이보다 훨씬 오래 걸린다는 이야기인데... 한편으로 조금 걱정이다. 이래서 인지, tailwind 나 bootstrap과 같은 프레임워크를 이용해보고 싶은 호기심도 생겼다.

특히 animation의 경우 많은 변화 과정을 거쳤는데 animista를 활용하는 것도 좋았지만 내가 맘에드는 animation만 골라 바로바로 사용할 수 있는 개인 라이브러리를 만들어 봐야겠다는 생각을 하였다

 

javascript의 경우 그동안 내가 부족했던 부분을 다시금 상기하는 시간이라 좋았다. 다만 비동기 부분은 아직도 많이 해매고 있는 중이다. 끝내 완성은 했지만 코드가 상당히 지저분한 편이다.(그 유명한 callback hell을 내가 하고있었다) api에게 요청한 데이터를 global 부분에서 불러내 나타내고 싶었지만 이 부분은 이후의 숙제로 남겨져 있는 상태이다. 

 

아! 백앤드에 대한 흥미가 생겼다. 무언가를 예쁘게 디자인하기 위해 머리를 쥐어짜며 고민하기보단 각 영역간의 데이터의 상호작용을 미리 캐치하고 이를 위한 api 혹은 architecture를 상상하며 고민하는 시간이 훨씬 더 재밌고 유익하게 다가왔다. 물론 구현까지 쉬운게 아니겠지만.