SafeURL

의심스러운 링크를 클릭하기 전에 확인하는 한국어 모바일 웹 앱입니다.

SafeURL은 완벽한 피싱 탐지기가 아닙니다. URL 위험 신호 분석, 개인 분석 기록, 의심 URL 신고, 동일 URL 커뮤니티 이력 조회, Google Safe Browsing 외부 API 신호를 종합적으로 제공합니다.

---

주요 기능

• URL 위험 분석 — URL을 붙여넣어 0–100 위험 점수와 9가지 신호 분석 결과를 즉시 확인
  • HTTPS 사용 여부, IP 호스트, URL 길이, 도메인 길이, URL 단축 서비스, 의심 키워드, 과도한 하이픈, 퓨니코드 도메인, 무료 TLD
• Google Safe Browsing — 외부 API로 악성코드·피싱·스파이웨어 등록 여부 보조 확인
• 분석 기록 저장 — Firestore에 개인 분석 기록 저장 및 목록 관리
• 즐겨찾기 — 기록에 ★ 표시하여 빠른 접근
• 커뮤니티 신고 — 의심 URL 신고 등록·수정·삭제 (작성자 본인만 수정/삭제 가능)
• URL 기록 조회 — 동일 URL의 전체 분석 횟수, 신고 횟수, 신고 유형, 최근 신고일 확인
• Firebase 인증 — 이메일/비밀번호 회원가입·로그인·로그아웃, 데모 계정 지원

---

기술 스택

레이어	기술
UI 프레임워크	React 19 + Vite 8
스타일링	Tailwind CSS v4 (@tailwindcss/vite) + Pretendard 폰트
라우팅	React Router DOM v7
인증	Firebase Authentication (이메일/비밀번호)
데이터베이스	Firebase Firestore
로컬 폴백	localStorage (Firebase 미설정 시 자동 전환)
외부 API	Google Safe Browsing v4
언어	JavaScript (ES modules)

---

화면 목록

경로	화면
/login	로그인 — 이메일/비밀번호 또는 데모 계정
/signup	회원가입
/	홈 — URL 입력 및 최근 분석 기록
/result	분석 결과 — 위험 점수, 신호 목록, Safe Browsing 결과, 저장/신고
/url-history	URL 기록 — 동일 URL 누적 분석·신고 통계
/history	분석 기록 — 개인 저장 기록 목록
/favorites	저장된 기록 — 즐겨찾기 목록
/reports/new	신고하기 — 의심 URL 신고 작성
/reports	신고 기록 — 커뮤니티 전체 신고 목록
/my	마이페이지 — 프로필, 활동 요약, 로그아웃

---

시작하기

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 결과 미리보기
npm run preview

개발 서버는 기본적으로 http://localhost:5173에서 실행됩니다.

---

환경 변수

프로젝트 루트에 .env.local 파일을 생성하고 아래 변수를 설정하세요. .env.example을 복사하여 사용할 수 있습니다.

# Firebase (필수 — 없으면 localStorage 폴백 모드로 동작)
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=

# Google Safe Browsing API (선택 — 없으면 외부 API 확인 비활성화)
VITE_SAFE_BROWSING_API_KEY=

보안 참고: 이 앱은 프론트엔드 데모입니다. API 키는 빌드 번들에 포함됩니다. 프로덕션 환경에서는 Safe Browsing 요청을 백엔드를 통해 프록시하거나 Google Cloud Console에서 API 키 도메인을 제한하는 것을 권장합니다.

---

Vercel 배포

vercel.json이 포함되어 있어 React Router SPA 라우팅이 정상 동작합니다.

# Vercel CLI 사용
npm run build
vercel --prod

# 또는 GitHub 연결 후 자동 배포

GitHub Pages 등 서브 경로 배포 시에는 vite.config.js에 base를 설정하세요:

export default defineConfig({
  base: '/safeurl/',
  plugins: [react(), tailwindcss()],
})

---

프로젝트 구조

src/
  pages/          10개 라우팅 화면
  componentes/    공용 UI 컴포넌트 (MobileFrame, AppHeader, BottomNav, …)
  services/       firebase.js · db.js · safeBrowsingService.js
  utils/          analyzeUrl.js · storage.js
  data/           mockData.js (DEMO_USER, REPORT_TYPES)
docs/
  AI_USAGE.md     AI 활용 개발 과정 문서
vercel.json       Vercel SPA 라우팅 설정
.env.example      환경 변수 예시