Frontend Developer · 4년차
KIM HYEONG SEOK
|
React ·TypeScript ·Next.js ·Node.js ·Playwright ·HLS.js ·Docker ·GitHub Actions ·Tailwind CSS ·React ·TypeScript ·Next.js ·Node.js ·Playwright ·HLS.js ·Docker ·GitHub Actions ·Tailwind CSS ·
+
Years Experience
2022년 7월부터 현재까지
+
Projects
사내 서비스 · 개인 프로젝트
Open Source
TanStack Query 외 2건
+
Tech Stack
지속적으로 확장 중
Skills
기술 스택
프론트엔드를 중심으로, 미디어·인프라·테스트 영역까지 역량을 넓혀가고 있습니다.
Core
ReactTypeScriptNext.jsJavaScript (ES6+)
Styling & UI
Tailwind CSSRadix UISass
Testing
Playwright (VRT)VitestJestRTL
DevOps & Infra
GitHub ActionsNginxDocker
Media
HLS.jsMSE (Media Source Extensions)
Tools
FigmaStorybookNexusWebpackViteHuskyESLintPrettierBiome
Career
경력
웹과 하이브리드 앱 환경에서 레거시 전환부터 신규 서비스 구축까지 다양한 프로젝트를 수행해왔습니다.
NHN
현재 재직 중Frontend Developer2023.11 ~ 현재
- 소스 코드 유실된 커스텀 hls.js를 빌드 역분석으로 복원, npm 패키지 전환 및 Nexus 버전 관리
- 프로젝트마다 빌드 파일 직접 복사하던 방식을 Nexus 기반 npm install로 표준화, 버전 파편화 제거
- HEVC 카메라 재생 불가 이슈 대응: hls.js v1.4.14 → v1.6.15 업그레이드 & 커스터마이징
- HLS 영상 3초 점프 버그 수정: HAR → TS PTS → Chrome MSE 레이어까지 추적, remuxer 3곳 패치로 해결
- 디자인 리소스 부재 상황에서 Figma를 활용해 UI/UX 초안을 직접 설계, 개발 병목 해소
- B2B 서비스 Next.js 마이그레이션 선행 작업으로, 전사 공통 UI 라이브러리 설계·구축
- 69개 컴포넌트 구현: 범용 36개(Radix UI) + B2B 특화 33개. Figma MCP + Claude Code로 디자인 토큰 추출 자동화
- Storybook 도입: UI 명칭 혼선 해소, 배포 없이 기획자 직접 동작 확인 가능
- Playwright VRT 도입: Docker 환경으로 OS 픽셀 차이 제거, CI 게이트 통합으로 시각적 회귀 자동 감지
- GitHub Actions label 기반 자동 버전 bump → Nexus 자동 배포
- GitHub Actions + NHN Cloud Deploy API로 배포 완전 자동화. alpha/beta/real 3환경 분리, Dooray 알림 연동 — 배포 소요시간 80% 단축
- Husky + ESLint/Prettier/Type Check pre-commit 적용, 불량 코드 유입 차단
- React.lazy Code Splitting + hls.js Lazy Loading으로 FCP/LCP 개선
- Nginx HTTP/2 + gzip_static으로 정적 리소스 전송 최적화
- 불용 코드·중복 로직 90,714줄 제거 (Gulp/AngularJS), 번들 사이즈 감소 및 유지보수성 향상
- jQuery → ES6+ 전환으로 의존성 제거. URL 구조를 query string 파싱으로 개편, 인코딩 오류·보안 위험 제거
- i18n 다국어 처리 및 SEO 대응: 일본 서비스 Nginx 라우팅/Webpack 빌드 커스텀
- Vue 2 기반 사내 컴포넌트 라이브러리 유지보수
잡코리아
Frontend Developer2022.07 ~ 2023.11
- 이력서 완료율 50% → 83%로 33%p 상승
- 기획/디자인 리뷰 단계에서 개발자 관점의 UX 개선안 적극 제안 및 반영
- Braze/GA 인스턴스 개발: 전사 공통 로그 수집 모듈 개발, 데이터 정합성 확보
- AppBridge 구조 개선: 앱-웹 통신 데이터 유실 문제를 레거시(.Net) 로직 분석으로 해결
- .Net 기반 레거시를 MSA 환경(Next.js, TypeScript)으로 전환, 모바일/PC/웹뷰 전반 UI·비즈니스 로직 전담
- 서비스 안정화: 신규 아키텍처 도입 초기 운영 이슈와 버그 신속 파악·해결
- 기존 페이지 성능 병목 구간 개선으로 로딩 속도 단축 및 사용자 점유율 향상
- React Query 직접 도입으로 불필요한 API 호출 제거, 서버 부하 감소 및 상태 관리 최적화
Side Project
사이드 프로젝트
개인 개발 블로그
sseoku.comNext.js 14, TypeScript로 직접 구축 및 운영하는 개인 블로그입니다. 학습한 내용과 트러블 슈팅 과정을 꾸준히 기록하고 있습니다.
Next.js 14TypeScriptGitHub ActionsHusky
GitHub Repository