Read Original
#Frontend

AI와 코드 사이: 이미지 한 장을 편집 가능한 레이어로 되돌리기

AI와 코드 사이: 이미지 한 장을 편집 가능한 레이어로 되돌리기
01

Summary

장당 1,000원의 비용을 200원으로? 미리디가 AI 이미지 분해 비용을 75% 줄인 비결

비싼 클라우드 AI 대신 WebGPU와 온디바이스 AI로 완성한 초고속 편집 레이어 복원기

이미지 한 장을 편집 가능한 상태로 만드는 과정에서 겪은 비용과 품질 문제를 기술적으로 해결한 사례입니다. 무거운 생성형 AI의 역할을 최소화하고 브라우저 성능을 극한으로 끌어올린 하이브리드 아키텍처의 실무 경험을 공유합니다.

  • 01비용 절감: 생성형 AI 호출 최적화를 통해 운영 비용 75% 감소
  • 02WebGPU 도입: 브라우저 연산 병목을 해결해 처리 속도 6배 이상 향상
  • 03정체성 보존: 'Generate' 대신 'Crop' 방식을 우선하여 디자인 원본의 가치를 유지
  • 04지능형 분기: 비전 모델의 Manifest를 활용해 작업 성격에 맞는 최적의 도구 매칭
  • 05로컬 워밍업: 분석 단계와 로컬 모델 로딩을 병렬 처리해 사용자 체감 대기 시간 최소화

RECOMMENDATION

AI 서비스의 운영 비용 최적화와 브라우저 기반 고성능 그래픽 처리에 관심 있는 프론트엔드 엔지니어들에게 필독을 권합니다.

The Problem

단일 이미지 파일을 편집 가능한 개별 레이어로 분해할 때, 모든 요소를 생성형 AI로 재생성하면 높은 비용(장당 0.6~0.8달러)과 원본의 디테일 훼손 문제가 발생합니다. 또한 브라우저 내 WASM 연산 시 보안 격리 문제로 멀티스레드를 사용하지 못해 처리 시간이 매우 길어지는 한계가 있습니다.

The Solution

클라우드 비전 AI로 분석된 정보를 기반으로, 단순 도형은 코드로, 고정 요소는 크롭 후 온디바이스 AI(매팅, 업스케일)로, 가려진 부분만 생성형 AI로 처리하는 하이브리드 파이프라인을 구축했습니다. 성능 최적화를 위해 브라우저의 WebGPU를 활용하여 GPU 기반의 병렬 추론을 구현했습니다.

The Result

이미지 한 장당 처리 비용을 0.1~0.2달러 수준으로 약 75% 절감했으며, 전체 처리 속도를 80초에서 14초로 대폭 단축했습니다. 또한 재생성 대신 원본 픽셀을 보존함으로써 로고나 인물 등의 정체성 유지 품질을 크게 개선했습니다.

Trade-off

가려진 부분의 복원은 여전히 생성형 모델의 결과물에 의존하므로 품질이 일정하지 않을 수 있으며, 전체적인 성능은 초기 비전 모델의 인식 정확도에 크게 좌우됩니다. 또한 사용된 라이브러리의 AGPL 라이선스 검토 등 상용 제품 적용 시 법적 제약 사항을 고려해야 합니다.

03

Key Concepts

Concept · 01

WebGPU

브라우저에서 하드웨어 가속을 직접 제어하여 고성능 그래픽 및 범용 계산을 가능하게 하는 최신 웹 표준입니다.

  • WASM 단일 스레드 병목을 해결하기 위해 매팅 및 업스케일 모델 추론에 적용되었습니다.
  • 격리 헤더(COOP/COEP) 설정 없이도 높은 성능을 보장하는 대안으로 활용되었습니다.
Concept · 02

Manifest (Structured Output)

AI 모델이 분석한 결과물을 코드가 해석하기 쉬운 정형 데이터(JSON)로 변환한 규약입니다.

  • 이미지 내 각 요소의 위치, 크기, 처리 방식(Crop/Generate)을 결정하는 라우팅 정보로 사용됩니다.
  • 비전 모델과 실행 단계 사이의 계약 역할을 수행합니다.
Concept · 03

Super-Resolution (ESRGAN)

저해상도 이미지의 픽셀 사이를 예측하여 선명한 고해상도 이미지로 변환하는 AI 기술입니다.

  • 원본에서 작게 잘려진(Crop) 요소들의 화질을 서버 호출 없이 로컬에서 개선하는 데 사용되었습니다.
  • 700px 이하의 작은 조각에 대해서만 선택적으로 실행하여 자원 소모를 방지했습니다.