당신의 대략적인 위치에서 현재 하늘을 CSS 그라디언트로 보여주는 서비스
(sky.dlazaro.ca)- 사용자의 IP 주소를 활용하여 현재 자신의 위치 정보를 추정함
- 해당 위치에 맞는 하늘 색상과 분위기를 CSS 그라디언트로 시각화해 표현함
- 별도의 지도나 복잡한 입력 없이 웹사이트 접속만으로 즉시 결과 확인 가능함
- 인터페이스가 단순하고 가볍기 때문에 누구나 쉽게 접근 가능함
- 실제 날씨 정보까지는 반영하지 않으며, 위치 기반 시간대와 태양 위치 중심으로 색상 결정함
서비스 개요
- 이 웹서비스는 사용자가 접속했을 때 현재 사용자의 대략적인 위치(위도, 경도)를 IP 주소로 추정함
- 추정된 위치 정보와 현지 시간을 이용하여, 해의 위치 및 시간대에 따른 하늘의 색감을 계산함
- 계산된 하늘 색상은 CSS 그라디언트 형식으로 웹사이트 배경을 렌더링하여, 실시간으로 하늘의 분위기를 보여줌
- 별도의 데이터 입력 과정 없이, 단순히 웹사이트에 접속하면 자동으로 작동함
기능 및 특징
- 지도, 날씨 API, 계정 회원가입 등의 복잡한 과정이 없음
- 실시간 시각화 구현: 현재 위치의 시간대 변화에 따라 하늘 색상이 동적으로 변경됨
- CSS 그라디언트로만 구현되어, 매우 빠르고 가벼운 사용자 경험 제공임
- 실제 위험 기상 정보, 구름 및 강수 등은 반영하지 않으며, 기본적으로 태양 각도와 시간 중심의 알고리듬 적용임
사용 목적 및 의의
- 날씨 앱이나 지도 서비스처럼 복잡하지 않은 간단한 시각적 정보 제공 도구임
- 웹 기반 아트워크나 개인 데모 프로젝트로도 활용 가치가 높음
- 현지화된 시각적 힌트를 자동 제공하므로, 빠르게 ‘지금 이곳 하늘은 어떨까’ 궁금증 해소에 적합함
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에 래핑돼서 위도/경도를 주는 거 같은데, 어떠한 내부 처리가 있는지 알고 싶음
-
문서도 찾아봤지만 명확한 답은 찾지 못해서 자세한 설명을 부탁함
-
내부 처리가 별도로 보이지 않는 이유는 실제로 마치 마법처럼 동작하기 때문임
-
Cloudflare에서 유저의 위도/경도를 (대략적으로 IP 기반 혹은 기타 방식으로) HTTP 헤더에 자동으로 추가해 주는 기능을 활성화할 수 있음[링크]
- “이 관리형 트랜스폼은 방문자의 도시, 국가, 대륙, 위도, 경도 정보를 HTTP 요청 헤더에 첨부함”
-
-
사이트를 열고 20초 동안 ‘언제 변하나’ 기다렸지만... 문득 지금이 자정이라는 걸 깨달음
- 밤엔 그냥 시커먼 화면만 나오는데, 조금 더 똑똑한 누군가가 별도 추가해줬으면 좋겠다는 생각이 듦
-
SunCalc 작성자임. 내 코드가 이런 용도로 사용되는 예시를 보니 진심으로 기쁨
-
참고로 suncalc.net이 Google Maps API 토큰 만료로 오류가 나고 있음[suncalc.net]
- 지도 기술 잘 아는 것 같으니, 작은 제안으로 Protomaps[링크]로 마이그레이션 고려 권유함
-
작성자? 기여자? 어쨌든 멋진 작품이고 정말 좋아해서 이런 데모를 보면 즐거움
-
-
페이지 새로고침하고, JS 활성화하고, 다시 새로고침을 반복하다가 결국 서버 폭주로 못 뜨는 줄 알았음
- 댓글을 읽고 나서야 화면이 검은 건 밖이 밤이라서 그런 거라는 걸 깨달았고, 결국 처음부터 잘 작동하고 있었음
-
예상보다 매우 정교한 구현임. 연구 논문[링크]에 기반함
-
폰을 창에 대놓고 확인해봤는데, 실제 하늘(현재 맑음)과 100% 일치해서 아내까지 불러와 자랑함. 진짜 대단하다고 생각함. 축하함
-
ant.care[링크] 만드는 사람인데, 배경 하늘을 실제 환경과 동기화하는 게 목표였지만, 지금까지는 아주 단순하게만 구현함
- 언젠가 이 방식도 적용해보고 싶음. Rust/WASM으로 전체를 할지, 핵심만 Rust로 구현하고 나머지는 JS/HTML에 맡길지 아직 고민임
