1. 어린이를 위한 핀테크 서비스, 뱅키즈

iOS App	AOS App	PC Web
App Store	Play Store	bankidz.com

뱅키즈는 웹뷰 환경에 최적화 되어 있습니다. 기타 웹 브라우저 환경에서는 APPLE로 로그인, 딥링크를 통한 가촉 초대, 푸시알림 기능이 정상 작동하지 않습니다.

뱅키즈가 만들어진 배경

2. 뱅키즈를 만드는 사람

신성우	한규진	김민준	주어진사랑	이근우
Frontend Engineer	Frontend Engineer	Backend Engineer	Backend Engineer	App Engineer
안도영	박소정	김수빈	최지혜
CEO	PO	Designer	Designer

3. 뱅키즈를 만드는 기술

뱅키즈는 가설 검증 주기를 최소화 하기 위해 푸시알림을 제외한 모든 비즈니스 로직을 웹 기술로 구현합니다. 이를 통해 사용자에게 항상 최신의 서비스를 제공하고 피드백에 기민하게 대응합니다.

코어: React, TypeScript
상태관리: Redux, React-Query
디자인 시스템: storybook, Figma, Theme-provider
스타일링: Styled-components
코드품질: ESLint, Prettier
CI/CD: Github-actions, Docker-compose
분산 버전 관리: Git with Git-flow
협업: Swagger, Github
코딩 컨벤션: Bankidz FE Guide
웹뷰 앱: React Native with EXPO

디랙토리 구조

.
├── components # Atomic Design Pattern
│   ├── atoms
│   ├── blocks
│   └── pages
├── lib
│   ├── apis
│   │   └── ${controller}
│   │       ├── ${controller}Api.ts # queryFn, mutationFn
│   │       └── ${controller}Dto.ts # 'Server-side' types
│   ├── constants
│   │   └── queryKeys.ts # queryKey
│   ├── hooks # Global custom hooks
│   ├── styles # themeProvider
│   └── types # 'Client-side' types
└── store # Redux Store

Architecture

뱅키즈의 개발 환경은 테스트 환경(dev)과 실 서비스 환경(main)이 분리되어 있습니다. 각 환경(branch)은 Github-actions, Dock-compose 기반 CI/CD 및 AWS EC2 인스턴스 기반 서버가 구축되어 있습니다. 또한, push 및 태깅 이벤트 감지를 통해 Docker-compose로 이미지 push가 trigger 됩니다. 실 서비스 환경의 이미지는 Github의 Relase 버저닝을 통해 관리됩니다.

4. 주요 기능

4.1. 회원관리, 온보딩 (공통)

회원관리 (공통)	온보딩 (공통)
애플 소셜 로그인 → 로그아웃 → 카카오 소셜 로그인 → 회원 탈퇴	생년월일 → 프로필 → 푸시알림 동의 → 튜토리얼 → 홈

자세히

카카오, 애플 소셜 로그인을 사용합니다.
서버로부터 받은 accessToken은 memory (Redux Store)를 통해 관리되며, refreshToken은 httpOnly & secure cookie를 통해 관리되어 Client에서의 직접 접근을 차단하고 보안성을 제고합니다. (해당 체계는 웹뷰 이식 과정에서 EXPO SDK 관련 cookie 호환성 문제로, token이 localStorage를 통해 관리되는 것으로 수정되었습니다.)

https://velog.velcdn.com/images/24siefil/post/945daeaa-533b-4cde-95ef-a677dc4ea940/image.svg

4.2. 홈 탭 (자녀)

홈 탭 (자녀)	홈 탭 (자녀)	알림내역 (공통)
걷고있는 돈길 → 돈길 포기하기 → 실패한 돈길 삭제	대기중인 돈길 → 거절된 돈길 삭제	무한 스크롤

자세히

홈 탭에서는 서로간 종속성을 갖는 네가지 종류의 돈길에 대한 CRUD가 가능합니다.
홈 탭의 데이터는 React-Query 기반의 interval refetching을 통해 최신상태를 유지합니다.
알림내역은 무한스크롤 기반으로 데이터를 지속적으로 fetch 합니다.

4.3. 돈길 계약하기, 돈길 걷기 탭 (자녀)

돈길 계약하기 (자녀)	돈길 걷기 탭 (자녀)
계약 대상 → 계약 상품 → 이름, 목표금액 → 이자율, 매주 저금액 → 서명 → 계약서 확인	-

4.4. 홈 탭, 이자 내역 탭 (부모)

홈 탭 (부모)	홈 탭 (부모)	이자 내역 탭 (부모)
각 자녀의 제안받은 돈길, 금주의 돈길	제안받은 돈길 → 수락하기 → 거절하기	지급이 필요한 이자 → 자세히 보기 → 지급 완료하기

자세히

선택된 자녀의 데이터만 optimistic하게 fetch 하여 효율적으로 리소스를 사용합니다.
fetch된 데이터는 cache 되어 추후 로딩을 최적화 합니다.

4.5. 가족 초대, 마이페이지 탭 (공통)

가족 초대 (공통)	설정 (공통)
딥링크를 통한 가족 초대 → 가족그룹 참여 → 가족그룹 나가기 → 가족그룹 만들기	-

5. 구현 분담

신성우

한규진

6. 서비스 개발기

신성우 | 우당탕 뱅키즈 개발기
한규진 | Antifreeze! 뱅키즈

7. 수상 실적

수상 일자	대회명	최종 실적	상금/지원금 (만원)
22.07.14	SC제일은행 ‘Women in Fintech’	최종선정, Creator상 수상 (2위)	500
22.08.05	신촌 연합 IT 창업 학회 CEOS 데모데이	우수상 수상	10
22.08.16	신한은행 ‘퓨쳐스랩 8기 뱅크플러스’	1차 서류 합격, 2차 면접 탈락	-
22.08.19	오렌지 플래닛 ‘오렌지 가든’ 6기	1차 서류 합격, 2차 인터뷰 합격, 3차 PT 탈락	-
22.08.28	전국 대학생 창업컨퍼런스 ‘시도’	결승진출	-
22.08.31	예비창업패키지 프리스쿨	최종선정	460
22.10.10	서강대학교 창업동아리	최종선정	300
22.10.15	d·camp 'D·Day x 캠퍼스리그'	결승진출	100

bankidz/bankidz-client