플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - iOS Safari의 카메라 접근 정책과 브라우저별 파일 입력 동작 차이를 흡수하는 폴백 설계가 필요합니다 - 영양성분표 촬영 각도·조명에 따른 OCR 인식 오차를 사용자 확인·수정 단계로 보완하는 흐름 설계가 필요합니다 - 1회 제공량과 총내용량 표기가 혼재된 영양정보를 정규화하는 규칙 설계가 필요합니다 - 각설탕·소금 그래픽 합성 시 실제 사진 비율에 맞춰 오브젝
프로젝트 성과
이미지 전처리 파이프라인 구현
Canvas 기반 기울기 보정·대비 조정 로직을 설계하고, OCR API 호출 전 전처리 단계를 프론트엔드에서 수행하는 구조를 구현합니다.
당류·나트륨 환산 로직 설계
1회 제공량 대비 총내용량 비율을 반영한 정규화 계산식을 구현하고, 각설탕·소금 환산 함수를 모듈화합니다.
브라우저 바코드 디코딩 구조 최적화
ZXing 기반 클라이언트 사이드 디코딩에 프레임 스로틀링을 적용해 신속한 인식을 지원하는 구조를 설계합니다.
카메라 폴백 UX 설계
iOS Safari 카메라 정책과 권한 거부 상황을 감지해 파일 업로드 방식으로 전환하는 폴백 로직을 구현합니다.
핵심 기능
모바일 웹 카메라 촬영 인터페이스
브라우저에서 후면 카메라를 실행해 바코드/영양성분표 촬영 모드를 전환하고, 촬영 가이드 오버레이와 권한 거부 시 파일 업로드 폴백을 제공합니다
진행 단계
요구사항 분석 및 화면 흐름 설계
2026.07
카메라 촬영→인식→시각화 흐름을 정의하고 PostgreSQL 제품 스키마 16개 항목을 설계합니다.
프로젝트 상세
1) 포트폴리오 소개 브라우저 카메라로 가공식품의 바코드 또는 영양성분표를 촬영하면, 상용 OCR API 연동과 자체 정규화 로직으로 영양정보를 추출해 당류는 각설탕 개수로, 나트륨은 소금 환산량으로 시각화하는 모바일 웹 서비스입니다. React 18과 TypeScript 기반 프론트엔드, Express·PostgreSQL 백엔드로 카메라 인식부터 제품 비교까지 하나의 데모로 구현합니다. 2) 작업 범
