미리보기

뱅크몰은 대출 비교 및 상담 중개 플랫폼을 운영하며, 사내 개발 조직을 통해 자사 서비스 및 외주 프로젝트를 병행하고 있습니다.

뱅크몰 플랫폼, 어드민, 대출상담사 매칭 플랫폼의 프론트엔드 개발 및 유지보수를 담당하며, 구조 개선과 성능 최적화, 
개발 환경 설계 등을 주도해 서비스의 안정성과 확장성을 높였습니다.

주요 성과

• 금융사별 신청 로직을 전략 패턴 기반으로 재구성하여 흐름을 분리하고, 오류 접수율 감소

• 복잡한 담보대출 비교 과정을 multi-step 구조로 정리하고 공통 로직을 모듈화하여 사용자 이탈률 약 80% 개선

• zustand 기반 공통 스토어 템플릿과 API fetcher 인터페이스 설계, 자동화 스크립트 및 Slack Webhook 알림 시스템 도입으로 팀 생산성 향상

• React 17 → 18, Next.js 10 → 13 마이그레이션 및 TypeScript 기반 코드 전환(60% 이상)으로 코드베이스 안정성 강화

• SEO 및 성능 최적화를 통해 Lighthouse 점수 대폭 개선 (성능 51 → 82, SEO 91 → 100 등)

• 주 단위 배포 · 코드 리뷰 환경에서 사내 스터디를 주도하며 팀 코드 컨벤션 수립과 기술 문서화에 기여

MBTI 기반의 맞춤형 학습 콘텐츠를 제공하는 언어학습 앱 및 어드민을 개발한 프로젝트입니다.


핵심 구현 내용

• Next.js SSR 환경에서 PASS 인증 결과를 안전하게 처리하기 위해 cookie와 API Route 기반 보안 흐름 구현

• 특정 라이브러리에 종속되지 않고 재사용 가능한 커스텀 fetcher 인터페이스 설계

  • 요청/응답 포맷 추상화, interceptor 구조 직접 구현 (에러 핸들링, 토큰 주입, 로깅 처리 등)  

• DB 중심 DTO에 대응하여 form ↔ request 파싱 유틸을 직접 구현해 구조 유연성 확보  

• 학습 콘텐츠 유형에 따라 렌더링 책임을 분리하고, 메모이제이션과 캐싱을 활용해 불필요한 연산과 리렌더링을 최소화하는 구조로 컴포넌트를 설계

관련 연구 내용

• Next.js fetch를 활용한 API fetcher 인터페이스 설계

각 제휴 금융사의 요구사항과 유동적인 상품 카테고리 목록 변경에 대응할 수 있도록, 대출 상품 상담 신청 플로우의 UI/UX 및 
로직 구조를 개선한 프로젝트입니다.

기존 문제점

• 금융사별 조건을 하나의 함수에서 관리해 흐름 파악이 어렵고 사이드 이펙트가 자주 발생
  동일한 UI 구조가 여러 페이지에 중복 구현되어 수정 시 유지보수 비용이 높음

• 자금 유형별 카테고리 및 워딩 출력 로직이 단일 파일에 집중되어 응집도 과다 및 확장성 저하
  

핵심 구현 내용

• 금융사별 신청 로직을 전략 패턴 기반으로 분리하고, 단일 책임 원칙에 따라 모듈화

• 중복 로직을 감수하더라도 사이드 이펙트를 최소화하고, 선언형 React 구조로 가독성 향상

• 레이아웃 및 리스트 UI를 공통 컴포넌트로 분리하고, 페이지 구조를 통합해 작업 효율성 확보

• 프로젝트 전반에 걸쳐 JavaScript -> TypeScript, Styled-components -> tailwind CSS 마이그레이션 수행

• 자금 유형별 워딩/카테고리 출력 로직을 기능 단위 모듈로 분리해 확장성과 유지보수성 개선

• 기획자와 협업하여 각 금융사 별 상담 신청 프로세스를 명확히 정리하고, 백엔드와 반복 협의를 통해 유지보수가 용이한 데이터 구조를 합의
  

성과

• 동일한 UI 변경 작업 시 수정 파일 수를 5개 → 1개로 축소, 작업 소요 시간 절감

• 중복 로직 제거와 구조 통합을 통한 개발 생산성 향상

• 사이드 이펙트 최소화 및 운영 환경에서 금융사별 로직 관련 오류 리포트 발생 건수 감소

대출 상담사와 대출 희망 사용자를 온·오프라인으로 연결하고, 상담 및 상품 추천 과정을 통합적으로 지원하는 매칭 플랫폼을 구축한 프로젝트입니다. 제휴 금융사의 다양한 상품과 고객의 조건을 연결하여 실질적인 상담 전환을 유도하는 B2B2C형 서비스입니다.

핵심 구현 내용

• 제안서 프리셋 관리, 제안서 발송, 상담 관리, 관리자 감독 페이지 등 주요 기능 UI 및 로직 개발

• 비교 신청 데이터 특성상 필터 조건이 복잡해, zod + react-hook-form 기반의 유효성 검사 체계를 도입하여 데이터 신뢰성과 오류 방지 강화

• 정책 변경사항에 신속한 대응을 위한 슬랙 Webhook 연동을 통한 공통 코드 변경 사항 알리미 봇 구현

• 전반적인 폼 데이터 흐름을 선언적으로 구성하고, 실패 처리 시 서버 응답 기반의 fallback 메시지 처리 로직 구현

성과

• 유효성 로직 강화 및 운영 자동 알림 도입으로 상담사 입력 오류율 및 운영 대응 시간 단축

• 핵심 기능 안정화와 운영 대응 체계 마련으로 유료 서비스의 신뢰성 확보에 기여

변경된 정책과 사용자 피드백을 반영해, 주택담보대출 및 전세대출 신청 플로우의 UI/UX 개선 및 로직 구조 재정비를 진행한 프로젝트입니다.

핵심 구현 내용

• 기존 단일 context 기반 상태 관리 구조를 관심사 별 multi-step 구조로 재설계함으로써 구조적 가독성 및 유지보수성 확보

• 입력값에 따른 분기 처리 흐름을 재설계하고, 중복 로직 제거 및 조건 분기 흐름 단순화

• KB시세, 공시지가, 행정안전부 주소 데이터를 단일 책임 기반으로 분리하여 통합 관리 가능하도록 구조 개선

성과

• UX 흐름 개선으로 유저 이탈률 약 80% 감소

• 플로우 단순화 및 오류 방지 로직 도입으로 QA 오류율 90% 감소

관련 연구 내용

• 모바일 환경에서 키패드 등장에 따른 반응형 구현하기

• 스크롤이 있을 때 하단을 블러 처리하는 컴포넌트 만들기

React 공식 문서를 기반으로 한 오프라인 스터디 참여 및 예제 앱 개발

React 공식 문서를 기반으로 설계 철학을 학습하고, 실제 예제 구현을 통해 실무 적용 방식을 탐색한 오프라인 스터디에 참여했습니다.

• 선언적 UI 작성을 중심으로 가독성 높은 인터페이스와 유지보수 가능한 구조 설계를 고민

• 모달, API 호출, 폼 상태 등 반복되는 기능을 추상화해 재사용 가능한 컴포넌트 및 훅을 설계

• 팀원들과 코드 리뷰를 통해 다양한 구현 관점을 비교하고, React 원칙에 부합하는 코드 작성 기준 정립

• 활동 PR 링크: github.com/pragmatic-react/pragmatic-react-docs (author: yousunzoo)