brunch

You can make anything
by writing

C.S.Lewis

by 용프로 Oct 05. 2023

금융 UI/UX 공통 기획

금융 공통 기획의 중요성

기획자가 Web 또는 APP을 구축할때 기획자들간 공유하는 화면설계서 템플릿의 공통과 업무단에서의 각각 다른 업무 프로세스로 진행되는 가운데 공통화면이 적용되는 부분에 별도로 추려서 화면설계서를 공통으로 명명하고, 해당 설계서에 공통 업무를 반영합니다. 


금융프로젝트의 시작은 2016년 금융결제원 16개 은행공동 핀테크 오픈 플랫폼 구축 추진사업을 기획PL로 8개월간 진행을 하게 되었습니다. 잔액조회, 계좌조회, 출금이체, 입금이체, 계좌실명 조회 등 이용가능한 API를 신청,계약, 개발테스트베드를 거쳐, 이용기관(16개 은행 및 API 신청 기업)에서 관리센터에서 API를 관리할 수 있는 기획업무를 담당하였습니다. 세계최초로 금융기관에 적용되는 사례로, 이전 벤치마킹을 할 자료가 많지 않아서 힘든 부분이 있었고, 공통기획 문서 작업이 쉽지 않았습니다. 포털사이트/테스트베드/관리센터/모바일앱으로 이뤄지는 각각의 사이트 업무 중심에 맞춘 공통 기획이 필요하게 되었습니다.


시행착오를 통한 기획 완성도 높이는 작업을 1개월 동안 이용기관 기업들을 대상으로 인터뷰 및 사전조사를 진행하며, 다양한 아이디어 및 시뮬레이션을 진행하며, 여러 차례의 설계 수정 및 디자인 수정을 하여 최종 안에 다다르게 되었습니다.



"세계최초로 금융기관 통합 연계 오픈 플랫폼 - 사이트 업무 중심의 개별 공통 기획이 필요하다.'



첫 번째로, 포털사이트입니다. (사용성을 고려한 UI 공통 필요)

포털사이트는 이용기관이 이용신청을 하고 나서 진행되는 프로세스를 쉽고 간결하게 보여줄 수 있는 UI가 필요하여 스텝별로 진행되는 과정에서 이용기관에서 진행할 수 있는 업무를 제공해 줍니다.

예) 완료화면에서, 계약이 완료되었다는 메시지와 함께 정보변경신청, 계약변경 신청을 할 수 있습니다.

 계약해지 신청 및 이용계약조회 버튼은 금융결제원의 최고관리자가 이용기관에서 이용신청한 서류를 확인한 후 최종 계약이 완료의 승인처리가 나면 이용할 수 있는 버튼으로 CASE별 이용기관에서 업무처리를 쉽게 할 수 있도록 화면을 제공하였습니다. 


이용기관의 이용계약신청 업무를 쉽고 빠르게 진행할 수 있는  편의성을 고려한 UI제공



두 번째로, 테스트베드 사이트입니다.(서비스 신청 및 앱 만들기의 간단 입력항목 제공)

금융결제원의 최고관리자가 승인처리를 하면, 서비스 신청 등록을 합니다. 테스트베드 서비스 승인처리가 완료로 떨어지면 테스트베드 사이트에 로그인 앱 만들기에서 기본 정보를 등록하게 됩니다. 테스트베드에서는 개발자가  테스트 및 금융보안원 취약점 점검까지 파일 업로드를 통하여 신청 및 결과를 확인할 수 있습니다.

서비스 신청등록 및 테스트베드에서 앱 만들기 화면



세 번째로, 관리자 사이트입니다.(관리자의 업무 편의 기능 제공)

관리자 사이트는 그리드 영역의 테이블 가로길이를 최대한 넓게 활용하여 많은 데이트를 쉽게 볼 수 있게 구현이 필요했습니다. 사용자관리, 이용기관관리, 테스트베드관리, 업무관리, 모니터링, 통계관리, 이력관리, 시스템관리 등 많은 기능과 페이지는 상단 GNB, LNB, 입, 출력항목, 버튼 위치 등을 고려 주요 화면만 공통화면 설계 후 디자인, 퍼블리싱을 진행하였습니다. 


관리자사이트의 자금집계, API등록 등 업무화면


마무리하면서,

하나의 프로젝트이지만, 사이트의 업무 특성한 공통을 하나로 잡기 어려운 프로젝트로, 사이트별 주요 기능에 대해서만 공통 설계를 진행한 프로젝입니다. 앱뱅킹에서의 공통기획은 별도로 디테일하게 다룰 예정이며, 현재 은행, 증권 및 카드사, 저축은행 등 금융기간의 오픈뱅킹(다른 금융) 및 자산관리등 업무가 가능해진 것은 바로 이 프로젝트(금융기관 통합 연계 오픈플랫폼)를 구축하고 나서 활발히 지금까지 진행되고 있는 것 같습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari