🪟 GitHub : https://github.com/ESeungJun/window-scape
안녕하세요 ! 안드로이드 개발하고 있는 이승준입니다.
인스타그램 보다가 Pascal Mager(@hellothere.de)님의 릴스를 하나 봤는데요
Blender랑 Three.js로 만든 작은 섬이 실제 날씨에 맞춰 바뀌는 영상이었어요.
보자마자 마음에 쏙 들어서 저도 하나 갖고 싶더라고요.
원작은 웹사이트였는데 저는 이걸 바탕화면 구석에 늘 띄워두고 싶었어요.
그래서 바탕화면에 작은 창을 하나 내고, 그 너머 풍경으로 오늘 날씨를 보여주는 위젯을 만들었습니다.
이름은 '창밖날씨(WINDOW SCAPE)'예요.
하늘섬 하나로 시작했다가 이것저것 붙이다 보니 테마가 다섯 개가 됐고
첫 커밋부터 v0.4.0까지 사흘 걸렸어요.
이번에도 Claude Code와 같이 만들었고
이 글에는 무엇을 목표로 잡았는지, 그 목표대로 되는지 어떻게 확인했는지를 정리했어요.
먼저 결과물부터
- 실시간 날씨 - 위치나 도시를 정해두면 지금 날씨 그대로 창밖에 그려줘요
- 날씨 10가지 - 맑음부터 비 · 뇌우 · 눈 · 안개 · 무지개까지, 바람이 세면 풍차가 빨리 돌고 나무가 흔들려요
- 시간대와 계절 - 해가 지면 창문에 불이 켜지고, 가을엔 단풍이 들고, 영하 근처면 눈이 쌓여요
- 테마 다섯 개 - 하늘섬 · 해안도로 · 피렌체 도시 · 움직이는 성 · 숲
- 위젯 - 바탕화면에 깔아두거나 항상 위로 띄우고, 창 크기에 따라 보이는 정보가 바뀌어요
맥이랑 윈도우 설치 파일을 릴리스에 올려 뒀어요.
목표
바탕화면 구석에 늘 띄워둘 위젯이라, 처음부터 목표는 이렇게 잡았어요.
그중에 제일 신경 쓴 건 "미니어처처럼 보이게"였어요.
기능은 v0.2 때 이미 다 있었는데, 그때 풍경은 오래 띄워두고 싶은 느낌이 아니었거든요.
그래서 남은 시간은 거의 Blender로 옮기고, 빛을 굽고, 덜어내는 데 썼습니다.
대신 예뻐지는 만큼 무거워지면 늘 띄워둘 수가 없으니까, 가벼운지는 계속 따로 확인했어요.
1. 하늘섬 하나로 시작
처음엔 원작처럼 하늘에 떠 있는 섬 하나만 만들었어요.
Three.js로 섬이랑 구름바다, 그 아래로 떨어지는 폭포를 코드로 그리고
날씨는 Open-Meteo에서 받아왔습니다.
API 키 없이 바로 쓸 수 있어서 이런 개인 프로젝트엔 딱 좋더라고요.
날씨를 그림으로 바꾸는 건 생각보다 고려할 게 많았어요.
- 일출 · 일몰을 시각만 비교했더니 자정 넘어서 해가 지는 곳에서 꼬였고
- 겨울 눈 덮임을 계절로만 정했더니 따뜻한 겨울에도 눈이 쌓였어요
그래서 해 뜨고 지는 건 날짜까지 포함한 시각으로 비교하고
눈은 실제 최저기온을 보고 쌓이게 바꿨습니다.
백야 · 극야까지 챙길 일은 없을 것 같긴 한데 리뷰에서 나와서 같이 고쳤어요.
2. 바탕화면에 띄우기
웹으로 먼저 만들고 나서 Tauri 2로 감싸서 데스크톱 위젯으로 만들었어요.
늘 띄워둘 거라 가벼운 게 중요했어요.
위젯으로 쓰려고 붙인 건 이런 것들이에요.
- 배치 - 바탕화면에 깔아두기 / 항상 위, 메뉴 막대 창문 아이콘에서 바꿔요
- 투명도 - 30%까지 내려서 배경처럼 은은하게
- 크기 - 작게 두면 풍경과 기온만, 키우면 7일 예보와 시간별 그래프까지
- 자동 업데이트 - 새 버전이 나오면 알아서 받아서 설치
위젯으로 띄워 둘 땐 30fps로만 그려서 배터리를 덜 쓰게 했어요.
3. 코드로 만든 섬이 장난감 같아서
여기까지 하고 나니 돌아가긴 하는데 뭔가 아쉬웠어요.
코드로 상자랑 원기둥을 쌓아서 만든 집 · 나무라 장난감 블록 같은 느낌이 안 빠지더라고요.
원작 릴스처럼 손으로 만든 미니어처 같은 느낌이 나야 늘 띄워두고 싶을 것 같았어요.
그래서 모델을 Blender로 옮겼는데요
Blender를 손으로 다루는 대신 Blender 파이썬 스크립트로 모델을 만들었어요.
뭉게구름 같은 나무, 기와 지붕 집, 풍차, 양 우리까지 전부 스크립트로 만들어서 앱에서 불러옵니다.
(스크립트만 4,000줄이 넘어요,,)
모양보다 더 크게 바뀐 건 빛이었어요.
- Blender에서 하늘에서 오는 부드러운 빛이랑 틈새 그늘을 텍스처로 구워 두고
- 앱에서는 그 위에 시간대 · 날씨에 맞는 하늘빛만 곱하고
- 해만 실시간으로 비춰서 그림자를 만들어요
이렇게 하니까 그늘은 훨씬 부드러워졌는데 오히려 가벼워졌어요.
4. 검증: 예뻐져도 늘 띄워둘 만큼 가벼운지
예뻐지는 만큼 "늘 띄워둘 수 있게"를 어기지 않았는지는 숫자로 확인했어요.
- 프레임 - 빛을 굽기 전후로 같은 화질에서 재 보니 도시 테마가 255에서 1764로 7배 가까이 올랐어요. 무거운 그늘 계산을 미리 구워 둔 덕이에요.
- 설치 파일 - 이 글을 쓰면서 지금 릴리스(v0.5.0)를 다시 봤는데, 모델까지 다 넣고도 맥 18~19MB, 윈도우 17MB예요.
5. 다섯 테마
하늘섬만 있으니까 좀 심심해서 테마를 늘렸어요.
처음엔 전부 공중에 뜬 섬이었는데, 해안도로나 도시가 공중에 떠 있으니 좀 어색하더라고요.
그래서 하늘섬만 빼고 나머지는 지평선까지 이어진 땅이랑 바다 위에 놓았습니다.
움직이는 성은 지브리 느낌을 좋아해서 넣긴 했는데요
영화 속 성을 그대로 옮기면 안 되니까 '네 발로 걷는 성'이라는 발상만 가져와서 따로 디자인했어요.
원작 릴스도 마찬가지로 모델 · 코드는 전부 새로 만들고 아이디어만 빌려왔습니다.
땅으로 내려오니 새 문제가 생겼어요.
카메라가 천천히 도는데 언덕이나 나무, 먼 집 속으로 파고드는 일이 계속 생겼거든요.
땅 높이를 격자로 만들어 두고 카메라가 그보다 아래로 못 내려가게 해서 겨우 잡았습니다.
지평선 풍경이 부담스러우면 설정에서 나무 받침에 올린 디오라마 모양으로도 볼 수 있어요.
6. 덜어내기
테마가 다 갖춰지고 나서 제일 많이 한 건 오히려 빼는 일이었어요.
작은 창에 띄워 두면 빽빽할수록 뭐가 뭔지 안 보였거든요.
- 숲 - 나무 95그루 → 52그루, 대신 들꽃 풀밭이랑 사슴 · 여우 · 토끼를 넣었어요
- 해안도로 - 나무 46그루 → 18그루, 휴게소 · 탈의실을 빼고 차는 5대만
- 마을 사람 - 아예 뺐어요
밤도 처음엔 너무 어두워서 창밖에 뭐가 있는지 안 보였어요.
하늘빛이랑 달빛을 밝히고, 등불이랑 창문 불빛을 두 배로 세게 해서 밤에도 마을이 보이게 했습니다.
해보고 나서
이번에 제일 시간을 많이 쓴 건 어디까지가 "미니어처 같은" 건지 정하는 거였어요.
이건 숫자로 잴 수가 없어서 스크린샷을 계속 보면서 방향을 잡았고
대신 가벼운지는 숫자로 잴 수 있으니까 그쪽은 재 보고 확인했습니다.
혹시 써보시고 마음에 들면 스타 하나 눌러주세요 ⭐
🪟 GitHub : https://github.com/ESeungJun/window-scape
💼 LinkedIn : https://www.linkedin.com/in/승준-이-53707a328/
