촬영 0초, 코드로만 만든 서울 실시간 날씨 한옥 스테이뷰 라이브 : 클리앙

작업할 때 틀어 둘 앰비언트 영상 찾다가 그냥 직접 만들어 봤습니다.

카메라로 찍은 건 하나도 없고, 전부 코드로 만든 영상입니다. 개발은 거의 Claude Code로 했고요.

한옥 방에서 마당 내다보는 장면인데, 서울 실제 시간이랑 날씨를 그대로 따라갑니다.

밤엔 등불이랑 풀벌레 소리, 새벽엔 참새, 낮엔 바람 소리가 나고 서울에 비 오면 여기도 비 옵니다. 음악은 없습니다.

코딩할 때 켜 두면 집중용으로 괜찮은듯합니다. 요즘 저는 이거 틀어 놓고 작업 중입니다.

---

■ 어떻게 만들었나

영상 파일을 반복 재생하는 방식이 아니라, 웹 페이지 하나가 매 프레임 화면을 직접 그립니다.

- Next.js + WebGL2 로 렌더러 만들고

- AI로 만든 4K 배경 이미지(시간대별 7장 + 비 오는 날 3장)를 셰이더에서 섞어서 밤 → 새벽 → 낮 → 해질녘을 만들고

- 기상청 실황 API 10분마다 조회해서 비 오면 비 장면으로 넘어가고

- 그 페이지를 OBS 브라우저 소스로 띄워서 4K로 송출합니다

빗줄기, 처마 낙숫물, 물웅덩이 파문, 창호지에 비치는 나뭇잎 그림자, 낙엽, 등불 흔들림도 전부 셰이더로 돌립니다.

Claude Code한테 단계별로 지시하고, 결과 캡처 받아서 보고, 이상하면 다시 고치는 식으로 진행했습니다.

제가 한 건 방향 정하고 결과물 눈으로 확인하는 쪽이 대부분이었던듯합니다.

■ 제일 오래 걸린 건 나무 흔들림

처음엔 사인파로 흔들었는데 너무 기계적이더라고요. 그래서

1. AI 영상 생성으로 나무 흔들리는 15초짜리 영상 만들고

2. 옵티컬 플로우로 픽셀별 움직임 뽑아서

3. PCA로 기본 움직임 9개로 쪼갠 다음 (수관 전체가 기우는 움직임, 빠른 왕복, 소나무만 따로 흔들리는 것 등으로 나뉘더라고요)

4. 실제 화면에서는 그 9개 움직임을 바람 세기에 맞춰 새로 만들어 냅니다. 영상을 루프하는 게 아니라 이음매가 없습니다.

여기서 삽질 좀 했습니다.

- 처음엔 나무 윤곽이 제자리에 박제되고, 잎 사이 하늘이랑 산까지 같이 출렁였음 → 나무랑 배경 레이어 분리해서 해결

- 흔들림 키우니까 줄기까지 고무처럼 늘어남 → 가지 굵기별로 뻣뻣함 따로 줘서, 잎이랑 잔가지만 흔들리게 함

■ 소리

Freesound CC0 음원만 썼습니다. 루프 반복이 티 안 나게 매번 다른 지점에서 이어 붙이고, 바람 소리 크기는 화면 바람 세기랑 연결해 뒀습니다.

원본 녹음에 섞여 있던 "틱" 소리는 스크립트로 찾아서 지웠습니다.

■ 24시간 돌리다 잡은 버그

제일 황당했던 건 이거였습니다.

페이지가 30초마다 서버에 상태 보고를 보내는데, 어느 날 밤 7시간 반 동안 끊겨 있었습니다. 방송 화면은 멀쩡했고요.

원인은 fetch 의 keepalive: true 였습니다.

- keepalive 요청은 브라우저가 전송 중인 본문 합계를 64KiB로 제한하는데

- 응답 본문을 안 읽고 + 서버가 Cache-Control: no-store 를 붙이면 크로미움이 그 할당량을 안 돌려줌

- 그래서 118번째 요청(약 59분)에서 꽉 차고, 이후 전부 조용히 실패. catch 에서 에러를 삼켜서 흔적도 없었음

- 덤으로 요청마다 핸들도 하나씩 새고 있었음

keepalive 빼고 응답 본문 끝까지 읽게 하니 해결됐습니다. 주기 요청에 keepalive 쓰면 안 된다는 거 이번에 처음 알았네요.

지금은 워치독이 1분마다 서버·OBS·송출 상태 보고 알아서 복구하고, 재부팅돼도 자동으로 방송 다시 올라오게 해 뒀습니다.

---

장면은 AI로 만들었고, 시간·날씨·소리는 렌더러가 실시간으로 합성합니다.

혼자 만든 거라 어색한 부분 있으면 알려 주세요. 특히 비 오는 날 전환이나 새벽 소리가 자연스러운지 궁금합니다.

개발한당