FRONTEND ENGINEER / WRITER
yceffort.
만들고 운영하며 쌓아 온 경험을 기록합니다.
EXPERIENCE & CONTRIBUTIONS
서비스 개발부터 팀이 일하는 기반까지.
2014년부터 다양한 도메인의 소프트웨어를 만들고 운영해 왔습니다. 프론트엔드 팀을 이끌고, 여러 서비스가 함께 쓰는 라이브러리와 도구를 만들었습니다. 그 과정에서 얻은 경험을 책과 글, 오픈소스로 나눕니다.
프론트엔드 엔지니어, 재직 중
- 서비스 개발
- React, TypeScript, Next.js
- 운영과 성능
- Node.js, Kubernetes, 웹 성능
- 팀의 개발 기반
- 공통 라이브러리, CLI, 코드 리뷰
경력
Experience재직 중인 곳과 이전에 근무한 곳에서의 경험입니다.
카카오페이증권
2026.03 ~ 현재홈팀 Frontend Engineer
증권 홈 화면 개발과 성능 개선
- 카카오페이앱 증권홈, 카카오뱅크앱 주식홈 개발
- 웹소켓 라이브러리 작성
- 외부 SDK 재조립, 번들 정리, 렌더링 개선으로 홈의 FCP 44%, 내려받는 JS 38%, 초기 5초 CPU 30% 감소(모바일 랩 측정)
- 반드시 써야 하는 외부 SDK를 소스맵에서 복원해 로직은 그대로 두고 다시 조립, 이벤트 전송 엔트리 기준 72%(gzip) 감소
- framer-motion 배너의 프레임 드랍을 없애고, number-flow를 구형 브라우저로 이식한 뒤 애니메이션을 합성 스레드로 이동
React, TypeScript, Next.js, Turbopack
네이버 파이낸셜
2020.09 ~ 2026.03Frontend Engineer, 내자산&회원FE 리더 → 카드FE 리더/공통개발TF 리더
최대 14명 규모의 프론트엔드 팀을 이끌며 금융 서비스 개발과 프론트엔드 조직의 공통 기반 구축
- CRA 단일 서비스를 Koa와 Next.js 기반 20여 개 SSR 서비스로 분리하는 전환을 주도해, 장애가 서비스 단위로 격리되고 서비스마다 더 자주 배포할 수 있는 구조로 개선
- 20여 개 서비스가 함께 쓰는 공통 패키지(@mydata, @financial, @financial-auth, @pie) 개발을 이끌고 레지스트리 배포 체계 마련
- 번들 크기 최적화를 주도해 모든 페이지가 공유하는 _app 청크 345kB(51%), 110개 페이지 합계 1.17MB를 줄이고 초기 로딩 평균을 2.6초에서 1.4초로 단축
- NaverPayDev 오픈소스 공개 체계를 만들고 팀의 공통 패키지 공개와 운영을 주도
- lodash를 대체하는 유틸리티 라이브러리 hidash 개발
- 마이데이터, 회원 인증, 카드탭 등 모바일 금융 서비스 개발
- 상태 관리 라이브러리, 디자인 시스템, 프로젝트 생성 도구, Node.js CLI, 업무용 MCP 개발과 운영
- 팀의 코드 리뷰와 멘토링을 주도하고 인턴 채용 면접과 채용 과제, 실습 과제 출제 및 운영
React, TypeScript, Next.js, Node.js, Kubernetes, pnpm, Turborepo
공개 패키지 보기트리플
2019.05 ~ 2020.08Frontend Engineer
여행의 탐색부터 예약과 결제까지 이어지는 웹 서비스 개발
- 글로벌 도시 검색과 항공권 판매 서비스 개발과 운영
- 결제 서비스와 공통 컴포넌트를 JavaScript에서 TypeScript로 전환
- 판매자와 사용자 간 1:1 문의 채팅 서비스 개발
React, TypeScript, Next.js, Koa, Docker, Amazon ECS
카카오
2016.09 ~ 2019.05Software Engineer
카카오 같이가치의 프론트엔드와 서버 개발, 운영
- AngularJS 기반 레거시 애플리케이션을 Angular로 전환
- 관리자 도구를 개발하고 Ruby on Rails 기반 서버를 함께 운영
Angular, TypeScript, Ruby on Rails, MySQL, Redis
삼성SDS
2014.03 ~ 2016.06Software Engineer
글로벌 의료 솔루션 개발과 신기술 개념 검증
- 해외 병원용 EHR 솔루션과 간호 병동 서비스 개발
- iOS 비콘 기반 실내 내비게이션과 금융 고객사 블록체인 PoC 개발
- Python을 활용한 데이터 정합성과 유효성 검증
Delphi, Oracle DB, Spring, JavaScript, Python
저술과 번역
Publications- 단독 저자
프런트엔드 성능 최적화 Deep Dive
네트워크부터 브라우저와 프레임워크까지, 성능을 이해하는 원리
출판사에서 보기 - 공동 저자
npm Deep Dive
모듈 시스템, 패키지 관리와 JavaScript 생태계
출판사에서 보기 - 단독 저자
모던 리액트 Deep Dive
React의 동작 원리와 웹 애플리케이션 개발
출판사에서 보기 - 번역
리액트 인터뷰 가이드
질문과 답으로 살펴보는 React 개발 지식
출판사에서 보기
남은 판단은 누가 배우는가 AI 시대의 개발자, 판단과 학습에 관한 에세이(가제, 집필 중)
Node.js Deep Dive V8과 libuv부터 모듈 로더, 메모리, 네트워킹, 배포 환경까지 Node.js 내부 동작을 다루는 기술서(가제, 집필 중)
오픈소스
Open source- 개발 도구
@yceffort/coldpath
JavaScript 번들의 바이트를 소스맵과 V8 커버리지로 원본 파일까지 추적하는 Rust CLI입니다. 처음 실행되는 코드와 상호작용할 때만 실행되는 코드를 나누고, 번들 트리맵과 풀 리퀘스트 사이의 비교 보고서를 만듭니다. 분석은 Node.js나 브라우저 없이 오프라인으로 동작합니다.
- 포크와 확장
@yceffort/number-flow
barvian/number-flow를 포크해 구형 브라우저와 웹뷰에서도 숫자 애니메이션이 동작하도록 확장했습니다. 기존 API를 유지하면서 requestAnimationFrame 기반 폴백 엔진을 구현하고 실제 구형 브라우저로 검증했습니다.
- 웹뷰 디버깅
@yceffort/storage-inspector
웹뷰 안에서 localStorage와 sessionStorage를 조회하고 편집하는 Lit 웹 컴포넌트입니다. 키별 설명과 타입을 스키마로 정의하고, 값 검증과 편집을 지원하도록 만들었습니다.
- 개발 도구
@yceffort/rust-markdownlint
markdownlint-cli2 호환을 목표로 만든 Rust 기반 마크다운 린터입니다. 기존 도구와의 진단, 자동 수정 결과를 대조하고, 직접 운영하는 저장소에 적용했습니다.
- macOS 앱
yc.clipboard
텍스트, 이미지, 파일 등 클립보드 이력을 검색하고 다시 사용하는 macOS 메뉴 막대 앱입니다. 항목 고정과 미리보기, 이전 앱으로 붙여넣기를 지원합니다.
발표와 활동
Beyond work- 2024
DAN24 컨퍼런스 발표
웹 서비스 번들 사이즈 최적화를 주제로 발표했습니다.
- 2021.01 ~ 2021.12
SSAFY 멘토
삼성 청년 소프트웨어 아카데미에서 프로그래밍 질의응답과 칼럼 작성으로 청년 개발자들의 학습을 도왔습니다.
- 2018 ~ 현재
기술 블로그 yceffort.kr
블로그를 직접 개발하고 운영하며 프레임워크 내부 동작, 성능과 운영, 개발 도구, AI와 함께 일하는 경험을 기록합니다.
- 2016.03 ~ 현재
사단법인 점프 이사
Google Cloud Platform을 활용한 업무 자동화와 프로그래밍 교육에 참여하고 있습니다.
학력
Education- 2018.03 ~ 2020.02
한국과학기술원 (KAIST)
기술경영전문대학원 석사
Highest Honor, GPA 4.23 / 4.3
- 2007.03 ~ 2014.02
동국대학교
국제통상학 전공, 영어통번역학 복수전공 학사