은행 앱의 딜레마: 강력한 기능과 깊어지는 메뉴

모바일 뱅킹 앱을 실행하면 흔히 드는 불편함이 있다. 지난해 연간 결산 내역을 확인하거나 포트폴리오 수익률 분포를 파악하려면, 깊숙히 파고든 메뉴 구조를 헤쳐 나가야 한다. AI 대화형 인터페이스로 이 문제를 해결하고 싶지만, 금융권의 데이터 보안과 규제 준수라는 장벽이 버티고 서 있다.

사용자 자산 정보를 외부 공용 LLM에 전송하는 것은 금융 기관에선 상상할 수 없는 일이다. 이로 인해 대다수 금융 앱의 AI 챗봇은 단순 키워드 매칭 수준에 머물러 있다.

이번 글에서는 DevUI와 MateChat의 컴포넌트 체계를 활용해 프론트엔드 기반 데이터 폐쇄형 아키텍처를 설계하는 방법을 살펴본다. 민감 데이터의 처리 로직은 로컬 환경이나 신뢰 구간 내 전용 인터페이스에서 수행하고, MateChat은 금융 차트와 상호작용 카드의 렌더링에만 집중하는 방식이다.

기술 스택 선정: DevUI와 MateChat의 시너지

금융 도메인의 기술 선택은 안정성, 확장성, 전문성을 동시에 충족해야 한다. DevUI와 MateChat의 조합은 이 세 가지 요구사항에 정확히 부합한다.

DevUI: 금융급 컴포넌트의 신뢰 기반

DevUI는 대규모 엔터프라이즈 환경에서 검증된 디자인 시스템으로, 접근성과 일관성이 중요한 금융 UI에 적합하다.

MateChat: 대화형 인터페이스의 경량 컨테이너

MateChat은 전통적인 챗봇 플랫폼과 달리 순수 프론트엔드 컴포넌트 라이브러리로, "AI 대화"라는 단일 책임에 집중한다.

이러한 "기초 컴포넌트 + 개방형 슬롯" 구조는 외부 위험 요소를 차단하면서도 금융 특화 UI를 구현할 수 있는 토대가 된다.

프로젝트 부트스트랩: CLI로 빠른 시작

MateChat은 전용 CLI 도구로 프로젝트 템플릿을 제공한다.

# npm 사용
npm create matechat@latest

# pnpm 사용
pnpm create matechat@latest

실행 후 프로젝트명과 템플릿을 선택하면 자동으로 스캐폴딩된다.

Project name: secure-bank-advisor
Framework: Vue Starter

cd secure-bank-advisor
npm install
npm run dev

핵심 과제: 금융 대화의 두 축

금융 현장에서 사용자의 핵심 니즈는 신속한 정보 조회와 안전한 자금 이동이다.

기존 GUI는 기능이 방대해질수록 탐색 비용이 기하급수적으로 늘어난다. "지난달 외식비 지출"을 파악하려면 여러 차례 필터링과 화면 전환이 필요하다.

반면 AI 인터페이스의 도전과제는 출력의 전문성이다. 단순 텍스트 버블로는 복잡한 캔들 차트, 펀드 순자산가치 추이, 밀집된 거래 내역을 표현하기 어렵다. "張三에게 송금"이라는 명령에 "알겠습니다"라는 답변 대신, 수취인 검증과 금액 확인이 포함된 전문 카드를 즉시 제시해야 한다.

아키텍처 설계: 프론트엔드 "안전 샌드박스"

금융급 규제를 만족하기 위해 외부 AI 서비스를 배제하고, 클라이언트측 의도 분석 + 컴포넌트 기반 렌더링 체계를 구축했다.

핵심은 useLocalIntent.ts 커스텀 훅이다. 이 훅은 네트워크 연결 없이 사용자의 자연어를 해석하고, 구조화된 응답을 생성하는 "엣지 브레인" 역할을 수행한다.

// src/composables/useLocalIntent.ts
interface IntentResult {
  category: string;
  payload: Record<string, unknown>;
  cautionLevel: 'none' | 'notice' | 'strict';
}

export function useLocalIntent() {
  const resolveIntent = async (utterance: string): Promise<IntentResult> => {
    // 규제 시뮬레이션: 의도 분석 지연
    await delay(600);

    const normalized = utterance.trim();

    if (hasPattern(normalized, ['잔액', '자산', '포트폴리오'])) {
      return {
        category: 'wealth_snapshot',
        payload: { holdings: fetchLocalHoldings() },
        cautionLevel: 'none'
      };
    }

    if (hasPattern(normalized, ['송금', '이체', '보내'])) {
      const extracted = extractAmount(normalized);
      return {
        category: 'remittance_review',
        payload: {
          targetAmount: extracted,
          beneficiary: resolveBeneficiary(normalized),
          feeEstimate: computeTransferFee(extracted)
        },
        cautionLevel: 'strict'
      };
    }

    // 기본 폴백
    return {
      category: 'general_inquiry',
      payload: { originalText: normalized },
      cautionLevel: 'none'
    };
  };

  return { resolveIntent };
}

모든 의도 판단과 데이터 조회가 브라우저 내부에서 폐쇄적으로 이루어지므로, 데이터 유출 우려 없이 복잡한 금융 로직을 수행할 수 있다.

시각화 구현: 대화 속 데이터 인사이트

보안 문제를 해결한 뒤, 사용자 경험을 극대화하는 것이 다음 과제다. MateChat의 슬롯 메커니즘을 활용해 금융 데이터를 직관적인 시각 요소로 전환한다.

자산 조회 시에는 DonutAllocation 컴포넌트를, 거래 내역 확인 시에는 LedgerGrid 컴포넌트를 대화 흐름에 삽입한다.

<!-- SecureChatShell.vue -->
<ChatFrame :session-id="activeSession">
  <template #message="{ envelope }">
    <MessageBubble :tone="envelope.priority">
      {{ envelope.narrative }}
    </MessageBubble>

    <!-- 동적 위젯 렌더링 -->
    <component
      :is="pickWidget(envelope.category)"
      v-bind="envelope.visualData"
      @action="handleUserAction"
    />
  </template>
</ChatFrame>

// 위젯 매핑 테이블
const widgetRegistry: Record<string, Component> = {
  wealth_snapshot: DonutAllocation,
  remittance_review: TransferAck,
  transaction_history: LedgerGrid,
  rate_alert: ForexTicker
};

이 방식으로 "대화 + 시각화"가 결합된 하이브리드 인터페이스를 구현한다. 사용자는 숫자 나열에서 핵심 정보를 직접 찾을 필요 없이, 한눈에 재무 현황을 파악할 수 있다.

운영 결과 및 인사이트

해당 아키텍처 적용 후, 핵심 자산 조회까지의 단계가 기존 평 5회 터치에서 1회 대화로 축소되었다. 상담원 연결 없이 프론트엔드 의도 분석으로 해결되는 문의 비율이 크게 상승했다.

또한 금융 특화 언어 패턴을 발견했다. 이체 관련 대화에서는 "수취인 정보를 다시 확인해 주세요"와 같은 리스크 공지 문구를 자동 삽입하는 것이, 사용자 신뢰도와 실수 방지에 결정적이었다. AI 응답의 톤앤매너에 규제 의식을 내재화하는 것이 금융 도메인의 핵심 성공 요인임을 확인했다.

마무리

DevUI의 검증된 컴포넌트 생태계와 MateChat의 경량 대화 컨테이너를 결합하면, 엄격한 규제 환경에서도 데이터 폐쇄형 AI 어시스턴트를 구축할 수 있다. 외부 대모델에 의존하지 않는 "로컬 로직 폐쇄" 구조는 금융권의 핵 요구사항인 데이터 주권을 지키면서, 동시에 현대적인 대화형 경험을 제공하는 길을 열어준다.