서해준

GitHub / Blog / to@shj.rip

안녕하세요, 4년차 웹 프런트엔드 개발자 서해준입니다.

(React/TypeScript, Vite/pnpm/Turborepo/Webpack, Vitest/RTL, Vue 2/3)

AI TTS 에디터와 영상 편집 제품을 만들며 타임라인 중심 미디어 상태 모델링, 미디어 버퍼링 동기화, 에디터 문서 구조 정규화 로직 등 핵심 로직을 구현했습니다. 특히 에디터 리뉴얼 프로젝트에서 빠른 실험 및 프로토타이핑 루프를 통한 UX/성능 개선으로 WAU +51.2%, 가입 전환율 +13.5%p 성과를 얻은 경험이 있습니다. (2024.09 -> 2024.11)

성능과 DX에도 집중합니다. 프로파일링과 가상 스크롤을 통해 초기 마운트 1,100ms -> 80ms를 달성했고, pnpm 디스크 캐싱으로 디펜던시 캐싱용 Docker 이미지를 제거해 빌드 타임을 평균 50% 단축하고 CI/CD 파이프라인 최적화에 기여했습니다. 또한 모노리포 등 모던 개발 환경을 도입해 DX를 향상시켰고, 프런트엔드 채용 과제 테스트와 프로세스를 재구성해 평가 일관성과 정확도를 높였습니다.

개인적으로는 Vite 한국어 문서 메인테이너, text-vide(90+ 프로젝트 사용, 월 ~23K 다운로드), yuki-no(15+ 프로젝트 사용) 등 다양한 오픈소스를 개발/유지보수하고 있습니다.

–

경력

네오사피엔스

AI TTS SaaS - 웹 프런트엔드 (2021.08 - 2024.12, 3년 4개월)

유저 중심 AI TTS 에디터 리뉴얼 (2024/Q4)

TypeScript, Slate.js, React, TanStack Query(React Query), Vite, Vitest

FE 2 (Sr. 1, Jr. 1), BE 1, Design 1, PM 1, CEO

담당: 에디터 정규화 로직, Paste 로직, 음성 스타일 & 성우 선택 UI, 유닛 테스트 작성, 개발 환경 구성

글로벌 시장 진출을 위한 AI TTS 에디터 리뉴얼 프로젝트입니다. 기존 국내 유저 타깃으로 설계된 프로덕트를 글로벌 사용성을 고려한 구조로 전환하는 것이 목표였습니다. 미국 캘리포니아주 샌마테오(San Mateo)에서 3주간 마치 작은 스타트업처럼 밀접하고 유기적으로 협업하며 현지/온라인 유저 인터뷰, 실험, 프로토타이핑을 활용해 빠르게 프로덕트를 개발했습니다.

• 글로벌 사용성 문제 해결을 목표로, 리뉴얼 프로젝트 참여
  • 3주간 16차례 프로토타이핑-인터뷰 반복하며, 1~2일 단위 "가설-프로토타이핑-인터뷰-분석" 피드백 루프로 빠르게 진행
  • 개발 환경 구성, 에디터 문서 구조 정규화 로직, UI 컴포넌트, 문서 구조 유닛 테스트 작성
  • 개발 설계, UI/UX 기획, 유저 인터뷰 분석에 기여
• Slate.js 기반 "텍스트 편집 + AI 음성 합성" 통합 TTS 에디터 개발
  • 정규화 로직: 복잡한 편집(분할, 병합, 붙여넣기 등) 상황에서도 데이터 무결성을 보장하는 정규화 로직을 Slate.js 인터페이스 기반 구현해 에디터 문서 구조 일관성 확보
  • 붙여넣기 로직: DataTransfer에 TTS 메타데이터 저장/파싱 → 외부/내부 붙여넣기 모두 메타데이터 및 호환성 유지
  • 억양/속도/피치 등 음성 스타일 조절 및 성우 선택 UI 개발 & 성우 선택 UI에 그룹화 인사이트 반영
  • 사용성 향상(재생 위치 시각화, 단어 단위 스타일 적용 등), 편집 후 문서 구조 일관성 유지 유닛 테스트 작성
• 주요 성과
  • UI/UX 전면 개편으로 WAU 51.2% (4535명 → 6859명) 및 가입 전환율 13.5%p (18.9% → 32.4%) 성장 (2024.09 대비 2024.11)
  • 피드백을 바탕으로 문제를 식별하고, 빠른 실험과 데이터 기반 의사결정/개발 경험을 통해 실무 역량 성장
  • 글로벌 시장 진입을 위한 기획 및 기술적 기반 마련으로 해외 확장 가능성 확대

블로그: 미국 출장 후기

AI 음성 더빙 솔루션 VoiceoverVideo 개발 (2024/Q1)

TypeScript, React, HTML5 Media API, Blob API, Vite

FE 2 (Sr. 1, Jr. 1), BE 1, Design 1, PM 1

담당: 멀티트랙 타임라인 컨트롤러 설계 및 구현, 주요 UI 컴포넌트 구현, iOS 프레임 추출 버그 등 모바일 호환성 체크 및 확보, 유저 워크플로우 개선

VoiceoverVideo는 AI TTS 기술을 바탕으로 유저가 업로드한 영상에 음성을 더빙(Voiceover)하는 솔루션입니다. 외부 편집 툴로 이탈하는 현상을 줄이고, 플랫폼 내부에서 영상 생성까지 수행하는 것을 목표로 했습니다. 핵심 모듈에 대한 설계 및 구현을 담당했으며, 시니어 팀원과 함께 페어로 코드/성능/리스크를 리뷰하며 진행했습니다.

이 프로젝트에서는 비디오/오디오 멀티트랙 타임라인 컨트롤러부터 UI 컴포넌트까지 주도적으로 구현했습니다. 또한 직관적인 타임라인 UI, 클라이언트 중심 워크플로우 전환 등 기획/디자인 단계부터 의견을 제안하고 반영했습니다.

• AI 음성 더빙 솔루션 프로젝트 담당
  • 비디오/오디오를 제어하는 재사용 가능한 멀티트랙 타임라인 컨트롤러 설계 및 구현
  • 기획 제안을 통해 직관적인 타임라인 UI와 Blob 기반 "업로드 중 편집" 도입
  • 서버 의존적 편집 워크플로우를 클라이언트 중심으로 전환, 업로드와 동시에 편집 가능하도록 개선
  • 업로드-편집-재생-더빙 핵심 플로우에 대해 실기기(iOS/Android/PC) 검증으로 브라우저 호환성 확보
• 멀티트랙 타임라인 컨트롤러 설계 및 구현
  • 시간/재생 상태를 관리하는 타임라인 클래스 & UI 컴포넌트 레이어 두 부분으로 구성
  • 타임라인은 렌더 사이클 외부에서 Pub/Sub으로 상태 변경 발행해 불필요한 리렌더 최소화
  • 타임라인 인스턴스를 Context로 주입하고, Video/Audio/Buffering/Controls 등 하위 컴포넌트는 필요한 상태만 구독해 업데이트
  • 에러 바운더리로 예외 발생 시 Fallback UI 제공
• 이벤트 위임 기반 버퍼링 처리 레이어 개발
  • 다수 미디어 요소에 대해 버퍼링 상태를 감지하고 재생을 동기화하는 레이어
  • canplay/waiting/loadstart 이벤트로 버퍼링 감지, 리소스 고려해 500ms 주기로 readyState/networkState 프로퍼티 확인해 버퍼링 상태 점검
  • 네트워크 상태 변화에 실시간 대응하여, 모바일 네트워크 환경에서도 안정적인 비디오 + 오디오 재생 보장
• 업로드 중 편집 기능 도입
  • Blob URL 기반 업로드와 독립적인 편집 환경 제공, 업로드는 별도 Promise 체인으로 격리
  • Object URL error/create/revoke 관리 훅과 에러/재시도 UI 제공해 편집/업로드 독립성 확보
  • 업로드 직후 바로 편집할 수 있는 워크플로우 제공
• 주요 성과
  • 외부 프로그램 없이 AI 음성 더빙 작업 가능
  • 서비스 신규 가치 창출 및 플랫폼 체류 시간 증가 달성

블로그: 미디어 버퍼링 관리, iOS Safari에서 비디오 프레임 추출하기

신규 프로젝트 모던 개발 환경 구성 (2024/Q1)

TypeScript, React, Vite, Turborepo, pnpm Workspaces

담당: 스택 선정, 개발 환경 구성, 가이드 문서화, 온보딩 체계 정비

레거시 프로젝트에서 멀티리포 + Git Submodules로 인해 Commit SHA 불일치, 코드 재사용 비용 상승, 협업/온보딩 효율 저하를 경험했습니다. 같은 문제를 반복하지 않고 향후 React Native 프로젝트 확장을 대비해 pnpm Workspaces 기반 모노리포 개발 환경을 구성했으며, 스택 선정, 구성, 문서화, 온보딩 전 과정을 주도했습니다.

• 모노리포 개발 환경 구성
  • apps/packages 구조 설계, 디자인 시스템/HTTP/유틸 등 공통 모듈을 packages로 분리해 재사용 및 버전 일관성 확보
  • 루트 Base TSConfig/ESLint/Prettier 구성 & 각 앱/패키지에서 확장
  • Vite 기반 애플리케이션 개발 환경으로 ESM 기반 빠른 HMR, Rollup 기반 번들 제공
  • Turborepo 캐싱 및 병렬 처리로 빌드 파이프라인 최적화
• 개발 프로세스 표준화
  • 문서 기반 app 및 package 스캐폴딩 가이드 제공: 생성 절차, 명명 규칙, Base 설정 확장, 테스트 설정 방법 등 스캐폴딩 가이드를 단계별 제공
  • 팀 의견 수렴해 브랜치, 커밋, 리뷰 가이드 명문화 및 Husky/Lint-Staged 자동화 훅 구성
  • 신규 개발자 온보딩 가이드(디렉터리 구조, 실행/빌드, 릴리즈 플로우) 작성 및 유지보수
• 주요 성과
  • 표준화된 환경으로 중복 설정 제거 및 개발 환경 관련 이슈 감소 & 기능 개발 집중도 향상
  • 온보딩 가이드를 통해 세팅 오류와 누락을 방지하고 첫 PR 리드타임 단축에 기여

타입캐스트 웹 프런트엔드 최적화 (2023/Q3)

TypeScript, Vue 2.7, pnpm, Chrome DevTools

담당: 페이지 성능 분석 및 최적화, 모노리포 마이그레이션 계획 및 수행, CI 파이프라인 단순화, 개발 환경 업그레이드

트래픽 상위 페이지(성우 목록)에 대한 초기 렌더 지연 현상을 개선했고, 멀티리포 + Git Submodules로 인한 디펜던시/협업/프로젝트 복잡도를 낮추기 위해 모노리포 마이그레이션을 수행했습니다.

• AI 성우 목록 페이지 성능 최적화
  • 퍼포먼스 프로파일링: 최초 진입 시 리스트 아이템 동시에 대량 마운트 → 메인 스레드 Scripting 급증 및 Long Task 확인
  • 가상 스크롤(윈도잉) 도입: 가시 영역 + 버퍼만 마운트하고 컴포넌트를 재사용해 메인 스레드 부하 절감
  • 결과: 초기 성우 목록 마운트 구간 1100ms → 80ms 개선 (Scripting 구간, 동일 데이터셋 기준)
• 모노리포 마이그레이션 수행
  • 멀티리포 + Git Submodules로 인해 Commit SHA 불일치, 서브모듈 초기화 등 온보딩 복잡도 상승, 린트/빌드 스크립트 중복 문제 발생
  • 3단계 전략 수립: (1) pnpm 전환 (2) 코드베이스를 apps/packages 구조로 일원화 (3) 내부 패키지 이동 및 스크립트 통합
  • 디펜던시 캐싱 목적 도커 이미지 제거로 CI/CD 파이프라인 단순화 & pnpm 디스크 캐싱으로 디펜던시 설치 시간 단축해 빌드 타임 평균 50% 이상 단축
• 개발 환경 현대화
  • Node 16 + Webpack 5 도입으로 빌드 성능 개선
  • Vue 2.7 업그레이드와 Vue Composition API 도입으로 코드 구조화와 재사용성 향상

블로그: 모노리포 마이그레이션

웹 프런트엔드 채용 과제 테스트 재구성 (2023/Q2)

담당: 한계점 파악 및 개선안 제시, React 과제 설계, 평가 항목 표준화, 운영 프로세스 문서화

기존 "이메일 폼 검증" 과제는 난이도가 낮아 지원자 능력을 파악하기 어려웠고, 평가 기준이 표준화되지 않아 면접관마다 결과가 달랐습니다. 이를 구현/확장 2단계 React 과제로 재구성했고, 사내 직급체계를 바탕으로 주니어와 시니어 평가 항목을 구분했습니다. 도입 효과는 입사 3개월 후 동료 평가에 대한 일치도로 검증했으며, 전반적으로 향상되었음을 확인했습니다.

• 프런트엔드 개발자 채용 과제 테스트 재설계
  • 면접관 경험을 통해 기존 과제 한계점(실무 거리, 정답형 위주, 낮은 변별력) 파악 및 개선 목표 설정
  • 실무 시나리오 중심 2단계 과제 설계 → 구현: 입력 처리, 리스트 필터링/렌더링 & 확장: 중첩 배열 필터링, 입력값 저장, 디바운싱
  • 목업 API, 샘플 데이터, 베이스 코드를 제공해 정답 구현이 아닌 설계와 트레이드오프를 중심으로 평가할 수 있도록 구성
• 평가 체계 구축 & 표준화
  • 항목 + 가중치로 평가 기준 수립 & 주니어/시니어 평가 항목 구분
  • 내부 개발자 사전 테스트로 평균 소요 시간(60분) 산출
  • 면접관 진행 스크립트, 권한 설정 등 세부 절차 문서화로 운영 편차 축소
• 지속적 개선과 성과
  • 정기 팀 세미나에서 과제 테스트 결과 공유 및 정기적 피드백 수집
  • 도입 후 면접관 편차 감소, 채용 후 업무 성과 및 동료 평가와 일치도 상승
  • README와 요구사항/진행 방법 문서를 제공해 지원자 경험 향상 및 관련 질의 감소

타입캐스트 웹 기반 영상 편집 솔루션 개발 (2022/Q1)

TypeScript, Vue 2, SceneJS, Moveable, HTML5 Media API

FE 4 (Sr. 2, Jr. 2), BE 2, Design 2, PM 1

담당: 타임라인 동기화 로직, 에셋 인터랙션, 인코딩 영상 미리보기, 에셋 업로드/관리 로직, 폰트 관리

외부 이탈을 줄이고 플랫폼 내에서 영상 편집까지 끝마칠 수 있도록 하는 것을 목표로 진행한 프로젝트입니다. 슬라이드를 연결해 영상을 만들 수 있으며, 그 과정에서 타임라인 동기화, 에셋 관리, 에셋 편집 UI, 미리보기 워크플로우, 영상 다운로드를 구현하고, VOC와 행동 데이터를 기반으로 플로우를 개선했습니다.

• 기존 TTS 에디터에 영상 편집 기능 추가 프로젝트 진행
  • SceneJS 타임라인 기반 영상-음성 동기화 로직 구현
  • 다양한 미디어 에셋(영상/이미지/BGM/자막) 업로드 및 관리 로직 개발
  • 플랜에 따른 워터마크 규칙 구현해 과금/정책 요구사항 충족
• 인터랙티브 편집 기능 구현
  • Moveable 기반 드래그/스케일/회전/그룹 편집 제공
  • 자막 편집과 트랜지션 효과를 제공해 영상 완성도 향상
• 피드백과 데이터를 이용해 문제 정의 & 해결
  • "결과물이 기대와 달라 크레딧을 낭비했다"는 VOC에 대해, "다운로드 전 결과물을 미리 확인할 수 있으면 해소될 것" 가설 수립
  • SceneJS 기능을 활용해 빠르게 프로토타입을 만들어 배포했으나 VOC 지속 발생
  • Hotjar와 Mixpanel을 통해 유저 행동을 분석해 "미리보기 버튼을 찾지 못함" 상황 파악
  • 최종적으로 다운로드 전 항상 결과물을 미리 확인하도록 구성해 해결 및 관련 VOC 다시 리포트되지 않음
• 주요 성과
  • TTS 중심에서 영상 편집 가치까지 확장해 서비스 수익 창출 경로 다각화
  • 2021/Q4 대비 유저 체류 시간 10.5% 증가

피앤피시큐어

DB 보안 솔루션 - WAS 보안 솔루션 연구/개발 (2020.10 - 2021.06, 8개월)

다운로드 파일 전송 모듈 개발 (2021/Q2)

Java SE 1.4, Javassist, VisualVM, Apache JMeter

• WAS HTTP 요청 인터셉트 모듈 설계
  • Javassist 활용해 WAS 런타임 상에서 바이트코드 조작하는 형태로 구현
  • HTTP 요청을 인터셉트해 다운로드 관련 데이터 추출 및 외부 분석 프로세스로 전달
• 주요 성과
  • 클라이언트 WAS에 플러그인 형태로 구현되어야 한다는 요구사항을 충족
  • 기존 시스템 변경 없이 도입할 수 있어 비용 절감

APM 로그 데이터 전달 모듈 개발 (2021/Q1)

OpenJDK 15, Spring Boot, WebFlux

• 외부 APM 솔루션 로그 데이터를 사내 로깅 시스템으로 전달하는 모듈 개발
  • 멀티스레딩 기반 API 요청-파싱-전달 수행 파이프라인 구축해 효율적인 데이터 처리 구현
  • 큐 기반 아키텍처로 병목 현상 방지
• 주요 성과
  • 비동기 처리 방식으로 시스템 부하 최소화
  • 로그 데이터 통합으로 모니터링 효율성 향상 및 사내 솔루션으로 신규 유저 인입

솔루션 리팩터링 방안 설계 및 프로토타입 구현 (2020/Q4)

Java SE 1.4, Javassist, VisualVM, Apache JMeter

• 기존 솔루션 한계 분석
  • WAS 런타임 상에서 로그 수집/분석 작업을 처리하는 한계점 파악
  • 클라이언트 WAS 성능 저하 및 개발 시 리소스 제약 문제 도출
• 개선된 아키텍처 설계
  • WAS 런타임 데이터 수집 모듈 최소화 방안 제시
  • IPC 기반 외부 프로세스 통신 구조 설계
• 프로토타입 개발 & 검증
  • VisualVM 및 Apache JMeter 활용한 성능 테스트 수행
  • 개선 효과 수치화로 리팩터링 당위성 입증
  • 관련 내용 APM 로그 데이터 모듈 개발에 반영

–

개인 프로젝트

Yuki-no

GitHub Actions, TypeScript, GitHub API(Octokit)

GitHub

• 문서 번역 프로젝트 관리용 GitHub Action 개발
  • 리포지토리 간 커밋 변경사항을 추적해 GitHub Issues 자동 생성
  • Lifecycle Hooks 기반 플러그인 인터페이스를 통해 plugin-sdk와 release-tracking 및 batch-pr 플러그인 제공 중
  • 모노리포 구조 확장 가능한 패키지 아키텍처 설계
  • 오픈소스 기여 가이드 및 e2e 테스트 구성
• 기존 오픈소스 대안 제시
  • 오류 복구 매커니즘, Glob 패턴 기반 파일 필터링, GitHub API 스로틀링 등 기존 Ryu-Cho 한계 극복
  • 플러그인을 통해 번역 생산성 향상을 위한 다양한 확장 기능 제공
  • Vite 한국어 번역 프로젝트, Vue 한국어 번역 프로젝트, Vite 문서 번역 템플릿 등 여러 오픈소스 프로젝트에서 사용 중

블로그: GitHub으로 기술 문서 번역 프로젝트 시작하기 w/ Yuki-no

text-vide

TypeScript, pnpm Workspaces, Turborepo, Vite, Vitest

GitHub | NPM | 온라인 데모

• 단어 일부를 하이라이트해 가독성을 향상하는 Bionic Reading 기술에 대한 오픈소스 JavaScript 구현체 개발
  • 매달 약 23k 다운로드와 90개 이상 프로젝트에서 사용 중
  • CJS, ESM, IIFE 세 가지 포맷 지원 및 GitHub Actions 자동 배포 CI/CD 파이프라인 구성
  • 유저 편의성을 위한 온라인 데모 제공
• 모노리포 아키텍처 경험
  • 사내 모노리포 도입 전 기술 적응을 위한 개인 프로젝트
  • pnpm Workspaces와 Turborepo 기반 구성
  • 경험을 바탕으로 사내 프로젝트에서 모노리포 아키텍처 빠르게 적용

블로그: Text-Vide; Bionic Reading 오픈소스 구현체

Vite 한국어 번역

VitePress, GitHub Actions

GitHub | Vite 한국어 공식 문서

• Vite 공식 문서 한국어 번역 주도
  • Vite 프로젝트 초창기부터 한국어 번역 메인테이너로 활동
  • 번역, 홍보, 유지보수 지속적 기여
  • 한국 커뮤니티에 최신 Vite 정보 전달
• 체계적인 원본 문서 동기화 시스템 구축
  • 동기화 전용 브랜치를 이용해 변경사항에 대한 GitHub Issues를 자동으로 생성하는 스크립트 작성
  • 원본 리포지토리 종속성 없는 유연한 번역 프로젝트 구조 확립 가능
• 오픈소스 툴 개발
  • 동기화 시스템 구축 경험을 바탕으로 오픈소스 동기화 툴 yuki-no 개발

낸내; 한글 폰트 모음 사이트

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 프로토콜 구현"을 통해 수상했습니다.

–