민대인
Frontend Developer
Learn once, write anywhere.
하나의 기술을 배워 여러 환경에 녹여내는 데에서 개발자로서의 가치를 찾습니다. 안드로이드 개발자로 커리어를 시작하며 모바일 앱 내 웹앱 연동과 사용자 경험 설계를 경험했고, 이후 프론트엔드로 전향하여 React와 Next.js를 중심으로 기업용 SaaS 그룹웨어의 프론트엔드를 설계·개발·운영해 왔습니다.
재사용 가능한 컴포넌트와 라이브러리 설계
팀 전체가 일관되게 사용할 수 있는 공통 UI 컴포넌트를 설계하고, 모노레포 구조에서 공유 패키지로 관리해 왔습니다. Radix UI 기반 Headless 컴포넌트 위에 Select, Dialog, DateField 등을 구현하고, Turbo Code Generator로 Storybook stories 파일을 자동 생성하여 컴포넌트 개발 생산성을 높였습니다.
FSD를 통한 비즈니스 로직과 프레젠테이션의 분리
로직이 UI를 침범하지 않도록, 상태 관리 도구(Jotai, TanStack Query 등)와 커스텀 훅을 활용해 핵심 로직을 명확하게 분리합니다. 앱 개발 시 ViewModel을 분리하던 경험에서 출발했고, 현재는 웹에서도 동일한 철학으로 적용하고 있습니다.
SSR과 멀티 플랫폼 서비스 개발
Next.js App Router 기반 SSR 환경에서 서비스를 개발·운영하며, 웹뿐 아니라 Electron PC 메신저, 모바일 앱 내 WebView/WebBridge 연동까지 다양한 플랫폼에서 일관된 사용자 경험을 제공해 왔습니다.
어드민 및 운영 시스템 구축 경험
5개 카테고리, 80개 이상의 관리자 설정 페이지를 다이얼로그 기반 SPA로 설계·구현하고, RBAC 권한 관리 시스템과 관리자 로그 다운로드 기능을 개발했습니다. AI 코드리뷰 관리 대시보드에서는 레포지토리 등록, 리뷰 이력 조회, 통계 리포트 기능을 구현했습니다.
운영 효율성과 서비스 안정성 개선
Sentry 에러 모니터링 시스템을 선택적 로깅 방식으로 재설계하여, 노이즈를 제거하고 실제 서비스 장애만 수집하는 구조를 구축했습니다. 사용자/회사 컨텍스트 자동 주입으로 고객사별 에러를 즉시 추적할 수 있게 했습니다.
자동화 도구 개발을 통한 생산성 극대화
AI 코드리뷰 자동화 시스템을 직접 설계·구축하여 리뷰 응답 시간을 99% 단축하고, 관리 대시보드까지 개발하여 비개발자도 운영할 수 있도록 했습니다. 반복 작업을 발견하면 도구나 라이브러리를 만들어 해결하는 것을 즐깁니다.
Work Experience
다우기술
다우오피스 통합 프론트엔드 시스템 개발 및 운영
기업용 그룹웨어 SaaS 플랫폼인 다우오피스의 차세대 통합 프론트엔드를 설계·개발했습니다. 80개 이상의 어드민 설정 페이지, RBAC 권한 관리, 대시보드 가젯 시스템 등 사용자와 운영자 모두를 위한 시스템을 구축하고, Backbone.js 레거시를 Next.js + TypeScript로 점진적으로 전환했습니다.
My Task
- 모노레포 아키텍처 구축 참여: 코드 재사용성과 빌드 성능 향상을 위해 pnpm Workspace와 Turborepo 기반 모노레포 아키텍처 구축에 참여했습니다.
- 서비스 앱 및 공유 패키지 관리: 4개의 서비스 앱과 7개의 공유 패키지를 통합 관리했습니다.
- 대시보드 가젯 독립 패키지화: 40개 이상의 대시보드 가젯을 독립 패키지로 분리하여 개발·배포의 유연성을 확보했습니다.
- 통합설정(GlobalConfig) 시스템 설계 및 구현: 다이얼로그 기반 SPA 형태로 5개 카테고리, 80개 이상의 설정 페이지를 구축. 기본관리, 보안관리, 앱별 관리, 데이터 관리, 멀티컴퍼니 관리 등 전체 관리자 설정 통합.
- 관리자 권한 관리(RBAC) 시스템: 최고관리자/보안관리자/앱별 관리자 목록 CRUD API 연동, 권한 설정 정렬, 관리자 로그 다운로드(사유 항목 포함), AdminTable 공통 컴포넌트화.
- 근태/연차 촉진 설정 구현: 부분 연차 촉진, 그룹별 설정, 휴일대체 등 기업별 정책을 유연하게 설정할 수 있는 UI 및 API 연동.
- 공통 UI 컴포넌트 개발: Radix UI 기반 Headless 컴포넌트 위에 Select, Checkbox, Button, Dialog, Divider, ProgressBar, DateField, AddressField 등 구현. Turbo Code Generator로 mdx/stories 파일 자동 생성.
- 다국어(i18n) 체계 구축: i18next 기반으로 한/영/일/중간체/중번체/베트남어 6개 언어 리소스 관리, 서버 사이드 로케일 쿠키 연동.
- 인증 시스템: 로그인 로직 구성, 간편 비밀번호 컴포넌트 및 Provider 구현, TanStack Query와 GraphQL 활용 사용자 정보 fetch.
- ErrorBoundary 도입 및 에러 메시지 토스트 노출 로직 구현, Sentry 에러 트래킹 연동.
대시보드 가젯 및 네비게이션 개발
사용자가 직접 배치하고 설정할 수 있는 대시보드 가젯(캘린더, 차트, Todo 등)을 개발하고, GNB·SNB·서비스맵 등 플랫폼 네비게이션을 구현하여 사용자 업무 효율을 높였습니다.
My Task
- 캘린더 가젯: API 연동, 선택일 일정 리스트, 이벤트 클릭 시 해당 일정 이동, 타임존 대응.
- Todo+ 가젯: 카드형/리스트형 보기 설정, Config 기능, 에러 처리.
- WorksChart 가젯: ECharts 기반 차트 렌더링, 옵션 설정 UI, 레거시(3.0) 차트 로직 마이그레이션.
- 가젯 공통: Gadget Config Drag & Drop(Pragmatic DnD), Storybook 연동, 가젯 빌드 자동화.
- GNB: 경영업무포탈/임직원포탈 공통 GNB 구현, 더보기 팝업, z-index 관리. Jotai atomWithStorage로 최근 사용 목록 저장, Fuse.js 검색.
- 오거나이저: 아이템 추가/수정 API 연동, 링크 추가(Enter 키 이벤트), 노출/비노출 토글.
- 서비스맵: 앱 상태별 분기 로직, API 연동, 다국어 처리.
- SNB: 최근 본 메뉴, 즐겨찾기 기능(TanStack Query useMutation), PC 메신저 다운로드 버튼.
- 퀵메뉴: CloseButton 컴포넌트 분리, 탭 기능 구현, 스크롤 버튼.
프론트엔드 개발 환경 개선 및 배포 자동화
Nginx 캐싱 전략, 리소스 버저닝 자동화, 모노레포 빌드 최적화를 통해 개발·배포 환경을 지속적으로 개선했습니다. v4.0.0 ~ v4.2.2까지 10회 이상의 릴리스를 안정적으로 배포했습니다.
My Task
- Nginx Cache-Control 헤더 최적화 및 client_header_buffer 튜닝으로 브라우저 캐싱 전략 수립 (캐싱 시간 5분 단축).
- CSS/JS 리소스 revision 버저닝 시스템 구축으로 배포 시 캐시 무효화 자동화.
- Nginx 로그 포맷 재설계 및 정적 리소스 서빙 최적화.
- Turborepo 빌드 파이프라인 관리 및 모노레포 빌드 최적화.
Sentry 에러 모니터링 시스템 설계 및 활성화
장비 스펙 문제로 비활성화되어 있던 프론트엔드 에러 모니터링을 선택적 로깅 방식으로 재설계하여 재활성화했습니다. 불필요한 노이즈를 제거하고 실제 서비스 장애만 수집하도록 구성하여, 운영 중 발생하는 에러의 근본 원인을 빠르게 파악하고 고객사별로 추적할 수 있는 체계를 구축했습니다.
My Task
- beforeSend 기반 선택적 로깅 설계: 화이트 페이지(렌더 실패), Unhandled Promise Rejection, 5xx API 에러, fatal/critical level 에러만 수집하고, 네트워크 일시적 실패·브라우저 확장 프로그램·ResizeObserver loop 등 노이즈를 필터링하는 전략 수립 및 구현.
- 사용자/회사 컨텍스트 자동 주입: 로그인 시 Sentry User(id, loginId)와 회사 Tag(company.name, siteUrl, domain)를 자동 설정하여, 에러 발생 시 어떤 고객사의 어떤 사용자에서 문제가 발생했는지 즉시 파악 가능하도록 구성. sendDefaultPii: false로 민감 정보 보호.
- 5xx API 에러 자동 리포팅: 공통 fetch 클라이언트(create-fetcher.ts)에 captureApiError 연동, Fingerprint(['api-error', status, url])로 동일 API 에러 자동 그룹화하여 프론트엔드-백엔드 크로스 모니터링 체계 구축.
- ErrorBoundary 렌더 에러 리포팅 강화: withScope로 componentStack 포함, level: fatal 태깅, Fingerprint(['render-crash', error.message])로 화이트 페이지 실시간 감지 및 그룹화.
- 공통 Sentry 설정 모듈화(SHARED_SENTRY_CONFIG): tracesSampleRate: 0(로그 폭주 방지), replaysOnErrorSampleRate: 1.0(에러 발생 시 세션 리플레이 100% 수집으로 재현 용이), allowUrls로 자사 도메인만 수집, denyUrls로 외부 스크립트 차단.
- 3개 앱(dop-chat-front, dop-employee-portal, dop-manage-portal)에 Client/Server/Edge 런타임별 Sentry 설정 분리 적용 및 환경별 DSN 관리.
AI 기반 PR 코드리뷰 자동화 시스템 구축
코드리뷰 병목을 해결하기 위해 AI 자동 코드리뷰 시스템을 주도적으로 설계·개발했습니다. 리뷰 응답 시간을 평균 4~8시간에서 1~2분으로 단축(~99%)하고, 관리 대시보드까지 구축하여 비개발자도 시스템을 운영할 수 있도록 하여 팀 전체의 생산성을 극대화했습니다.
My Task
- NestJS 기반 백엔드(pr-reviewer) 설계 및 구현: Webhook Controller → Webhook Service → Reviewer Service → Bitbucket Service 파이프라인 구성, Bitbucket PR Webhook(pr:opened, pr:modified, pr:comment:added) 수신 및 비동기 리뷰 처리.
- Claude Code CLI를 Primary AI 엔진으로 활용하고, Ollama(qwen2.5-coder)를 Fallback으로 구성하여 안정적인 이중화 AI 리뷰 체계 구축.
- RAG(Retrieval-Augmented Generation) 기반 리뷰 품질 개선: Supabase에 저장된 과거 리뷰에서 파일 경로 유사도 기반 상위 3개 리뷰를 컨텍스트로 주입하여, 프로젝트 컨벤션에 맞는 일관된 리뷰 제공.
- P1(심각)/P2(중요)/P3(경미) 심각도 분류 체계 도입으로 이슈 우선순위 자동 분류, PR 인라인 댓글 및 요약 테이블 자동 게시.
- React 19 + Vite 기반 관리 대시보드 개발: 레포지토리 등록/관리, 커스텀 프롬프트 편집, AI 프롬프트 자동 생성(프로젝트 구조 분석), 리뷰 이력 조회(P1/P2/P3 통계) 기능 구현. FSD 아키텍처 적용, driver.js 온보딩 가이드.
- Supabase PostgreSQL 기반 데이터 영속화: repos, prompts, reviews 테이블 설계로 레포별 커스텀 프롬프트 및 리뷰 이력 관리 체계 구축.
다우오피스 4.0 프론트엔드 운영 및 기술부채 청산
다우오피스 4.0 프론트엔드 v4.0.0 ~ v4.2.2 운영 기간 동안 1,484건의 버그를 주도적으로 수정하고, 웹·PC 메신저·모바일 앱 내 웹앱 등 다양한 플랫폼에서의 서비스 안정성을 확보했습니다.
My Task
- IE, Chrome, Safari 등 다양한 브라우저 환경에서의 호환성 이슈 분석 및 근본 원인 해결.
- 운영 중 발생하는 결함 건 주도적 해결 및 개선 (fix 1,484건).
- Electron 기반 PC 메신저 결함 건 해결 및 개선.
- 모바일 앱 내 WebView/WebBridge 연동 및 모바일 웹 브릿지 결함 건 해결.
- Backbone.js 레거시 콘텐츠를 단계적으로 React로 마이그레이션하며 기술부채 청산.
- Firebase 기반 Push 알림 연동.
다우기술
Enfax - 안드로이드 앱 유지보수
모바일 팩스 - Enfax, 안드로이드 앱 유지보수 및 리뷰 이벤트 팝업 노출 개발 건입니다.
My Task
- 불필요한 의존성 주입 제거 및 Retrofit Base Url 로직 개선.
- 앱 리뷰 이벤트 팝업 공지 노출 (useCase 생성).
- WebView 캐시모드 설정 통한, 이벤트 팝업 다이얼로그에 개발 완료 이전 페이지 보여지는 현상 해결.
삐약삐약 안드로이드 앱 운영 및 2차 개발
영양제 복용관리 및 추천 서비스, 삐약삐약 안드로이드 앱 운영 및 2차 개발. 모바일 앱 내 웹앱(WebBridge) 연동과 CI/CD 자동 배포를 구축했습니다.
My Task
- Mobile Web과 WebBridge 연결: 앱 내 웹앱 화면 연동 (판매링크, 건강기록 수정 다이얼로그 등).
- KMM(Kotlin Multiplatform Mobile)로 MVVM 아키텍쳐에 맞춰, Android, iOS 공통 비즈니스 로직 작성.
- TripleT와 Jenkins 활용, 출시노트 포함 구글플레이 각 트랙별 자동 배포 파이프라인 구축.
- 2차 개발 UI 및 기능 구현.
Projects
HW Monitor
2025.01 — 현재Serial, TCP, UDP, BLE 하드웨어 통신을 실시간으로 모니터링하고, LLM 채팅으로 통신 데이터를 분석할 수 있는 Electron 기반 데스크톱 애플리케이션입니다.
My Task
- Electron + React + TypeScript 기반 데스크톱 앱 설계 및 구현
- Serial, TCP (Client/Server), UDP, BLE 멀티 프로토콜 통신 지원
- LangChain 기반 멀티 LLM 연동 (Anthropic, OpenAI, Gemini, Groq, Ollama)
- RAG 기반 통신 데이터 AI 분석 기능 구현
- Supabase + Google OAuth 인증 및 클라우드 설정 동기화
- GitHub Actions CI/CD로 OS별 크로스 플랫폼 빌드 자동화
- electron-updater를 활용한 앱 자동 업데이트 기능
- i18n 다국어 지원 (한국어/영어)
사업자 등록번호 진위 여부 조회 MCP 서버
2024.07 — 2024.09Model Context Protocol (MCP) 서버를 개발하여 사업자등록번호 진위 확인 및 정보 조회 기능을 구현했습니다.
My Task
- MVC 패턴 기반 TypeScript 서버 아키텍처 설계 및 구현
- REST API와 MCP 도구 동시 제공 구조 설계
- 공공데이터포털 API 연동 및 사업자등록번호 검증 로직 구현
- Docker 컨테이너화 및 Smithery AI 배포 설정
- 사업자 정보 조회 및 진위 확인 기능 개발
- API 인증키 관리 및 보안 처리
- 에러 핸들링 및 로깅 시스템 구축
friendly-regex
2024.09 — 현재자주 사용하는 정규표현식을 npm 패키지로 배포해 편리하게 사용할 수 있도록 만든 개인 프로젝트입니다.
My Task
- 프로젝트 전개 및 패키지 매니저 npm 설정
- 정규 표현식 추가
- 패키지 배포 및 버전 관리
my-ticket-timer
2024.07 — 2024.09사용자가 직접 시계를 커스텀하며 티켓팅을 할 수 있도록 여러 애니메이션을 적용한 웹 앱입니다.
My Task
- 프로젝트 전개 및 FSD 아키텍쳐 기반으로 구조 설정
- framer-motion 통한 SearchBar, Timer 컴포넌트 애니메이션 구현
- useTimer 커스텀 훅 구현
- color picker 라이브러리 활용한 커스텀 기능
- Next.js API Routes로 CORS Error 방지
- Vercel 배포