📱 Live Service

Quon

무료 다국어 QR 코드 생성기 — 웹과 Android 네이티브 앱

JavaScript PWA Kotlin Jetpack Compose CameraX ML Kit
7
QR Types
2
Platforms
i18n
Multi-language

프로젝트 개요

Quon은 누구나 쉽고 빠르게 QR 코드를 생성할 수 있는 무료 서비스입니다. 복잡한 가입 절차나 결제 없이, 웹 브라우저에서 바로 고품질 QR 코드를 만들 수 있습니다. 개인 사용자부터 소규모 사업자까지, QR 코드가 필요한 모든 사람에게 접근성 높은 도구를 제공하는 것이 목표입니다.

URL, 텍스트, 연락처(vCard), 이메일, 전화번호, 위치(GPS 좌표), Wi-Fi 접속 정보 등 7가지 타입의 QR 코드를 지원합니다. 각 타입에 맞는 직관적인 입력 폼을 제공하여 사용자가 원하는 정보를 쉽게 입력할 수 있습니다. 특히 vCard와 Wi-Fi 타입은 복잡한 데이터 포맷을 사용자가 알 필요 없이 자동으로 인코딩합니다.

QR 코드의 전경색, 배경색, 모서리 반경을 자유롭게 커스터마이징할 수 있어 브랜드 아이덴티티에 맞는 QR 코드를 만들 수 있습니다. 다국어(한국어, 영어 등)를 지원하여 글로벌 사용자도 편리하게 이용할 수 있습니다.

PWA(Progressive Web App)로 구현되어 모바일 기기에서도 앱처럼 사용할 수 있으며, Service Worker를 통한 캐싱으로 오프라인에서도 기본적인 QR 생성이 가능합니다. 별도 앱 설치 없이 홈 화면에 추가하는 것만으로 네이티브 앱에 가까운 경험을 제공합니다.

Quon Web 주요 기능

🔗

7가지 QR 타입

URL, 텍스트, 연락처, 이메일, 전화, 위치, Wi-Fi. 각 타입별 최적화된 입력 폼과 유효성 검사를 제공합니다. 복잡한 vCard, Wi-Fi 포맷도 자동으로 인코딩합니다.

🎨

커스텀 디자인

QR 코드의 전경색, 배경색, 모서리 반경, 로고 삽입 등 다양한 디자인 옵션을 제공합니다. 실시간 미리보기로 결과를 즉시 확인할 수 있습니다.

📲

PWA 지원

홈 화면에 추가하여 네이티브 앱처럼 사용할 수 있습니다. Service Worker를 통한 캐싱으로 빠른 로딩 속도와 오프라인 사용을 지원합니다.

🌐

다국어 지원

한국어, 영어를 포함한 다국어 인터페이스. i18n 시스템으로 사용자의 브라우저 언어를 자동 감지하여 최적의 언어를 제공합니다.

📲

Quon Android

Jetpack Compose 기반 네이티브 QR 앱

Quon Android는 웹 버전의 QR 생성 기능을 네이티브 Android 앱으로 확장한 프로젝트입니다. Jetpack Compose를 활용한 모던한 선언형 UI로 개발되었으며, Material 3 디자인 시스템을 적용하여 Android 생태계에 자연스럽게 통합되는 사용자 경험을 제공합니다.

CameraX와 ML Kit을 결합한 실시간 QR 코드 스캐닝 기능을 제공합니다. 카메라를 QR 코드에 비추면 즉시 인식하여 내용을 표시합니다. 일반 QR 코드뿐만 아니라 바코드, Data Matrix 등 다양한 형식을 지원합니다. 스캔 히스토리 관리, 즐겨찾기 등의 편의 기능도 포함되어 있습니다.

AdMob 배너 광고Play Billing 인앱 구매를 통한 수익화 모델을 구현했습니다. 기본적인 기능은 무료로 제공하되, 광고 제거 옵션을 인앱 구매로 제공하여 사용자 경험과 수익의 균형을 맞췄습니다. Play Billing v5 라이브러리를 사용하여 안정적인 결제 플로우를 구현했습니다.

📷

실시간 QR 스캔

CameraX + ML Kit 기반. 빠르고 정확한 QR 코드 인식. 바코드, Data Matrix 등 다양한 형식도 지원합니다.

🧩

Jetpack Compose UI

완전한 선언형 UI로 구성. Material 3 디자인 시스템 적용. 다크 모드 자동 지원으로 일관된 사용자 경험을 제공합니다.

💰

수익화

AdMob 배너 광고와 Play Billing v5 인앱 구매. 광고 제거 옵션으로 사용자 선택권을 제공합니다.

크로스 플랫폼 개발 스토리

처음에는 웹 버전만 만들었습니다. PWA를 통해 모바일에서도 충분히 사용할 수 있었지만, 카메라 접근과 QR 스캔 기능을 네이티브 수준으로 제공하기 위해 Android 앱을 별도로 개발하기로 결정했습니다. 웹 브라우저의 카메라 API는 성능과 안정성 면에서 한계가 있었고, 특히 다양한 Android 디바이스에서 일관된 스캔 경험을 제공하기 어려웠습니다.

웹은 접근성과 즉시 사용성에 강점이 있습니다. URL만 공유하면 누구나 앱 설치 없이 바로 QR 코드를 생성할 수 있습니다. 반면 네이티브 앱은 카메라 성능과 시스템 통합에 강점이 있어 실시간 스캔, 오프라인 기능, 푸시 알림 등을 안정적으로 제공합니다. 두 플랫폼이 서로 보완적인 역할을 하면서, 사용자는 상황에 따라 최적의 도구를 선택할 수 있습니다.

"같은 서비스라도 플랫폼에 따라 최적의 구현 방식이 다릅니다. 웹과 네이티브, 각각의 강점을 살리는 것이 사용자에게 최고의 경험을 제공하는 방법입니다."

기술 스택

🌐 Web
JavaScript PWA Service Worker i18n
📱 Android
Kotlin Jetpack Compose CameraX ML Kit AdMob Play Billing
🎨 Design
Responsive Dark Mode Material 3

관련 프로젝트

더 많은 프로젝트를 확인해보세요.

포트폴리오로 돌아가기