당신의 대략적인 위치에서 현재 하늘을 CSS 그라디언트로 보여주는 서비스

• 사용자의 IP 주소를 활용하여 현재 자신의 위치 정보를 추정함
• 해당 위치에 맞는 하늘 색상과 분위기를 CSS 그라디언트로 시각화해 표현함
• 별도의 지도나 복잡한 입력 없이 웹사이트 접속만으로 즉시 결과 확인 가능함
• 인터페이스가 단순하고 가볍기 때문에 누구나 쉽게 접근 가능함
• 실제 날씨 정보까지는 반영하지 않으며, 위치 기반 시간대와 태양 위치 중심으로 색상 결정함

---

서비스 개요

• 이 웹서비스는 사용자가 접속했을 때 현재 사용자의 대략적인 위치(위도, 경도)를 IP 주소로 추정함
• 추정된 위치 정보와 현지 시간을 이용하여, 해의 위치 및 시간대에 따른 하늘의 색감을 계산함
• 계산된 하늘 색상은 CSS 그라디언트 형식으로 웹사이트 배경을 렌더링하여, 실시간으로 하늘의 분위기를 보여줌
• 별도의 데이터 입력 과정 없이, 단순히 웹사이트에 접속하면 자동으로 작동함

기능 및 특징

• 지도, 날씨 API, 계정 회원가입 등의 복잡한 과정이 없음
• 실시간 시각화 구현: 현재 위치의 시간대 변화에 따라 하늘 색상이 동적으로 변경됨
• CSS 그라디언트로만 구현되어, 매우 빠르고 가벼운 사용자 경험 제공임
• 실제 위험 기상 정보, 구름 및 강수 등은 반영하지 않으며, 기본적으로 태양 각도와 시간 중심의 알고리듬 적용임

사용 목적 및 의의

• 날씨 앱이나 지도 서비스처럼 복잡하지 않은 간단한 시각적 정보 제공 도구임
• 웹 기반 아트워크나 개인 데모 프로젝트로도 활용 가치가 높음
• 현지화된 시각적 힌트를 자동 제공하므로, 빠르게 ‘지금 이곳 하늘은 어떨까’ 궁금증 해소에 적합함

[GN⁺]

Hacker News 의견

• 경력 초반에 3D 턴바이턴 내비게이션 소프트웨어를 만들던 시절, 하늘을 그리는 작업을 맡았던 기억이 있음

  • 선임이 “낮에는 파란색, 밤에는 짙은 회색 사각형으로 처리하면 끝”이라고 했지만, 나는 환경, 위도, 경도, 시간에 따라 변하는 실제 하늘을 제대로 그려보고 싶어 Preetham 논문[링크]을 참고해 사실적인 하늘 모델을 구현함

  • 별자리는 하드코딩된 천문표로, 처리 속도도 꽤 괜찮았음

  • 하지만 윗선에서는 지평선이 뿌옇고 노란색을 띠는 등 현실적인 효과에 당황했고 “경쟁사 하늘은 파랗다”면서 내 작업을 못마땅해했고 “직접 밖을 보라”는 내 답변도 전혀 통하지 않았음

  • 결국 모든 걸 지우고 파란 사각형만 남김

  • 이 경험 덕분에 이런 사이트를 보면 참 멋지다고 느껴짐

  • 이래서 사양서와 디자인의 중요성을 깨닫게 됨

    • 즉각적으로 이해되는 관습이 중요하며, 너무 많은 시각적 디테일은 오히려 혼동만 더함
    • 하늘이 파란 게 아니라 흐릿하거나 희뿌옇게 나오면 하늘인지, 페이지가 아직 로딩 중인지 헷갈릴 수 있음. 별도 마찬가지로 밤에 기능적 목적이 없음
    • 이런 현실적 효과는 Google Earth처럼 실제 행성 뷰에 어울림. 실제로 만들면 재미는 있지만, 내비게이션을 위한 뷰라면 심플함과 명확성이 제일 중요함. 현실성보다는 실용성이 우선임

  • 전에 같이 일했던 사람이 Cobalt[링크] 게임에서 별 시스템을 물리 기반으로 구현하느라 너무 많은 시간을 쏟았다고 들음

    • 사용성에 문제가 된다면 마감 단계에서 이런 요소를 뺄 수도 있지만, 이런 자잘한 요소들이 쌓여 결과물의 완성도를 높이고 사용자 입장에서 탐험하는 재미가 생긴다고 생각함

  • 이런 경우 프로그래밍이 취미일 때보다 직업일 때 오히려 지루하다고 느낌

    • 가끔 그런 멋진 걸 회사에서 할 수 있는 기회가 오지만, 대체로 위에서 “현실적인 하늘이 OKR 지표를 0.1% 올린다” 같은 연구 결과가 나올 때만 실제로 통과됨
    • 하지만 항상 재미있는 일을 할 수 있는 니치 영역도 있으며, 그래서 게임 업계가 열정에 비해 박봉, 과로 환경임

  • 관리진이 혁신가의 창의성을 무시하는 모습, 어처구니 없는 경영의 전형적인 예시임

  • 최소한 이스터에그로라도 넣을 수 있지 않았을까 생각함

    • Vincent Van Gogh의 그림들이 실제 별자리 위치까지 정확하게 반영했다고 하면서, 그런 영감에서 현실적인 하늘 색 재현에 도전했다고 어필했으면 더 좋았을 것 같음

• 우리는 창문 안쪽에 설치하는 센서를 출시 중임. 이 센서는 하늘의 색상을 작은 콘 각도로 측정해, 그 결과를 skylight 및 실내 window fixture로 전송해 내부에서 똑같은 하늘빛을 재현하는 솔루션임[innerscene.com]

  • 컴퓨터 모니터로 구현할 수도 있지만, RGB 광원 대신 전 스펙트럼을 사용하지 않아서 실내광이 고르지 못한 점이 한계임
  • 또, 현재 코드의 문제점은 구름, 연무, 연기 같은 변수들이 반영되지 않아 실제 바깥 풍경과 달라질 수 있음 (많은 HN 댓글이 지적)
  • 실시간 위성 이미지를 이용하면 부분적으로 보완 가능하지만, 완전히 정확하기 어려워서 궁극적으로 우리가 자체 센서를 개발하게 됨
  • 시장에 이미 다양한 CCT 센서가 있지만, 보통 방향성+산란+반사광만 측정해 7500K 정도가 한계이나, 실제 하늘은 4만K까지 변화함
  • 실제 센서 측정값에서 하늘 색이 시간대 별로 어떻게 변하는지 보여주는 플롯 이미지와[이미지], 추가 정보[링크]를 공유함

• meta http-equiv="Refresh" HTML 태그를 언급한 걸 보니 웃음이 나옴

  • 예전엔 페이지 자동 새로고침이 필요하면 이 방법밖에 없었음

  • 이 프로젝트가 포멀 미니멀리즘의 탁월한 본보기라는 생각이 듦

  • 사실 "http-equiv"의 의미는 동일한 HTTP 헤더 역할로, "Refresh: 60" 헤더를 보내도 같은 효과가 남

  • frameset(프레임셋) 기능을 알게 되면 더 놀랄 것 같음

  • 고마워함! 그리고 미안하지만 내가 태어났을 때는 setTimeout(() => location.reload(), ...)가 이미 널리 쓰이고 있었던 시절임

• 요즘 최신 웹 기술을 모르는 구세대 개발자로서, astro/cloudflare/wrangler 조합으로 아래 코드가 동작하는 원리를 궁금해함

  • const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

  • cloudflare 기능이 astro에 래핑돼서 위도/경도를 주는 거 같은데, 어떠한 내부 처리가 있는지 알고 싶음

  • 문서도 찾아봤지만 명확한 답은 찾지 못해서 자세한 설명을 부탁함

  • 내부 처리가 별도로 보이지 않는 이유는 실제로 마치 마법처럼 동작하기 때문임

    • Astro는 Vercel, Cloudflare, Netlify 등 여러 서버 런타임용 어댑터를 제공하며, 단순하게 플러그 앤 플레이 방식임
    • Cloudflare 어댑터는 다양한 바인딩을 Astro.locals.runtime에 노출시키고, 이 중 cf 바인딩에 위도, 경도 등 다양한 요청 값이 포함됨[링크1, 링크2]
    • 일부 바인딩은 Cloudflare-Worker 환경이 아닐 때 로컬에서 목(mock) 처리됨

  • Cloudflare에서 유저의 위도/경도를 (대략적으로 IP 기반 혹은 기타 방식으로) HTTP 헤더에 자동으로 추가해 주는 기능을 활성화할 수 있음[링크]

    • “이 관리형 트랜스폼은 방문자의 도시, 국가, 대륙, 위도, 경도 정보를 HTTP 요청 헤더에 첨부함”

• 사이트를 열고 20초 동안 ‘언제 변하나’ 기다렸지만... 문득 지금이 자정이라는 걸 깨달음

  • 밤엔 그냥 시커먼 화면만 나오는데, 조금 더 똑똑한 누군가가 별도 추가해줬으면 좋겠다는 생각이 듦

• SunCalc 작성자임. 내 코드가 이런 용도로 사용되는 예시를 보니 진심으로 기쁨

  • 참고로 suncalc.net이 Google Maps API 토큰 만료로 오류가 나고 있음[suncalc.net]

    • 지도 기술 잘 아는 것 같으니, 작은 제안으로 Protomaps[링크]로 마이그레이션 고려 권유함

  • 작성자? 기여자? 어쨌든 멋진 작품이고 정말 좋아해서 이런 데모를 보면 즐거움

• 페이지 새로고침하고, JS 활성화하고, 다시 새로고침을 반복하다가 결국 서버 폭주로 못 뜨는 줄 알았음

  • 댓글을 읽고 나서야 화면이 검은 건 밖이 밤이라서 그런 거라는 걸 깨달았고, 결국 처음부터 잘 작동하고 있었음

• 예상보다 매우 정교한 구현임. 연구 논문[링크]에 기반함

• 폰을 창에 대놓고 확인해봤는데, 실제 하늘(현재 맑음)과 100% 일치해서 아내까지 불러와 자랑함. 진짜 대단하다고 생각함. 축하함

• ant.care[링크] 만드는 사람인데, 배경 하늘을 실제 환경과 동기화하는 게 목표였지만, 지금까지는 아주 단순하게만 구현함

  • 언젠가 이 방식도 적용해보고 싶음. Rust/WASM으로 전체를 할지, 핵심만 Rust로 구현하고 나머지는 JS/HTML에 맡길지 아직 고민임