이미지 변형 스튜디오 - 브라우저 기반 실시간 이미지 변형 도구

프로젝트 소개

이미지 변형 스튜디오는 브라우저에서 직접 이미지를 자유롭게 변형하고 처리할 수 있는 웹 애플리케이션입니다. 별도의 설치 없이 웹에서 Perspective Transform, 프레임 추가, 이미지 분할 등 다양한 기능을 제공합니다.

체험해보기

핵심 기능

• 실시간 Perspective Transform: 이미지를 자유롭게 왜곡하고 원근감을 적용할 수 있습니다.
• 프레임 효과: 사각형, 둥근 모서리, 원형, 폴라로이드 등 다양한 스타일의 프레임을 추가할 수 있습니다.
• 이미지 분할: 이미지를 가로/세로로 균등 분할하여 ZIP 파일로 다운로드합니다.
• 일괄 처리: 여러 이미지를 동일한 설정으로 한 번에 처리할 수 있습니다.
• 고품질 출력: WebP 포맷을 지원하여 용량을 최적화했습니다.

기술 스택

Core

• React 19 - UI 프레임워크
• TypeScript 5.8 - 타입 안정성
• Vite 7 - 빌드 도구

State Management

• Jotai 2.13 - 가벼운 원자 기반 상태 관리

Graphics & Image Processing

• OpenCV.js - 브라우저에서 Perspective Transform 연산
• Konva 9 + react-konva 19 - Canvas 기반 인터랙티브 UI
• JSZip - 다중 파일 ZIP 다운로드

Styling

• Tailwind CSS 4 - 유틸리티 기반 스타일링
• Emotion - CSS-in-JS
• Material-UI 7 - UI 컴포넌트 라이브러리

File Handling

• react-dropzone - 드래그 앤 드롭 파일 업로드

기술적 특징

1. 브라우저 기반 이미지 처리

OpenCV.js를 활용하여 서버 없이 클라이언트에서 복잡한 이미지 변형을 수행합니다.

2. 실시간 인터랙티브 UI

Konva를 사용해 Canvas 상에서 핸들을 드래그하여 실시간으로 변형 결과를 확인할 수 있습니다.

3. 상태 관리 최적화

Jotai의 원자 기반 상태 관리로 불필요한 리렌더링을 최소화했습니다.

프로젝트 의의

이 프로젝트는 Image Setakgi의 전신으로, 웹 기반 프로토타입으로 시작하여 이후 Python 데스크톱 애플리케이션으로 발전했습니다. 브라우저의 한계를 경험하고 네이티브 앱의 필요성을 깨달은 계기가 된 프로젝트입니다.

---

개발 기간: 2025년 10월 - 현재 개발 인원: 1명 주요 기술: React, TypeScript, OpenCV.js, Konva, Jotai