Frontend Engineer · 8년+

정민우

Frontend Engineer

화면 너머의 시스템을 설계하며, 제품의 시작부터 운영 안정성까지 책임지는 8년 차 프론트엔드 엔지니어입니다.

Technical Focus · Leadership & Team Growth · AI-Augmented Productivity

서울
Contact
  • juty9026@gmail.com
  • 010-6428-9026
  • @juty9026
  • dev-minu.space

Featured Achievements

WebView 내비게이션 표준화 및 사용자 경험(UX) 안정화 architecture diagram
Native UXWebView에서 네이티브 수준 스와이프 내비게이션 구현

상태 기반 렌더링 구조를 경로 기반으로 개편하여 네이티브 수준의 사용성을 확보했습니다.

ReactNext.jsTypeScriptZustandTanStack Query
아이디에스앤트러스트
장애 복구 전략 수립 및 시스템 런타임 최적화 architecture diagram
84.4%네트워크 오류 복구율 84.4%

보이지 않던 네트워크 오류를 관측하고, 자동 복구 체계를 구축하여 사용자 이탈을 최소화했습니다.

네트워크 일시 오류 발생 시 지수 백오프로 자동 재시도. 최종 실패 시 Sentry 캡쳐 후 Fallback UI로 사용자 흐름 유지.

ReactNext.jsTypeScriptZustandTanStack Query
아이디에스앤트러스트
타입 안정성 중심의 통합 플랫폼 아키텍처 설계 architecture diagram
8,000+런칭 첫날 동시 유입 사용자 수

비즈니스 로직을 공유하는 다수 앱의 복잡도를 Monorepo와 Type-safe한 통신 구조로 해결했습니다.

4개 앱이 단일 도메인 모델을 공유하면서 각각 독립 배포. 타입 정합성을 유지하며 대규모 유입을 안정적으로 처리.

Next.jsReactTypeScripttRPCPrisma
노리코리아 → 대교 (인수합병)

Core Skills

Frontend
React · Next.js · TypeScript · HTML · CSS · WebView · Tailwind CSS
Architecture
Monorepo · tRPC · Prisma · API Contract Design
State & Data
TanStack Query · Zustand · PostgreSQL
Ops & Tooling
Sentry · GitHub Actions · Docker · Vitest

Work Experience

아이디에스앤트러스트

프론트엔드 엔지니어 · 헬스케어 · 2025-08 – 현재

사용자향 서비스(WebView) 및 운영 도구 전반의 실행 안정성 개선 및 오류 복구 체계 표준화 주도

상태 기반 렌더링 구조를 경로 기반으로 개편하여 네이티브 수준의 사용성을 확보했습니다.

Problem

기존 시스템이 상태(State) 기반으로 설문 흐름을 제어하여 브라우저의 경로(Route) 기록이 남지 않음. 이로 인해 iOS 스와이프 제스처 등 기본적인 내비게이션이 동작하지 않고, bfcache 미작동률이 89% 에 달해 뒤로 가기 시 렌더 트리 재구성으로 인한 사용자 경험 저하.

Action

  • 상태 기반 흐름을 URL 경로(Route) 기반으로 전면 개편하여 브라우저 고유의 내비게이션 메커니즘 복원
  • Safe area 대응 가이드라인을 수립하여 시각적 단절감 해소
  • 렌더링 구조 단순화 및 브라우저 생명주기(Lifecycle) 최적화를 통해 bfcache 이탈 원인 제거

Impact

  • iOS/Android WebView 환경에서 네이티브 앱 수준의 스와이프 내비게이션 구현
  • 사전 설문 등 핵심 사용자 플로우에서 발생하던 흐름 단절 현상을 획기적으로 개선

보이지 않던 네트워크 오류를 관측하고, 자동 복구 체계를 구축하여 사용자 이탈을 최소화했습니다.

Problem

서버 인프라 계층의 불안정성으로 인해 발생하는 502 Bad Gateway 및 일시적 네트워크 오류 발생 시, 사용자가 수동으로 새로고침하거나 앱을 재시작해야 하는 불편함 존재. 또한, 모든 API 요청 전 수행되는 별도의 토큰 검증 요청이 불필요한 네트워크 오버헤드와 지연 시간 유발.

Action

  • Sentry를 활용한 실시간 오류 관측 체계를 구축하고, 네트워크 오류를 정의하여 관리 대상으로 편입
  • API 요청 실패 시 지수 백오프(Exponential Backoff) 기반의 재시도 전략을 도입하여 자동 복구 로직 구현
  • 인증 방식을 서버 호출 대신 로컬 서명 검증 구조로 개선하여 인증 전처리 오버헤드 제거

Impact

  • Sentry 기준, 사용자 앱 84.4%, 운영 도구 81.7% 의 네트워크 오류 복구율 달성
  • 최종 에러 발생 건수 및 관련 장애 문의 수 대폭 감소
  • 불필요한 인증 요청 제거를 통한 전반적인 API 응답 속도 및 서비스 반응성 향상

기획, 디자인, 코드베이스 간의 파편화된 정책을 진단하고 단일 진실 공급원(SSoT)을 재정립했습니다.

Problem

기민한 비즈니스 대응과 빠른 기능 출시 사이클 속에서 기획, 디자인, 실제 코드 간의 구현 불일치 및 스펙 누락이 발생하여 QA 및 커뮤니케이션 비용 증가

Action

  • Claude Code/Codex와 Notion/Figma MCP를 연동한 교차 검증 워크플로우를 설계하여, 3개 도메인의 문서를 스캐닝하고 정책 불일치 사항을 추출

Impact

  • 발견된 누락 사항을 4가지 액션 아이템(문서 보강/구현 수정/기준 결정/재점검)으로 자동 분류하여 노션 DB화 완료
  • 이를 바탕으로 PO 및 디자이너와 협업하여 조직 내 SSoT 정립 중

노리코리아 → 대교 (인수합병)

풀스택 테크 리드 · 에듀테크 · 2024-02 – 2025-08

약 15명 규모 제품팀의 기술 표준 수립 및 통합 아키텍처 설계 주도, 개발 스크럼 운영 및 온보딩 프로세스 정립

비즈니스 로직을 공유하는 다수 앱의 복잡도를 Monorepo와 Type-safe한 통신 구조로 해결했습니다.

Problem

학습, 운영(LMS), 관리(CMS), API 서버 등 4개 앱이 동일한 도메인 모델을 공유하는 환경에서, 개별 앱의 코드 변경이 전체 시스템의 데이터 불일치나 런타임 에러로 이어질 리스크가 큼. 화면 단위의 최적화보다 서비스 전반의 정합성을 보장하는 공통 구조 설계가 시급함.

Action

  • Monorepo 및 공용 패키지(Shared Package) 구조를 도입하고, tRPC와 Prisma를 연동하여 프론트엔드와 백엔드 간의 단일 도메인 모델(Single Source of Truth) 구축
  • API 서버의 계층화(Route/Controller/Service)를 통해 비즈니스 로직을 분리하고, 내부 tRPC 통신과 외부 REST API 경계를 명확히 구분하는 인터페이스 설계
  • 드래그 앤 드롭, 인터랙티브 오디오 처리 등 복잡한 도메인 핵심 기능을 모듈화하여 여러 서비스 간 동작 기준 통일

Impact

  • 앱 간 타입/로직 불일치로 인한 실수를 원천 차단하고, 중복 코드 제거를 통해 개발 생산성 대폭 향상
  • 출시 첫날 8,000명 이상의 대규모 유입 상황에서도 인프라 및 로직 안정성을 유지하며 성공적인 런칭 기여

반복되는 피드백을 줄이는 개발 표준을 정립하고, 대량 데이터 처리 화면의 사용성을 개선했습니다.

Problem

잦은 인원 변동으로 인해 온보딩 비용이 증가하고 코드 리뷰의 편차가 커지는 상황 발생. 특히 관리 도구(CMS)의 대량 입력 화면에서 상태 관리 비효율로 인한 심각한 렌더링 지연이 발생하여 운영 효율 저하.

Action

  • 신규 입사자 6명을 대상으로 온보딩 프로세스 및 개발 가이드라인을 구축하여 팀 내 기술 부채 전파 방지
  • 개발 스크럼을 주도하며 태스크 분해, 주도적인 코드 리뷰 문화를 정착시킴으로 팀 자율성을 확보하여 일정 수준 이상의 코드 품질이 유지되는 환경 조성
  • 입력이 많은 복잡한 폼(Form)의 상태 구조를 원자 단위로 재설계하여 불필요한 리렌더링을 최소화하는 최적화 수행

Impact

  • 반복적인 코드 리뷰 피드백을 줄여 팀 전체의 커뮤니케이션 비용 절감 및 개발 속도 가속화
  • 관리 도구 내 대량 입력 화면의 체감 성능을 개선하여 내부 운영팀의 작업 효율성 증대

메디히어

풀스택 엔지니어 · 원격 진료 · 2022-04 – 2024-01

프론트엔드 아키텍처 주도 및 외부 서비스 연동 계층 설계, 서버/클라이언트 통합 인증 및 예외 처리 구조 수립

서드파티 서비스의 장애가 핵심 진료 흐름을 방해하지 않도록 견고한 연동 계층을 구축했습니다.

Problem

원격 진료 특성상 결제(Stripe), 채팅(Sendbird), 인증(Cognito) 등 다수의 외부 관리형 서비스에 대한 의존도가 높음. 특정 서비스의 지연이나 장애가 진료 예약 및 수행이라는 핵심 비즈니스 로직으로 전파되어 서비스 전체의 가용성을 떨어뜨리는 리스크 존재.

Action

  • 외부 SDK 및 API 연동부를 별도의 Service/Provider 계층으로 추상화하여 비즈니스 로직과의 결합도를 낮춤
  • 각 연동 경계별로 Fallback 전략 및 격리 구조(Isolation)를 설계하여, 특정 서비스 장애 시에도 대체 경로를 통해 진료 흐름이 유지되도록 구현
  • AWS Lambda와 Nest.js 기반의 서버리스 아키텍처를 바탕으로, 비동기 작업과 실시간 통신의 정합성을 보장하는 예외 처리 기준 확립

Impact

  • 외부 서비스 장애 시 발생할 수 있는 시스템 전체 마비 리스크를 차단하고 서비스 연속성 확보
  • Sentry 이슈 분류 및 우선순위 체계를 정교화하여, 장애 발생 시 원인 추적 및 대응 시간(MTTR) 단축

서버와 클라이언트 양측의 인증 상태를 일관되게 관리하는 구조를 설계하여 보안과 개발 효율을 동시에 잡았습니다.

Problem

Next.js 환경에서 서버 사이드 렌더링(SSR)과 클라이언트 사이드(CSR)의 인증 상태 및 권한 검증 로직이 파편화되어 유지보수가 어렵고 보안 취약점이 발생할 우려가 있음.

Action

  • AWS Cognito 인증 로직을 Next.js HOF(High-Order Functions) 기반의 SSR 미들웨어로 구조화하여 서버 단의 권한 제어 통합
  • API 응답 규격과 예외 처리 프로세스를 표준화하여, 서버와 클라이언트 어디서든 동일한 인터페이스로 에러에 대응할 수 있는 아키텍처 수립
  • 다국어(i18n) 지원을 제품 전반에 적용하기 위한 공통 모듈 설계 및 글로벌 서비스 확장 기반 마련

Impact

  • 인증 및 권한 관련 변경 사항 발생 시 영향 범위를 최소화하고, 중복 코드 제거를 통해 유지보수 비용 절감
  • 보안이 중요한 의료 데이터 환경에서 일관된 권한 검증 체계를 구축하여 시스템 신뢰도 향상

오픈잇

풀스택 엔지니어 · 커머스 / 엔터프라이즈 · 2017-11 – 2022-04

커머스 및 기업 혁신 플랫폼 신규 구축 주도, 레거시 시스템의 점진적 현대화 및 데이터 파이프라인 운영 표준화

폐쇄망과 보안 규정이 엄격한 엔터프라이즈 환경에서 지속 가능한 프론트엔드 구조를 설계했습니다.

Problem

고객사 표준 보안 규정 및 폐쇄망 인프라 등 강한 환경적 제약 속에서 확장성 있는 커머스 플랫폼을 신규 구축해야 함. 초기 개발 표준 부재로 인한 코드 품질 파편화 우려.

Action

  • React/TypeScript 기반의 커머스 프론트엔드 아키텍처를 설계하고, 엔터프라이즈 제약에 최적화된 빌드 및 배포 구조 수립
  • ESLint, Prettier, Husky를 초기에 도입하여 폐쇄망 내에서도 일관된 코드 스타일과 품질이 유지되도록 강제화
  • JPA와 QueryDSL을 활용한 백엔드 데이터 접근 계층 설계로 복잡한 커머스 도메인의 정합성 보장

Impact

  • 엄격한 제약 하에서도 리스크 없이 플랫폼을 안정적으로 구축하고, 팀 내 개발 표준을 정착시켜 협업 효율성 제고

Native-Web 간 비동기 통신 타이밍 이슈를 구조적으로 해결하여 사용자 경험의 불확실성을 제거했습니다.

Problem

모바일 WebView 환경에서 네이티브와 웹 간의 비동기 통신 시 발생하는 타이밍 이슈로 인해 정의되지 않은 값(undefined)이 참조되거나 데이터가 유실되는 문제 반복. iOS 하위 호환성 및 키보드 인터랙션 등 크로스 플랫폼 UX 대응 필요.

Action

  • Native-Web 브릿지 통신 프로토콜을 구조화하여 비동기 데이터 전달의 안정성과 예측 가능성 확보
  • 해시태그 처리, 이미지 가공 등 복잡한 비즈니스 로직을 공통 서비스 계층으로 분리하고 모듈화하여 유지보수성 향상
  • iOS/Android 각 OS별 WebView 특성을 고려한 스타일 가이드 수립 및 레이아웃 최적화 수행

Impact

  • 비동기 통신 관련 런타임 오류를 획기적으로 줄여 사내 혁신 서비스의 운영 안정성 확보
  • 공통 모듈 분리를 통해 신규 기능 추가 시 개발 공수 단축 및 코드 재사용성 극대화

대규모 재작성 없이 운영 중인 레거시 시스템을 점진적으로 개선하며 기술 부채를 관리했습니다.

Problem

대규모 엔터프라이즈 시스템의 특성상 중단 없는 운영이 필수적인 상황에서, 노후화된 스택과 기술 부채를 리스크 없이 현대화해야 하는 과제 직면.

Action

  • Java / Spring 기반 백엔드 구조를 해석하고, 기능 단위로 계층을 분리하며 점진적인 리팩터링 수행
  • Hive, Spark를 활용한 빅데이터 파이프라인의 운영 기준을 정비하고, 대용량 데이터 처리 프로세스의 안정성 점검
  • 코드 리뷰, 테스트 코드 작성, 배포 절차 등 소프트웨어 품질 기준선(Baseline) 을 정의하여 팀 전체의 엔지니어링 수준 상향 평준화 주도

Impact

  • 제약이 많은 환경에서 리스크를 통제하며 현대화와 운영 안정성을 병행하는 성공적인 사례 구축
  • 비즈니스 맥락과 운영 제약을 먼저 파악하고 해결책을 제시하는 작업 방식의 기반을 마련