민대인 (bamin0422).
Learn once, write anywhere. 디자인 시스템을 코드로 구현한다는 관점에서, 재사용 가능한 컴포넌트를 설계하고 모노레포 구조로 관리해 왔습니다. 안드로이드 개발 시기 배웠던 MVVM 아키텍처의 명확한 역할 분리와 모듈화 개념을, 웹에서는 Feature-Sliced Design으로 재해석하고 적용하고 있습니다. 로직이 UI를 침범하지 않도록, 상태 관리 도구 (Jotai, TanStack Query 등)와 커스텀 훅을 활용해 핵심 로직을 명확하게 분리합니다. 이 접근은 앱 개발 시 ViewModel을 분리하던 경험에서 출발했고, 현재는 웹에서도 동일한 철학으로 적용하고 있습니다. Lazy Loading, 코드 스플리팅, 이미지 최적화를 통해 사용자 체감 성능을 개선하고, ErrorBoundary로 예외 상황에서도 안정적인 UI를 유지합니다. 성능은 곧 사용자 경험의 품질이라 믿고, 이를 지속적으로 개선합니다. Model Context Protocol (MCP) 서버를 개발하여 사업자등록번호 진위 확인 및 정보 조회 기능을 구현했습니다. MVC 패턴을 적용한 TypeScript 기반 서버로, REST API와 MCP 도구를 동시에 제공합니다. Docker 컨테이너화와 Smithery AI 배포를 지원하며, 공공데이터포털 API 연동을 통해 실시간 사업자 정보를 조회할 수 있습니다.
하나의 기술을 배워 여러 환경에 녹여내는 데에서 개발자로서의 가치를 찾습니다.
저는 처음엔 안드로이드 개발자로 커리어를 시작했습니다. 단말기 최적화, 화면 구성, 다양한 해상도 대응 등 모바일 특유의 제약 속에서 사용성과 안정성을 고려하며 UI를 다뤘습니다. 이 경험은 제가 프론트엔드로 전향한 이후에도, "사용자 경험을 설계하는 눈"으로 그대로 이어졌습니다. React와 Next.js를 중심으로 웹 개발을 이어가며, 이제는 웹과 앱, 데스크톱 등 다양한 플랫폼을 넘나들며 일관된 사용자 경험과 유지보수 가능한 구조를 추구하고 있습니다.컴포넌트 중심의 UI 설계
FSD를 통한, 비즈니스 로직과 프레젠테이션의 분리
플랫폼 특성에 맞춘 성능 최적화
MCP 서버 개발 및 API 설계
Work.
다우기술.
Frontend Developer2023.07 ~ 2026.02다우오피스 통합 프론트엔드 시스템 개발 및 운영.
기업용 그룹웨어 SaaS 플랫폼인 다우오피스의 차세대 통합 프론트엔드를 설계·개발하고, 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 에러 트래킹 연동.
대시보드 가젯 및 네비게이션 개발.
대시보드에 배치 가능한 가젯을 개발하고, 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 컴포넌트 분리, 탭 기능 구현, 스크롤 버튼.
배포 인프라 및 성능 최적화.
Docker 멀티스테이지 빌드, Nginx 캐싱 전략, 리소스 버저닝을 통한 서비스 안정성과 성능을 개선했습니다. v4.0.0 ~ v4.2.2까지 10회 이상의 릴리스를 안정적으로 배포했습니다.My Task.- Nginx Cache-Control 헤더 최적화 및 client_header_buffer 튜닝으로 브라우저 캐싱 전략 수립 (캐싱 시간 5분 단축).
- CSS/JS 리소스 revision 버저닝 시스템 구축으로 배포 시 캐시 무효화 자동화.
- Dockerfile Node.js 22 업그레이드, Next.js standalone 빌드 기반 Docker 멀티스테이지 최적화.
- Nginx 로그 포맷 재설계 및 정적 리소스 서빙 최적화.
- Turborepo 빌드 파이프라인 관리 및 모노레포 빌드 최적화.
- Bitbucket Webhook과 LLM 활용 코드리뷰 자동화.
다우오피스 4.0 프론트엔드 운영.
다우오피스 4.0 프론트엔드 v4.0.0 ~ v4.2.2 운영 기간 동안 1,484건의 버그를 수정하고, 다양한 플랫폼(웹, PC 메신저, 모바일)에서의 안정성을 확보했습니다.My Task.- IE, Chrome, Safari 등 다양한 브라우저 환경에서의 호환성 이슈 해결.
- 운영 중 발생하는 결함 건 해결 및 개선 (fix 1,484건).
- Electron 기반 PC 메신저 결함 건 해결 및 개선.
- 모바일 웹 브릿지 연동 및 모바일 웹 브릿지 결함 건 해결 및 개선.
- Backbone.js 레거시 콘텐츠 스타일 및 기능 개선 후 로드.
- Firebase 기반 Push 알림 연동.
다우기술.
Android Developer2022.11 ~ 2023.07Enfax - 안드로이드 앱 유지보수.
모바일 팩스 - Enfax, 안드로이드 앱 유지보수 및 리뷰 이벤트 팝업 노출 개발 건입니다.My Task.- 불필요한 의존성 주입 제거 및 Retrofit Base Url 로직 개선.
- 앱 리뷰 이벤트 팝업 공지 노출 (useCase 생성).
- WebView 캐시모드 설정 통한, 이벤트 팝업 다이얼로그에 개발 완료 이전 페이지 보여지는 현상 해결.
삐약삐약 안드로이드 앱 운영 및 2차 개발.
영양제 복용관리 및 추천 서비스, 삐약삐약 안드로이드 앱 1.0.0.0 ~ 1.0.2.4 버전 관리 및 운영, 2차 개발.My Task.- Mobile Web과 WebBridge 연결 (판매링크, 건강기록 화면 수정 다이얼로그 등).
- KMM(Kotlin Multiplatform Mobile)로 MVVM 아키텍쳐에 맞춰, Android, iOS 공통 비즈니스 로직 작성.
- TripleT와 Jenkins 활용, 출시노트 포함해 구글플레이 각 트랙별 자동 배포할 수 있도록 구현.
- 2차 개발 UI 및 기능 구현.
Project.
Info.Model Context Protocol (MCP) 서버를 개발하여 사업자등록번호 진위 확인 및 정보 조회 기능을 구현했습니다. 공공데이터포털 API를 활용한 실시간 사업자 정보 조회 서비스입니다..My Task.
- MVC 패턴 기반 TypeScript 서버 아키텍처 설계 및 구현
- REST API와 MCP 도구 동시 제공 구조 설계
- 공공데이터포털 API 연동 및 사업자등록번호 검증 로직 구현
- Docker 컨테이너화 및 Smithery AI 배포 설정
- 사업자 정보 조회 및 진위 확인 기능 개발
- API 인증키 관리 및 보안 처리
- 에러 핸들링 및 로깅 시스템 구축
Info.자주 사용하는 정규표현식을 잊고있다가 사용할 때 잘 기억이 나지 않는 불편함때문에, npm 패키지로 배포해 편리하게 사용하고 싶어 시작한 개인프로젝트입니다.My Task.
- 프로젝트 전개 및 패키지 매니저 npm 설정.
- 정규 표현식 추가.
- 패키지 배포 및 버전 관리.
Info.티켓팀을 할때, 사용자가 직접 시계를 커스텀하며 좀 더 재미있게 티켓팅을 할 수 있도록 여러 애니메이션을 적용했습니다..My Task.
- 프로젝트 전개 및 FSD 아키텍쳐 기반으로 구조 설정.
- framer-motion 통한, SearchBar 컴포넌트 애니메이션 적용 및 구현.
- framer-motion 통한, Timer 컴포넌트 애니메이션 적용 및 구현.
- Timer 컴포넌트 사용 위한, useTimer 훅 구현.
- color picker 라이브러리 활용해, color picker 구현.
- Timer 컴포넌트 사용 위한, useTimer 훅 구현.
- Next.js API Routes 사용해, CORS Error 방지.
- Vercel Deploy.