🍴 JJIK-MUK (찍먹) - Chrome Extension

링크를 찍어서 맛보기 - 웹 링크의 안전성과 내용을 미리 확인하는 Chrome 확장 프로그램

📖 개요

**JJIK-MUK (찍먹)**은 한국의 음식 문화에서 영감을 받은 이름으로, 소스에 '찍어서 맛보는' 것처럼 링크를 클릭하기 전에 미리 '맛보기'할 수 있는 Chrome 확장 프로그램입니다. 목적지 페이지의 정보와 안전성을 실시간으로 확인하여, 피싱 사이트나 악성 코드로부터 사용자를 보호합니다.

🥟 이름의 의미

• 찍먹 (Jjik-muk): 음식을 소스에 '찍어서 먹는' 한국식 표현
• 링크를 완전히 '열기' 전에 가볍게 '찍어서' 안전성과 내용을 미리 확인한다는 의미
• 안전한 웹 서핑을 위한 스마트한 '시식' 도구

✨ 주요 기능

🔍 링크 미리보기

• 실시간 툴팁 - 링크에 마우스를 올리면 즉시 정보 표시
• 페이지 정보 - 제목, 설명, 메타 데이터 확인
• 스크린샷 - 페이지 미리보기 이미지 (옵션)

🛡️ 보안 기능

• URL 리디렉션 추적 - 단축 URL의 최종 목적지 확인
• 악성 사이트 탐지 - Google Safe Browsing API 연동
• 피싱 사이트 경고 - 위험한 사이트 사전 차단
• HTTPS 상태 확인 - 보안 연결 여부 표시

🤖 AI 기능 (선택사항)

• OpenAI 연동 - 페이지 내용 요약
• 스마트 분석 - 콘텐츠 신뢰도 평가
• 다국어 지원 - 자동 번역 요약

🛠️ 기술 스택

• Chrome Extension Manifest V3 - 최신 확장프로그램 표준
• JavaScript (ES6+) - 비동기 처리, 모듈 시스템
• HTML5 & CSS3 - 현대적인 UI/UX
• Chrome Storage API - 설정 및 데이터 저장
• Fetch API - 네트워크 요청 처리

📂 프로젝트 구조

Jjik-muk/
├── src/
│   ├── background/
│   │   ├── link-analyzer-integrated.js  # 메인 백그라운드 서비스
│   │   ├── safe-browsing.js            # Google Safe Browsing API
│   │   ├── openai-summary.js           # OpenAI API 연동
│   │   └── service-worker.js           # Service Worker 진입점
│   ├── content/
│   │   └── link-preview.js             # 링크 호버 감지 및 툴팁
│   ├── popup/
│   │   ├── popup.html                  # 팝업 UI
│   │   ├── popup.css                   # 팝업 스타일
│   │   └── popup.js                    # 팝업 로직
│   ├── options/
│   │   ├── options.html                # 설정 페이지
│   │   ├── options.css                 # 설정 페이지 스타일
│   │   └── options.js                  # 설정 관리 로직
│   ├── config/
│   │   └── api-keys.js                 # API 키 설정 (gitignore)
│   └── manifest.json                    # Chrome Extension 매니페스트
├── assets/
│   └── icons/                          # 확장 프로그램 아이콘
├── scripts/                             # PowerShell 유틸리티 스크립트
├── test/                                # 테스트 페이지
└── README.md                            # 프로젝트 문서

🚀 설치 방법

사전 요구사항

• Google Chrome 브라우저 (버전 88 이상)
• (선택사항) Google Cloud Console 계정 - Safe Browsing API
• (선택사항) OpenAI 계정 - AI 요약 기능

개발자 모드 설치

1. 소스 코드 다운로드

   git clone https://github.com/yourusername/Jjik-muk.git
   cd Jjik-muk

2. Chrome에서 확장 프로그램 로드

   • Chrome 브라우저에서 chrome://extensions/ 접속
   • 우측 상단 "개발자 모드" 활성화
   • "압축 해제된 확장 프로그램 로드" 클릭
   • src/ 폴더 선택

3. API 키 설정 (선택사항)

   • 확장 프로그램 아이콘 클릭 → 설정 페이지
   • Google Safe Browsing API 키 입력
   • OpenAI API 키 입력
   • 설정 저장

💻 사용 방법

기본 사용법

1. 링크 미리보기: 웹페이지의 링크에 마우스를 올리면 자동으로 툴팁 표시
2. 안전성 확인: 툴팁의 색상과 아이콘으로 안전도 확인
   • 🟢 녹색: 안전
   • 🟡 노란색: 주의
   • 🔴 빨간색: 위험
   • ⚪ 회색: 확인 불가

팝업 메뉴

• 확장 프로그램 아이콘 클릭으로 상태 확인
• 빠른 설정 변경
• 통계 확인

설정 옵션

• 툴팁 지연 시간: 100ms ~ 1000ms
• AI 요약 활성화: OpenAI API 필요
• 안전 검사 활성화: Google Safe Browsing API 필요
• 캐시 설정: 성능 최적화

🔧 API 설정 가이드

Google Safe Browsing API

1. Google Cloud Console 접속
2. 새 프로젝트 생성 또는 기존 프로젝트 선택
3. "API 및 서비스" → "라이브러리" 이동
4. "Safe Browsing API" 검색 및 활성화
5. "사용자 인증 정보" → "API 키 생성"
6. 확장 프로그램 설정에 키 입력

OpenAI API (선택사항)

1. OpenAI Platform 가입
2. API Keys 메뉴에서 새 키 생성
3. 확장 프로그램 설정에 키 입력

🧪 테스트

테스트 페이지를 통해 기능을 확인할 수 있습니다:

• test/test-page.html - 기본 기능 테스트
• test/shortened-url-test.html - 단축 URL 테스트

📊 성능 최적화

• 캐싱: 동일 URL 요청 시 5분간 캐시 사용
• 지연 로딩: 툴팁은 호버 후 설정된 시간 후 표시
• 비동기 처리: 모든 네트워크 요청은 비동기로 처리
• 리소스 관리: 메모리 효율적인 데이터 구조 사용

🔒 보안 고려사항

• API 키는 Chrome Storage에 암호화되어 저장
• 외부 요청 시 CORS 정책 준수
• Content Security Policy 적용
• 사용자 데이터는 로컬에만 저장

📈 향후 계획

• 다크 모드 지원
• 다국어 지원 확대
• 웹사이트 평판 시스템
• 커스텀 필터 규칙
• Chrome Web Store 배포

🤝 기여 방법

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이센스

MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.

👨‍💻 개발자

Im Woojin

• GitHub: RAKKUNN
• Email: woojinim64@gmail.com

🙏 감사의 말

• Chrome Extensions 문서 제공 - Google
• 아이콘 디자인 도구 - SVG Editor

---

🥟 JJIK-MUK - 링크를 찍어서 맛보세요!
Made with ❤️ for a safer web browsing experience