Image Alt Optimizer

완료·2025-02·fullstack

React RouterTypeScriptClaude APIPrismaShopify APIGraphQL

Overview

Shopify 스토어 운영자를 위한 앱으로, Claude AI가 상품 이미지를 분석하여 SEO에 최적화된 alt 텍스트를 자동 생성합니다. Shopify 앱 프레임워크(Remix 기반)와 GraphQL Admin API를 활용하며, OAuth 인증 플로우와 Webhook 처리를 포함한 완전한 Shopify 앱 구조를 갖추고 있습니다.

Key Features

01이미지 분석: Claude API Vision으로 상품 이미지를 분석하여 맥락에 맞는 alt 텍스트 생성

02Shopify 통합: OAuth 인증, GraphQL Admin API로 상품/이미지 데이터 CRUD

03일괄 처리: 스토어 전체 상품의 이미지를 한 번에 분석하고 alt 텍스트 업데이트

04SEO 최적화: 키워드 밀도, 길이, 설명적 표현을 고려한 프롬프트 엔지니어링

Challenges & Solutions

Problem

Shopify의 OAuth 인증 플로우가 복잡하고, 세션 관리와 토큰 갱신을 직접 처리해야 했음

Solution

Shopify App 프레임워크의 인증 미들웨어를 활용하되, 세션 저장소를 Prisma/SQLite로 커스텀하여 안정적인 토큰 관리 구현

Problem

AI가 생성한 alt 텍스트가 너무 일반적이거나 상품과 무관한 경우가 있었음

Solution

상품명, 카테고리, 가격대 등 상품 메타데이터를 프롬프트에 함께 전달하여 맥락 인식 정확도 향상