KR
위시켓
어려움
외주
카메라 기반 당류·나트륨 시각화 모바일웹 개발 전문가
예산
6,750,000원
예상 기간
2개월
지원 마감
2026년 08월 11일
난이도
어려움
기술 스택
React
Node.js
OCR API
ZXing/QuaggaJS
Canvas
PostgreSQL
Python
MediaDevices API
AI 분석 요약 기회점수 58/100
스마트폰 카메라로 가공식품·음료를 촬영하면 바코드 스캔 또는 영양성분표 OCR로 제품을 인식하고, 당류·나트륨 함량을 각설탕·소금 이미지로 시각화하는 설치 불필요 모바일 웹 서비스입니다. HACCP 공개 데이터를 수집·정규화한 자체 제품 DB, 제품 비교, 미등록 제품 제보·검수, 관리자 백오피스까지 포함하는 풀스택 신규 개발입니다. 브라우저 카메라(iOS Safari 대응)·이미지 처리·OCR 연동·데이터 파이프라인 경험이 있는 웹 풀스택 개발자에게 적합합니다.
핵심 요구사항
- 브라우저 후면 카메라 촬영(iOS Safari 정책 대응, 권한 거부 시 파일 촬영 폴백) 및 클라이언트 리사이즈·압축
- 바코드 검출·디코딩 후 DB 조회, 미등록 시 영양성분표 OCR 경로 전환
- OCR로 당류·나트륨·제공량·단위 추출 및 1회 제공량/총내용량 기준 정규화, 사용자 확인·수정
- 당류→각설탕(4g), 나트륨→소금 환산 및 촬영 사진 위 그래픽 합성·1일 기준치 비율 표시
- HACCP 공개 데이터 수집·스키마 매핑·중복 병합·정기 동기화 배치(수천 건 처리)
- 미등록 제품 제보·검수 워크플로우와 제품/이미지/일괄등록 관리자 백오피스
산출물
- 모바일 웹 프론트엔드(카메라·시각화·비교·공유 화면 일체)
- 제품 DB 및 백엔드 API(바코드 조회, OCR 연동, 환산 로직)
- HACCP 수집·정규화·동기화 배치 파이프라인
- 관리자 백오피스(제품 CRUD, 일괄 등록/다운로드, 검수)
- 배포 및 개인정보 처리방침 반영 문서
매력 포인트
- 요구사항·화면·사용자 스토리·수용 기준이 매우 구체적으로 정의된 명확한 스펙
- 스코프 밖 항목과 착수 전 확정 사항을 명시해 범위 관리가 용이
- 카메라·OCR·시각화 등 기술적으로 흥미로운 포트폴리오성 과제
주의사항
- 기능 범위(카메라·바코드·OCR·시각화·비교·데이터 파이프라인·관리자)가 넓은데 예산 675만원·60일로 다소 빠듯함
- OCR·바코드 인식 정확도와 3초 이내 응답이 상용 API 및 HACCP 데이터 품질에 크게 의존
- HACCP 미제공 필드(대표 이미지·1회 제공량 등) 확보 주체·방식 미확정으로 범위 변동 소지
프로젝트 유형신규개발
적합 개발자5년차 이상 웹 풀스택 개발자 (React + Node/Python, 브라우저 카메라·OCR·데이터 파이프라인 경험)
클라이언트 정보
회사위시켓
위치서울특별시 송파구
고용형태CONTRACTOR
프로젝트 원문 설명
[프로젝트 개요]
- 스마트폰 카메라로 가공식품·음료를 촬영하면 당류와 나트륨 함량을 각설탕·소금 이미지로 시각화하는 식생활 교육 서비스
- 앱 설치 없이 모바일 웹브라우저에서 이용, 기존 센터 홈페이지에서 링크 진입
- 제품 인식 경로 2종: 바코드 스캔, 영양성분표 문자 인식(OCR)
- 제품 데이터베이스는 HACCP 공개 데이터를 수집해 자체 DB로 구축
[비즈니스 목표/배경]
- 영양성분 수치를 각설탕·소금이라는 직관적 단위로 바꿔 식생활 교육 효과 확보
- 촬영 한 번으로 확인 가능한 접근성으로 일상적 활용 유도
[기대 효과]
- 당류·나트륨 과다 섭취에 대한 소비자 인지 개선
- 제품 비교를 통한 저당·저나트륨 선택 유도
[요구사항]
1. 모바일 웹 카메라
- 브라우저 카메라 실행, 후면 카메라 사용
- 촬영 모드 전환: 바코드, 영양성분표
- 촬영 가이드 오버레이 표시
- iOS Safari 정책 대응, 미지원·권한 거부 시 파일 촬영 폴백
- 클라이언트 이미지 리사이즈·압축 후 업로드
2. 바코드 인식
- 바코드 영역 검출 및 디코딩
- 바코드 번호 기준 제품 DB 조회
- 등록 제품이면 제품명·제조사·영양정보 표시
- 미등록 제품이면 영양성분표 촬영으로 안내
3. 영양성분표 문자 인식
- 이미지 보정: 기울기, 밝기, 노이즈
- 문자 영역 검출 및 OCR 수행
- 당류, 나트륨, 제공량, 단위(g/mg/mL) 추출
- 수치 정규화: 1회 제공량 기준과 총내용량 기준 구분
- 인식 신뢰도 판정, 부족 시 재촬영 안내
- 인식 결과를 사용자가 확인·수정 후 확정
4. 시각화
- 당류를 각설탕 개수로 환산, 1개 = 4g 기준
- 소수점은 반 개 단위로 표현
- 나트륨은 mg과 소금 환산량을 함께 표시, 예: 1690mg (소금 약 4.3g)
- 촬영 사진 위에 각설탕·소금 그래픽 합성
- 1일 영양성분 기준치 대비 비율 표시
- 결과 이미지 저장 및 SNS 공유
5. 제품 비교
- 두 제품을 촬영 또는 검색으로 선택
- 당류·나트륨 나란히 표시, 각설탕 개수와 소금량 차이를 이미지로 표현
- g당 기준 저당·저나트륨 제품 표시
- 비교 결과 이미지 저장 및 공유
6. 제품 데이터베이스
- HACCP 공개 데이터 수집
- 스키마 매핑 및 정규화
- 자체 DB 적재 및 중복 병합
- 정기 동기화 배치
- 제품 정보 16개 항목 저장: 바코드, 제품명, 제조사, 분류, 대표 이미지, 총내용량, 1회 제공량, 총 제공 횟수, 당류, 나트륨, 열량 및 기타 영양정보, 영양정보 기준(1회 제공량/총내용량), 데이터 출처, 등록일·수정일, 검수 여부
7. 미등록 제품 수집·검수
- 사용자 촬영 시 바코드·영양정보 이미지·OCR 결과·수정 수치를 임시 저장
- 관리자 검수 후 정식 제품으로 등록
- 중복 제품 확인, 검수 완료·반려 처리
8. 관리자
- 제품 목록 조회, 제품명·바코드 검색
- 제품 등록·수정·삭제, 이미지 등록, 영양정보 등록·수정
- 공개·비공개 설정, 중복 바코드 확인
- 엑셀·CSV 일괄 등록 및 일괄 다운로드
- 미등록 제품 목록 및 검수 상세
- HACCP 동기화 현황 조회
- 기준치·환산 계수 설정
[사용자 스토리]
- 사용자는 제품 바코드를 촬영해 당류와 나트륨을 확인한다
수용 기준: 등록 제품은 3초 이내 결과 표시, 미등록은 영양성분표 촬영으로 안내
- 사용자는 미등록 제품의 영양성분표를 촬영해 수치를 읽는다
수용 기준: 당류·나트륨·제공량·단위 추출, 인식 결과를 화면에서 수정 가능
- 사용자는 당류를 각설탕 개수로 확인한다
수용 기준: 4g 기준 환산, 소수점은 반 개 단위, 1일 기준치 대비 비율 동시 표시
- 사용자는 두 제품을 비교한다
수용 기준: 당류·나트륨 나란히 표시, g당 기준 우수 제품 표시
- 관리자는 사용자가 제보한 미등록 제품을 검수해 정식 등록한다
수용 기준: 이미지·OCR 결과 확인, 수치 수정 후 등록 또는 반려
[핵심 시나리오]
- 접속 - 카메라 권한 허용 - 바코드 촬영 - DB 조회 - 각설탕·소금 시각화 - 결과 저장
- 바코드 미등록 - 영양성분표 촬영 - OCR - 사용자 확인·수정 - 시각화 - 제보 데이터 적재
- 관리자 - 미등록 제품 목록 - 검수 상세 - 수치 수정 - 정식 등록
[데이터 주요 엔티티]
- 제품 (바코드, 제품명, 제조사, 분류, 총내용량, 1회 제공량, 영양성분, 데이터 출처, 검수 여부)
- 영양성분 기준 (당류·나트륨 1일 기준치, 각설탕·소금 환산 계수)
- 미등록 제품 제보 (바코드, 촬영 이미지, OCR 결과, 사용자 수정값, 요청 일시, 검수 상태)
- HACCP 원본 데이터 (수집 원본, 매핑 이력, 동기화 일시)
- 조회 결과 (선택 제품, 인식 경로, 환산 결과)
[상태 흐름]
- 촬영 - 인식 - 조회 - 결과 표시. 인식 실패 시 재촬영 또는 수동 검색으로 분기
- 바코드 미등록 시 OCR 경로로 전환, OCR 결과 확정 시 제보 데이터로 적재
- 제보 데이터: 접수 - 검수 대기 - 검수 완료(등록) 또는 반려
[화면 목록]
- 메인·서비스 소개
- 카메라 권한 안내
- 카메라 촬영(모드 전환)
- 인식 결과·시각화
- OCR 결과 확인·수정
- 수동 검색
- 영양정보 직접 입력
- 제품 상세
- 제품 비교
- 결과 저장·공유
- 관리자 로그인
- 제품 목록·검색
- 제품 등록·수정
- 제품 일괄 등록·다운로드
- 미등록 제품 목록
- 미등록 제품 검수 상세
[외부 연동]
- HACCP 공개 데이터 API (제품 정보 수집)
- 상용 OCR API (영양성분표 문자 인식)
- SNS 공유 (웹 공유 API 또는 각 플랫폼 공유 링크)
[비기능 요구]
- iOS 및 안드로이드 모바일 웹브라우저 지원, 스마트폰 화면 기준 반응형
- HTTPS 필수 (브라우저 카메라 접근 요건)
- 촬영 이미지는 단기 보존 후 자동 삭제, 개인정보 처리방침 반영
- 바코드 인식 결과 표시까지 3초 이내
- 제품 데이터 일괄 등록 시 수천 건 단위 처리 가능
[스코프 밖]
- 제품 앞면 이미지 인식 (별도 협의, 추후 확장 검토)
- 회원 가입·로그인 (비회원 이용 전제)
- 조회 이력, 교육 콘텐츠, 통계 대시보드
- 네이티브 앱 개발
- HACCP 외 상용 제품 데이터 구매
[제약/확인 필요]
임의로 정하지 않고 착수 전 발주사와 확정한다.
- HACCP API 활용 범위 및 초기 적재 대상 건수
- HACCP 미제공 필드(대표 이미지, 1회 제공량 등)의 확보 주체와 방식
- 시각화 방식: 촬영 사진 위 합성 기준으로 산정, 실시간 카메라 트래킹이면 재산정
- 촬영·제보 이미지 보존 기간 및 개인정보 처리 방침
- 웹 접근성 인증 등 공공 행정 요건 적용 여부
- 촬영 모드별 가이드 오버레이 디자인은 촬영 화면의 상태 변형으로 계상, 모드 추가 시 협의
[제안 요청 사항]
- 영양성분표 OCR 접근 방법 및 사용 예정 OCR 서비스
- 수치 정규화(1회 제공량 대 총내용량) 처리 방안
- HACCP 데이터 수집·정규화·동기화 설계 방안
- 모바일 웹 카메라 브라우저 호환성 확보 방안
- 유사 서비스 개발 실적
- 스마트폰 카메라로 가공식품·음료를 촬영하면 당류와 나트륨 함량을 각설탕·소금 이미지로 시각화하는 식생활 교육 서비스
- 앱 설치 없이 모바일 웹브라우저에서 이용, 기존 센터 홈페이지에서 링크 진입
- 제품 인식 경로 2종: 바코드 스캔, 영양성분표 문자 인식(OCR)
- 제품 데이터베이스는 HACCP 공개 데이터를 수집해 자체 DB로 구축
[비즈니스 목표/배경]
- 영양성분 수치를 각설탕·소금이라는 직관적 단위로 바꿔 식생활 교육 효과 확보
- 촬영 한 번으로 확인 가능한 접근성으로 일상적 활용 유도
[기대 효과]
- 당류·나트륨 과다 섭취에 대한 소비자 인지 개선
- 제품 비교를 통한 저당·저나트륨 선택 유도
[요구사항]
1. 모바일 웹 카메라
- 브라우저 카메라 실행, 후면 카메라 사용
- 촬영 모드 전환: 바코드, 영양성분표
- 촬영 가이드 오버레이 표시
- iOS Safari 정책 대응, 미지원·권한 거부 시 파일 촬영 폴백
- 클라이언트 이미지 리사이즈·압축 후 업로드
2. 바코드 인식
- 바코드 영역 검출 및 디코딩
- 바코드 번호 기준 제품 DB 조회
- 등록 제품이면 제품명·제조사·영양정보 표시
- 미등록 제품이면 영양성분표 촬영으로 안내
3. 영양성분표 문자 인식
- 이미지 보정: 기울기, 밝기, 노이즈
- 문자 영역 검출 및 OCR 수행
- 당류, 나트륨, 제공량, 단위(g/mg/mL) 추출
- 수치 정규화: 1회 제공량 기준과 총내용량 기준 구분
- 인식 신뢰도 판정, 부족 시 재촬영 안내
- 인식 결과를 사용자가 확인·수정 후 확정
4. 시각화
- 당류를 각설탕 개수로 환산, 1개 = 4g 기준
- 소수점은 반 개 단위로 표현
- 나트륨은 mg과 소금 환산량을 함께 표시, 예: 1690mg (소금 약 4.3g)
- 촬영 사진 위에 각설탕·소금 그래픽 합성
- 1일 영양성분 기준치 대비 비율 표시
- 결과 이미지 저장 및 SNS 공유
5. 제품 비교
- 두 제품을 촬영 또는 검색으로 선택
- 당류·나트륨 나란히 표시, 각설탕 개수와 소금량 차이를 이미지로 표현
- g당 기준 저당·저나트륨 제품 표시
- 비교 결과 이미지 저장 및 공유
6. 제품 데이터베이스
- HACCP 공개 데이터 수집
- 스키마 매핑 및 정규화
- 자체 DB 적재 및 중복 병합
- 정기 동기화 배치
- 제품 정보 16개 항목 저장: 바코드, 제품명, 제조사, 분류, 대표 이미지, 총내용량, 1회 제공량, 총 제공 횟수, 당류, 나트륨, 열량 및 기타 영양정보, 영양정보 기준(1회 제공량/총내용량), 데이터 출처, 등록일·수정일, 검수 여부
7. 미등록 제품 수집·검수
- 사용자 촬영 시 바코드·영양정보 이미지·OCR 결과·수정 수치를 임시 저장
- 관리자 검수 후 정식 제품으로 등록
- 중복 제품 확인, 검수 완료·반려 처리
8. 관리자
- 제품 목록 조회, 제품명·바코드 검색
- 제품 등록·수정·삭제, 이미지 등록, 영양정보 등록·수정
- 공개·비공개 설정, 중복 바코드 확인
- 엑셀·CSV 일괄 등록 및 일괄 다운로드
- 미등록 제품 목록 및 검수 상세
- HACCP 동기화 현황 조회
- 기준치·환산 계수 설정
[사용자 스토리]
- 사용자는 제품 바코드를 촬영해 당류와 나트륨을 확인한다
수용 기준: 등록 제품은 3초 이내 결과 표시, 미등록은 영양성분표 촬영으로 안내
- 사용자는 미등록 제품의 영양성분표를 촬영해 수치를 읽는다
수용 기준: 당류·나트륨·제공량·단위 추출, 인식 결과를 화면에서 수정 가능
- 사용자는 당류를 각설탕 개수로 확인한다
수용 기준: 4g 기준 환산, 소수점은 반 개 단위, 1일 기준치 대비 비율 동시 표시
- 사용자는 두 제품을 비교한다
수용 기준: 당류·나트륨 나란히 표시, g당 기준 우수 제품 표시
- 관리자는 사용자가 제보한 미등록 제품을 검수해 정식 등록한다
수용 기준: 이미지·OCR 결과 확인, 수치 수정 후 등록 또는 반려
[핵심 시나리오]
- 접속 - 카메라 권한 허용 - 바코드 촬영 - DB 조회 - 각설탕·소금 시각화 - 결과 저장
- 바코드 미등록 - 영양성분표 촬영 - OCR - 사용자 확인·수정 - 시각화 - 제보 데이터 적재
- 관리자 - 미등록 제품 목록 - 검수 상세 - 수치 수정 - 정식 등록
[데이터 주요 엔티티]
- 제품 (바코드, 제품명, 제조사, 분류, 총내용량, 1회 제공량, 영양성분, 데이터 출처, 검수 여부)
- 영양성분 기준 (당류·나트륨 1일 기준치, 각설탕·소금 환산 계수)
- 미등록 제품 제보 (바코드, 촬영 이미지, OCR 결과, 사용자 수정값, 요청 일시, 검수 상태)
- HACCP 원본 데이터 (수집 원본, 매핑 이력, 동기화 일시)
- 조회 결과 (선택 제품, 인식 경로, 환산 결과)
[상태 흐름]
- 촬영 - 인식 - 조회 - 결과 표시. 인식 실패 시 재촬영 또는 수동 검색으로 분기
- 바코드 미등록 시 OCR 경로로 전환, OCR 결과 확정 시 제보 데이터로 적재
- 제보 데이터: 접수 - 검수 대기 - 검수 완료(등록) 또는 반려
[화면 목록]
- 메인·서비스 소개
- 카메라 권한 안내
- 카메라 촬영(모드 전환)
- 인식 결과·시각화
- OCR 결과 확인·수정
- 수동 검색
- 영양정보 직접 입력
- 제품 상세
- 제품 비교
- 결과 저장·공유
- 관리자 로그인
- 제품 목록·검색
- 제품 등록·수정
- 제품 일괄 등록·다운로드
- 미등록 제품 목록
- 미등록 제품 검수 상세
[외부 연동]
- HACCP 공개 데이터 API (제품 정보 수집)
- 상용 OCR API (영양성분표 문자 인식)
- SNS 공유 (웹 공유 API 또는 각 플랫폼 공유 링크)
[비기능 요구]
- iOS 및 안드로이드 모바일 웹브라우저 지원, 스마트폰 화면 기준 반응형
- HTTPS 필수 (브라우저 카메라 접근 요건)
- 촬영 이미지는 단기 보존 후 자동 삭제, 개인정보 처리방침 반영
- 바코드 인식 결과 표시까지 3초 이내
- 제품 데이터 일괄 등록 시 수천 건 단위 처리 가능
[스코프 밖]
- 제품 앞면 이미지 인식 (별도 협의, 추후 확장 검토)
- 회원 가입·로그인 (비회원 이용 전제)
- 조회 이력, 교육 콘텐츠, 통계 대시보드
- 네이티브 앱 개발
- HACCP 외 상용 제품 데이터 구매
[제약/확인 필요]
임의로 정하지 않고 착수 전 발주사와 확정한다.
- HACCP API 활용 범위 및 초기 적재 대상 건수
- HACCP 미제공 필드(대표 이미지, 1회 제공량 등)의 확보 주체와 방식
- 시각화 방식: 촬영 사진 위 합성 기준으로 산정, 실시간 카메라 트래킹이면 재산정
- 촬영·제보 이미지 보존 기간 및 개인정보 처리 방침
- 웹 접근성 인증 등 공공 행정 요건 적용 여부
- 촬영 모드별 가이드 오버레이 디자인은 촬영 화면의 상태 변형으로 계상, 모드 추가 시 협의
[제안 요청 사항]
- 영양성분표 OCR 접근 방법 및 사용 예정 OCR 서비스
- 수치 정규화(1회 제공량 대 총내용량) 처리 방안
- HACCP 데이터 수집·정규화·동기화 설계 방안
- 모바일 웹 카메라 브라우저 호환성 확보 방안
- 유사 서비스 개발 실적
위시켓에서 원본 확인
원본 보기