내가 Astro와 Tailwind를 사용해 Dragon Quest VII용 인터랙티브 'Wiki-Killer'를 만든 방법
Source: Dev.to
문제점: 게임 위키가 부실해요 📉
새로운 Dragon Quest VII Reimagined Demo(Switch 2 / Steam)를 플레이하면서 모든 RPG 게이머가 겪는 좌절감에 부딪혔습니다:
- 구식 텍스트 가이드(GameFAQs)는 플레이 중에 휴대폰으로 보기 힘듭니다.
- 현대 위키(Fandom 등)는 광고가 많고, 로딩이 느리며, 자동 재생 동영상이 있습니다.
그냥 가이드를 읽는 것이 아니라 진행 상황을 추적하고 싶었습니다. 놓친 Shard Fragments와 우물에 숨겨진 Mini Medals을 확인해야 했죠.
그래서 불평 대신 주말을 투자해 Adventure Log라는 솔루션을 만들었습니다.
데모 진행 상황을 추적하는 메인 대시보드
기술 스택: 왜 Astro인가? 🚀
이 도구가 필요했던 조건은 다음과 같습니다:
- 빠름: 모바일 데이터에서도 즉시 로드.
- 인터랙티브: 체크박스, 필터, 진행 바.
- 단순함: 백엔드 없이, 로그인 없이.
Astro (프레임워크)
Astro를 선택한 이유는 기본이 Zero JS이기 때문입니다. 게임 가이드는 대부분 정적 콘텐츠(이미지, 텍스트, 표)라 React나 Next.js는 과잉이며 불필요한 하이드레이션 부하를 초래합니다.
Astro에서는 JSX 문법으로 <Component /> 같은 컴포넌트를 만들 수 있지만, client:load와 같이 명시적으로 인터랙티브를 요청하지 않으면 순수 HTML로 렌더링됩니다.
Tailwind CSS (스타일링)
현대 RPG 메뉴 같은 UI—깨끗하고 카드 기반이며 반응형—를 원했습니다. Tailwind의 유틸리티 클래스 덕분에 모바일에서는 1열, 데스크톱에서는 3열로 전환되는 그리드 레이아웃을 별도 미디어 쿼리 없이 손쉽게 구현했습니다.
LocalStorage (“데이터베이스”)
데이터베이스를 관리하거나 체크박스를 클릭하기 위해 계정을 만들게 하고 싶지 않았습니다. 간단한 useLocalStorage 훅(Preact/React)으로 사용자의 체크리스트 상태를 브라우저에 직접 저장했습니다.
// Simplified logic for the checklist state
const [collected, setCollected] = useState(() => {
if (typeof window !== 'undefined') {
return JSON.parse(localStorage.getItem('dq7-shards') || '[]');
}
return [];
});
const toggleShard = (id) => {
const newSet = collected.includes(id)
? collected.filter(i => i !== id)
: [...collected, id];
setCollected(newSet);
localStorage.setItem('dq7-shards', JSON.stringify(newSet));
};주요 기능 🛠️
-
인터랙티브 샤드 로케이터 – DQ7에서는 색상별 조각을 찾아야 새로운 섬을 열 수 있습니다. 색상(빨강/초록/노랑)과 지역별로 필터링할 수 있는 시스템을 만들었습니다.
-
“놓치기 쉬운” 경고 – 특정 스토리 진행 후 접근이 불가능해지는 아이템을 시각적 배지(예: “스토리 중점” 또는 “한 번만 방문”)로 강조합니다. 이를 통해 완성주의자는 게임을 다시 시작하지 않아도 됩니다.
-
시각적 전리품 가이드 – “보물 상자 안에 있다”는 텍스트 대신, 정확한 인게임 스크린샷을 보여주는 비디오 카드 형태로 구현했습니다.
{guide.difficulty}결과: 100% Lighthouse 점수 ⚡️
Astro가 사용되지 않는 JavaScript를 모두 제거하기 때문에 사이트는 Google Lighthouse 성능 지표에서 100점을 받았습니다. 네이티브 앱 같은 느낌이지만 실제로는 HTML과 CSS만으로 구성됩니다.
결론
이 프로젝트를 통해 웹 개발에 대한 애정을 다시 확인했습니다. 우리가 필요로 하는 도구를 직접 만들 수 있다는 점이 큰 힘이 됩니다.
DQ7 데모를 플레이하고 있다면 한 번 사용해 보세요!
🔗 Live Demo:
💻 GitHub: Insert Repo Link if Open Source
읽어 주셔서 감사합니다! 정적 사이트에 Astro와 Next.js 중 어느 쪽을 더 선호하는지 댓글로 알려 주세요.