풍경 이미지를 통한 날씨 예보 시각화
(github.com/lds133)- Weather as Landscape는 숫자 중심의 날씨 대시보드 대신 풍경 이미지 안에 24시간 예보와 현재 상태를 담아 더 자연스럽게 확인하도록 만든 프로젝트임
- 이미지의 가로축은 현재 시점부터 다음 날까지의 24시간 타임라인이고, 집이 현재 위치를 나타내며 미래의 날씨일수록 오른쪽에 배치됨
- 풍경 요소는 일출·일몰, 정오·자정, 바람 방향과 세기, 온도 변화, 최고·최저 기온, 구름, 강수, 현재 기온·기압, 생일·휴일 같은 비날씨 이벤트까지 인코딩함
- 구현은 Python 3.9, Pillow, OpenWeather 데이터를 사용하며, 이미지는 296x128 E-Ink 디스플레이용으로 설계됨
- ESP32와 2.9인치 E-Ink 모듈은 인터넷에서 이미지를 받아 15분마다 갱신하는 구성이고, 이미지 생성 코드를 ESP32의 MicroPython에 맞출 수 있는지는 아직 불확실함
숫자 대신 풍경으로 보는 날씨
- 전통적인 날씨 스테이션은 센서 값을 숫자 데이터로 보여주는 경우가 많아, 사용자가 특정 파라미터를 찾고 해석하고 시각화하는 데 노력이 필요함
- 풍경 이미지는 사람의 눈에 자연스럽고, 풍경 요소를 보는 경험은 스트레스를 줄이며 최소한의 노력으로 더 편안한 시각 경험을 제공함
- Weather as Landscape는 숫자에 의존하지 않거나 최소한으로 의존하면서 날씨 정보를 풍경 이미지 안에 인코딩하는 방식을 보여줌
인코딩 방식
- 풍경은 숲속의 작은 집을 중심으로 구성됨
- 이미지의 가로축은 24시간 타임라인임
- 왼쪽의 집은 현재 시점을 표시함
- 오른쪽으로 갈수록 다음 날 조건에 가까워짐
- 현재에서 멀리 떨어진 이벤트일수록 이미지의 오른쪽에 위치함
- 이미지의 세로축에 분포한 여러 풍경 요소는 날씨 이벤트와 조건을 나타냄
풍경 안에 담을 수 있는 정보
- 시간 탐색을 돕는 시간 마커
- 일출과 일몰
- 정오와 자정
- 날씨 예보 정보
- 바람 방향과 세기
- 온도 변화
- 최고·최저 기온
- 구름량
- 강수
- 현재 날씨 상태
- 기온
- 기압
- 날씨가 아닌 이벤트
- 생일
- 휴일
시각 요소와 의미
- 프로젝트는 여러 이벤트 이미지를 조합해 풍경을 구성함
- 해: 일출
- 달: 일몰
- 구름: 구름량
- 집: 현재 시간 위치
- 꽃: 자정과 정오
- 나무 스프라이트: 남풍, 동풍, 서풍, 북풍
- 비와 눈: 강수 형태
- 기압 아이콘: 높은 기압, 정상 기압, 낮은 기압
- 휴일 아이콘: Non-weather event, 예를 들어 누군가의 생일
- 나무가 클수록 예상되는 바람 세기가 강함
- 숲에 서로 다른 나무 유형이 섞여 있으면 중간 방향의 바람을 의미함
예시 해석
- 첫 번째 예시는 정오 무렵이며, 하늘이 맑고 약간의 구름이 예상됨
- 밤사이에 적당한 북풍이 생김
- 현재 기온은 오르는 중이지만 일몰 뒤에는 내려가기 시작함
- 최저 기온은 일출 전 도달함
- 이 기간에 바람은 북동쪽으로 바뀔 것으로 예상됨
- 두 번째 예시는 해가 뜨는 중이고, 더운 맑은 날과 약한 남동풍이 나타남
- 기온은 일몰 뒤에도 계속 높게 유지됨
- 바람은 동쪽으로 바뀌고 저녁 내내 더 강해짐
- 세 번째 예시는 낮과 밤 내내 춥고 비가 오는 날씨임
- 남풍은 밤사이에 북서풍으로 바뀜
- 다음 날 누군가의 생일이 있음을 알려줌
실행과 생성 이미지
- Linux 환경 준비
./makevenv.shsource .venv/bin/activate
- Windows 환경 준비
makevenv.bat.venv/Scripts/Activate
- 이미지 생성 테스트
secrets.py의 OWM_KEY 변수에 OpenWeather API 키를 넣어야 함- 필요하면
secrets.py의 좌표를 사용자의 위치로 바꿀 수 있음 python run_test.py실행 후 생성 이미지는tmp폴더에서 확인함
- 서버 실행
python run_server.py- 브라우저에서 서버 페이지에 접속하면 생성된 이미지 수를 볼 수 있음
E-Ink와 휴대폰 사용
- 하드웨어 구성은 ESP32 development board와 2.9inch E-Ink display module을 포함함
- 현재 E-Ink 구성은 인터넷에서 가져온 이미지를 표시하고, 15분마다 갱신함
- 이미지 생성 코드를 ESP32의 MicroPython에서 사용할 수 있도록 바꿀 수 있는지는 현재 불확실함
- 더 자세한 정보는
esp32/README.md에 있음 - 테스트 중에는 여러 이미지가 생성됨
- 흑백 이미지는 E-Ink 모듈용임
- 컬러 이미지는 휴대폰 홈 화면에 배치할 수 있음
- Android에서는 Web Image Widget을 사용해 인터넷 이미지 표시 위젯을 만들 수 있음
- 저장소의 서버 스크립트를 실행함
- 생성된 이미지 중 하나를 가리키는 위젯을 추가함
댓글과 토론
Hacker News 의견들
-
몇 년 전에 날씨에 따라 그림을 고르는 프로젝트를 만지작거렸음: https://bazzargh.github.io/weather/
manual filter로 바꾸고 필터를 몇 개 설정해 보면 태그된 이미지가 어떻게 나오는지 볼 수 있음. 정확한 날씨 예보보다는 사진 액자나 데스크톱 배경화면에서 분위기를 내는 용도로 생각했음
이미지 태그는 전부 여기 있음: https://github.com/bazzargh/bazzargh.github.io/blob/master/w...
대부분 수작업으로 붙였고, 먼저 마음에 드는 그림을 고른 뒤 태그의 빈틈을 보고 그걸 채울 그림을 찾는 식이었음- Chrome에서 이 페이지가 피싱으로 표시되고 있음
-
재미있음. 오래된 사진 액자를 OpenAI의 DALL-E 이미지 생성기에 연결해서, 현재 날씨 데이터를 바탕으로 이미지를 만들게 해뒀고 몇 시간마다 갱신됨
지금 표시 중인 이미지는 이거임: https://ibb.co/8K5jZ3B- 관련해서 이것도 있음: https://github.com/blixt/sol-mate-eink 도시 이미지를 사용함
-
README 설명에 더해, 이 프로젝트의 구체적인 사용처를 공유하고 싶음. 책상 위에 화면을 두고 쓰는데, 하루 동안 이미지가 계속 변하는 것을 보는 게 의외로 즐거움
예를 들어 비가 오른쪽에서 나타났다가 몇 시간 뒤 사라지거나, 나무가 자라기 시작함. 그동안 해와 달은 꾸준히 앞으로 움직이며 낮과 밤의 전환을 표시함
또 하나 재미있는 점은 이 구성이 이진 시계처럼 보인다는 것임. 사람들이 뭔가 의미가 있다고 짐작하지만 바로 해석하진 못하고, 단순한 디자인 덕분에 스스로 알아내려 하게 됨 -
정말 재미있음. 집 근처 녹지를 주기적으로 찍는 카메라를 설치해보고 싶어짐
이미지와 함께 구름량 데이터와 날짜 스탬프를 저장한 뒤, 현재 예보와 가장 비슷한 이미지를 노트북 배경화면으로 보여주면 좋을 듯함. 이 프로젝트만큼 많은 정보를 전달하진 못해도 꽤 만족스러울 수 있음 -
귀엽고, 조금만 조정하면 실제로 쓸 것 같음. 해석 방식을 더 낫게 만들 여지가 있음: 나무가 휘는 방향으로 풍향을 나타내고, 북풍·남풍은 창의적으로 처리하되 아래로 휘는지 바깥으로 휘는지, 휨 정도나 나무 크기·밀집도로 바람 세기를 나타내면 됨
일출·일몰은 해와 달이 아니라 말 그대로 지평선 위의 해로 표현하고, 밤하늘은 낮과 다른 음영으로 처리하면 좋겠음. 시작점을 “현재 시각”이 아니라 아침이나 자정 같은 고정 시점으로 두고, 집의 위치로 “지금”을 표시하는 편이 나아 보임- 아이디어 자체는 창의적으로 확장할 여지가 많지만, 작은 흑백 화면 때문에 제약이 있었음. 나무가 바람에 휘거나 달팽이가 기어가는 모습을 보여줄 방법은 없음
그래도 하늘에는 생일을 위한 황새나 연휴 시즌의 산타 썰매 같은 재미있는 요소를 넣을 공간이 남아 있음. 더 크고 컬러인 E-Ink 화면이 저렴해지길 기다리는 중임 - 대부분 동의함. 다만 4번은 집 대신 어떤 동물이 이동하면 귀여울 것 같음
그리고 등각 투영 같은 시점을 활용하면 풍향을 시각화하는 데 도움이 될지도 모름 - 그림자, 특히 길이와 방향을 이용하면 하늘과 땅의 음영과 함께 하루 중 시간을 느끼게 할 수 있을 듯함
- 아이디어 자체는 창의적으로 확장할 여지가 많지만, 작은 흑백 화면 때문에 제약이 있었음. 나무가 바람에 휘거나 달팽이가 기어가는 모습을 보여줄 방법은 없음
-
한동안 Android 배경화면으로 비슷한 개념을 쓰고 있음[1]
실제로 유용한 정보를 전달하는 아트워크라는 아이디어가 좋음
[1]: https://play.google.com/store/apps/details?id=kaka.wallpaper...- 이 라이브 배경화면을 몇 년째 쓰고 있고 늘 마음에 들었음
-
Yr.no 앱의 메인 화면이 떠오름. 하루 중 여러 시점에 창밖이 어떻게 보일지를 그림처럼 보여줘서 날씨를 시각화함
애니메이션만 봐도 강수량과 강수 형태, 바람을 꽤 쉽게 감으로 파악할 수 있음. 다만 한 번에 한 순간만 볼 수 있어서 하루를 보려면 가로로 스크롤해야 하고, 기온은 숫자로만 표시됨
https://apps.apple.com/no/app/yr/id490989206?l=nb
https://play.google.com/store/apps/details?id=no.nrk.yr&pcam... -
훌륭한 작업임. 다만 사용자 경험에 초점을 맞춘다면 windy.com이 날씨 전달 경험은 가장 좋음
예를 들어 “오후 8시에 소나기 확률 30%” 같은 예보에는 거의 관심이 없고, 구름이나 비가 어떤 흐름으로 움직이는지가 더 중요함. 그래야 햇빛이 가장 좋은 방향으로 차를 몰고 갈지 등을 판단할 수 있음
windy.com과 비슷한 방식으로 하는 곳이 또 있는지 궁금함. 지금까지 경험은 훌륭하고 어두운 사용자 경험 패턴도 거의 없지만, 이 영역에 더 많은 경쟁이 있으면 좋겠음- 드라이브 중 최악의 날씨를 피하고 싶을 때 예보를 계산해주는 로드트립 날씨 앱을 만들었음. 저녁에 출발할지 다음 아침에 출발할지 판단하는 데 좋음
타임스탬프는 Google 길찾기를 기반으로 만들기 때문에 2024년 기준 가능한 한 정확한 예보에 가깝게 볼 수 있음
“오후 8시에 소나기 확률 30%” 같은 예보가 별로라는 느낌은 이해하지만, 중기 예보는 지금 대체로 그 수준임
Android 또는 iOS: https://weatherthetrip.com/download - Weather Strip(iOS): https://apps.apple.com/us/app/weather-strip/id1528594026
- Meteoblue를 아주 좋아함. 여러 종류의 예보 앙상블 시각화를 제공함
사용자 경험 면에서 windy와 같지는 않지만, 모델의 불확실성과 모델 간 일치 정도를 전달하는 데는 꽤 잘함 - 올해 초 Texas에서 개기일식을 볼 위치를 고를 때 windy.com을 썼음. 완벽하게 맞아떨어져서 일식을 잘 본 뒤 구름이 몰려왔음
- Zoom Earth가 Windy.com과 비슷함
https://zoom.earth/
- 드라이브 중 최악의 날씨를 피하고 싶을 때 예보를 계산해주는 로드트립 날씨 앱을 만들었음. 저녁에 출발할지 다음 아침에 출발할지 판단하는 데 좋음
-
흥미로운 아이디어지만, 이미지의 의미가 이상하게 어긋난 부분이 있음. 특히 밤하늘이 밝으면 안 되고, 일출 때 해가 높이 떠 있으면 안 됨
“하늘 어디에든 해가 보이면 일출을 뜻한다”거나 “밤은 어둠이 아니라 뭔가 다른 것으로 표시된다” 같은 직관에 반하는 규칙을 배워야 한다면, 핵심 목적에는 실패하는 것 같음
많은 날씨 앱은 왼쪽에서 오른쪽으로 이어지는 시간선을 두고, 일출과 일몰을 직관적인 아이콘으로 표시함. Windy.com의 시간선 보기는 하늘 상태, 낮/밤, 달의 위상, 기온, 강수, 풍속과 풍향을 간결한 좌우 시간선에 잘 담아냄 -
날씨 예보를 초현실적인 이미지로 바꾸는 LLM+이미지 생성 AI를 당연히 예상했는데, 실제 사람이 디자인 결정을 내리고 신중히 고른 시각 요소에 데이터를 결정적으로 매핑한 시스템이라 오히려 기분 좋게 놀랐음. 이상할 정도로 신선함