Show GN: '우주멍'을 때릴 수 있는 웹시계, '밤의 궤도'를 소개합니다.
(orbit.ggoban.com)안녕하세요!
오늘 아침부터 AI와 함께 '바이브 코딩'으로 만든 사이드 프로젝트, 아름다운 우주 배경화면 시계 '밤의 궤도(Orbit of Night)'를 소개합니다.
만들던 웹 기능에 한 페이지였는데, 그냥 한 페이지로만 놔두는게 어쩐지 조금 아깝다는 생각이 들어 만들기 시작했고, 보면서 잠시 '멍' 때리고 싶어지는 경험을 목표로 만들었습니다.
주요 특징
- 살아있는 배경화면: 별, 성운, 유성이 계속해서 움직이는 배경
- 실시간 ISS 추적: 실제 ISS 위치 데이터를 기반으로 보정되는, 화면 안에서 안정적으로 움직이는 사인 곡선 궤도
- 인터랙티브 요소: 행성을 클릭해 가상으로 스캔하거나, UFO, 블랙홀 효과 등 소소한 재미 추가
- 사용자 설정: 취향에 맞게 행성, UFO, ISS 등의 요소를 켜고 끌 수 있으며, 3가지 테마를 제공
별도 프레임워크 없이 순수 JavaScript와 CSS 애니메이션으로 구현했으며(AI가 구현했지만, 검수하며 깐깐하단 소리를 AI에게 들었습니다?), 특히 ISS 궤도는 안정적인 시뮬레이션과 실시간 데이터 보정을 결합하는 하이브리드 방식으로 만들어 봤습니다.
TMI: 40대 아재가 AI를 만나 개발한 이야기
사실 저는 어느덧 40대가 된 아들딸 아빠입니다.
제 소개를 간단히 하자면 연식도 어느정도 있다보니 과거 텍스트와 머드 기반의 게임들부터 접했던 세대고 또한 웹게임에도 많은 애정이 있는 게이머 이기도 합니다.
컴공을 나와 하는일이 IT쪽이긴 했지만, 서버 엔지니어 쪽에 가까웠고, 그러다보니 미들웨어, 백엔드, 프론트엔드도 어느정도 만질줄 알게된 평범한 직장인이죠.
다만 예전부터 게임을 만들고 싶은 꿈이 항상 있었는데, 발전한 AI의 성능을 체험해보고서 '아 이제 때가 왔다!' 라는 생각과 함께 작년 10월부터 여가시간마다 AI로 요즘 말하는 바이브 코딩을 주로 하고 있습니다.
현재는 세번째 웹게임 토이 프로젝트를 하고 있는데, 중간에 한 기능 페이지를 만들면서 즉흥적인 삘을 받고 힘을 준 화면이 있었는데, 문득 생각해보니 거기에만 쓰기 좀 아깝단 생각이 들더군요. 그래서 이 프로젝트가 탄생하게 되었습니다.
한번 방문해서 '우주멍' 때려보시는 건 어떠신가요?
피드백은 언제나 환영합니다!
말씀해주신 의견들을 수렴해서 수정해두었습니다! 1. 행성은 생성 될 때 고정 된 정보를 가집니다. 2. 유성우 옵션을 개인의 기호에 맞추어 설정에서 변경 가능합니다. (발생빈도, 속도, 갯수) 3. 성운과 티가 잘 안나지만 은하수, 그리고 별빛이 조정되었습니다. 4. 블랙홀 옵션을 끄면 이젠 동작하지 않습니다. 5. 스x워x 의 워프와 비슷한 효과를 오마쥬 해서 추가했습니다. 6. 행성 위에 가끔씩 특이한 친구들이 나타납니다. 모두 많은 관심 보내 주셔서 감사합니다!
의미있는 프로젝트를 소개해주셔서 감사합니다. 시간이 지나서도 꿈을 잃지 않고 도전하시는 모습이 멋지고 존경스럽습니다. 자녀분들도 좋아할 것 같아요! 몇 가지 피드백을 드리자면, 1) 유성우가 너무 빠르고 많이 떨어져서 멍 때리기에는 너무 신난달까요? 조금 더 희미하고 적게, 천천히 떨어지면 잔잔하고 감성적인 분위기를 연출할 수 있을 것 같아요. 2 )행성 스캔에서, 같은 행성에 대해서는 같은 정보만 나오게 하면 어떨까요? 3) 설정의 블랙홀 이펙트는 클릭 효과를 의미하는 것인가요? Off해도 해당 효과가 꺼지지 않아요. 4) 설정의 Random Color가 어떤 색이 바뀌는 것인지 잘 모르겠어요.
피드백 감사합니다. 유성우는 슬라이드를 통해 빈도를 조절하는 옵션을 고려 중입니다. 행성도 클릭마다 다른 정보가 나오는 부분도 수정사항입니다ㅠㅠ 크흑. Random Color 는 나타나는 행서의 색이 매번 랜덤하게 나오도록 하는 옵션입니다. 행성 자체가 천천히 움직이니 확인하시려면 그 위 Planet옵션을 껐다 켜보시면 다른 색 행성이 나오는걸 확인하실 수 있습니다 ㅎㅎ. 블랙홀은 원래 주변 별들과 우주선이 클릭했을때 끌려들어가는 이펙트를 주고 싶었는데,, 그건 브라우저와 javascript로만 처리하긴 만만찮은 부분이어서 별도 파티클만 끌려가는 느낌까지만 구현했습니다 ㅠ. off로 안꺼지는건 역시 수정 예정입니다. 소중한 의견 감사드립니다!
앗 역시 이하세상 하늘아래 새로운 것은 없다더니...! 행성은 1개만 나오고 그 위에 유니크 요소가 출현하는걸로 재미를 더할까 하는데, 여러 행성이 나오는 것도 테스트 해볼게요. 감사합니다.