보안 데모 뱅킹 앱 만들기 [Part 1]

Source: Dev.to

소개

소프트웨어 프로젝트나 애플리케이션을 구축할 때는 기술이 얼마나 빠르게 진화하는지 인식하는 것이 중요합니다. 개발 도구와 프로그래밍 언어는 대략 6개월마다 업데이트되므로 최신 버전을 유지하는 것이 뒤처지지 않기 위해 필수적입니다.

하지만 기술이 얼마나 빠르게 변하든, 소프트웨어 개발의 기본 핵심 개념은 대체로 동일합니다. AI가 부상하면서 기본적인 CRUD 앱과 같은 일반적이고 단순한 소프트웨어 프로젝트는 이제 소프트웨어 엔지니어가 지식과 비판적 사고 측면에서 얻고자 하는 실질적인 가치를 제공하지 못합니다. 강력하고 신뢰할 수 있는 무언가를 만들기 위해서는 프로젝트 전 단계에서 최고의 코딩 및 보안 관행을 따라야 합니다.

왜 데모 뱅킹 앱 프로젝트인가?

다음과 같은 이유로 핀테크 관련 데모 애플리케이션을 만들기로 했습니다:

• 핀테크에서 가장 흔히 사용되는 풀스택 기술에 대한 역량을 심화시킬 수 있습니다.
• 포트폴리오에 공개적으로 선보일 수 있는 실질적인 소프트웨어 애플리케이션이 됩니다. 전체 기획, 개발, 배포 과정을 “The Golden Project” 라고 부르는데, 이는 기획, 코드 구조, 보안, 아키텍처 및 디자인 패턴, CI/CD 등 거의 모든 측면을 포괄하기 때문입니다.

애플리케이션 이름은 “Demo Banking App” 으로 정했습니다. 빌드 과정에서 발생하는 장애물을 극복하면서 이해도를 강화하고 접근 방식을 조정하기 위해 각 중요한 기능과 구성 요소를 문서화할 계획입니다.

프로젝트 목표 및 범위

Demo Banking App의 첫 번째 버전에는 다음 기능이 포함됩니다:

• 사용자 등록 및 인증
• 사용자 프로필
• 계정 대시보드
• 거래 내역
• 결제
• 알림
• 사기 탐지

기술 스택

스택을 선택할 때는 실제 핀테크 앱에서의 관련성 및 사용량, 내가 이전에 다뤄본 경험, 그리고 오늘날의 소프트웨어 모범 사례를 고려했습니다.

• 프론트엔드: React, TypeScript, Tailwind CSS
• 백엔드: Spring Boot
• 데이터베이스: PostgreSQL
• 인증: OAuth2 / OpenID Connect
• 관측성: Prometheus, Grafana, OpenTelemetry, Elasticsearch

아키텍처

적용된 아키텍처 패턴은 마이크로서비스와 Saga Pattern 에 기반합니다. 이 선택은 프로젝트 복잡성을 해결하고 확장성을 보장하며, 실제 은행 애플리케이션을 시뮬레이션하는 모든 거래를 원활하게 처리하도록 합니다.

처음부터 보안

데모 뱅킹 애플리케이션이라 할지라도 최고의 보안 관행을 적용하는 것이 중요합니다. 버전 #1에 포함된 조치는 다음과 같습니다:

• 평문 값 대신 환경 변수 사용
• CORS 제한
• 로그인 라우트에 대한 속도 제한
• 입력 검증
• 비밀번호 암호화

로고 및 색상

Demo Banking App의 로고는 미니멀리즘 스타일로 디자인하여 단순함을 강조하면서도 현실적인 기업 느낌을 유지했습니다. 앱 전반에 사용할 색상 구성은 독일 네오뱅크에서 영감을 받았습니다.