관리자 편집 UI의 성능을 개선하는 6년 차 프론트엔드 엔지니어
안정적이고 빠른 사용자 경험을 구축합니다.
안녕하세요, 조세훈입니다. 관리자 화면에서 입력이 느려지고 흐름이 끊기는 지점을 찾아, 측정 결과를 바탕으로 UI 구조를 다시 설계해 온 6년 차 엔지니어입니다.
편집 UI 최적화
Sehoon Cho
Frontend Engineer & Performance Optimizer
StackNext.js / TS / Web Worker
FocusVirtualization & Rendering Speed
Motto"사용자가 기다리는 시간을 줄이는 프론트엔드를 만듭니다."
Open to Opportunities
기술 스택.
지속적인 학습과 성능 모니터링을 바탕으로 검증된 조합을 사용하여 프로젝트를 성공시킵니다.
프론트엔드 코어 (Frontend Core)
다양한 대고객 웹 및 앱 제품의 견고한 프론트엔드 아키텍처 설계를 리드합니다.
TypeScriptJavaScriptReactNext.js (App/Pages)React Native (CLI)Tailwind CSS
상태 및 데이터 관리 (State & Data)
일관된 단방향 상태 제어와 데이터 동기화 비용을 최소화하는 Offline-First 로컬 데이터 시스템을 최적화합니다.
ZustandReact QueryReduxMobXSQLiteFirebase (Firestore)
성능 최적화 및 UI (Performance & UI)
가상 테이블 기법(Virtualization) 및 브라우저 백그라운드 멀티스레드 연산을 통한 렌더링 병목 해소를 지향합니다.
React VirtuosoChrome PerformanceWeb WorkerSheetJS (Excel)ZIP CompressionMUI / Ant Design
경력 사항.
기술을 통해 비즈니스 문제를 해결하고, 실제 수치로 개선 결과를 검증해 온 성장 여정입니다.
2021.05 ~ 현재
(주)델피콤 (Delphicom)
프론트엔드 엔지니어 대리 (Frontend Engineer)
B2B 050 가상번호 통신 플랫폼(BizCall) 관리자 웹, 결제 솔루션(Payking), 운영 시스템 개발 및 리팩토링을 담당했습니다.
주요 업무 및 성과
- 엑셀 생성 책임을 클라이언트로 분산하고 API 병렬 요청, Web Worker 및 분할 ZIP 구조를 적용하여 최대 약 80만 건까지 처리 범위를 확장하고, 20.5만 건 기준 1차 개선 구조 대비 처리 시간을 약 151초에서 91초로 약 40% 단축
- Chrome Performance 프로파일링과 가상화를 적용해 3,000건 스크롤 시 발생하는 Long Task를 19건에서 1건으로 감소시켰으며, 초기 UI 렌더링 시간을 4.9초에서 0.14초로 97% 단축하고 DOM Node를 기존 54,458개 대비 2,306~5,103개 수준으로 감소
- 불필요한 관리자 화면 상태를 줄이기 위해 기획 조직과 조율해 입력 단계를 3단계에서 2단계로 단축하고, JSON 기반 선언적 폼 구조로 개선해 주요 페이지 LOC 평균 약 20% 절감 및 24개 화면 일괄 대응
- Next.js 환경에서 RSC 분리와 이미지 용량 최적화(약 85% 축소) 및 레이아웃 시프트(CLS 0.679 → 0.065)를 개선하여 Lighthouse 성능(73 → 95) 및 SEO(91 → 100) 지표 달성 및 Search Console 클릭수 14% 증가
프로젝트.
관리자 편집 UI, 결제 플로우, 브라우저 연산 처리처럼 실제 사용 흐름의 병목을 개선한 작업들입니다.
B2B Enterprise Admin Suite
Mozzle - 회원명부 편집 UI 성능 리팩토링
- 관리자 편집 UI 렌더링 병목 개선: 회원명부에서 다수 Row를 조회·수정할 때 발생하는 렌더링 지연 문제와 비대해진 컴포넌트 구조 개선
- 가상화 기반 렌더링 성능 최적화: Chrome Performance로 병목을 분석하고 React Virtuoso 기반 가상화를 적용해 3,000건 스크롤 시 발생하는 Long Task를 19건에서 1건으로 감소시켰습니다. 이를 통해 초기 UI 렌더링을 4.9초에서 0.14초, DOM Node를 54,458개에서 2,306~5,103개, 텍스트 입력 지연을 1,330ms에서 29ms로 단축했습니다.
ReactCRA (Webpack)React VirtuosoChrome Performance
B2B Telecom Back-Office
050 BizCall 관리자 웹 - 대용량 엑셀 다운로드 개선
- 대용량 엑셀 다운로드 구조 개선: 엑셀 생성 책임을 서버에서 클라이언트로 분산하고 API 병렬 요청, Web Worker 및 ZIP 분할 압축을 적용하여 최대 약 80만 건까지 처리 범위 확장. 20.5만 건 기준 1차 개선 구조 대비 처리 시간을 약 151초에서 91초로 약 40% 단축
- 랜딩페이지 SEO 및 성능 최적화: Next.js 환경에서 RSC 분리와 이미지 용량 최적화(약 85% 축소) 및 레이아웃 시프트(CLS 0.679 → 0.065)를 개선하여 Lighthouse 성능(73 → 95) 및 SEO(91 → 100) 지표 달성. Search Console 한 달 비교 기준 노출수 53%, 클릭수 14% 증가
ReactSheetJSWeb WorkerZIP Compression
Fintech Platform
Payking - PG 결제 링크 서비스 및 통합 관리자
- 관리자 입력 흐름 3단계 → 2단계 단순화 제안: 불필요한 화면 상태를 줄이기 위해 기획 조직과 조율하여 입력 단계를 단축하고, JSON 기반 선언적 폼 구조로 개선하여 주요 페이지의 코드(LOC)를 약 20% 절감
- 공통 Form 구조를 통한 확장성 확보: 공통 상태 흐름을 부모가 소유하도록 설계해 개별 화면 수정 범위를 최소화했으며, 공통 요구사항(Enter Submit 등)을 기존 24개 사용 화면에 일괄 대응
ReactNext.js (SSR)React NativeTailwind CSS
Personal AI Mobile App
PandyTalk - AI 비서 오프라인 퍼스트 채팅 앱
- 오프라인 퍼스트(Offline-First) 동기화 아키텍처: SQLite를 기본 조회 경로(Source of Truth)로 사용하여 네트워크 영향을 최소화. 누적 메시지 구독 비용을 줄이기 위해 실시간 구독을 최신 20건으로 제한하고, 메시지 순번(SEQ) 기반 '데이터 간극 탐지(Data Gap Detection)' 로직으로 부족한 데이터만 보충하는 동기화 흐름 구현
- 실시간 AI 스트리밍 구현: HTTP SSE 엔드포인트를 연동하여 AI 답변을 실시간으로 표시하고, 최종 응답 시에만 원격 DB에 저장하도록 구성해 Write 비용 절감
React Native (CLI)TypeScriptSQLiteFirebaseOpenAI
연락처.
새로운 제안이나 가벼운 커피챗 모두 환영합니다. 언제든 편하게 연락해 주세요.
© 2026 조세훈. Designed and Coded with Natural Warm Theme. All rights reserved.