AI 도구가 들어간 사진 편집기
AI가 들어간사진 편집기.
인물 보정, 모델 옷 바꾸기, 포즈 변경, 카메라 앵글 이동, 로고 만들기까지 할 수 있어요. 전부 하나의 앱에서, 웹, 데스크톱, 모바일로 돼요.
- 역할
- 팀 리드
- 클라이언트
- Yellowbox
- 팀
- 개발자 3~4명 (저 포함)
- 플랫폼
- 웹, Windows, macOS, Android
- 사이트
- clor.kr
01인물 보정
피부를 보정해도어색하지 않게.
잡티, 다크서클, 주름을 슬라이더로 조절해요. 모공, 피부결, 표정은 그대로 남아서 그 사람 얼굴 그대로 보여요.
보정 전보정 후
10개 이상 슬라이더
잡티, 점, 피지, 눈밑, 입술, 이중턱, 주름.
프리셋
전체, 여성, 중년 여성, 개별 중에서 한 번에 시작해요.
저장하고 동기화
설정을 프리셋으로 저장해서 촬영 전체에 적용해요.
02AI 피팅
다시 촬영하지 않고옷을 바꿔요.
모델 사진에 옷을 올리면 Clor AI가 몸에 맞추고 포즈와 조명은 그대로 둬요. 그래서 카탈로그에 바로 쓸 수 있는 새 사진이 나와요.
- 모자
- 얼굴
- 장갑
- 상의
- 하의
- 소품
- 신발
의상 슬롯 7개, 스타일 라이브러리, 핏을 설명하고 싶으면 프롬프트도 쓸 수 있어요.
03AI 디렉터: 포즈
포즈는 바꾸고사람은 그대로.
Clor AI가 몸, 손, 얼굴을 찾아서 관절마다 움직일 수 있는 3D 스켈레톤을 만들어요. 프리셋 포즈를 골라도 되고요. 그다음 사진을 다시 렌더링해요.
1감지몸, 손, 얼굴을 찾아요
23D 포즈관절을 움직이거나 프리셋 선택
3렌더링같은 얼굴, 같은 수트, 새 포즈
04AI 디렉터: 카메라
찍은 다음에도카메라를 움직여요.
사람 주위로 가상 카메라를 돌려서 새 앵글을 만들고, 조명도 바꿀 수 있어요. 사진 한 장으로 여러 시점이 나와요.
원본, 측면
새 앵글, 뒷모습
05AI 로고
로고를 만들고벡터로 수정해요.
로고가 진짜 SVG로 나와서 패스와 포인트를 하나하나 수정하고, 색을 바꾸고, 효과를 넣을 수 있어요.
진짜 SVG
패스 18개, 그룹과 레이어
폰트
Google Fonts, 또는 .ttf, .otf 업로드
효과
외곽선, 그림자, 글로우, 패턴
내보내기
인쇄할 수 있는 깔끔한 벡터
06나머지 편집 기능
AI 도구 말고도제대로 된 사진 편집기.
라이브러리
프로젝트마다 사진 수백 장을 별점, 플래그, 필터로 관리해요.
편집 도구
레이어, 선택, 브러시, 힐링, 자르기, 텍스트.
비교하고 내보내기
나란히 보기로 비교하고 내보내기, 인쇄, 클라우드 저장.
나란히 보기로 하는 인물 보정 
의상 슬롯이 있는 AI 피팅 
로고용 SVG 편집기
07어떻게 만들었는지
팀 리드로서제가 한 일.
- 프로젝트 전체 커밋, 프론트엔드와 백엔드
- 4,000+
- 그중 제 커밋, 팀에서 제일 많아요
- 1,600+
- 브라우저에서 돌아가는 AI 모델
- 40+
- 지원 언어
- 12
개발팀 팀장 (인피니크, Yellowbox 프로젝트)
Clor AI는 Infinique에서 Yellowbox를 위해 만들고 있는 사진 편집기이고, 제가 개발팀을 이끌고 있어요. 레이어, 브러시, 리퀴파이, 마스크 같은 기본 전문 도구에 AI 기능이 많이 들어가 있어요. 몸과 얼굴 형태를 바꾸고, 피부를 보정하고, 잡티를 지우고, 치아를 정리하거나 문신을 지우는 걸 실시간 슬라이더로 할 수 있어요.
AI 모델 상당수가 기기에서 돌아서 사진이 기기 밖으로 나갈 필요가 없어요. 나머지는 AWS(ECS, Fargate, SQS), 스토리지는 Cloudflare R2, 그리고 Hugging Face와 Replicate를 써요. React로 만들었고 웹, Electron 데스크톱, Capacitor 모바일로 나가요.
- 브러시 엔진, 리퀴파이, 마스크, 변형을 갖춘 다중 레이어 에디터
- TensorFlow 및 ONNX 모델을 사용한 로컬 클라이언트 사이드 추론
- Hugging Face와 Replicate 모델을 사용하는 AWS 인프라(ECS, Fargate, SQS)와 Cloudflare R2 스토리지
- 최적화된 캔버스 렌더링으로 실시간 비파괴 편집
- 웹, Electron 데스크톱, Capacitor 모바일 앱을 위한 단일 코드베이스
- 팀장: 아키텍처, 코드 리뷰, 멘토링
직접 만든 WebGL 2 렌더러
캔버스 라이브러리를 안 썼어요. 보정 하나하나가 저희가 직접 짠 GLSL 셰이더예요. 큰 파일은 타일로 나눠서 렌더링해서 GPU 텍스처 한계를 넘는 8K도 내보낼 수 있어요.
Web Worker에서 도는 모델
MediaPipe, ONNX, TF.js 모델이 워커 10여 개에서 돌아서 화면이 멈추지 않아요. 데스크톱에서는 Electron이 네이티브로 돌려요.
포즈 파이프라인
감지한 포인트를 React Three Fiber에서 3D 스켈레톤으로 만들고, OpenPose 이미지로 렌더링해서 이미지 모델에 보내요.
WebAssembly로 RAW 처리
LibRaw를 싱글 스레드 WASM으로 빌드했어요. SharedArrayBuffer가 필요 없어서 cross-origin isolation 없이도 돌아가요.
AI 모델용 작업 큐
Fastify API와 Fargate 워커가 SQS로 작업을 Gemini, OpenAI, fal, Replicate, Recraft 같은 알맞은 곳에 보내요.
코드베이스 하나
플랫폼 어댑터가 있는 Turborepo 모노레포예요. 같은 편집기가 웹, Electron 데스크톱, Capacitor 모바일로 나가요.
기술 스택
React
TypeScript
AI / ML
Three.js
AWS
Hugging Face
Replicate
Electron
Capacitor
Vite
Tailwind CSS
Node.js
Fastify
PostgreSQL