Service DevLog Series
🚀 서비스 개발기
사진 한 장으로 과일 맛을 판정하는 GoodFruit AI 서비스의 아이디어 기획부터 백엔드, 프론트엔드, Web Share API, 동적 OG 카드, SEO 정적 가이드 생성, GA4 퍼널 분석 및 수익화까지의 실전 개발 기록입니다.
- 서비스 개발기 · 7분마트 진열대 카메라 크롭 동기화와 멀티 과일 AI 인식 및 뒤로가기 UX 개선기과일 매장에서 여러 과일이 함께 찍힐 때 발생하는 Gemini Vision AI 인식 편향을 교정하고, 클라이언트 캔버스 중앙 크롭 및 뒤로가기 히스토리 스택을 개선한 개발 기록입니다.중앙 크롭 엔진멀티 과일 인식SPA 히스토리 개선
- 서비스 개발기 · 5분모바일 웹에서 카카오톡 및 Web Share API가 작동하지 않는 원인과 웹 쉐어 폴백 구현모바일 브라우저 환경에서 navigator.share API의 보안 컨텍스트 제한과 인앱 브라우저 호환성 문제를 해결하고 클립보드 복사 폴백을 구축한 실전 가이드입니다.Web Share API카카오톡 공유크로스 브라우징
- 서비스 개발기 · 6분과일 분석 점수별 동적 Canvas OG 이미지 생성 및 S3 자동 캐싱 파이프라인카카오톡 및 SNS 공유 시 과일 분석 점수와 과일 캐릭터가 반영된 오픈그래프(OG) 이미지를 캔버스로 동적 생성하고 AWS S3에 30일 보관하는 아키텍처입니다.동적 OG 이미지Canvas APIS3 Lifecycle
- 서비스 개발기 · 7분Gemini Vision AI의 환각(Hallucination)을 방지하고 과일 당도 점수를 캘리브레이션한 노하우멀티모달 LLM이 과일 사진을 분석할 때 자의적으로 높은 점수를 남발하는 문제(Positive Bias)를 해결하기 위한 시스템 프롬프트 제약 기법입니다.Gemini Vision점수 캘리브레이션AI 프롬프트
- 서비스 개발기 · 5분과일 사진 한 장으로 확인할 수 있는 외관 상태와 판별 불가능한 기술적 한계비파괴 당도계가 아닌 비전 AI 사진 분석이 가진 확실한 판별 영역(슈가스팟, 배꼽, 색상)과 기술적 한계(내부 갈변, 냄새, 소리)를 성찰한 기술 노트입니다.외관 판별 기준기술적 한계투명성
- 서비스 개발기 · 6분검은 점 바나나 5종을 AI로 분석하고 직접 먹어본 당도 비교 실전 검증기노란 바나나부터 슈가스팟이 살짝 올라온 상태, 검은 점이 덮인 바나나까지 5가지 상태를 GoodFruit AI로 측정하고 직접 먹어보며 당도를 검증한 기록입니다.바나나 테스트슈가스팟 검증실무 데이터
- 서비스 개발기 · 4분[제작기] 사진 한 장으로 과일 맛을 판정하는 서비스를 만든 이유마트에서 실패 없는 과일 선택을 돕기 위해 사진 한 장으로 외관 상태를 분석하고 점수와 팁을 제공하는 웹서비스 GoodFruit 개발 이야기입니다.GoodFruitAI웹서비스인디개발
- 서비스 개발기 · 4분[해결] 사진 분석 AI 결과를 100점 만점 점수로 변환하는 구조Gemini API가 반환하는 무작위 텍스트 대신 responseJsonSchema로 관찰값을 구조화하고 Lambda 가중치 알고리즘으로 신뢰성 있는 점수를 생성한 방법입니다.GeminiAPIJSONSchemaAWSLambda
- 서비스 개발기 · 4분[해결] 회원가입 없이 과일 분석 결과를 고유 URL로 공유하는 방법회원가입과 DB 구축 없이 AWS Lambda와 S3를 활용해 고유 정적 HTML과 OG 카드를 즉시 생성하는 Zero-Auth 공유 구조 구현 방법입니다.S3AWSLambdaOGCard
- 서비스 개발기 · 4분[해결] 모바일 웹에서 네이티브 공유창을 여는 방법 (Web Share API 적용기)모바일 웹 환경에서 navigator.share(Web Share API)를 활용해 앱처럼 OS 고유 공유창을 띄우고 데스크톱 Fallback을 처리하는 방법입니다.WebShareAPIJavaScript모바일웹
- 서비스 개발기 · 4분[해결] 카카오톡 링크 미리보기용 OG 이미지를 동적으로 생성하는 방법Puppeteer 없이 AWS Lambda와 초경량 SVG 템플릿을 활용해 카카오톡 맞춤형 OG 이미지를 0.1초 만에 실시간 생성하는 방법입니다.OGImage카카오톡공유AWSLambda
- 서비스 개발기 · 4분[해결] 과일 43종 가이드 페이지를 자동 생성하여 검색에 노출시키는 구조과일 선택 팁 43종 정적 HTML 가이드와 sitemap.xml을 Node.js 빌드 스크립트로 자동 생성하여 오가닉 검색 유입을 48%로 확대한 노하우입니다.SEOStaticSiteGenerationNodeJS
- 서비스 개발기 · 4분[운영] GA4 커스텀 이벤트로 과일 사진 분석 완료율 측정하기GA4 커스텀 이벤트를 이용해 서비스 진입부터 과일 사진 분석 완료 및 공유까지의 사용자 퍼널 전환율을 정밀 조동 측정한 운영기입니다.GA4데이터분석GoogleAnalytics
- 서비스 개발기 · 4분[운영] GA4 Data API로 주간 서비스 운영 보고서 자동 생성하기AWS Lambda와 GA4 Data API를 연동하여 서비스의 핵심 트래픽 및 전환 지표를 매일 0.4초 만에 자동 수집하고 저장하는 자동화 노하우입니다.GA4DataAPIAWSLambdaSecretsManager
- 서비스 개발기 · 4분[해결] GA4 전날 데이터를 하루 한 번 조회하고 CloudFront로 캐시하는 방법GA4 Data API 호출 쿼터 초과를 막고 응답 속도를 100배 향상시키기 위해 EventBridge, S3, CloudFront 캐시 시스템을 연동한 방법입니다.GA4DataAPICloudFrontEventBridge
- 서비스 개발기 · 4분[운영] AI 웹서비스의 광고수익과 Gemini API 비용을 함께 계산하기gemini-3.1-flash-lite 모델의 유닛 에코노믹스를 계산하여 분석 1회당 0.26원 원가로 95% 마진율을 확보한 AI 웹서비스 수익화 노하우입니다.GeminiAPI수익화AdSense
