민대인 (bamin0422).
Learn once, write anywhere. 디자인 시스템을 코드로 구현한다는 관점에서, 재사용 가능한 컴포넌트를 설계하고 모노레포 구조로 관리해 왔습니다. 안드로이드 개발 시기 배웠던 MVVM 아키텍처의 명확한 역할 분리와 모듈화 개념을, 웹에서는 Feature-Sliced Design으로 재해석하고 적용하고 있습니다. 로직이 UI를 침범하지 않도록, 상태 관리 도구 (Jotai, TanStack Query 등)와 커스텀 훅을 활용해 핵심 로직을 명확하게 분리합니다. 이 접근은 앱 개발 시 ViewModel을 분리하던 경험에서 출발했고, 현재는 웹에서도 동일한 철학으로 적용하고 있습니다. Lazy Loading, 코드 스플리팅, 이미지 최적화를 통해 사용자 체감 성능을 개선하고, ErrorBoundary로 예외 상황에서도 안정적인 UI를 유지합니다. 성능은 곧 사용자 경험의 품질이라 믿고, 이를 지속적으로 개선합니다.
하나의 기술을 배워 여러 환경에 녹여내는 데에서 개발자로서의 가치를 찾습니다.
저는 처음엔 안드로이드 개발자로 커리어를 시작했습니다. 단말기 최적화, 화면 구성, 다양한 해상도 대응 등 모바일 특유의 제약 속에서 사용성과 안정성을 고려하며 UI를 다뤘습니다. 이 경험은 제가 프론트엔드로 전향한 이후에도, "사용자 경험을 설계하는 눈"으로 그대로 이어졌습니다. React와 Next.js를 중심으로 웹 개발을 이어가며, 이제는 웹과 앱, 데스크톱 등 다양한 플랫폼을 넘나들며 일관된 사용자 경험과 유지보수 가능한 구조를 추구하고 있습니다.컴포넌트 중심의 UI 설계
FSD를 통한, 비즈니스 로직과 프레젠테이션의 분리
플랫폼 특성에 맞춘 성능 최적화
Work.
다우기술.
Frontend Developer2023.07 ~ 현재다우오피스 차세대 Front-End.
Backbone.js로 구성되어 있는 다우오피스 Frontend를 Next.js, TypeScript기반으로 모노레포로 구성하여 기존 다우오피스의 프론트엔드를 개선해 개발하는 프로젝트입니다.My Task.- 공통 컴포넌트 개발: Calendar, DatePicker, Table, CheckBox, AddressDialog, Kakaomap 등.
- 공통 컴포넌트 개발: Turbo Code Generator를 활용해, 불필요하게 컴포넌트를 생성할 필요없이 mdx와 stories 파일과 공통 컴포넌트 구성 파일을 Generating할 수 있게 구현.
- 기존 그룹웨어 컨텐츠 개선 : Backbone.js로 되어있는 프로젝트를 모두 migration하지 못해 기존 컨텐츠의 스타일 및 기능을 개선해 로드.
- 기존 스크립트 방식으로 로드해 사용할 수 밖에 없는 카카오맵을 선언적으로 사용할 수 있도록 컴포넌트화해 구성.
- 인증 및 사용자 정보: 로그인 로직 구성, 간편 비밀번호 컴포넌트 및 Provider 구현, Tanstack Query와 GraphQL 활용 사용자 정보 fetch.
- 대시보드-가젯 포팅: 기존 Backbone.js 코드로 작성되어 있는 가젯 코드들을 리액트 코드로 포팅하는 작업. (캘린더, Works 차트형, ToDo+, 예약 바로가기 가젯 등)
- 통합설정: 통합으로 환경설정하는 부분으로, 관리에 나타나는 여러 Table을 Tanstack Table을 활용해 구현.
- 경영업무포탈-GNB : jotai의 atomWithStorage 사용해, cookieStorage에 최근 사용한 목록 정보 저장. 즐겨찾기는 Tanstack Query의 useMutation 사용해 구현. 검색 기능은 Fuse.js를 활용해 구현.
- 경영업무포탈-Tab : jotai의 atomWithStorage를 활용해 sessionStorage에 선택된 탭들을 저장하는 로직 구현. Tab 컴포넌트 구현.
다우기술.
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.
- 프로젝트 전개 및 패키지 매니저 yarn berry 설정.
- Storybook 기본 설정 (theme 등).
- FSD 아키텍쳐 기반으로 프로젝트 구조 구성.
- 공통 컴포넌트 개발.
- 프로젝트 전개 및 패키지 매니저 npm 설정.
- 정규 표현식 추가.
- 패키지 배포 및 버전 관리.
- 프로젝트 전개 및 FSD 아키텍쳐 기반으로 구조 설정.
- framer-motion 통한, SearchBar 컴포넌트 애니메이션 적용 및 구현.
- framer-motion 통한, Timer 컴포넌트 애니메이션 적용 및 구현.
- Timer 컴포넌트 사용 위한, useTimer 훅 구현.
- color picker 라이브러리 활용해, color picker 구현.
- Timer 컴포넌트 사용 위한, useTimer 훅 구현.
- Next.js API Routes 사용해, CORS Error 방지.
- Vercel Deploy.