모던 핀테크 애플리케이션 개발 가이드

핀테크 애플리케이션의 성장

지난 10여 년 사이, 파이낸셜 테크놀로지(약어로 핀테크)는 기업과 고객이 금융 거래를 실행하고 관리하는 방식을 혁신적으로 바뀌놓았습니다. 현대 기술을 이용해 금융 서비스의 사용과 제공을 자동화한다는 뜻으로 정의되는 핀테크 덕분에 금융 애플리케이션은 급속도로 발전했어요. 이와 같은 최신 경향에 더 많은 스마트 기기까지 가세해 금융 거래의 관리는 보다 쉽고 편리해졌습니다. 한 번의 탭이나 클릭만으로 모든 것이 가능해진 거예요. 보안성과 사용성이 높은 애플리케이션이 등장하며 기업과 고객은 모바일 뱅킹과 핀테크 애플리케이션으로 더 편리하게 자신의 재정을 통제하고 있습니다. 최근 스태티스타(Statista)에서 실시한 조사에 따르면 시장에서 가장 많은 부분을 차지하는 전자 결제 사업은 2023년까지 44억 7540만 달러 규모로 성장할 것이라 합니다. 개인 금융과 대출 부문이 그 뒤를 바짝 쫓고 있고요.

핀테크는 금융 서비스와 테크놀로지를 결합한 용어입니다. 지불 거래, 크라우드소싱, 암호 화폐, 주식 거래, 보험, 소매 금융, 대출, 교육 기금 등 다양한 스펙트럼의 자산 관리 애플리케이션이 핀테크 애플리케이션에 포함되죠.

금융 애플리케이션에 들어가는 금융 차트와 대시보드의 핵심이 무엇이고 핀테크 앱을 제작할 때 무엇을 최우선적으로 고려해야 하는지 궁금하신가요? 그렇다면 이 가이드가 여러분에게 정답을 알려드릴 겁니다. 센차 제품을 활용해 더 적은 비용으로 세련되고 안전한 기업용 애플리케이션을 빠르게 만들고 활용하는 방법을 알아봅시다.

금융 차트

데이터 중심의 애플리케이션을 사용할 때 이런 경우를 보신 적 있는지요? 직관적인 그래프나 차트를 통해 데이터를 시각적으로 요약하는 옵션이나 뷰를 커스터마이징하는 옵션이 빠져 있는 겁니다. 이렇게 최적화되어 있지 않은 인터페이스를 다루다 보면 골치 아프고 짜증이 나죠. 현재 시장에 출시된 다기능 금융 애플리케이션은 대부분 사용자의 기대에 따라 눈을 즐겁게 하는 그래픽과 커스터마이징 옵션을 제공하고 있습니다. 하지만 필수적인 시각적 요소나 커스터마이징 옵션을 내장하지 않은 앱도 상당히 많아요.

모바일 뱅킹으로 자산을 관리하는 사람에게도, UBS나 피델리티(Fidelity) 같은 고급 핀테크 앱으로 크게든 작게든 투자를 하는 사람에게도, 페이팔(Paypal)·젤(Zelle)·줌(Xoom)으로 송금을 하는 사람에게도, 그저 교육 차원에서 절약 계획을 관리하는 사람에게도 금융 차트는 잘 만들어진 애플리케이션의 가장 중요한 기본입니다.

금융 그래프와 차트는 시각적 자료를 이용해 예산, 유동성, 이체 내역, P&L 사업 지표, 지출, 분담금, 동향과 같은 핵심 금융 지표를 실시간으로 추적해줘요.

가장 기본적인 솔루션부터 복잡한 솔루션까지, 여러분의 애플리케이션에 다양한 차트 옵션을 활용할 수 있습니다. 지금부터는 대표적인 차트와 주요 사용법을 소개하겠습니다.

1. 라인 차트, 막대 차트, 영역 차트

이 차트(기본형, 3D형, 스택형)는 복잡한 데이터를 이해하기 쉽도록 시각적 표현으로 단순화해서 보여줍니다. 기본적인 차트지만 정보를 빠르게 전달하고 금융 정보 추적에 없어서는 안 될 요소예요.

센차 ExtJS로 생성한 영역차트

센차 ExtJS로 생성한 라인차트

2. 게이지 차트

게이지 차트는 하나의 데이터 포인트를 그래프로 나타내고 결과가 척도상 어느 지점에 위치하는지 보여주기에 완벽한 방법입니다(0%-100% 혹은 좋음-나쁨). 영업 마진, 영업 이익, 회사 수익, 유사한 핵심성과지표(KPI) 같은 주요 금융 지표에 자주 사용되는 차트로, 데이터를 색상으로 구분하고 시각적으로 표시하기 때문에 이해하기 쉽습니다.

센차 ExtJS로 생성한 게이지 차트

센차 ExtJS로 생성한 파이차트

3. 파이 차트

파이 차트(기본, s파이, 도넛, 3-D)는 수치 데이터의 비율을 ‘슬라이스’된 뷰로 보여줍니다. 금융 애플리케이션에서는 도넛 차트가 특히 많이 쓰여요. 도넛 안의 공간에 정보를 더 효율적으로 표시할 수 있기 때문입니다.

센차 ExtJS로 생성한 레이더 차트

4. 레이더 차트

스파이더 차트라고도 하는 레이더 차트는 하나의 고유한 뷰에 다수의 연속 데이터를 보여주거나 비교하는 차트입니다. 금융 앱에 이런 유형의 차트를 활용하면 일정 기간 동안의 분기별 매출, 수입, 이익 같은 하나 이상의 핵심성과지표(KPI)를 비교할 수 있습니다.

5. 콤보 차트

여러 차트를 하나로 결합한 콤보 차트는 다양한 척도의 연속 데이터를 나타날 때 특히 유용합니다. 파레토 분석이나 막대 그래프에 추세선 차트를 더하는 것도 하나의 예죠.

6. OHLC 막대 차트

OHLC 차트는 금융 자산(예: 주식, 채권)의 시가, 종가, 고가, 저가를 일정 기간 동안 추적하는 차트입니다. 종가가 시가보다 높았거나 낮았는지, 주식의 고가와 저가 사이의 관계가 어땠는지 거래 기간을 시각적으로 보여주는 거죠. 시가가 종가보다 높았는지를 색상으로 구분한 막대는 시장 변동성의 직접적인 지표가 됩니다. 긴 막대는 고가와 저가의 변동이 크므로 시장에 불확실성이 더 많다는 의미입니다. 시가와 종가 사이의 간격도 변동성을 나타내요. 간격이 지나치게 가까울 때도 시장이 불확실하다는 뜻입니다. 종가가 시가보다 낮다면 매수하라는 신호이고, 반대로 종가가 시가보다 낮다면 그 기간에 매도하라는 신호로 해석할 수 있습니다.

7. 캔들스틱 차트

캔틀스틱 차트는 자주 쓰이는 그림 차트로 현재 및 미래의 자산 가격이 어떻게 움직이는지 이해할 수 있게 도와줍니다. 캔들스틱 차트도 OHLC 차트처럼 막대로 시가, 종가, 고가, 저가 를 표현해요. 시가와 종가에 따라 박스를 채우고 비우는 거죠. 막대 안이 채워져 있다면 종가가 시가보다 낮다는 뜻으로 ‘하락세’ 또는 하향 추세 시장을 나타냅니다(매도하라는 신호). 안이 비어 있는 막대는 종가가 시가보다 높다는 뜻으로 상승세를 상징하고요(매수하라는 신호). 방금 설명한 것은 기본적인 패턴일 뿐이며, 차트에 나타난 패턴으로 주식 거래에 대한 통찰력을 얻을 방법은 그 밖에도 많습니다.

적절한 차트를 선택해 금융 데이터 스토리를 시각적으로 돋보이게 전달하기. 이것이 훌륭한 기업용 핀테크 앱 제작의 기본입니다.

금융 대시보드

변화에 빠르게 적응하는 유연한 방법론

금융 대시보드는 더 넓고 포괄적인 인터페이스로 기업과 고객이 자신의 금융 실적과 이력을 추적·분석·이해할 수 있게 도와줍니다. 대시보드의 메커니즘을 통해 복잡한 데이터 조각을 압축하고 이해하기 쉬운 그래픽으로 표현하는 거예요. 직관적이고 내비게이션이 가능한 하나의 플랫폼에 모든 것이 담깁니다. 금융 대시보드가 데이터, 지표, 인사이트를 모두 모아주기 때문에 고객은 금융 실적, 이력, 현금 흐름, 관리, 분석을 성공적으로 운용할 수 있죠. 다음은 여러분이 많이 접할 대시보드 유형 몇 가지입니다.

이익 & 손실 대시보드는 사업 수익, 경비, 총계, 영업 이익 마진을 요약합니다.
자산 관리 대시보드는 투자, 예산, 지출, 계좌, 현금 흐름 등 개인의 금융 정보를 보여줍니다.
투자 포트폴리오 대시보드는 포트폴리오 실적과 자산 배분을 추적하고 주식 투자와 동향을 보고하고 분석합니다.
주식 거래 대시보드는 데이트레이더가 시시각각 변동하는 주식 시장을 분석∙관리하고 그에 반응할 수 있도록 하이 레벨 관점의 뷰를 제공합니다.
회계 대시보드는 실시간 송장의 이동, 미지급금 및 미수금 내역, 현금 흐름 등 핵심 회계 지표를 시각화합니다.
금융 실적 대시보드는 기업의 수익, 현금 흐름, 부채, 영업비를 하이 레벨 뷰로 보여줍니다.

금융 앱 제작에 고려할 사항들

핀테크 애플리케이션은 감지된 장애를 모두 제거해 엔드 유저가 금융 서비스를 더 쉽고 편리하게 이용하도록 만들어줍니다. 즉시 송금 혹은 해외 송금의 예를 간단히 살펴봅시다. 그동안 즉시 송금이라고 하면 전신 송금, 수동 계정 확인, 환전 등 시간을 잡아 먹는 귀찮은 과정을 거쳐야 한다는 인식이 컸죠. 하지만 이제는 클릭 한 번만으로 즉시 송금을 할 수 있습니다. 이런 발전은 즉시 송금에 혁신을 일으켰어요. 경쟁사와 차별화하려면 ‘도메인 유저에게 중요한 핵심 원칙과 기능이 무엇인지’ 개발자가 알고 있어야 합니다. 금융 애플리케이션을 제작할 때는 다음과 같은 사항들을 고려해야 해요.

보안성

금융 데이터를 다룰 때 가장 먼저 고려할 사항은 디지털 보안입니다. 데이터 전송과 송금을 안전하게 보호하는 계좌 인증을 할 때부터 모든 로그인과 거래를 안전하고 확실하게 인증하는 동시에 사용자에게 알림과 피드백을 전부 제공하는 과정이 필수예요. 핀테크 앱이라면 기초적인 기술—예를 들면 더 강력한 패스워드 요구(그리고 자주 변경할 것)—은 물론 최신 기술도 활용해야 합니다. OTP를 통한 이중 인증, 이메일 혹은 문자 알림, 생체 인증(지문/안면 인식)이 그 예죠. 제3의 앱을 추가적인 보호 장치로 이용할 수도 있습니다. 계좌 통합 혹은 인앱 뱅킹 검사가 가능하다면 애플리케이션의 사용성과 편의성도 향상됩니다.

센차 ExtJS로 생성한 사업 P&L/포트폴리오 대시보드

시각화를 통해 명료하게 보여준다

시각화는 직관적인 금융 애플리케이션 제작의 핵심 요소입니다. 이 가이드에서 설명한 것처럼, 금융 요약 정보를 하나의 뷰로 보여주려면 적합한 금융 차트와 대시보드가 포함되어야 합니다. 예를 들어, 신용 카드 관리 앱이나 예산 관리 앱이라면 적절한 비주얼 그래프와 함께 계좌 요약 혹은 핵심 성과 지표(KPI)를 한 페이지짜리 뷰에 보여줘야겠죠. 모든 핀테크 앱은 실시간 분석 기능을 내장해 재정 상태를 상세히 추적해야 합니다. 뷰로는 중요한 데이터를 먼저 보여줘야 하고 뷰를 커스터마이징할 수 있는 옵션도 제공해야죠. 아래 예시는 웰스 파고(Wells Fargo) 버젯 워치(Budget Watch) 앱의 지출 뷰입니다.

센차 ExtJS로 만든 웰스 파고 예산 모니터링 차트

이유를 설명한다

금융 앱은 강력한 규제와 단속을 받는 한편 민감한 데이터를 수집하고 분석해야 합니다. 어째서 이 폼을 통해 데이터를 입력해야 하는지 솔직하고 명확하게 설명한다면 엔드 유저는 신뢰감이 생기고 마음이 풀어져 추가 정보도 제공할 것입니다.

인공 지능 기술을 받아들인다

챗봇 등 인공 지능(AI)에서 지원하는 기술을 이용해 단순한 작업(새 계좌 개설이나 계좌 이체)을 자동화하고 은행 업무 및 투자 관련 궁금증에 도움을 제공할 경우, 매력적인 고객 중심 환경을 마련할 수 있습니다. AI 금융 자문 및 예측 툴을 앱 내에 구현해 고객이 조금 더 영리하게 절약하거나 투자할 수 있는 전략을 제시해준다면 엔드 유저 가치는 더욱 높아지겠죠.

접근성

미국장애인법(ADA) 규정에 따라 웹사이트는 장애를 가진 사람도 사용할 수 있어야 합니다. 그 말은 보이지 않거나 들리지 않는 사람, 내비게이션 보조가 필요한 사람이 웹 콘텐츠에 접근할 수 있어야 한다는 뜻이에요. 금융 앱도 더 광범위한 기술을 채택해 장애인법을 철저히 준수해야 합니다. 터치스크린, 더 큰 글꼴, 음성 내비게이션 보조, 스크린 리더 등의 보조공학으로 시각 혹은 청각 장애가 있는 고객을 위한 지원을 추가한다면 여러분의 앱은 편리한 금융 서비스를 제공하는 앱을 넘어 인간의 전반적인 삶의 질을 향상시키는 앱이 됩니다.

센차 제품은 핀테크 앱 개발을 단순화한다

센차는 기업용 앱 개발을 위한 원스톱 상점 솔루션입니다. 차트 제작 컴포넌트(라인 차트, 막대 그래프, 영역 차트, 누적 그래프 차트, 콤보 차트, 금융 차트, 분산 차트, 상자 수염 그림 외 다수)가 다 있고 거기에 위젯(그리드, 버튼, 폼, 캘린더, 트리 등)에 테마 및 레이아웃 옵션도 포함되었기 때문에 모든 필수 요소가 한 곳에 모여 있다고 믿고 안심할 수 있어요! 컴포넌트를 일일이 찾아 해멜 일이 없으니 시각적으로 돋보이는 금융 대시보드도 더 간단히 만들 수 있습니다. 센차의 UI 컴포넌트는 호환성이 좋도록 설계되었습니다. 그 덕분에 엔드 유저가 디버깅하는 시간은 줄어들고 고성능 애플리케이션을 디자인하고 개발하는 시간은 늘어나는 거죠.

센차 ExtJS 프레임워크와 툴을 사용하면 견고하고 보안성이 뛰어난 플랫폼에서 ‘유니버설’ 앱을 개발할 수 있습니다. 다시 말해, 한 번만 개발을 하고 모바일, 데스크톱, 웹 등 모든 플랫폼에 원활하게 배치할 수 있다는 뜻이죠. 완전한 엔드 투 엔드 솔루션에 센차 Themer, Test, Stencils 같은 최신 디자인, 개발, 테스트 툴을 더해 앱 개발을 단순화해보세요.

센차 ExtAngular와 ExtReact 툴킷은 React와 Angular 같이 널리 쓰이는 자바스크립트 프레임워크와 아주 원활히 작동하도록 만들어졌고, 140개가 넘는 고성능 UI 컴포넌트를 풍부하게 갖추고 있습니다. 만약 프레임워크에 구애받지 않는 방식으로 개발할 생각이라면 여러분의 기업용 핀테크 애플리케이션에 유연성, 재사용성, 코드 수면 연장 같은 기능을 제공해줄 센차 ExtWebComponents가 있습니다.