🌩️ Haunted Weather App 만들기: 3D Web Development의 으스스한 여정

Source: Dev.to

소개

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

디자인

색상 구성

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

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 배경으로 스타일링됩니다.

/* Example background image */
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);      // 달빛 베이스
const directionalLight = new THREE.DirectionalLight(0xaaaadd, 0.3); // 부드러운 달빛
const rimLight = new THREE.DirectionalLight(0x6666aa, 0.2);          // 은은한 역광

번개 효과

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";

사용자 인터페이스

• 검색 바 – 원하는 도시를 찾아 날씨가 살아나는 모습을 확인합니다.
• 하단 바 – 빠른 접근 버튼:
  • 🏠 Home – 카메라를 초기 위치로 리셋합니다.
  • ℹ️ About – 앱 정보와 크레딧이 담긴 모달을 엽니다.

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 실행하기