본문 바로가기
프로그램개발/IT 트렌드·팁·상식

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

by 크레도스 2017. 8. 2.

출처 : http://blog.gaerae.com/2017/08/kakaobank-architecture.html?m=1


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

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

표면적인 기술 스택

Front-end
Javascript FrameworksBackbone.js
Javascript TemplateUnderscore.js
Javascript UI LibrariesjQuery.jsMoment.js
Web FontYoonGothic 720/750
Back-end
Operating SystemsLinux
Web ServerNginx
DatabasesMySQL
Hadoop EcosystemHadoopHBaseSpark
LanguagesJavaSwiftJavaScript
CDN and Security
CDNAkamai
SecurityAhnLab Safe Transaction
Utilities
DB ToolTadpole DB Hub
VCSGit


실제로 사용되는 수많은 기술 중 일부지만 질문에 대한 기술 정보는 포함되어 있어 간략하게 답변을 하겠습니다.

문의 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>


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