바코드 생성기

직번 바코드를 빠르게 생성하고 관리하는 오프라인 PWA 웹앱입니다.

https://yuangunn.github.io/Barcode_Generator/

주요 기능

• 다중 바코드 포맷 — Code-128, EAN-13, Code-39, QR 코드 지원
• 빠른 포맷 변경 — 바코드 하단의 포맷 배지를 탭하면 프로필 수정 없이 포맷 즉시 전환
• 프로필 관리 — 여러 직번/바코드를 저장하고 탭으로 전환, 포맷 정보 함께 표시
• 고해상도 바코드 — Retina 디스플레이 대응 고DPI 렌더링, 다운로드 시 최대 6배 해상도 지원
• 오프라인 지원 — 서비스 워커 기반, 네트워크 없이도 바코드 생성 가능
• 다크/라이트 테마 — 시스템 설정 자동 연동 또는 수동 전환
• 이미지 저장 & 공유 — 생성된 바코드를 고해상도 PNG로 다운로드하거나 공유
• 즐겨찾기 & 최근 기록 — 자주 쓰는 바코드 즐겨찾기 등록, 포맷 유형 표시
• 화면 꺼짐 방지 — Wake Lock API로 바코드 표시 중 화면 유지
• 진동 피드백 — 터치 시 햅틱 피드백 지원
• 인앱 브라우저 감지 — 카카오톡/인스타 인앱 브라우저 경고 및 기본 브라우저 안내
• 기존 데이터 마이그레이션 — 이전 버전 데이터 자동 변환

사용법

웹에서 바로 사용

링크 접속 후 프로필을 추가하면 바로 바코드가 생성됩니다.

홈 화면에 추가 (PWA 설치)

Android (Chrome)

1. 사이트 접속
2. 주소창 옆 설치 아이콘 또는 메뉴 → "홈 화면에 추가"

iPhone (Safari)

1. Safari에서 사이트 접속 (카카오톡/인스타 인앱 브라우저 X)
2. 하단 공유 버튼 (네모 + 화살표) 탭
3. "홈 화면에 추가" 선택

iPhone 단축어 연동

iOS 단축어의 "앱 열기"에는 PWA가 표시되지 않습니다. 대신:

1. 단축어 앱 열기
2. + 버튼으로 새 단축어 만들기
3. "URL 열기" 액션 추가
4. URL: https://yuangunn.github.io/Barcode_Generator/
5. 단축어 이름을 "바코드" 등으로 설정

생성된 단축어를 손쉬운 사용 → 터치 → 뒷면 탭과 조합하면 더 편리하게 사용할 수 있습니다.

기술 스택

• HTML/CSS/JS — 프레임워크 없이 단일 파일로 구성
• JsBarcode — Code-128, EAN-13, Code-39 바코드 렌더링
• qrcode-generator — QR 코드 생성
• Service Worker — 오프라인 캐싱 (Cache First + Network Update)
• Pretendard — 한글 UI 폰트
• JetBrains Mono — 바코드 값 표시용 모노스페이스 폰트
• GitHub Pages — 호스팅

프로젝트 구조

├── index.html      # 메인 앱 (HTML + CSS + JS 단일 파일)
├── sw.js           # 서비스 워커 (오프라인 캐싱)
├── manifest.json   # PWA 매니페스트
├── icon-192.png    # 앱 아이콘 192x192
├── icon-512.png    # 앱 아이콘 512x512
└── beta/           # 이전 베타 버전 (레거시)

브라우저 지원

브라우저	지원
Chrome (Android)	완전 지원 + PWA 설치
Safari (iOS)	완전 지원 + 홈 화면 추가
Chrome (Desktop)	완전 지원
Samsung Internet	지원
카카오톡/인스타 인앱	제한적 (기본 브라우저 사용 권장)

라이선스

MIT

만든 사람

yuangunn