이진욱
Frontend Developer
Contact
단순한 UI 구현을 넘어, 웹 브라우저의 한계 성능을 끌어내고 복잡한 실시간 동시성 문제를 해결하는 데 몰입하는 프론트엔드 엔지니어입니다. 그래픽 에디터와 같은 고난도 애플리케이션을 개발하며 네트워크, 렌더링, 아키텍처 전반에서 사용자 경험을 저해하는 병목을 집요하게 찾아 해결해 왔습니다.
1. 실시간 협업 시스템의 안정성 확보
여러 사용자가 동시에 디자인을 편집하는 환경에서 발생하는 데이터 정합성과 연결 불안정 문제를 해결한 경험이 있습니다.
- RSocket 재연결 전략 수립: 네트워크 단절 시 작업 내용이 유실되는 문제를 해결하기 위해, 단순 재연결이 아닌 ReliableRequest와 Operation 개념을 도입했습니다. Command(변경 요청)만을 선별적으로 재전송하고, 응답의 완결성을 추적하여 데이터 정합성을 보장했습니다.
- Thundering Herd 방지: 다수의 클라이언트가 동시 재연결 시 서버에 가해지는 부하를 분산시키기 위해 Exponential Backoff와 Jitter 알고리즘을 적용하여 시스템 안정성을 높였습니다.
- Reactive Stream 제어: RxJS를 도입하여 비동기로 발생하는 수많은 이벤트를 스트림으로 관리하고, 복잡한 썸네일 생성 로직 등을 선언적으로 간결하게 처리했습니다.
2. 브라우저 렌더링 성능의 극한 추구
React의 추상화 비용조차 병목이 되는 고성능 요구사항 환경에서, 브라우저 내부 동작 원리를 응용하여 극적인 성능 개선을 이뤄냈습니다.
- DOM 조작 최적화 (INP 83.8% 개선): 수십 개의 반복되는 요소를 렌더링할 때 React 마운트 비용이 병목임을 파악하고, cloneNode API를 활용해 DOM 자체를 복제하는 기법을 도입했습니다. 이를 통해 INP(Interaction to Next Paint)를 1832ms에서 296ms로 단축시키는(CPU 쓰로틀 환경) 성과를 거두었습니다.
- Main Thread 블로킹 해소: 대용량 오디오 파형 계산 시 UI가 프리징되는 현상을 해결하기 위해 Web Worker를 도입, 무거운 연산 작업을 백그라운드 스레드로 격리하여 끊김 없는 사용자 경험을 제공했습니다.
- 리렌더링 최소화: useSyncExternalStore와 Proxy API를 적극 활용하여, 전역 상태나 윈도우 리사이즈 이벤트 등 빈번한 상태 변화가 필요한 곳만 정밀하게 리렌더링되도록 아키텍처를 개선했습니다.
3. 유지보수 가능한 아키텍처 설계
복잡도가 높은 애플리케이션에서 기능 격리와 확장성을 고려한 설계를 지향합니다.
- GA 시스템 개선: 전역 변수로 관리되던 복잡한 로직을 React Context API 기반의 격리된 시스템으로 재설계하여, 사이드 이펙트와 리렌더링이 "0"인 구조를 만들었습니다.
- 확장 가능한 UI 구조: 기존 단일 패널 구조를 스택(Stack) 형태의 뷰로 개선, 또한 Proxy 기반 프로퍼티 사용여부 추적을 통한 동적 subscribe 시스템을 통해 사용자 UX를 개선함과 동시에 성능을 높였습니다.
Skills
TypeScriptReactNext.jsRxJS
Experience
Frontend Developer
2024.06 ~ 현재정규직 · Engine Chapter
2024.03 ~ 2024.06인턴
미리캔버스 엔진 및 웹 개발
Education
프로그래머스 프론트엔드 데브코스
2023년 하반기Academic
한양대학교
2018 입학컴퓨터소프트웨어학부재학중
