🌩️ 귀신이 나오는 날씨 앱 만들기: 3D 웹 개발의 으스스한 여정

Source: Dev.to

소개

안개가 끼고 번개가 치면, 이제 더 이상 캔자스에 있지 않다는 걸 알 수 있습니다. 저는 대기 시각 효과와 실용적인 기능을 결합한 무언가를 만들고 싶었습니다—무섭게 느껴지는 날씨 앱 말이죠. 그 결과가 Eerie Weather App이며, 전 세계 도시들의 실시간 상황에 반응하는 유령 같은 떠다니는 집을 3D 날씨 시각화로 구현했습니다. 비가 오면 하늘이 어두워지고 물방울이 추가되며, 뇌우가 발생하면 뾰족한 번개가 내리치고, 각 날씨 유형마다 고유의 파티클 시스템과 주변 소리가 있습니다.

디자인

색 구성표

• 배경: #1a1a2e (깊은 파란‑보라) – 폭풍 전 하늘처럼.
• 강조: #460809 → #f4320b (호버 시) – 피처럼 붉은 하이라이트.
• 텍스트 글로우: 맥동하는 텍스트 그림자를 가진 에테리얼 레드.

h3 {
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

타이포그래피

“October Crow” 폰트는 톱니 모양의 손으로 그린 느낌을 줍니다.

@font-face {
  font-family: "October Crow";
  src: url("/fonts/October Crow.ttf") format("truetype");
}
body {
  font-family: "October Crow", Arial, sans-serif;
}

커스텀 버튼

버튼은 오래된 석판처럼 보이는 인라인 SVG 배경으로 스타일링됩니다.

/* 예시 배경 이미지 */
background-image: url('data:image/svg+xml,');

Three.js 설정

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
scene.fog = new THREE.Fog(0x1a1a2e, 10, 50);

안개는 깊이를 더하고 “무언가 숨어 있는” 분위기를 조성합니다.

유령의 집 모델

loader.load("models/forest_house.glb", (gltf) => {
  house = gltf.scene;
  house.userData.centerY = -center.y - 2.5;
  scene.add(house);
});

// Animation loop
house.position.y = house.userData.centerY + Math.sin(time * 0.5) * 0.2;

집이 부드럽게 위아래로 흔들리며 날씨에 반응합니다.

조명

const ambientLight = new THREE.AmbientLight(0x9999cc, 0.4);      // Moonlit base
const directionalLight = new THREE.DirectionalLight(0xaaaadd, 0.3); // Soft moonlight
const rimLight = new THREE.DirectionalLight(0x6666aa, 0.2);          // Subtle backlight

번개 효과

function createLightningBolt(startX, startY, startZ, endX, endY, endZ) {
  const points = [];
  const segments = 8 + Math.floor(Math.random() * 6);

  for (let i = 0; i < segments; i++) {
    // generate jittered points between start and end
    const t = i / (segments - 1);
    const x = THREE.MathUtils.lerp(startX, endX, t) + (Math.random() - 0.5) * 0.5;
    const y = THREE.MathUtils.lerp(startY, endY, t) + (Math.random() - 0.5) * 0.5;
    const z = THREE.MathUtils.lerp(startZ, endZ, t) + (Math.random() - 0.5) * 0.5;
    points.push(new THREE.Vector3(x, y, z));
  }

  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 });
  const line = new THREE.Line(geometry, material);
  scene.add(line);

  // Fade out after a short duration
  setTimeout(() => scene.remove(line), 200);
}

날씨 데이터 통합

const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,weather_code...`;
const data = await fetch(url).then(r => r.json());

Open‑Meteo 날씨 코드를 무서운 효과에 매핑:

let condition;
if ([95, 96, 99].includes(weatherCode)) condition = "Thunderstorm";
else if ([61, 63, 65].includes(weatherCode)) condition = "Rain";
else if ([71, 73, 75].includes(weatherCode)) condition = "Snow";

사용자 인터페이스

• 검색창 – 원하는 도시를 찾아 날씨가 살아나는 모습을 확인하세요.
• 하단 바 – 빠른 접근 버튼:
  • 🏠 홈 – 카메라를 초기 위치로 재설정합니다.
  • ℹ️ 정보 – 앱 정보와 크레딧이 포함된 모달을 엽니다.

document.getElementById("home-btn").addEventListener("click", () => {
  camera.position.copy(initialCameraPosition);
  controls.target.copy(initialCameraTarget);
  controls.update();
});

패널을 최소화할 수 있습니다:

function togglePanel(panelId) {
  const panel = document.getElementById(panelId);
  panel.classList.toggle("minimized");
}

문제 해결

결론

Eerie Weather App이 라이브되었습니다. 도시를 검색하고, 폭풍 강도를 높이며, 번개가 화면을 비추게 하세요. Three.js 영감을 찾고 있든, 날씨를 확인하는 가장 극적인 방법을 원하든, 이 앱이 모두 해결해드립니다.

🌩️ Eerie Weather App 실행