AML 시스템 프런트엔드 공통 모듈화로 코드 중복 40% 감소

01 / THE CHALLENGE

문제의 출발점.

금융권 자금세탁방지(AML) 시스템을 오래 운영해 온 금융 IT 기업. 프런트엔드 코드가 화면별로 독립 작성되어 동일한 로직과 UI 패턴이 여러 곳에 중복되어 있었고, 새 규제 화면을 추가할 때마다 기존 코드를 복사해 수정하는 관행으로 코드베이스가 비대해지고 있었다. AML 규제가 변경될 때마다 20개 이상의 화면을 일일이 찾아 수정해야 했고, 화면마다 미세하게 다른 컴포넌트 구현 탓에 수정 누락과 불일치가 빈번했다. 신규 개발자 온보딩에도 많은 시간이 걸렸다. 금융 규제 특성상 빠른 대응이 요구되므로 변경 사항을 일괄 적용할 수 있는 공통 모듈 체계가 필수였다.

02 / THE APPROACH

업무의 맥락부터, 설계에 담았습니다.

기존 30여 개 화면에서 반복 사용되는 UI 요소와 비즈니스 로직 패턴을 체계적으로 분석해 테이블, 검색 필터, 폼 입력, 모달 등 공통 컴포넌트 후보를 도출했다. 디자인 시스템 기반의 모듈 아키텍처를 설계하고 컴포넌트 간 의존성과 확장성을 고려한 인터페이스를 정의했다. 금융 도메인 특화 요구사항인 권한별 접근 제어와 감사 로그 기능을 설계 단계부터 공통 모듈에 내장했다. 15개 이상의 공통 UI 컴포넌트를 독립 라이브러리로 구축하고, 역할 기반 렌더링 로직으로 사용자 권한에 따라 표시 항목과 조작 범위가 자동 제어되게 했다. Storybook 기반 컴포넌트 문서화를 병행하고, 기존 화면은 서비스 중단 없이 단계적으로 마이그레이션했다.

03 / THE PROCESS

작은 검증을 쌓아, 작동하는 시스템으로.

1. 01

   기존 30여 개 화면의 반복 UI 요소·로직 패턴 분석과 공통 컴포넌트 후보 도출

2. 02

   디자인 시스템 기반 모듈 아키텍처와 인터페이스 설계

3. 03

   권한별 접근 제어·감사 로그를 내장한 공통 컴포넌트 15개 이상 라이브러리 구축

4. 04

   Storybook 기반 컴포넌트 문서화

5. 05

   프로토타입으로 기존 화면 호환성 사전 검증

6. 06

   서비스 중단 없는 단계적 마이그레이션 완료

04 / THE OUTCOME

숫자와 업무 방식에 남은 결과.

• 15개 이상의 공통 UI 모듈 라이브러리로 프런트엔드 코드 중복 40% 이상 감소
• 신규 AML 화면을 기존 대비 절반 이하의 시간으로 개발 가능
• 규제 변경 시 공통 모듈만 수정하면 전체 화면에 일괄 적용
• 일관된 디자인 패턴으로 내부 사용자 만족도 향상
• 2개월 내 전체 모듈 체계를 완성해 다른 금융 솔루션으로의 확장 기반 마련

05 / THE HANDOVER

인도 이후에도, 팀의 자산으로.

권한 제어와 감사 로그가 내장된 공통 UI 컴포넌트 라이브러리(15개 이상), Storybook 문서, 기존 화면의 단계적 마이그레이션.