ListingLift: 어머니의 칸타 작품 목록 작성기, Gemma가 브라우저 탭 내에서 작성 (작품당 무료, 업로드 용량 0바이트)

이 글은 Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle에 제출하는 내용입니다.

요약: ListingLift는 판매자의 초안 메모와 제품 사진을 Etsy, Amazon, eBay, Meesho, Shopify 또는 Instagram에 바로 붙여넣을 수 있는 목록(listing)으로 변환합니다. 이 모델은 WebLLM과 WebGPU를 통해 브라우저 탭 내부에서 구동되는 오픈 웨이트 Google Gemma입니다. 서버가 필요 없고, API 키도 필요 없으며, 작품당 비용도 없습니다. 게다가 구매자가 읽기 전에 작은 모델이 지어낸 주장들을 포착하는 Fact Guard 기능까지 갖추고 있습니다.

제가 만든 것

저의 어머니는 서벵골에서 칸타(Kantha) 자수 두파타를 만드십니다. 모든 작품은 오래된 사리 몇 장을 덧대어, running stitch로 손바느질한 것입니다. 모든 작품이 세상에 단 하나뿐입니다. 그리고 모든 작품에는 목록 작성이 필요합니다. 마켓플레이스의 문자 제한에 맞는 제목, 다섯 개의 글머리 기호(bullet points), 설명, 수십 개의 검색 태그, 메타 라인 등이 필요하죠.

이를 30개 제품과 4개의 마켓플레이스에 곱하면, 작은 온라인 공예 사업의 실제 병목 지점을 알 수 있습니다. 문제는 물건을 만드는 것이 아닙니다. 각 플랫폼이 원하는 정확한 형식으로 그것을 반복해서 '설명'하는 것입니다.

ListingLift는 그 판매자를 위한 목록 작성기입니다. 사용자는 다음 단계를 따릅니다:

1. 제품 사진을 올립니다. ListingLift는 사용자의 기기에서 지배적인 색상을 읽습니다 (64×64 캔버스에 대한 작은 k-means 처리; 픽셀은 메모리를 벗어나지 않습니다).
2. 친구에게 할 법한 메모를 입력합니다: 무엇인지, 누가 만들었는지, 크기, 재료, 관리 방법 등.
3. 마켓플레이스, 어조(tone), 언어를 선택합니다.
4. 생성(Generate) 버튼을 누릅니다. Gemma가 목록 전체를 토큰 단위로 스트리밍합니다.
5. ListingLift는 그 다음으로 플랫폼에 맞게 조정합니다 (제목을 제한에 맞춰 자르고, 태그의 중복을 제거하고 최대 개수를 지정하며, 프롬프트 에코(prompt echoes)를 제거합니다). 그리고 사용자의 메모에 없는 모든 주장을 강조 표시하는 Fact Guard를 실행합니다.
6. 복사하거나 CSV 또는 JSON으로 다운로드하면 끝입니다.

누가 돈을 지불할까요?

인도 시장의 판매자들(Meesho, Amazon.in, Etsy India), 인스타그램 샵, 그리고 전 세계 곳곳에 있는 수공예 판매자들의 긴 꼬리(long tail)까지. 오늘날 이들은 모든 상품 목록을 직접 작성하거나, 프리랜서에게 비용을 지불하거나, 또는 생성 건당 요금을 부과하고 미출시된 제품 상세 정보를 다른 사람의 서버로 전송하는 클라우드 'AI 상품 목록 생성기'에 월별 구독료를 지불합니다.

제가 실제로 운영할 비즈니스 모델:

흥미로운 점은 다음과 같습니다. 추론(inference)이 고객의 장치에서 실행되기 때문에, 상품당 한계 비용(marginal cost per listing)이 제로입니다. 클라우드 경쟁사는 GPU 요금을 충당하기 위해 생성 건별로 요금을 부과해야 합니다. 저는 대신 워크플로우에 대해 요금을 청구할 수 있고, 핵심 제품은 영원히 무료로 유지될 수 있습니다. 이러한 가격 책정은 모델이 오픈(open)이기 때문에만 가능합니다.

데모

🎬 스튜디오, 엔드투엔드 (실제 녹화된 Gemma 3 1B 실행: 스트림, 플랫폼 적합성, Fact Guard, 점수):

앱을 열면, 첫 번째 실행은 모델을 브라우저 캐시에 한 번 다운로드합니다(Gemma 3 1B는 대략 700MB). 그 후에는 오프라인에서 작동합니다: 와이파이를 끄고 다시 생성해 보세요. 브라우저에 WebGPU가 없으면, 스튜디오는 **재생 모드(replay mode)**로 전환하여 실제 녹화된 Gemma 실행을 재생합니다(명확하게 표시됨). 따라서 전체 흐름을 볼 수 있습니다.

스튜디오

여섯 개의 마켓플레이스 각각은 자체 규칙이 프롬프트와 후처리 프로세서(post-processor)에 내장되어 있습니다:

Fact Guard가 제 역할을 하는 완성된 상품 목록

이것은 어머니의 두파타(dupatta)에 대한 실제 Gemma 3 1B 출력물입니다. 불렛 포인트 4를 보세요: "100% 유기농으로 재배된 면으로 제작됨." 제 메모에는 '유기농'이라고 적지 않았습니다. '100%'라고도 쓰지 않았죠. 이것을 읽고 재활용 사리(sari) 면을 받은 구매자가 정당한 불만을 제기하면, 판매자는 환불과 나쁜 리뷰를 받게 됩니다.

Fact Guard는 네 가지 사항을 포착했습니다: "luxurious", "100%", "organic" 그리고 태그 "fair trade". 각각은 빨간색으로 제자리에 강조 표시되어 판매자가 2초 만에 삭제할 수 있습니다.

Network Witness: 읽는 것뿐만 아니라 확인할 수 있는 프라이버시

모든 프라이버시 페이지는 "데이터를 업로드하지 않습니다"라고 말합니다. ListingLift는 그것을 보여줍니다. Network Witness 패널은 브라우저 자체의 PerformanceObserver 리소스 로그를 읽고 페이지가 수행하는 모든 요청 목록을 보여줍니다. Model shards와 WebLLM 라이브러리가 공개 CDN에서 다운로드됩니다. 그런 다음 나가는 모든 URL은 사용자의 메모 텍스트와 비교됩니다. 만약 어떤 요청이라도 그 내용을 포함했다면, 커다란 녹색 0이 빨간색으로 변할 것입니다.

코드

ListingLift는 의도적으로 작습니다: 하나의 HTML 파일, 빌드 단계 없음, 백엔드 없음, 프레임워크 없음. 라이브 앱을 열고 'View Source'를 사용해 보세요. 모든 줄이 읽을 수 있고 주석 처리되어 있습니다.

여기에 핵심 내용이 있습니다.

1. 브라우저에서 Gemma 로딩

WebLLM은 세 가지 오픈 웨이트 Gemma 빌드를 사전 구축하여 제공합니다:

2. 목록 스트리밍

const stream = await engine.chat.completions.create({
  messages: [{ role: "user", content: buildPrompt(opts) }],
  temperature: 0.6,
...

WebLLM은 OpenAI와 호환되는 API를 노출하므로 코드가 클라우드 호출처럼 보입니다. 차이점은 실행 위치입니다.

3. 플랫폼 인식 프롬프트

export function buildPrompt({ notes, platform, tone, lang, colors }) {
  const p = PLATFORMS[platform];
  const col = colors?.length
...

_

작은 모델(Small models)들은 _콘텐츠_에는 뛰어나지만, _제약 조건(constraints)_을 지키는 것은 서툴다. Gemma 3 1B는 13개의 태그 슬롯에 대해 16개의 태그를 반환했고 (이 중 두 개는 중복), 내가 다섯 개를 요청했을 때 아홉 개의 글머리 기호(bullets)를 반환했는데, 그 마지막 것은 내 프롬프트의 복사본이었다. 결정론적 코드(Deterministic code)가 이를 무료로 수정해주며, UI에는 어떤 수정이 이루어졌는지 모든 것을 나열하여 아무것도 조용히 일어나지 않게 한다.

구축 방법 (How I Built It)

스택 (Stack)

• 모델: Google Gemma (오픈 웨이트): 기본적으로 Gemma 3 1B IT를 사용하며, Gemma 2 2B IT와 Gemma 4 E2B를 선택할 수 있다. 4비트 양자화된 MLC 빌드이다.
• 런타임: WebLLM 0.2.86 (MLC AI, Apache-2.0)을 WebGPU 위에서 사용한다. 브라우저 내에 OpenAI 스타일의 스트리밍 API를 구현했다.
• 앱: 단일 정적 HTML 파일로 구성되었으며, 바닐라 JS(vanilla JS)만을 사용하고 프레임워크나 번들러는 사용하지 않았다. 오로라 배경 및 색상 추출을 위해 캔버스(Canvas)를 사용했고, 모든 애니메이션은 CSS로 처리했으며, 스크롤 노출에는 IntersectionObserver를, 네트워크 증거(Network Witness)에는 PerformanceObserver를 사용했다. 기록 보관용으로는 localStorage를 사용했고 (저장 공간이 차단된 경우 우아하게 대체하는 기능 포함),
• 벤치마크 하네스: 동일한 프롬프트 빌더를 Python으로 포팅하여, 약 8GB RAM과 GPU가 없는 2코어 ARM CPU에서 gemma3:1b 및 gemma2:2b로 Ollama를 구동했다.
• 데모 영상: 결정론적인 seek(t) 타임라인을 가진 1920×1080 HTML

저는 숫자를 언급하지 않고 '빠르다'나 '정확하다'고만 쓰고 싶지 않았기 때문에, 의도적으로 성능이 낮은 기기(CPU 코어 2개, RAM 약 8GB, GPU 없음)에서 동일한 프롬프트를 같은 후처리 프로그램으로 실행했습니다. WebGPU가 탑재된 노트북이라면 더 빠를 것입니다. 이 수치들은 최저치를 나타냅니다.

여기서 얻은 교훈:

• Gemma 3 1B는 CPU에서도 충분히 빠릅니다(약 26 토큰/초; 전체 목록 작성에 약 15~19초 소요)만, 마케팅 문구를 지어냅니다. Fact Guard를 사용하면 사용할 만합니다.
• Gemma 2 2B는 더 느리고 영어로 된 메모에 더 충실합니다: dupatta의 경우 플래그가 없었지만, 여전히 유약 처리가 안 된 테라코타 말을 '내후성'이 있다고 언급했습니다. 어떤 소형 모델도 단독으로 신뢰하기 어려우며, 이것이 바로 Guard(보호 장치)가 존재하는 이유입니다. 이 둘 사이를 전환하는 것은 드롭다운 메뉴로 가능합니다.
• 벵골어는 두 소형 모델 모두에게 어렵습니다. Gemma 3 1B는 실제 벵골어를 작성했지만, 엉뚱한 아랍어 단어를 흘리고 글머리 기호에 본인의 지침을 반영한 내용까지 포함하여 총 9개의 항목으로 채웠습니다. Gemma 2 2B는 주로 영어로 답변했습니다. Fact Guard는 두 모델 모두에서 플래그를 지정했습니다. 이것이 솔직한 현황입니다: 지역 언어 상거래에는 더 크거나 미세 조정된(fine-tuned) 오픈 모델이 필요하며, 가중치(weights)가 공개되어 있기 때문에 누구나 이러한 미세 조정을 할 수 있습니다.