Blur.me
2025.02 ~ 2026.10
웹 프론트엔드 (기여도 30%)
- Next.js 14
- React 18
- TypeScript
- Recoil
- Jotai
- Tailwind CSS
- MUI
- i18next
- React Konva
- Video.js
- WebAssembly
- Stripe
- Paddle
- AWS Cognito
- AWS S3
- PostHog
- Playwright
- Vitest
- 영상·이미지·PDF 속 얼굴·번호판을 AI 로 자동 블러 처리하는 글로벌 비식별화 SaaS(17개 언어) 개발
- 데스크톱 LCP 4.6초('느림') → 2.5초 이하: 코드 스플리팅, MUI·lodash 트리쉐이킹, CDN 캐시 전략, 폰트·이미지 최적화
- WebAssembly 블러 모듈 연동, React Konva 로 Canvas 기반 영역 지정·키프레임 편집 UI 구현
자세히 21건접기
- 공유·임베드 페이지와 내보내기 흐름 구현: 렌더 상태 폴링, 단일·다중 공유, 2~3GB 영상 스트림 다운로드(실패 시 브라우저 기본 다운로드로 전환)
- 대시보드 폴더 기능과 폴더 일괄 zip 내보내기 구현
- 비디오 트리밍·오버랩 구간 설정, 대시보드 드래그 다중 선택 구현
- 영상 고급 설정(자동 블러·움직임 따라가기 기준)을 WASM 렌더러 설정과 연결해 미리보기·추적에 반영
- 신규 요금제·랜딩·대시보드·공유·고객지원 페이지 GUI 리뉴얼
- Video.js 로 커스텀 영상 플레이어와 프레임 단위 타임라인 조작 기능 개발
- Stripe·Paddle 결제 연동 및 플랜별 구독/크레딧 관리 시스템 구현
- 한국 결제(카드·카카오페이·네이버페이, KRW) 도입, Paddle 구독 재개·연체 재결제 처리
- API Key 발급·조회·삭제 관리 화면 개발
- 블러 적용 전 원본 사진이 0.3~0.6초 먼저 보이던 개인정보 노출 문제 해결: 블러 적용 전까지 미리보기를 가리고, 설정 조회가 실패해도 가림 유지
- 네트워크 순단 시 로그인 사용자 정보가 빈 값으로 굳고 유료 기능이 잘못 막히던 문제를 재시도·세션 자동 복구로 해결
- 구 요금제 화면에서 출시 전 가격으로 실결제가 발생한 운영 사고의 원인을 찾아 결제 진입 차단
- 폴더 내보내기 진행 조회가 폴더 크기에 비례해 늘던 구조(500개 폴더 기준 최대 2,400회 요청)를 신규 파일만 묶어 조회하도록 바꿔 서버 부하 감소
- 재편집한 파일 대신 이전 결과물이 내려가던 내보내기 정합성 문제를 경로별로 찾아 수정
- Playwright E2E 로 요금제·결제 진입 경로와 17개 언어 요금제 화면 검증 자동화
- react-i18next 기반 17개 언어 지원
- Recoil 전역 상태 관리 및 Jotai SSR 대응 처리
- optimizePackageImports 로 MUI·lodash 트리쉐이킹, 번들 최적화
- 공개 페이지 CDN 캐시와 정적 자산 장기 캐시 적용, 인증·개인화 페이지는 캐시 분리
- next/font/local 로 Mona Sans 로컬 최적화(font-display: swap), Pretendard 는 non-blocking 비동기 로드, CDN 에 preconnect + dns-prefetch
- 이미지 CDN 직접 연결로 서버리스 함수 실행 비용 제거 및 응답속도 개선
