뱅크몰
Frontend Developer· 개발팀
대출 비교·상담 중개 플랫폼과 관리자 시스템을 개발·운영하고 있습니다. 복잡한 금융 정책과 운영 프로세스를 프론트엔드 구조로 설계하고, 레거시 개선과 공통 개발 기반 구축을 주도해 왔습니다. 동시에 다양한 외부 SI 프로젝트에서 요구사항 구체화부터 설계·개발·출시·운영까지 End-to-End로 수행하며, 비즈니스 요구사항을 실제 운영 가능한 서비스로 전환하는 역할을 맡고 있습니다.
담당 영역
- 01
금융 서비스 핵심 Flow 개발·운영
주택담보·전세·신용·개인회생 등 대출상품별 비교·신청 프로세스를 개발하고 실제 사용자 및 운영 데이터를 기반으로 지속 개선
- 02
사용자·상담사·운영자를 연결하는 플랫폼 개발
사용자 신청부터 상담사 매칭, 관리자 운영까지 역할별 업무 Flow가 연결되는 웹·모바일 서비스 개발
- 03
디자인 시스템·공통 컴포넌트 설계
라디오·체크박스 등 공통 컴포넌트를 외부 UI 라이브러리 없이 네이티브 input 기반으로 직접 구현하고, 상태·variant 로직을 헤드리스 훅으로 분리. loading·disabled·error 등 상태·예외별 케이스를 정의해 디자이너와 컴포넌트 스펙을 맞추고, Figma 토큰·Storybook으로 디자인-개발 기준 통일
- 04
프론트엔드 공통 개발 기반 구축
상태 관리·API·디렉터리 구조를 표준화하고 Start-kit과 모노레포 공유 패키지를 구축해 신규 프로젝트의 초기 개발 기반 통일
- 05
레거시 서비스 현대화 및 품질 개선
장기간 운영 중인 서비스의 기술 부채를 개선하고 프레임워크 전환, 성능 최적화, 오류 대응 및 관측 환경 구축
- 06
테스트·정적 분석 기반 품질 관리
대출 상품 필터·상환 계산 등 핵심 비즈니스 로직과 폼 스키마·쿼리 훅·공통 컴포넌트에 단위·컴포넌트 테스트를 작성해 회귀를 방지하고, 타입체크·린트를 CI 게이트로 두어 대규모 TypeScript 전환 과정에서도 안정성 유지
- 07
SI 프로젝트 End-to-End 수행
고객 요구사항을 정책·Flow·화면·API 단위로 구체화하고 프론트엔드 설계부터 개발·QA·출시·운영까지 프로젝트 전 과정 참여
- 08
AI Agent 기반 개발 프로세스 구축·적용
프로젝트의 아키텍처·코딩 규칙·도메인 지식·작업 절차를 Agent Context로 구조화한 AI Harness를 구축하고 SI 및 신규 프로젝트 개발에 적용
Key Impact
- 01
대출 신청 이탈률 약 80% 감소
복잡하게 결합된 입력·진행 상태를 분리하고 Multi-step 신청 Flow를 재설계해 주택담보·전세대출 신청 과정의 사용자 이탈 개선
- 02
운영 오류 접수율 약 90% 감소
Suspense·ErrorBoundary 기반 전역 예외 처리와 Interceptor·AbortController 기반 API 요청 제어를 적용해 사용자 오류 경험과 운영 대응 비용 감소
- 03
금융사별 정책 변경 영향 범위 최소화
주택담보대출 신청에서 12종 금융사·신청 방식(API·유선상담·오토메이션)이 하나의 핸들러에 중첩 if-else로 얽혀 오류와 유지보수 부담이 컸던 문제를, case별 동작을 공통 계약(onApply·onDuplicateApply)의 전략으로 위임하고 기본 동작은 defaultStrategy가 처리하는 Strategy Pattern으로 재구성. 특수 정책이 있는 금융사는 공통 신청 Flow를 건드리지 않고 전략만 추가하면 되도록 개선
- 04
공통 UI 변경 범위 5개 → 1개 파일로 축소
서비스별로 중복 구현된 레이아웃·리스트·버튼을 variant 기반 공통 컴포넌트와 라우트별 서비스 테마(getServiceColor)로 통합해, 금융 상품마다 UI를 다시 만들지 않고 토큰·variant만으로 대응
- 05
팀 개발 표준 정착으로 반복 작업 비용 절감
소수 인원 체제에서 반복 세팅·구현 비용을 낮추기 위해 상태 관리·API·구조를 표준화한 공통 개발 기반을 만들고, 프로토타입·시연으로 팀 채택을 이끌어 4개 프로젝트가 동일 기반 위에서 출발하도록 정착. 코드 컨벤션을 함께 정립하고 리뷰로 기준을 유지
- 06
BFF로 백엔드 API 은닉 · 공격 표면 축소
Next.js를 API 서버 앞단 BFF로 두어 백엔드 주소·스펙을 클라이언트에 노출하지 않아 엔드포인트 직접 타격·열거를 차단하고, 인증 토큰은 httpOnly Cookie로 서버에만 유지해 XSS 토큰 탈취를 방지
- 07
서비스 중단 없이 프론트엔드 레거시 현대화
보안 취약점 대응을 계기로 React 17 → 18, Next.js 10 → 13 마이그레이션을 라이브러리 단위로 단계적으로 진행하고, 테스트 서버에서 안정성을 검증하며 서비스 중단 없이 완료. 기존 코드베이스 60% 이상의 TypeScript 전환도 병행
- 08
메인 페이지 LCP 5.8초 → 3.2초 · FCP 2.1초 → 1.1초 단축
이미지·폰트 로딩과 번들을 최적화하고 코드 스플리팅을 적용해 메인 페이지 로딩 지표를 개선. 같은 작업으로 접근성 64 → 90, SEO 92 → 100 점수도 함께 향상