바이브 코딩 스토리 #6 - 주문서 속 상품명으로 제품 이미지 검색

영수증 속 옷 이름, 이제 1초 만에 사진으로 찾는다 (feat. Firebase)

이글은 본인의 경험이 아니라 오프라인 의류 도매업을 하시는 지인분의 경험을 대신 작성한 경험기 입니다
그분의 인터뷰 형식으로 글을 작성합니다 

1. 기획 배경: "영수증만 보고 이 옷이 뭔지 어떻게 알죠?"

오프라인 매장을 운영하다 보면 영수증이나 장부에 적힌 **'블루 셔츠 A-101'**이라는 글자만 보고는 정확히 어떤 디자인의 옷인지 떠올리기 힘들 때가 많았습니다.
     
    Pain Point  : "이름만 검색하면 바로 옷 사진이 딱 나오는 시스템이 없을까?"
 
    초기 구상: 옷 사진을 찍어 올리고, 태블릿이나 핸드폰에서 언제든 검색할 수 있는 안드로이드 앱.
   처음엔 단순히 구글 드라이브에 사진을 넣고 엑셀처럼 관리할까 했지만, 직원들과 함께 쓰려면 **누구나 쉽게 접속하고 실시간으로 업데이트되는 '진짜 앱'**이 필요했습니다.

2. 제작 도구 (Tech Stack)

개발 지식이 부족했지만, 생성형 AI(Gemini)의 도움을 받아 다음과 같은 최신 기술들을 활용했습니다.
 * AI 파트너: Google Gemini (코딩, 에러 수정, 배포 가이드)
 * 프론트엔드: HTML, JavaScript, Tailwind CSS (별도 설치 없이 바로 실행 가능한 웹 표준 기술)
 * 백엔드/서버: Google Firebase
   * Firestore: 상품 정보(이름, 색상, 카테고리) 실시간 저장
   * Storage: 옷 이미지 저장 (클라우드)
   * Hosting: 웹 앱을 인터넷 주소(URL)로 배포

3. 개발 과정과 프롬프트의 진화

AI에게 질문을 던지며 앱을 발전시켜 나간 과정입니다. 
처음엔 모호했던 질문이 점차 구체적인 '개발 지시서'로 바뀌어 갔습니다.

 1단계 (아이디어): "옷 사진을 보고 해당 옷을 찾는 안드로이드 앱을 만들고 싶어. 영수증 이름을 검색하면 이미지가 나오게 해줘."
   * 👉 AI의 제안: 앱 설치가 필요 없는 '웹 앱(Web App)' 방식 추천.
 2단계 (구조 변경): "구글 드라이브 말고, 누구나 쉽게 공유하고 쓸 수 있는 구조로 만들어줘. 비용은 무료였으면 좋겠어."
   * 👉 AI의 제안: Firebase 도입 (실시간 데이터베이스 + 이미지 호스팅).
 3단계 (기능 고도화): "빨간 원피스라고 검색하면 정확한 것부터 보여주고, 비슷한 것도 보여줘. 색상은 여러 개 입력할 수 있게 해줘."
 4단계 (최종 디테일): "상품 수정/삭제 버튼 만들어주고, 리스트 보기 모드 추가해줘. 카테고리도 직접 입력하면 자동 추가되게 해줘."

 

4. 난관과 해결 (Troubleshooting)

개발자가 아니다 보니 중간중간 막히는 순간들이 있었습니다. 하지만 AI가 알려주는 대로 하나씩 해결해 나갔습니다.
 로컬 보안 문제: PC에 저장된 HTML 파일을 바로 열었더니, 핸드폰에서 사진 업로드가 안 되는 현상 발생.
 
원인: 브라우저 보안 정책상 로컬 파일(file://)은 업로드가 차단됨.
해결: Firebase Hosting을 통해 정식 인터넷 주소(https://...)로 배포하여 해결.

개발 환경 세팅의 어려움: Node.js, 터미널, 명령 프롬프트 같은 낯선 용어들의 등장.
해결: AI가 "사장님 PC=주방, Firebase=홀"로 비유해 주며 설치부터 배포 명령어(firebase deploy)까지 단계별로 가이드해 줌.

데이터베이스 권한: 배포 후 "초기화 오류" 발생.
해결: Firebase 콘솔에서 '익명 로그인' 기능을 활성화하여 해결.

5. 최종 완성된 '서울팔레트 옷 검색기'

몇 번의 업데이트 끝에, 우리 매장에 딱 맞는 맞춤형 시스템이 완성되었습니다.

 * 핵심 기능:
   * 스마트 검색: "블루"만 쳐도, "A-101"만 쳐도 즉시 검색.
   * 실시간 동기화: 내 폰에서 올리면, 직원 태블릿에도 1초 만에 뜸.
   * 쉬운 등록/수정: 앱 내에서 바로 사진 촬영 및 정보 수정 가능.
   * 다중 필터: 카테고리, 색상(다중 입력 가능), 정렬(최신순/이름순) 기능.
   * 보기 모드 전환: 갤러리(사진 위주) ↔ 리스트(텍스트 위주) 전환 가능.

6. 마치며

처음엔 "이게 가능할까?" 싶었지만, AI와 끊임없이 대화하며 코드를 수정하다 보니 어느새 그럴싸한 앱이 뚝딱 만들어졌습니다. 개발을 전혀 몰라도, **'무엇을 만들고 싶은지'**에 대한 명확한 생각만 있다면 누구나 자신만의 시스템을 만들 수 있는 시대가 된 것 같습니다.
이제 영수증 이름만 보고 창고를 뒤지는 일은 끝! 효율적인 재고 관리가 필요하신 분들은 저처럼 AI를 활용해 보시길 추천합니다.