AI 이미지 에디터
인터랙티브 소설·게임 창작 플랫폼 LoveyStudio를 위해 개발한 Konva 기반 이미지 편집기
What I used
Reactjs
TypeScript
What I did
1
Command Pattern + Singleton으로 Undo/Redo 시스템을 단독 설계·구현했습니다.
2
Tool Plugin 인터페이스로 도구(지우개·크롭)를 독립 모듈로 분리했습니다.
3
Konva Dual Layer System으로 이미지·드로잉·커서 레이어를 분리했습니다.
4
globalCompositeOperation으로 지우개 픽셀 마스킹을 구현했습니다.
5
캔버스 알파 채널 기반 마스크를 생성해 Stability AI inpainting API와 연동했습니다.
6
AbortController + 재귀 재시도(최대 3회)로 AI 요청 안정화를 구현했습니다.
7
재귀 품질 감소 알고리즘으로 1MB 이하 WebP 이미지 최적화를 구현했습니다.
8
requestAnimationFrame으로 Konva 이벤트 ↔ React 상태를 디커플링했습니다.