프로젝트 개요와 전략적 목표
현대카드 법인서비스 UX 구축 프로젝트는 B2B 고객 조직이 디지털로 업무를 전환하는 순간을 돕기 위해 설계된 전사형 여정 개편이다. 기존의 흩어진 법인 카드 신청, 활용 현황 분석, 멤버 관리 기능을 하나의 대시보드로 통합하고, 재무 담당자와 임원 각각의 업무 속도에 맞춘 정보 계층을 재정의했다. 초기 워크숍에서 파악한 핵심 니즈는 즉시 활용 가능한 데이터와 안심할 수 있는 보안 흐름이었으며, 이를 검증하기 위해 8개의 주요 시나리오에 대한 고객 여정을 세밀하게 매핑했다.
우리는 특히 법인카드 운영자를 위한 올인원 컨트롤 타워를 구축하는 데 집중했다. 제안서 작성 단계부터 프로토타이핑까지 반복적인 사용성 테스트를 진행하면서 KPI 기반 위젯 구성, 대시보드 모드 전환, 알림 정책 관리 등 고도화 요구사항을 반영했다. 이러한 사전 검증을 통해 런칭 초기부터 셀프 온보딩 완주율을 34% 높였고, 상담센터 연결 비율도 의미 있게 감소했다.
- 거버넌스 우선 순위를 명확히 하여 승인·정산 프로세스를 단일 화면에서 제어
- 재무 담당자와 임원에게 다른 KPI 보기를 제공해 의사결정 속도 개선
- 사전 검증된 온보딩 플로우로 도입 첫 달 내부 교육 시간을 45% 절감
서비스 여정과 고객 경험 설계
법인 고객의 업무 흐름은 카드 신청, 한도 관리, 이용 내역 분석, 비용 정산이라는 긴 주기를 가지고 있다. 우리는 각 단계에서 필요한 행동과 감정 변화를 추적하면서 여정을 세분화했고, 핵심 의사결정 순간에 콘텐츠와 가이드를 적절히 배치했다. 특히 다계정 기반의 역할 맞춤 온보딩을 도입해 경영진, 재무 담당자, 실무자에게 서로 다른 설명과 툴팁을 제공함으로써 도입 장벽을 낮췄다.
또한 고객센터 VOC를 바탕으로 FAQ, 정책 문서를 마이크로카피 형태로 재구성하고, 특정 데이터를 다운로드하거나 외부 시스템으로 연동할 때 나타나는 경고 문구를 이해하기 쉽게 바꿨다. 이 과정에서 사용자마다 접속 기기가 다름을 고려해 모바일·데스크톱 간 흐름을 별도로 설계했고, 서비스 알림을 채널별로 선택할 수 있는 오케스트레이션 패널을 추가해 운영 효율을 강화했다.
UX/UI 디자인 시스템 구축
현대카드의 브랜드 아이덴티티를 유지하면서도 법인 고객이 기대하는 신뢰감을 제공하기 위해 컬러 팔레트와 타이포그래피를 새롭게 정의했다. 짙은 네이비와 전기 블루 대비를 활용해 주요 행동 버튼을 강조하고, 데이터 카드 안에서는 숫자 대비를 높여 가독성을 확보했다. 컴포넌트 단위로 설계한 그리드 시스템은 대시보드, 리포트, 신청 플로우 등 서로 다른 화면에서도 일관된 체계를 유지하도록 만든다.
디자인 시스템의 핵심은 데이터 밀도가 높은 화면에서도 사용자가 방향을 잃지 않도록 하는 것이다. 이를 위해 프로그레시브 정보 드릴다운 패턴을 도입하여, 요약 카드에서 상세 리포트로 이동할 때 자연스럽게 뎁스를 확장하고, 매끄러운 애니메이션을 적용해 전환 비용을 최소화했다. 마이크로 인터랙션은 주요 행동의 성공 여부를 즉시 피드백하며, 접근성을 고려한 대비와 최소 글자 크기를 표준으로 삼았다.
- 대시보드-리포트-정책 화면을 아우르는 12열 반응형 레이아웃
- 행동 유도 영역에 대한 명확한 대비와 상호작용 피드백 강화
- 웹 접근성 준수: 키보드 탐색, ARIA 레이블, 모션 감쇠 옵션 제공
데이터 통합과 운영 자동화
법인서비스는 ERP, 그룹웨어, 세무 시스템과의 연동이 필수다. 우리는 우선 이용 데이터의 정합성을 확보하기 위해 데이터 파이프라인을 재정비하고, 마스킹·익명화 규칙을 UI에 그대로 반영했다. API 호출량을 효율화하기 위해 주요 대시보드 지표는 캐시 계층을 사용하고, 실시간성이 필요한 승인·정지 알림은 이벤트 기반 스트림으로 처리하여 지연 시간을 최소화했다.
운영 팀이 더 빠르게 대응하도록 모니터링 보드를 별도로 구성했다. Service Health Monitor는 오류 코드, 접속 장애, 권한 변경 요청을 한 화면에서 확인할 수 있게 하며, 대응 매뉴얼과 링크를 함께 제공한다. 또한 로깅 시스템을 리디자인해 고객 문의 시 필요한 증적을 3분 이내로 확보할 수 있게 했고, 감사 기록을 시각화해 내부 보안 심사를 수월하게 통과했다.
- API 스로틀링 정책을 시각화하여 운영자가 실시간으로 임계치를 조정
- 데이터 보안 레벨에 따라 UI 요소에 접근 권한 뱃지를 표시
- 모니터링 알림과 Jira 이슈 트래커를 양방향으로 연결해 해결 시간을 단축
SEO와 퍼포먼스 최적화
법인서비스는 로그인 기반의 폐쇄형 구조지만, 퍼블릭 랜딩과 안내 자료는 검색 유입이 중요하다. 우리는 서비스 소개 페이지를 토픽 클러스터 구조로 재작성해 정보 탐색 흐름을 명확히 했고, 법인카드 키워드를 중심으로 FAQ, 사례, 다운로드 리소스를 엮어 콘텐츠 허브를 구성했다. 또 구조화 데이터를 활용해 검색 결과에서 풍부한 스니펫을 확보하고, 기술적 SEO 점검을 주기적으로 자동화했다.
퍼포먼스 측면에서는 프로그레시브 로딩 전략을 적용했다. 이미지와 차트 리소스는 비동기 로드로 지연시켜 FCP·TTI를 개선했고, 대시보드 핵심 스크립트를 모듈화해 필요 기능만 로딩하도록 분리했다. Lighthouse 기준 95점 이상의 성능 지표를 유지하도록 코드 스플리팅과 번들 최적화를 수행했으며, 보안 스캐너와 취약점 분석 또한 자동화 파이프라인에 연결했다.
The Blue Canvas와의 협업 가치
The Blue Canvas 팀은 금융·핀테크 산업에서 축적한 경험을 바탕으로 복잡한 법인 고객 시나리오를 빠르게 모델링하고, 브랜드 정체성을 유지하면서도 UX 효율을 높이는 방법을 제안한다. 이번 프로젝트에서도 서비스 기획자, 데이터 분석가, 프로덕트 디자이너가 크로스펑셔널 스쿼드를 이뤄 고객 인터뷰 → 여정 설계 → 프로토타입 → 개발 파이프라인까지 일관된 속도로 추진했다. 조직의 의사결정 권한 구조를 이해한 뒤 워크숍을 설계했기 때문에, 이해관계자 모두가 핵심 지표에 집중할 수 있었다.
또한 우리는 운영 이후의 성과를 주기적으로 점검하며 신규 기능 로드맵을 함께 다듬고 있다. 데이터 기반 거버넌스와 디지털 브랜딩을 동시에 강화하고 싶은 팀이라면 The Blue Canvas의 B2B 전문 역량을 통해 전략 수립부터 구현, 고도화까지 전 과정을 함께 설계할 수 있다. 내부 조직이 빠르게 움직일 수 있도록 맞춤형 워크숍과 교육 자료도 제공하여, 서비스 출시 이후에도 지속적인 개선 사이클을 만들도록 돕는다.
- 산업별 규제와 보안 요건을 반영한 UX 표준화 노하우
- 데이터 전략·디자인·엔지니어링을 연결하는 통합 프로젝트 관리
- 출시 후 성장 단계까지 동행하는 분석과 실험 프레임워크
마무리 인사이트와 다음 단계
현대카드 법인서비스 UX 구축 사례는 복잡한 금융 업무도 사용자 중심으로 재설계하면 높은 만족도를 이끌어낼 수 있다는 사실을 증명한다. 한 화면에서 금융·보안·운영 데이터를 결합하고, 상황별로 필요한 정보만 선별적으로 노출함으로써 사용자 피로도를 줄였다. 동시에 내부 운영팀이 활용하는 모니터링 도구를 재정비해 서비스 안정성을 선순환 구조로 만들었다.
앞으로는 외부 파트너와의 연동 확대, ESG 경영 지표 시각화, AI 기반 지출 패턴 분석 등 새로운 과제가 기다리고 있다. 데이터 중심 UX 혁신을 계속 이어가기 위해서는 신뢰할 수 있는 파트너와의 협업이 중요하다. The Blue Canvas는 전략 수립부터 실험 설계, 운영 자동화까지 함께하며 기업 고객 경험을 차별화할 준비가 되어 있다.