🌌 HTML Canvas로 GROK 영감을 받은 Starfield와 Shooting Stars를 만든 방법 ✨

Source: Dev.to

HTML Canvas 로 GROK 스타필드 & 유성 효과 재현하기

GROK‑스타일 스타필드 애니메이션을 본 적이 있다면 그 분위기를 알 겁니다: 느리고 영화 같은 회전, 은은한 깜빡임, 그리고 가끔씩 지나가는 유성. 이 글에서는 순수 HTML + CSS + JavaScript 로 그 효과를 재현하는 방법을 단계별로 살펴봅니다 — 라이브러리도, 프레임워크도 없이 Canvas API만 사용합니다.

GitHub ⭐ Live Demo 🚀

---

🌌 이 효과에 포함된 내용

• 전체 화면 HTML5 <canvas>
• 화면 밖을 도는 수백 개의 회전 별
• 자연스러운 깜빡임 / 발광 시뮬레이션
• 드물게 나타나는 우아한 유성
• 반응형 리사이즈 처리
  모두 requestAnimationFrame 으로 부드럽게 실행됩니다.

📁 프로젝트 구조

index.html   → Canvas 컨테이너
style.css    → 전체 화면 검은 배경
script.js    → 애니메이션 로직 & 커스터마이징

빌드 단계 없이 index.html 을 브라우저에서 열기만 하면 됩니다.

🧱 HTML: 최소 캔버스 설정

캔버스는 뷰포트 전체를 채우며, 우리가 그리는 모든 요소의 렌더링 표면 역할을 합니다. JavaScript 파일은 DOM이 준비된 뒤에 로드되도록 하단에 배치했습니다.

🎨 CSS: 전체 화면, 방해 요소 없음

html, body {
  margin: 0;
  padding: 0;
  background: black;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

• overflow: hidden 은 스크롤바가 나타나는 것을 방지합니다.
• position: fixed 로 캔버스를 화면에 고정합니다.
• pointer-events: none 은 UI 요소가 캔버스 위에 놓일 수 있게 합니다.

🧠 JavaScript: 핵심 개념

Canvas & Context

const canvas = document.getElementById("starfield");
const ctx = canvas.getContext("2d");

모든 그리기는 2D 렌더링 컨텍스트를 사용해 수동으로 수행됩니다.

⭐ 별 데이터 모델

각 별은 다음과 같은 객체로 저장됩니다:

{
  angle: Number,
  radius: Number,
  speed: Number,
  size: Number
}

별은 극좌표 로 정의됩니다:

• angle → 회전 위치
• radius → 중심으로부터의 거리

이렇게 하면 원형 움직임을 간단히 구현할 수 있습니다.

🌍 캔버스 리사이즈 처리

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  initStars();
}

윈도우 크기가 바뀔 때마다:

1. 캔버스 크기를 업데이트합니다.
2. 새 크기에 맞게 별을 다시 생성해 선명하고 반응형으로 유지합니다.

✨ 스타필드 초기화

const numStars = 360;

별은 다음과 같이 생성됩니다:

stars = Array.from({ length: numStars }, () => ({
  angle: Math.random() * Math.PI * 2,
  radius: Math.random() * Math.sqrt(canvas.width ** 2 + canvas.height ** 2),
  speed: Math.random() * 0.0003 + 0.00015,
  size: Math.random() * 1.2 + 0.5,
}));

• 무작위 각도로 별을 고르게 배치합니다.
• 큰 반경을 사용해 별이 뷰포트 밖까지 돌게 합니다.
• 작은 각속도로 느리고 영화 같은 움직임을 구현합니다.

🔄 애니메이션 루프

function animate() {
  requestAnimationFrame(animate);
  // clear, update, draw, spawn shooting stars, etc.
}
requestAnimationFrame(animate);

각 프레임마다:

1. 캔버스를 지웁니다.
2. 별 위치를 업데이트합니다.
3. 별을 그립니다.
4. 유성을 생성할지 판단합니다.
5. 기존 유성을 업데이트합니다.

🌟 회전 별 그리기

star.angle += star.speed;

const x = centerX + star.radius * Math.cos(star.angle);
const y = centerY + star.radius * Math.sin(star.angle);

전형적인 원운동 수식입니다.

깜빡임 / 발광 효과

const flicker = 0.4 + Math.abs(Math.sin(Date.now() * 0.0015 + i)) * 0.5;

밝기는 다음을 통해 흉내냅니다:

• 진동하는 투명도.
• 별마다 약간씩 다른 위상 오프셋.

단순하면서도 빠르고 효과적입니다.

☄️ 유성

유성은 의도적으로 드물게 등장합니다:

if (shootingStars.length === 0 && Math.random() < 0.01) {
  // create a new shooting star
}

한 번에 하나만 존재하도록 하여 순간을 특별하게 만듭니다. 각 유성은 위치, 속도, 수명을 가집니다.

🎯 유성 꼬리

꼬리는 선형 그라디언트 로 구현합니다:

const grad = ctx.createLinearGradient(
  s.x,
  s.y,
  s.x - s.vx * 35,
  s.y - s.vy * 35
);

투명도가 꼬리 쪽으로 점점 낮아져 파티클 없이도 자연스러운 스트릭 효과를 줍니다.

⚙️ 간편한 커스터마이징

모든 튜닝 옵션은 script.js 에 있습니다.

밀도

const numStars = 360;

깜빡임 강도

// base brightness
0.4
// flicker amplitude
0.5

유성 발생 빈도

Math.random() < 0.01

유성 속도

vx: 3 + Math.random() * 2,
vy: 1 + Math.random() * 1.5

💡 확장 아이디어

• 마우스 기반 시차 효과.
• 색상이 변하는 별들.
• 속도가 다른 깊이 레이어.
• 그라디언트 우주 배경.
• 성운 노이즈 오버레이.

🧪 왜 이 접근법이 효과적인가

• 의존성 제로 – 순수 JavaScript와 Canvas만 사용.
• 극히 빠름 – 간단한 수학 연산 + 캔버스 렌더링.
• 어디든 쉽게 삽입 가능 (랜딩 페이지, 배경, 데모 등).
• UI 배경용으로 최적 – 순수 JS + Canvas만으로도 얼마나 멋진 결과를 만들 수 있는지 보여줍니다.