왜 브라우저인가
이미지 편집 도구는 이미 많습니다. Photoshop, GIMP, Figma 등 훌륭한 도구들이 있죠. 하지만 대부분은 설치가 필요하거나 구독료가 비쌉니다. "설치 없이, 브라우저만 열면 바로 전문적인 이미지 편집이 가능하다면?"이라는 생각이 Vora AI의 출발점이었습니다.
특히 AI 기반 기능 — 배경 자동 제거, 객체 인페인팅, 원클릭 세그멘테이션 — 은 보통 고사양 GPU가 필요합니다. 이걸 일반 사용자의 브라우저에서 매끄럽게 동작하게 만드는 것이 가장 큰 기술적 도전이었습니다.
AI 모델을 웹으로 가져오기
Big-LaMa: 인페인팅의 핵심
Big-LaMa는 이미지에서 원하지 않는 객체를 자연스럽게 지우는 인페인팅 모델입니다. 원본 모델은 PyTorch 기반으로 GPU 서버에서 실행되도록 설계되어 있습니다. 이걸 웹에서 쓰기 위해 두 가지 접근법을 시도했습니다.
첫 번째 접근은 ONNX Runtime Web으로 클라이언트 사이드 추론이었습니다. 모델을 ONNX 포맷으로 변환하고 WebAssembly + WebGL 백엔드로 실행했습니다. 결과적으로 작은 이미지(512x512)에서는 동작했지만, 큰 이미지에서는 메모리 부족과 긴 추론 시간이 문제였습니다.
최종적으로 선택한 방식은 Docker 기반 GPU 서버 + WebSocket 통신입니다. FastAPI로 추론 서버를 구축하고, 사용자가 마스크를 그리면 WebSocket으로 서버에 전송, 결과를 실시간으로 받아오는 구조입니다. 네트워크 레이턴시를 줄이기 위해 이미지를 타일 단위로 분할 처리하는 최적화를 적용했습니다.
SAM: 원클릭 세그멘테이션
SAM(Segment Anything Model)은 Meta에서 공개한 범용 세그멘테이션 모델입니다. 이미지 위의 한 점을 클릭하면 해당 객체의 정확한 윤곽을 자동으로 추출합니다. Vora AI에서는 이 기능을 "원클릭 선택 도구"로 통합했습니다.
SAM의 이미지 인코더는 무겁지만, 한 번 인코딩하면 여러 포인트에 대해 빠르게 마스크를 생성할 수 있습니다. 이 특성을 활용해 이미지 업로드 시 미리 인코딩하고, 이후 클릭마다 경량 디코더만 실행하는 파이프라인을 설계했습니다. 사용자 체감 응답 시간을 3초에서 200ms로 줄일 수 있었습니다.
레이어 시스템 설계
Photoshop의 핵심은 레이어입니다. Vora AI의 레이어 시스템은 React 상태 관리 + HTML5 Canvas로 구현했습니다. 각 레이어는 독립적인 Canvas 엘리먼트이고, 최종 합성은 오프스크린 Canvas에서 이루어집니다.
구현한 레이어 기능들:
- 블렌딩 모드 — Multiply, Screen, Overlay 등 12가지 모드를 Canvas의
globalCompositeOperation으로 구현 - 레이어 마스크 — 알파 채널 기반 마스크로 비파괴 편집 지원
- 조정 레이어 — 밝기, 대비, 색상 보정을 픽셀 단위로 적용
- 그룹 및 순서 변경 — 드래그 앤 드롭으로 레이어 관리
가장 어려웠던 부분은 실시간 렌더링 성능입니다. 10개 이상의 레이어가 있을 때 매 프레임마다 전체를 재합성하면 프레임 드롭이 발생합니다. 이를 해결하기 위해 더티 레이어 추적 알고리즘을 도입했습니다. 변경된 레이어만 재렌더링하고 나머지는 캐시된 결과를 사용하는 방식으로, 평균 렌더링 시간을 60% 단축했습니다.
18개 편집 도구 만들기
브러시, 지우개 같은 기본 도구부터 클론 스탬프, 힐링 브러시, 베지어 패스까지 — 각 도구마다 고유한 기술적 도전이 있었습니다.
클론 스탬프는 원본 영역의 픽셀을 실시간으로 복제해야 합니다. Canvas의 getImageData와 putImageData를 사용하되, 대량의 픽셀 연산이 필요해 Web Worker로 오프로드했습니다. 메인 스레드의 부하를 줄여 60fps를 유지할 수 있었습니다.
베지어 패스 도구는 SVG의 Path 데이터를 Canvas로 변환하는 과정이 핵심입니다. 사용자가 앵커 포인트와 컨트롤 포인트를 직접 조작할 수 있도록 인터랙션 레이어를 별도로 구현했고, 패스를 선택 영역이나 마스크로 변환하는 기능까지 지원합니다.
배운 것들
"할 수 있을까?"라는 질문에 답하는 가장 좋은 방법은 직접 만들어보는 것이다.
Vora AI를 만들면서 가장 크게 느낀 것은 브라우저의 가능성입니다. WebAssembly, WebGL, Web Worker 등 현대 웹 기술을 잘 조합하면 네이티브 앱 못지않은 성능을 낼 수 있습니다. 물론 한계도 분명합니다. 메모리 제약, GPU 접근 제한, 파일 시스템 접근 등은 여전히 웹의 약점입니다.
기술적으로는 "완벽하게 만들고 출시"보다 "동작하게 만들고 개선"하는 접근이 더 효과적이었습니다. 처음부터 18개 도구를 계획한 게 아니라, 핵심 기능(브러시 + 레이어)을 먼저 만들고 점진적으로 확장했습니다. 각 도구를 추가할 때마다 기존 아키텍처의 한계를 발견하고 리팩토링하는 과정이 반복되었지만, 그 과정 자체가 더 나은 설계를 만드는 원동력이었습니다.
Vora AI는 현재 GitHub에서 오픈소스로 공개되어 있습니다. 브라우저에서 전문적인 이미지 편집이 가능하다는 것을 증명하는 프로젝트로, 앞으로도 계속 발전시켜 나갈 계획입니다.