자금세탁방지(AML) 시스템 프런트엔드 공통 모듈 개발

이 기업은 금융권 자금세탁방지(AML) 시스템을 오랜 기간 운영해 온 금융 IT 전문 기업입니다. 그러나 프런트엔드 코드가 각 화면별로 독립적으로 작성되어 동일한 로직과 UI 패턴이 여러 곳에 중복되어 있었습니다. 새로운 규제 화면을 추가할 때마다 기존 코드를 복사하여 수정하는 방식이 관행화되면서 코드베이스가 비대해지고 있었습니다. 유지보수에 투입되는 인력과 시간이 지속적으로 증가하여, 개발팀의 생산성이 크게 저하되고 있었습니다. 근본적인 아키텍처 개선 없이는 향후 규제 대응 속도를 맞추기 어려운 상황이었습니다.

AML 관련 규제가 변경될 때마다 20개 이상의 화면을 일일이 찾아 수정해야 하는 비효율이 가장 큰 문제였습니다. 동일한 테이블이나 폼 컴포넌트가 화면마다 미세하게 다르게 구현되어 있어, 수정 시 누락이나 불일치가 빈번하게 발생했습니다. 또한 신규 개발자가 투입되었을 때 일관된 코딩 패턴이 없어 온보딩에 많은 시간이 소요되었습니다. 이러한 문제들을 근본적으로 해결하기 위해 공통 모듈 체계를 도입하여 UI 일관성과 개발 효율을 동시에 확보하는 것이 핵심 과제였습니다. 특히 금융 규제 특성상 빠른 대응이 요구되므로, 변경 사항의 일괄 적용이 가능한 구조가 필수적이었습니다.

먼저 기존 30여 개 화면에서 반복 사용되는 UI 요소와 비즈니스 로직 패턴을 체계적으로 분석했습니다. 테이블, 검색 필터, 폼 입력, 모달 등 핵심 UI 패턴을 카테고리별로 분류하여 공통 컴포넌트 후보 목록을 도출했습니다. 이를 바탕으로 디자인 시스템 기반의 모듈 아키텍처를 설계하고, 컴포넌트 간 의존성과 확장성을 고려한 인터페이스를 정의했습니다. 금융 도메인 특화 요구사항인 권한별 접근 제어와 감사 로그 기능도 공통 모듈에 내장할 수 있도록 설계 단계부터 반영했습니다. 프로토타입을 통해 기존 화면과의 호환성을 사전 검증한 후 본격적인 개발에 착수했습니다.

데이터 테이블, 검색 폼, 필터 패널, 모달 다이얼로그 등 15개 이상의 공통 UI 컴포넌트를 독립적인 라이브러리로 구축했습니다. 각 컴포넌트에는 금융 규제 대응에 필수적인 역할 기반 렌더링 로직이 내장되어, 사용자 권한에 따라 표시 항목과 조작 가능 범위가 자동으로 제어됩니다. 컴포넌트 Props 인터페이스를 표준화하여 개발자가 최소한의 설정만으로 화면을 구성할 수 있도록 했습니다. 또한 Storybook 기반의 컴포넌트 문서화를 병행하여 개발팀 내 커뮤니케이션 비용을 절감했습니다. 기존 화면들은 단계적으로 공통 모듈 기반으로 마이그레이션하여 서비스 중단 없이 전환을 완료했습니다.

15개 이상의 공통 UI 모듈 라이브러리를 구축하여 프런트엔드 코드 중복을 40% 이상 감소시켰습니다. 신규 AML 화면 개발 시 기존 대비 절반 이하의 시간으로 구현이 가능해졌으며, 규제 변경 시 공통 모듈만 수정하면 전체 화면에 일괄 적용됩니다. 일관된 디자인 패턴 적용으로 사용자 경험의 통일성이 확보되어 내부 사용자 만족도도 함께 향상되었습니다. 2개월이라는 짧은 개발 기간 내에 전체 모듈 체계를 완성하여 후속 프로젝트의 생산성 향상 기반을 마련했습니다. 이 공통 모듈 체계는 향후 다른 금융 솔루션 프런트엔드에도 확장 적용될 예정입니다.