브라우저에서 작동하는 Photoshop급 AI 이미지 에디터
Vora AI는 전문가 수준의 이미지 편집을 누구나 브라우저에서 할 수 있도록 만든 AI 이미지 에디터입니다. 별도의 소프트웨어 설치 없이 웹 브라우저만으로 고급 이미지 편집 작업을 수행할 수 있으며, AI 기술을 활용하여 기존에는 전문가만 가능했던 복잡한 편집을 누구나 손쉽게 처리할 수 있습니다.
기존 이미지 편집 도구들은 비싸거나, 복잡하거나, 설치가 필요합니다. Adobe Photoshop은 월 구독료가 부담되고, GIMP는 무료지만 학습 곡선이 가파릅니다. Vora는 브라우저만 있으면 Photoshop 수준의 편집이 가능하도록 설계되었습니다. 사용자 경험을 최우선으로 두고, 복잡한 기능도 직관적인 인터페이스로 접근할 수 있게 만들었습니다.
Big-LaMa 모델을 활용한 인페인팅으로 이미지의 불필요한 부분을 자연스럽게 제거하고, SAM(Segment Anything Model)으로 한 번의 클릭만으로 객체를 정확하게 분리합니다. 이 두 가지 AI 모델의 조합으로 기존 수동 편집에 소요되던 시간을 획기적으로 단축합니다. 복잡한 배경에서도 자연스러운 결과물을 생성하며, 전문 사진 보정 작업에도 충분히 활용 가능한 수준의 품질을 제공합니다.
레이어 시스템, 마스크, 조정 레이어, 블렌드 모드 등 전문 편집 도구의 핵심 기능을 모두 구현했습니다. 18가지 이상의 편집 도구를 제공하며, 클론 스탬프, 힐링 브러시, 베지어 패스와 같은 정밀 편집 도구부터 색상 조정, 필터, 변형 도구까지 포괄적인 편집 환경을 구축했습니다. 모든 편집은 비파괴 방식으로 이루어져 언제든 원본으로 되돌릴 수 있습니다.
Big-LaMa 모델로 이미지의 원하지 않는 부분을 자연스럽게 제거합니다. 영역을 선택하면 주변 컨텍스트를 분석하여 자연스러운 결과물을 생성합니다. 복잡한 텍스처나 패턴도 정확하게 재현하여 편집 흔적이 남지 않습니다.
SAM을 활용하여 클릭 한 번으로 이미지 내 객체를 정확하게 분리합니다. 복잡한 선택 도구 없이도 정밀한 마스크를 생성할 수 있습니다. 머리카락이나 투명한 객체 같은 어려운 경계도 깔끔하게 처리합니다.
포토샵과 유사한 레이어 관리 시스템을 구현했습니다. 레이어 순서 변경, 불투명도 조절, 블렌드 모드, 레이어 그룹을 지원합니다. 드래그 앤 드롭으로 직관적인 레이어 관리가 가능합니다.
비파괴 편집을 위한 레이어 마스크와 조정 레이어를 제공합니다. 원본 이미지를 보존하면서 밝기, 대비, 색상 균형, 커브 등 다양한 효과를 적용할 수 있습니다. 언제든 수정하거나 되돌릴 수 있습니다.
클론 스탬프, 힐링 브러시, 베지어 패스 등 정밀한 수동 편집 도구를 제공합니다. 압력 감지 태블릿을 지원하며, 브러시 크기와 경도를 세밀하게 조절할 수 있습니다.
Docker 기반 GPU 서버에서 AI 모델을 실행하여 빠른 처리 속도를 보장합니다. 고해상도 이미지에서도 실시간에 가까운 AI 처리가 가능하며, 여러 사용자의 동시 요청을 효율적으로 처리합니다.
복잡한 캔버스 조작과 상태 관리를 위해 TypeScript와 React를 선택했습니다. Canvas API로 실시간 렌더링을 처리하고, Web Worker로 무거운 이미지 연산을 별도 스레드에서 수행합니다.
GPU 기반 이미지 처리 파이프라인을 Python으로 구축했습니다. Big-LaMa로 인페인팅을, SAM으로 세그멘테이션을 처리하며, FastAPI를 통해 REST API로 프론트엔드와 통신합니다.
컨테이너화된 AI 모델 서빙 환경을 Docker로 구성했습니다. NVIDIA CUDA 런타임을 활용하여 GPU 가속을 지원하며, 컨테이너 기반으로 재현 가능한 배포 환경을 보장합니다.
4000x3000 이상의 고해상도 이미지를 브라우저 Canvas에서 실시간으로 렌더링하면 프레임 드롭과 메모리 부족이 발생합니다. 여러 레이어를 동시에 합성할 때 성능 저하가 특히 심각했습니다.
타일 기반 렌더링으로 화면에 보이는 영역만 처리하고, OffscreenCanvas를 Web Worker에서 실행하여 메인 스레드의 부담을 줄였습니다. 레이어 합성 결과를 캐싱하여 변경되지 않은 레이어의 재렌더링을 방지합니다.
Big-LaMa와 SAM 모델의 추론 시간이 사용자 경험에 직접적인 영향을 미칩니다. 특히 고해상도 이미지에서 인페인팅 처리 시간이 길어지면 사용자가 이탈하는 문제가 있었습니다.
모델 양자화와 배치 처리로 추론 속도를 개선하고, 프로그레시브 렌더링으로 부분 결과를 먼저 보여줍니다. GPU 메모리 관리를 최적화하여 실시간에 가까운 처리 속도를 달성했습니다.
블렌드 모드, 마스크, 조정 레이어, 그룹 등 Photoshop 수준의 레이어 시스템을 브라우저에서 구현하는 것은 상태 관리와 렌더링 양 측면에서 큰 도전이었습니다.
불변 데이터 구조와 구조적 공유를 활용한 상태 관리 시스템을 설계했습니다. 렌더링 파이프라인을 레이어 트리 구조에 최적화하고, 변경 감지를 통해 필요한 레이어만 다시 합성하는 증분 렌더링 방식을 도입했습니다.
이미지, PDF, PPTX에 코너 로고를 추가하는 로컬 퍼스트 웹앱
CornerBrand는 이미지 파일뿐만 아니라 PDF, PPTX 문서에도 코너 로고(워터마크)를 일괄 추가하는 도구입니다. 마케팅 자료, 프레젠테이션, 보고서 등 다양한 문서에 브랜드 로고를 일관성 있게 적용해야 하는 실무 니즈에서 출발했습니다. 수십, 수백 개의 파일에 일일이 로고를 삽입하는 반복 작업을 자동화하여 업무 효율을 높입니다.
모든 처리는 브라우저에서 이루어지며 서버에 파일을 업로드하지 않습니다. 실시간 미리보기로 결과를 확인하면서 위치, 크기, 투명도를 조절할 수 있습니다. 네 모서리 중 원하는 위치를 선택하고, 여백과 크기를 픽셀 단위로 미세 조정할 수 있습니다. PNG, JPEG, WebP, PDF, PPTX 등 다양한 내보내기 포맷을 지원하며, 개인 정보 보호를 위해 로컬 퍼스트 설계를 채택했습니다. 회사 내부 문서나 민감한 이미지도 안심하고 처리할 수 있습니다.
더 많은 프로젝트를 확인하세요
← 포트폴리오로 돌아가기