이 사이트는?

LOOP 홈페이지 개발에 사용된 기술 스택

이 사이트는 Nuxt 4 기반의 SSR 웹 애플리케이션으로, Firebase를 백엔드로 활용하며 AI 어시스턴트 Claude와 함께 개발되었습니다.

프레임워크 & 언어

Nuxt 4

Vue 기반 풀스택 프레임워크

Composition API 기반 UI 프레임워크

TypeScript

정적 타입 자바스크립트

UI & 스타일

Nuxt UI v4

Tailwind 기반 컴포넌트 라이브러리

Tailwind CSS v4

유틸리티 우선 CSS 프레임워크

Lucide Icons

깔끔한 오픈소스 아이콘 세트

백엔드 & 데이터

Firebase Firestore

NoSQL 실시간 클라우드 데이터베이스

Firebase Auth

소셜 로그인 / 사용자 인증

Firebase Storage

이미지 및 파일 클라우드 스토리지

nuxt-vuefire

Nuxt × Firebase 통합 모듈

에디터 & 차트

Tiptap v3

리치 텍스트 에디터 (게시물 작성)

Chart.js + vue-chartjs

DTG 데이터 시계열 차트 시각화

vue3-google-map

DTG 운행 경로 지도 표시

Shiki

코드 블록 신택스 하이라이팅

유틸리티

JSZip

DTG 파일 일괄 ZIP 변환

Moment.js

날짜/시간 포맷 처리

json2csv

DTG 데이터 CSV 내보내기

nuxt-i18n

다국어(한/영/힌디/중문) 지원

AI 개발 어시스턴트

Claude Sonnet 4.6

코드 설계 및 구현 보조 (Anthropic)

Claude Opus 4.8

복잡한 설계 및 아키텍처 검토 (Anthropic)

Gemini 3.1 Pro

멀티모달 분석 및 리서치 보조 (Google)

Claude Code

AI 페어 프로그래밍 CLI 도구

버전 히스토리

현재 v0.0.1

v0.0.1신규2026.05.29

LOOP 홈페이지 최초 공개
Nuxt 4 + Firebase 기반 SSR 구축
제품 소개 페이지 (DTG, 레이더, 교정기)
게시판 / 소식 / 다운로드 / FAQ
DTG 분석 앱 내장 (지도·차트·데이터 카드 레이아웃)
다국어 지원 (한국어, 영어, 힌디어, 중문)
브랜드 테마 3종 — Classic Blue / Light Pro / Dark Premium
메뉴 지원 > 게시판 링크 추가
/dev 페이지 — 기술 스택 및 버전 히스토리
게시물 에디터 Ctrl+V 이미지 붙여넣기 업로드
공통 컴포넌트 정리 (Spinner, EmptyState, ErrorAlert, PageHeader 등)