소개
복잡한 상태와 요구사항을 단순하게 추상화하여 구조적으로 해결하는 Frontend Engineer입니다.
React·TypeScript·Electron 기반 미디어 편집기에서 상태·저장 아키텍처, 고빈도 인터랙션, 비동기 미디어 처리의 성능과 정합성 문제를 해결해 왔습니다.
프론트엔드에 뿌리를 두되 제품 완성에 필요한 영역을 경계 없이 학습합니다. AI 모델의 학습·추론 환경, 내부 웹·API 연동, 배포까지 연결해 시스템 전체를 이해하며 문제를 해결합니다.
모호한 요구사항을 구체화하고 여러 직군의 의견을 조율해 출시까지 이끄는 데 강점이 있습니다.
업무 경력
2025.01 - 현재
Frontend Developer
TTS·STT·음색 합성을 기반으로 다국어 콘텐츠 제작을 지원하는 AI 미디어 현지화 솔루션에서 사내 제작자용 편집 도구와 고객용 AI 오디오 서비스를 개발하고 있습니다.
- 웹 브라우저·Electron 기반 미디어 에디터 프론트엔드 개발을 리드하고, 상태·편집·저장 구조와 타임라인·미디어 처리 성능을 개선
- VOIX KIT·TOOL의 생성·결제·공유 흐름과 PC·모바일 반응형 UI 담당
- 기획·디자인·마케팅과 요구사항·일정을 조율하며 공식 웹사이트와 핵심 제품 출시 주도
(AnAI 뉴미디어 연구소)
2023.06 - 2025.01
Frontend · 프리랜서
정식 입사 전 대학원 재학 중 프리랜서로 업무하였습니다.
AI 오디오 내부 웹의 관리·제작·녹음 UI와 로그인·구독 API 연동을 담당했습니다.
- 내부 웹 관리·제작 CRUD와 마이크 녹음 UI
- 로그인·CORS·구독 조회 API 연동 안정화
주요 프로젝트
2026.04 - 현재
웹 브라우저·Electron 기반
멀티미디어 에디터
<aside>
💡
사내 다국어 영상 제작자가 SRT 스크립트를 사내 자체 TTS 기술인 Dyna Engine으로 음원화하고, 생성된 음원을 영상 타임라인에 반영해 오디오·비디오를 편집하는 멀티미디어 에디터입니다.
최대 2시간·30개 트랙·약 2GB 규모의 프로젝트를 처리하며, 프론트엔드 2인 팀에서 웹 브라우저 버전 개발을 리드했고 Electron 버전은 프론트엔드 2명·백엔드 3명과 협업했습니다.
</aside>
- Electron Main Process를 프로젝트 상태의 SSOT로 설계 → 다중 창·프로세스 간 상태 불일치와 수정 유실 문제 해결 (기술 글 · Electron에서는 공유 데이터를 어디에 둬야 할까?)
- 타임라인·프리뷰·내보내기가 동일한 데이터 처리 경로를 공유하도록 통합 → 미리보기와 최종 결과물의 불일치 해소
- 재생·편집·탐색 등 핵심 동작을 단축키·키보드 조작으로 연결하고, 텍스트 입력 중에는 단축키가 편집 명령을 가로채지 않도록 입력 포커스에 따라 키 처리를 분기 → 마우스 없이도 빠르게 편집하고 입력 충돌을 줄임
- 프로젝트 영속 상태·런타임 상태·UI 상태의 책임을 분리 → 저장 누락 위험과 기능 변경의 영향 범위 축소
- Feature 단위 Fractal 폴더 구조 도입 · 타임라인·프리뷰·내보내기 등 관련 컴포넌트·Hook·상태·유틸을 기능별 경계 안에 배치 → 기능 탐색과 수정 범위를 명확히 하고 코드 응집도 향상
- 개인 개발한 TypeScript 기반 DAW Engine을 제품 전용 Adapter 뒤의 편집 코어로 적용 →
Session·Track·Region·Source 도메인 규칙과 약 70개 Command 계약을 UI·Electron 구현에서 분리해 브라우저·Electron 간 재사용
- 대규모 렌더링 병목 해소: 이진 탐색을 활용해 뷰포트 내 클립만 조회하고,
requestAnimationFrame으로 React와 Canvas 렌더링을 분리 (기술 글 · 대규모 타임라인에서도 부드럽게 동작하는 에디터 만들기)
- 오디오 클립 500개 이상에서 사실상 편집이 어려웠던 렌더링 병목 해소
- 1,500개 오디오 클립 기준 Long Task 누적 시간
4.42초 → 1.15초 73.9% 감소
- 자막을 빠르게 수정할 때 수천 개 행이 한 번에 다시 그려져 입력이 끊김 → 보이는 구간만 렌더링하도록 가상화해 입력 지연을 줄임
- 작업 큐와 동시성 제한 적용 → 반영 중 Long Task
2.24초 → 0.38초 82.8% 감소, 처리 오류 78건 → 0건
- 드래그 중 타임라인 전체가 다시 그려져 움직임이 끊김 → 오버레이로 드래그 미리보기만 갱신
- Web Worker로 내보내기 연산을 분리 → 메인 스레드 점유율
66% → 11% 83.3% 감소, 내보내기 중에도 편집 가능
- FFmpeg 대체 처리 경로 구성 → WebCodecs 미지원 브라우저에서도 동일 기능 제공
Local-first 저장 및 동기화 안전성
- IndexedDB 기반 Outbox와 자동 재시도 적용 → 앱 종료·네트워크 장애 상황의 동기화 누락 방지 (기술 글 · 네트워크가 끊겨도 편집 내용을 잃지 않는 Local-first 저장 설계)
- 프로젝트 버전 기반 결과 검증 적용 → 이전 프로젝트의 지연된 작업 결과가 현재 프로젝트를 덮어쓰는 문제 방지
- 자산 단위 Single-flight 패턴 적용 → 중복 영상 Import 요청을 하나의 Promise로 병합해 불필요한 연산과 I/O 차단
- 미디어 파일과 타임라인 데이터를 분리 저장 → 중복 저장을 줄이고 대용량 프로젝트의 저장 용량과 성능 안정성 확보
오디오 내보내기 및 런타임 배포 안정화
- 메모리 부족 문제 해결: 오디오 데이터를 Chunk 단위로 분할하여 Blob으로 인코딩하는 방식 적용 → 저사양 PC에서 장시간 오디오 내보내기 시 발생하던 메모리 할당 오류(OOM) 해결 (
RangeError: Array buffer allocation failed)
- macOS AAF 런타임 패키징 수정 → Structured Storage backend 누락으로 발생하던
.aaf 생성 중단 해결
- 내보내기 경로를 통합하고 Smoke Test·서명 검증 적용 → 잘못 패키징된 런타임을 배포 전에 검출