Dev_R
[연쇄개발자] 이미지 속 QR코드 손쉽게 해독하는 "사진 속 QR 코드 인식기" 서비스 개발 본문
안녕하세요, 연쇄 개발 프로젝트를 진행하고 있는 연쇄개발자 데이브입니다.
사진 속에 포함된 QR코드를 간편하게 인식하고 해독하는 "사진 속 QR 코드 인식기" 서비스 개발기와 함께 해당 서비스에 대한 이야기를 담아보려고 해요.
https://play.google.com/store/apps/details?id=com.devr.qrcodeinfo
사진 속 QR 코드 인식기 - Google Play 앱
저장 된 사진/이미지 속 QR코드 정보를 정확히 분석해서 알려드려요~
play.google.com
문제 도출 및 동기 부여
우선 저는 아이폰을 주 핸드폰으로 사용하고 있지만, 개발용으로는 안드로이드 폰을 사용하고 있어요. 개발하다보면 QR코드를 읽고 QR코드에 담긴 링크를 통해 디버깅을 해야하는 경우가 종종 있는데 그럴때마다 폰을 들어 카메라를 켜고 끄고 하는게 귀찮더라구요. 간단하게 사진 하나 찍어두고 그 이미지를 재사용할 수 있으면 좋을텐데 말이죠!
아이폰의 경우에는 기기 내 사진첩 앱에 QR코드 담긴 이미지가 있으면 자동으로 QR코드를 인식해 쉽게 이동할 수 있도록 지원하지만, 안드로이드 사진첩에서는 지원하지 않아 이런 불편함이 생기는것 같더라구요.
그래서 이러한 불편함을 해결하고자 "사진 속 QR 코드 인식기" 어플을 개발하게 되었어요. 간단하게 사진첩에 있는 이미지에서 QR코드를 인식해내고, QR코드에 담긴 URL, Text들을 보여주는 서비스인거죠.
프로젝트 설계 및 아키텍처
프로젝트는 이전과 마찬가지로 기존에 사용한 하이브리드 웹앱 코드와 구조를 재사용해서 사용하기로 했어요.
웹은 React를 이용해 개발했고, 네이티브는 React Native를 사용해 개발했어요.
QR 코드 인식 로직은 오픈소스인 qr-scanner를 사용해서 구현했어요. 여러 테스트를 해봤을 때, 인식률도 나쁘지 않았고 특히 대부분의 라이브러리는 실시간 카메라를 통한 QR인식에 초점이 맞춰진 라이브러리가 많았는데, 이 라이브러리는 이미지에 있는 QR인식도 지원해서 해당 라이브러리를 사용하게 됐어요.
https://www.npmjs.com/package/qr-scanner
qr-scanner
A javascript QR scanner library. Latest version: 1.4.2, last published: 9 months ago. Start using qr-scanner in your project by running `npm i qr-scanner`. There are 36 other projects in the npm registry using qr-scanner.
www.npmjs.com
MVP 기능 개발
"사진 속 QR 코드 인식기" 어플의 주요 기능은 업로드한 이미지에서 QR코드를 인식하고, 해당 QR코드의 내용을 해독하는 거에요.
이미지 업로드와 QR코드 해독 과정에서 정확한 처리를 위해 이미지 처리 및 QR코드 라이브러리를 효과적으로 통합하는 것이 주요 도전점이었어요.
현재는 이미지 업로드 후 QR코드 라이브러리를 통해 QR코드를 인식하고, 해당 QR코드의 내용을 추출하는 기능을 제공하고 있어요.
결과
"사진 속 QR 코드 인식기"는 2022년 12월 31일 안드로이드 플레이스토어에 출시한 이후 작지만 꾸준히 총 설치 사용자수가 늘어났어요! 글을 작성하는 8월 말 현재 149명 정도의 다운로드 수를 유지하고 있는 상태에요.
발전 가능성
"사진 속 QR 코드 인식기" 어플은 현재는 이미지에서 QR코드를 해독하는 기능을 제공하고 있지만, 미래에는 더 다양한 형태의 코드를 인식하고 해독하거나, QR코드를 생성하는 기능을 추가할 수도 있을것 같아요.
마무리
"사진 속 QR 코드 인식기" 어플은 사진 속 QR코드를 간편하게 해독하는 데에 도움을 주는 서비스에요. 이미지 업로드 후 QR코드를 신속하게 해독하여 정보를 추출할 수 있고, 앞으로 사용자의 니즈를 확인해 더 다양한 기능을 통해 사용자들의 편의를 제공할 수 있을것 같아요.
이미지 속에 있는 QR코드를 인식하고 싶다면 "사진 속 QR 코드 인식기"를 한번 사용해보세요~
구글 플레이스토어 이동!
https://play.google.com/store/apps/details?id=com.devr.qrcodeinfo
사진 속 QR 코드 인식기 - Google Play 앱
저장 된 사진/이미지 속 QR코드 정보를 정확히 분석해서 알려드려요~
play.google.com
'연쇄개발자' 카테고리의 다른 글
| [연쇄개발자] Remix로 수익형 서버 사이드 렌더링(S-SSR) BLOG 만들기(2) - 레이아웃, loader 구현 (0) | 2023.09.12 |
|---|---|
| [연쇄개발자] Remix로 수익형 서버 사이드 렌더링(S-SSR) BLOG 만들기(1) - 기획, remix 셋팅, Routing 구현 (0) | 2023.09.11 |
| [연쇄개발자] 해외여행 카드 수수료 계산은 "해외 청구금액 계산기"로 (1) | 2023.08.19 |
| [연쇄개발자] 지하철에서 급똥이 마려울 때, "퀵 액세스" 서비스 소개 (0) | 2023.08.18 |
| [연쇄개발자] 드디어 출시한 "유튜버 맛집 지도 앱 - 맛zip" 🧡 (2) | 2023.03.21 |
