정도영 FE 개발자 이력서

SSE 기반 실시간 알림 센터 및 긴급 대응 UX 구축 "장애 인지가 운영자의 화면 확인 시점에 의존하던 구조에서 벗어나, 서버가 이벤트를 능동적으로 전달하는 알림 채널 설계"

SSE 기반 실시간 알림 센터 구축: 장애·시스템 이벤트가 발생하면 토스트 팝업과 중요도별 사운드로 운영자에게 즉시 전달. 전체/미확인 탭, 앱별 필터, 개별·일괄 읽음 처리까지 갖춰 OS 수준의 알림 관리 경험 제공
끊김 없는 알림 흐름 보장: 연결이 불안정한 환경에서 자동 재연결과 이벤트 연속성을 처리하고, 연결 상태 UI를 함께 두어 운영자가 현재 수신 상태를 항상 인지하도록 설계
비동기 피드백 이원화: SSE 스낵바와 Mutation 생명주기 기반 토스트로 채널을 나누고, 서버 에러 메시지는 캐시 레이어에서 자동 주입해 문구를 완성. 포커스된 프레임에만 노출시켜 멀티태스킹 중에도 작업 맥락을 해치지 않도록 처리
알림에서 리소스 화면으로 직접 진입: TanStack Router Memory History API 기반 deeplink로 라우팅해, 기존 n+2회의 화면 이동을 1클릭으로 대체. 긴급상황 대응 시간 단축

Enterprise IAM & 통합 리소스 제어 시스템 구축 "자원마다 권한을 일일이 부여하면 관리가 불가능해지는 환경에서, 역할과 정책 단위로 권한을 정의하고 재사용하는 체계 구축"

역할 기반 권한 모델 설계: RBAC을 기준으로 리소스 × 액션 조합을 제어하는 권한 매트릭스 편집 UI를 구현하고, 반복되는 권한 규칙은 재사용 가능한 정책(Policy) 단위로 추상화해 역할 정의·수정 비용 절감
사용자·그룹 운영과 Shell 연동: 사용자 초대, 그룹 편성, 역할 할당을 단일 서비스 앱에서 처리. 부여된 권한은 데스크탑 Shell로 전달되어 10종 이상의 클라우드 자원 접근 제어에 즉시 반영

Micro Frontends 기반 데스크탑 Shell 시스템 아키텍처 "브라우저를 모킹한 멀티태스킹 워크스페이스에서 각 앱이 독립된 런타임으로 동작하는 환경 구축"

키보드 전용 접근성(A11y) 최적화: 가상 탭·데스크탑·브라우저 사이의 포커스 이동을 제어하는 오케스트레이션 시스템과 시각화 로직을 만들어, 마우스 없이 전체 조작이 가능한 환경 구현
MFE 기반 가상 브라우저 워크스페이스 구축: Module Federation으로 10개 이상의 마이크로 프론트엔드 앱이 각자의 가상 프레임에서 구동되도록 설계
프레임별 데이터 격리 아키텍처 설계: 단일 쿼리 프로바이더 아래에서도 가상 프레임끼리 데이터가 간섭하지 않도록 차단하고, 프레임마다 독립적인 런타임 상태를 유지하는 체계 마련
Remote 앱별로 파편화되던 에러·세션 처리를 공통 런타임으로 흡수: 자원에 부여된 권한과 서버 응답 상태(403, 404, 500 등)에 따라 로그아웃 처리와 접근 제한 UI를 가상 프레임 단위에서 일괄 제어. 각 Remote 앱은 에러 처리 코드 없이 비즈니스 로직에만 집중
AuthGuard 기반 접근 제어: 페이지와 Remote 앱 단위로 AuthGuard Provider를 감싸, 권한에 따라 접근 가능한 화면과 애플리케이션이 동적으로 결정되는 보안 레이어 설계
FSD & Fractal 구조를 도입해 마이크로 앱이 늘어나도 디렉토리 규칙이 흔들리지 않도록 정리

전사 공용 UI 컴포넌트 라이브러리 설계 및 고도화 "여러 Remote 앱이 각자 UI를 만들면서 생기는 일관성 저하와 중복 개발을 막기 위해, 30종 이상의 공용 컴포넌트를 선언적 인터페이스로 설계"

중첩 레이아웃을 위한 웹 접근성(A11y) 아키텍처 설계: inert 속성과 Focus Trap으로 전역 포커스 제어 시스템을 만들어, 오버레이가 뜰 때 포커스가 새는 문제를 차단하고 스크린 리더 호환성 확보
Compound Component Pattern을 도입해 Dropdown, Select처럼 구조가 복잡한 UI의 API를 선언적으로 정리.
Portal 아키텍처 설계: Modal, Dropdown, Context-Menu가 겹치는 환경에서 서로 간섭하지 않도록 렌더링 위치를 분리해 Overlay 시스템 안정화
Controlled/Uncontrolled 하이브리드 패턴을 적용해 React Hook Form 같은 외부 폼 라이브러리와도 그대로 맞물리는 인터페이스 제공
WAI-ARIA 표준을 준수하고 키보드 네비게이션을 구현해 웹 접근성 품질 확보
비(非)프론트엔드 직군의 직접 사용 지원: 사용 명세와 가이드를 제공해 10명 이상의 기획자·백엔드 개발자가 프론트엔드 도움 없이 화면을 구성. 프로덕트 개발 속도 개선

범용 Table 설계 및 복잡한 Step-Form의 선언적 추상화 "리소스 목록과 생성 마법사가 화면마다 반복되는 환경에서, 설정 기반 Table과 명령형 단계 제어로는 요구사항 변화에 대응하기 어려운 제약을 해소"

Table 리팩토링과 로우레벨 DOM 제어: 설정 기반 구조를 Render Prop 패턴으로 전환해 커스텀 셀 요구사항에 대응하고, 컬럼 너비 조절은 커스텀 훅으로 직접 다뤄 조작 중 발생하는 Reflow 비용 최소화
Advanced Generics를 통한 타입 안전성 확보: 테이블 데이터와 컬럼 정의가 복잡해져도 타입이 엄격하게 맞물리도록 설계하고, 자동 추론을 붙여 개발 단계에서 오류를 잡고 유지보수 부담을 줄임
Step-Form 아키텍처의 선언적 추상화: 흩어져 있던 명령형 단계 제어를 선언적 인터페이스로 감싸, 비즈니스 로직의 응집도를 높이고 단계 전환이 복잡해져도 확장할 수 있는 구조 마련

대규모 모노레포 전용 DX 및 품질 통제 시스템 구축 "Shell과 Remote 앱이 늘어나며 패키지 의존성이 복잡해지는 환경에서, 빌드 피드백 지연과 순환 참조를 사전에 통제"

빌드 타임 실시간 피드백 환경 구축: Rspack 기반 빌드 파이프라인을 설계하고 정적 분석 도구를 붙여, 10여 개 패키지 규모의 모노레포에서 풀 빌드 1분 이내를 유지하면서 개발 오류를 즉시 확인할 수 있는 루프 구현
의존성 안정성과 코드 품질 강제화: 순환 참조(Circular Dependency)를 린트 규칙으로 잡아내고 검사 과정을 자동화해, 구조가 무너지기 전에 차단되도록 구성
사내 기술 표준화: 사내 TanStack Query 사용 패턴을 규격화하고 문서로 정리해, 팀 전체가 같은 방식으로 데이터를 다루도록 정착

Global Game Token Economy & Cross-Chain DeFi 구축

DEX·유동성 공급 서비스 개발: 수십 종의 게임 토큰을 대상으로 스왑(Swap)과 유동성 풀(Pool) 공급 시스템의 프론트엔드 아키텍처 설계
환전·환율 변동 처리 로직 정비: 얽혀 있던 계산 코드를 관심사 분리(SoC) 기준으로 리팩토링하고 핵심 로직에 단위 테스트를 붙여, 금융 데이터 처리의 안정성 강화
크로스체인 브릿지(Bridge)와 자산 이동 제어: 서로 다른 블록체인 네트워크 사이의 자산 전송을 지원하고, 전송 전후 데이터 정합성 검증

테스트/자동화 기반 안정성 강화

Vitest와 MSW를 도입해 핵심 로직 테스트 커버리지 70% 이상을 확보하고, API 모킹으로 실제 시나리오까지 검증
Lefthook으로 Git 이벤트를 자동화해, 영향 범위에 있는 파일이 수정되면 테스트가 자동 실행되도록 구성
Node.js 기반 i18n 자동화 툴 개발: 흩어진 다국어 리소스의 키 추출·동기화·누락 검출을 자동화해 평균 6시간 이상 걸리던 수동 관리 프로세스를 제거하고, 번역 누락과 휴먼 에러 차단

DeFi 프론트엔드 성능 최적화 & UX 일관성 개선

Font Subset 추출과 Woff2 변환: 11개 폰트를 1개 Variable 파일로 통합해 총 용량 15,715 kB → 2,114 kB (86.5% 절감)
스켈레톤/플레이스홀더 도입으로 CLS 개선, LCP 11.4s → 2.1s로 단축
전역 에러 처리 표준화: ErrorBoundary와 TanStack Query를 연동해 에러가 노출되는 방식을 한 갈래로 정리

상태 관리 정교화 및 도메인 로직 리팩토링

데이터 가공 프로세스를 절차형에서 함수형으로 전환하고, SRP 기준으로 순수 함수를 분리해 테스트 가능한 구조 정립
토큰 교환비·가격 변동 계산 로직을 유틸로 모듈화해 재사용성을 높이고 검증 비용 절감
사이드 이펙트 생명주기 정리와 파생 상태 단일화: 얽혀 있던 부수 효과 의존성을 걷어내고 파생 값 계산을 한곳으로 모아, 불필요한 렌더링을 줄이고 상태를 예측 가능하게 개선
네트워크 리소스 최적화: API 폴링 주기와 캐싱 전략을 다시 수립해 불필요한 중복 호출 제거

디자인 시스템 아톰/헤드리스 컴포넌트 개발

Storybook 기반 공용 아톰 컴포넌트를 OCP 확장 구조와 Headless 설계로 구현해, 서비스마다 다른 스타일과 UX에도 대응 가능하도록 구성
이미지 컴포넌트(Lazy Loading)와 requestAnimationFrame 기반 카운터를 직접 구현해 외부 라이브러리를 걷어내고 패키지 용량 37kb 절감

정도영 FE 개발자 이력서

경력

프로젝트

사용기술

학력