카카오뱅크는 어떤 기술을 사용했나?

카카오뱅크에서 공개된 기술 스택 정보를 기록했으며, 개발자도구가 자동으로 닫히는 현상과 자바스크립트 템플릿에 대해 간략하게 이야기합니다.

이 글은 뉴스 기사와 사이트 구성을 분석하여 정리했으며 실제 카카오뱅크 기술 스택과 다를 수 있고 어느 개발자의 2가지 질문에 대한 답을 하기 위해서 작성되었습니다.
질문은 "이름 입력값 정규식 버그 발견"이라는 캡처 화면 공유 후 페이스북으로 문의를 하셨습니다.
답변은 기술 스택 이후에 있습니다.

표면적인 기술 스택

Front-end
Javascript Frameworks	Backbone.js
Javascript Template	Underscore.js
Javascript Libraries	jQuery.js, Moment.js, crypto-js, easyXDM, ES6-Promise, Web2App
Web Font	YoonGothic 720/750
Back-end
Operating Systems	Linux
Web Server	Nginx
Databases	MySQL, Percona Server for MySQL, Oracle
Hadoop Ecosystem	Hadoop, HBase, Spark
Languages	Java, Swift, JavaScript
CDN and Security
CDN	Akamai
Security	AhnLab Safe Transaction, HSM(hardware security modules), XecureKeyManager
Utilities
DB Tool	Tadpole DB Hub
VCS	Git
Core banking system
전북은행	LG CNS가 개발한 국내 최초의 JAVA 기반 코어 뱅킹

데이터베이스 사용에 있어서 계정계 시스템에는 Oracle, 채널계 시스템에는 MySQL를 사용했는데요.
계정계는 수신업무와 여신업무등의 은행 핵심 시스템을 말하며 채널계는 외부 연동으로 ATM이나 지로/세금 등을 처리하는 시스템입니다.
MariaDB를 고민했지만 Percona Server for MySQL를 이용하기 위해 MariaDB는 선택되지 못했다고 합니다.
실제로 사용되는 수많은 기술 중 일부지만 질문에 대한 기술 정보는 포함되어 있어 간략하게 답변을 하겠습니다.

문의 1. 개발자도구를 열었더니 자동으로 닫혀요.

답변: 자바스크립트에서 처리하시려고 많이들 검색하실텐데 컴퓨터에 설치된 "AhnLab Safe Transaction" 프로그램에서 감지 후 닫히도록 하고 있습니다.
이러한 이유로 브라우저가 느려지는 현상이 발생하여 많은 불만이 나오고 있지만 아직 국내에서 보안이라는 이름으로 필수 설치 프로그램입니다.

문의 2. 소스 보기를 했더니 평범한 HTML 문법이 아니네요.

답변: 자바스크립트 템블릿 문법입니다. Underscore.js 를 사용하고 있으며 자바스크립트에서 데이터를 받아 화면을 출력합니다.
그런데 이 방법에는 문제가 있는데요. 자바스크립트를 지원하지 않거나 차단시킨 브라우저에서는 화면을 볼 수가 없습니다.
이러한 이유로 페이스북등 일부 서비스 사이트는 자바스크립트가 지원되지 않더라도 화면이 출력될 수 있도록 만들고 있는데 카카오뱅크는 아직 없는거 같네요.

<script id="lastConnTemplate" type="text/template">
    <% if (typeof lastConnTime !== "undefined") { %>
        <span class="txt_bar"></span>
        <a href="javascript:;" id="logoutBtn" class="link_login"><span class="img_kabang ico_login"></span>로그아웃</a>
        <% if (lastConnTime !== "") { %>
        (최근 접속 <%= moment(lastConnTime, "YYYYMMDDHHmmssSS").format("YYYY.MM.DD HH:mm") %>)
        <% } %>
    <% } %>
</script>

간단한 답변에 글만 길었습니다. 그리고 모바일이라 직접 테스트를 못 해서 아쉬워하는 분들을 위해 시연 동영상을 첨부했으니 참고하시고 자막도 있으니 활성화하세요.

개발자스럽다

카카오뱅크는 어떤 기술을 사용했나?

표면적인 기술 스택

문의 1. 개발자도구를 열었더니 자동으로 닫혀요.

문의 2. 소스 보기를 했더니 평범한 HTML 문법이 아니네요.

함께보기