서해준
핵심 역량
- 사용 기술: TypeScript, React, Vue
- 개발 환경: Vite, Webpack, Turborepo, PNPM Workspace
- 오픈소스: Vite 한국어 문서 번역 메인테이너, 80+ 프로젝트에서 활용되는 Text-Vide, 문서 동기화 GitHub Action인 Yuki-no 등
소개
안녕하세요, 4년차 웹 프런트엔드 개발자 서해준입니다.
스타트업에서 웹 기반 미디어 애플리케이션 개발을 해왔습니다. "더 쉽게 만들어야 한다"는 신념 아래 불편 없는 사용자 경험을 위해 멀티미디어 버퍼링 최적화, 비디오 썸네일 생성 등 다양한 작업을 수행했습니다. 특히 복잡한 미디어 요소들을 효율적으로 제어하는 이벤트 기반 멀티트랙 시스템을 설계 및 구현해 동영상-오디오 간 동기화 문제를 해결했습니다. 또한 TTS 에디터 관련 글로벌 대응을 위해 미국 캘리포니아로 출장, 3주 기간 내 16번 프로토타이핑 및 인터뷰 수행으로 WAU 51.2% 향상을 이끌어낸 경험이 있습니다.
오픈소스 생태계에 적극적으로 기여합니다. Vite 한국어 문서 번역 메인테이너로 활동하고 있으며, 번역 프로젝트를 위한 동기화 도구인 Yuki-no를 개발했습니다. 또한 80개 이상 프로젝트에서 사용되는 text-vide 라이브러리를 개발해 오픈소스 커뮤니티에 기여했습니다.
문제에 대한 본질을 이해하고 분석하는 접근 방식을 지향합니다. 단기적인 해결책보다는 장기적으로 유지보수가 용이하고 확장 가능한 시스템을 설계하는 데 초점을 맞춥니다. 개발 과정에서 마주한 도전과 해결책, 기술적 인사이트를 블로그를 통해 정기적으로 공유합니다.
–
경력
네오사피엔스
AI TTS SaaS - 웹 프런트엔드 (2021.08 - 2024.12)
TTS 에디터 리뉴얼 (2024)
TypeScript, Slate.js, React, React Query, Vite, Vitest
- 글로벌 진출을 위한 TTS 에디터 리뉴얼 프로젝트
- 미국 캘리포니아 San Mateo 3주 출장 & 16번 프로토타이핑과 글로벌 유저 인터뷰 진행
- 아키텍처 설계, 핵심 기능 개발, UI/UX 디자인 기획에 주도적으로 참여
- 글로벌 요구사항을 반영한 TTS 에디터 성공적 구현
- Slate.js 기반 "텍스트 편집 + AI 음성 합성" 통합 TTS 에디터 설계 및 개발
- 문서 구조 일관성 유지를 위한 정규화 로직 구현
- 피치/억양/속도 등 음성 스타일 조절 UI 개발
- 사용성 향상(단어 단위 자동 선택, 재생 위치 시각화 등), 크로스 플랫폼 이슈(가상 키보드 버그) 해결
- 주요 성과
- WAU: +51.2%, 활성 로그인 사용자 +136.9%, 가입 전환율 +71.4%
- "이전보다 훨씬 직관적이고 빠르다"는 글로벌 사용자 피드백
AI 음성 더빙 솔루션 VoiceoverVideo 개발 (2024)
TypeScript, React, Canvas API, HTML5 Media API, Vite
- 프로젝트 주도적 설계/개발
- 비디오와 오디오 트랙을 제어하는 재사용 가능한 멀티트랙 시스템 개발
- 적극적인 제안을 통해 직관적인 타임라인 UI, 실시간 미리보기 기능 등 도입
- 모바일/PC 반응형 대응 및 iOS Safari 포함 모던 브라우저 호환성 확보
- 모듈식 멀티트랙 미디어 시스템 아키텍처 설계
- 이벤트 기반 통신으로 컴포넌트 간 느슨한 결합을 구현한 확장 가능한 구조
- Composite 패턴 기반 오디오, 비디오, 버퍼링, 에러 처리 등 독립적인 컴포넌트 설계 및 조합해 구현
- Controller 패턴을 활용한 중앙 집중식 시간 동기화 메커니즘 개발
- 이벤트 위임 기반 버퍼링 처리 시스템 개발
- 여러 미디어 요소에 대해 버퍼링 상태를 감지하고 재생을 동기화하는 아키텍처 설계 및 구현
- 네트워크 상태 변화에 실시간 대응하여 끊김 없는 미디어 재생 경험 제공
- 모바일 네트워크 환경에서도 안정적인 재생 보장
- 주요 성과
- 사용자들이 외부 프로그램 없이 AI 음성 더빙 작업 가능
- 플랫폼 체류 시간 증가 달성
신규 프로덕트 모던 개발 환경 구성 (2024)
TypeScript, Vite, Turborepo, PNPM Workspace
- 모노리포 아키텍처 도입
- 기존 모놀리식 서비스를 유스케이스별 독립 페이지로 제공하는 새로운 프로덕트 방향에 맞춰 진행
- Vite 기반 애플리케이션별 개발 환경 구성
- Turborepo 활용 캐싱 및 병렬 처리로 빌드 파이프라인 최적화
- 개발 환경 개선 & 프로세스 표준화
- 팀 의견 수렴해 프로젝트 규칙과 협업 방식 명문화 및 자동화 스크립트 작성
- 신규 개발자를 위한 프로젝트 온보딩 가이드 작성/관리
- 개발 환경 관련 문제와 추가 요구사항 주도적 담당
- 주요 성과
- 표준화된 환경으로 빌드 및 기능 개발 속도 향상
- 팀원들이 비즈니스 로직 구현에 집중할 수 있는 환경 조성
타입캐스트 웹 프런트엔드 최적화 (2023)
TypeScript, Vue 2.7, PNPM, Turborepo, Chrome DevTools
- AI 성우 목록 페이지 성능 최적화
- Chrome DevTools 프로파일링으로 성능 병목 지점 파악
- 가상 스크롤 도입으로 특히 모바일에서 초기 로딩 시간 14배 개선 (1100ms -> 80ms)
- 적용 전 트레이드오프 팀 공유 및 합의 도출
- 모노리포 마이그레이션 주도
- 기존 멀티리포 + Git Submodules 기반 협업 문제 해결 목적
- 3단계 전략 수립: 패키지 매니저 교체, 코드베이스 통합, 배포 파이프라인 수정
- PNPM 도입 및 디스크 캐싱으로 디펜던시 설치 시간 평균 50% 단축
- 도커 이미지 제거로 CI/CD 파이프라인 단순화
- 개발 환경 현대화
- Node 16 + Webpack 5 도입으로 빌드 성능 개선
- Vue 2.7 업그레이드와 Vue Composition API 도입으로 코드 구조화 및 재사용성 향상
타입캐스트 웹 기반 영상 편집 솔루션 개발 (2022)
TypeScript, Vue 2, SceneJS, Moveable, HTML5 Media API
- 기존 TTS 에디터에 영상 편집 기능 추가 프로젝트 진행
- SceneJS 타임라인 시스템 기반 영상-음성 동기화 로직 구현
- 다양한 미디어 에셋(영상/이미지/BGM) 업로드 및 관리 시스템 개발
- 사용자 플랜에 따른 워터마크 시스템 구현해 비즈니스 요구사항 충족
- 인터랙티브 편집 기능 구현과 사용성 향상
- Moveable 활용해 에셋 배치 기능 구현
- 자막 편집과 트랜지션 효과를 구현해 영상 완성도 향상
- 다운로드 전 미리보기 기능 제공으로 불필요한 크레딧 소모 방지
- 미리보기 시 버퍼링 최적화로 안정적인 재생 경험 제공
- 주요 성과
- TTS 외 새로운 가치를 제공해 서비스 수익 창출 경로 확장
- 사용자 체류 시간 및 플랜 전환율 증가
채용 프로세스 설계 (2022)
- 프런트엔드 개발자 채용 과제 테스트 재설계
- 면접관 경험을 통해 기존 과제 한계점 파악
- 팀원들과 개선 방향 논의 및 합의 도출
- 실무 연관성 높은 2단계(구현-확장) React 과제 설계
- 평가 체계 구축 & 표준화
- 내부 개발자 대상 테스트로 적절 평가 시간 산출
- 사내 직급체계 기반 주니어/시니어 평가 항목 구분
- 면접관용 진행 스크립트와 권한 설정 등 세부 절차 문서화
- 지속적 개선과 성과
- 팀 세미나에서 과제 테스트 결과 공유 및 정기적 피드백 수집
- 실무 환경 반영 과제로 문제 해결 능력 평가 정확도 향상
- 채용 후 업무 수행 능력과 과제 평가 결과 일치도 향상
피앤피시큐어
DB 보안 솔루션 - WAS 보안 솔루션 연구 및 개발 (2020.10 - 2021.05)
다운로드 파일 전송 모듈 개발 (2021)
JavaSE 1.4, Javaassist, VisualVM, Apache JMeter
- WAS HTTP 요청 인터셉트 모듈 설계
- Javaassist 활용해 WAS 런타임 상에서 바이트코드 조작하는 형태로 구현
- HTTP 요청을 인터셉트해 다운로드 관련 데이터 추출 및 외부 분석 프로세스로 전달
- 주요 성과
- 사용자 WAS에 플러그인 형태로 구현되어야 한다는 요구사항을 충족
- 기존 시스템 변경 없이 도입할 수 있어 비용 절감
APM 로그 데이터 전달 모듈 개발 (2021)
OpenJDK 15, Spring Boot, WebFlux
- 외부 APM 솔루션 로그 데이터를 사내 로깅 시스템으로 전달하는 모듈 개발
- 멀티스레딩 기반 API 요청-파싱-전달 수행 파이프라인 구축해 효율적인 데이터 처리 구현
- 큐 기반 아키텍처로 병목 현상 방지
- 주요 성과
- 비동기 처리 방식으로 시스템 부하 최소화
- 로그 데이터 통합으로 모니터링 효율성 향상 및 사내 솔루션으로 사용자 인입
솔루션 리팩터링 방안 설계 및 프로토타입 구현 (2020)
Java SE 1.4, Javaassist, ViaualVM, Apache JMeter
- 기존 솔루션 한계 분석
- WAS 런타임에 직접 개입하는 방식 한계점 파악
- 사용자 WAS 성능 저하 및 개발 시 리소스 제약 문제 도출
- 개선된 아키텍처 설계
- WAS 런타임 데이터 수집 모듈 최소화 방안 제시
- IPC 기반 외부 프로세스 통신 구조 설계
- 프로토타입 개발 & 검증
- VisualVM 및 Apache JMeter 활용한 성능 테스트 수행
- 개선 효과 수치화로 리팩터링 당위성 입증
- 관련 내용 APM 로그 데이터 모듈 개발에 반영
–
개인 프로젝트
Yuki-no (2025)
TypeScript, GitHub API(Octokit)
- 문서 번역 프로젝트용 동기화 GitHub Action 개발
- 원본 저장소 변경을 추적해 GitHub Issues 자동 생성
- 기존 오픈소스 Ryu-Cho 한계 극복: GitHub API 요청 실패, 변경사항 유실, Issues 라벨 설정 불가, 불필요한 옵션, 성능 향상
- 안정적이고 확장된 기능 제공
- 안정적인 GitHub API 사용 및 실패 상황 핸들링
- Glob 패턴 기반 추적 파일 필터링, 변경사항에 대한 릴리스 여부 표시 등 다양한 옵션 제공
- Action 실패 시 다음 실행에서 실패 지점부터 재시작하는 오류 복구 매커니즘 구현
- 실제 오픈소스 프로젝트에서 사용
text-vide (2022)
TypeScript, PNPM Workspace, Turborepo, Vite, Vitest
관련 블로그 (개발 후기) | NPM | GitHub | 온라인 데모
- 단어 일부를 하이라이트해 가독성을 향상하는 Bionic Reading 기술에 대한 오픈소스 JavaScript 구현체 개발
- 매달 약 30k 다운로드와 80개 이상 프로젝트에서 사용중
- CJS, ESM, IIFE 세 가지 포맷 지원 및 GitHub Actions 자동 배포 CI/CD 파이프라인 구성
- 사용자 편의성을 위한 온라인 데모 제공
- 모노리포 아키텍처 경험
- 사내 모노리포 도입 전 기술 적응을 위한 개인 프로젝트
- PNPM Workspace와 Turborepo 기반 구성
- 경험을 바탕으로 사내 프로젝트에서 모노리포 아키텍처 빠르게 적용
Vite 번역 주도 및 커뮤니티 활성화 (2022)
VitePress, GitHub Actions
- Vite 공식 문서 한국어 번역 주도
- Vite 프로젝트 초창기부터 한국어 번역 메인테이너로 활동
- 번역, 홍보, 유지보수 지속적 기여
- 한국 개발자 커뮤니티에 최신 Vite 관련 정보 전달
- 체계적인 원본 문서 동기화 시스템 구축
- 동기화 전용 브랜치를 이용해 변경사항에 대한 GitHub Issues를 자동으로 생성하는 스크립트 작성
- 원본 리포지토리 종속성 없는 유연한 번역 프로젝트 구조 확립 가능
- 오픈소스 툴 개발
- 동기화 시스템 구축 경험을 바탕으로 오픈소스 동기화 툴 yuki-no 개발
- Vite, Vue 등 다양한 오픈소스 번역 프로젝트에서 사용중
낸내; 한글 폰트 모음 사이트 (2021)
TypeScript, Vue 3, Pinia, Vue-router, Vite
관련 블로그 (개발 후기) | GitHub | 홈페이지
- 상업적 용도로 활용 가능한 무료 한글 폰트 서비스 개발
- 기존 서비스를 타깃으로 광고 없이 동일한 콘텐츠 제공
- GitHub Pages와 jsDelivr 활용한 정적 콘텐츠 배포
- 자동화 및 성능 최적화
- GitHub Actions로 폰트 콘텐츠 및 메타데이터 동적 생성 파이프라인 구축
- Service Worker와 Cache Storage API 활용해 브라우저 한도까지 폰트 파일 캐싱 및 네트워크 요청 최적화
- 가상 스크롤 구현으로 모바일 렌더링 성능 개선
- 주요 성과
- 275종류, 총 424개 폰트 파일을 운영 비용 없이 안정적으로 제공
- 광고 없는 깔끔한 UI와 최적화된 성능으로 사용자 경험 향상
- 네오사피엔스 재직 당시 모바일 퍼포먼스 이슈 해결에 해당 경험 활용
–
수상 이력
제 2회 국회도서관 해커톤 (2019.12)
NHN 대표이사상 | 국회 보도자료
"Orthos, 청와대 청원 분석 서비스"를 통해 수상했습니다.
제 6회 소프트웨어 개발보안 경진대회 (2019.10)
행정안전부 장관상 | 한국마이크로소프트 후원기업상 | 보안뉴스
"Serverless 아키텍처 기반 OAuth2.0 프로토콜 구현"을 통해 수상했습니다.
–