카드 결제시, 소비자가 보유한 카드 중 소비처별 최적의 할인과 실적 현황을 비교, 분석하여 합리적인 결제를 돕는 “카드 오토체인징 페이먼츠 시스템”

• 기간 : 2023. 08. 28 ~ 2023. 10. 05 (6주)
• 인원 : 6명
• 역할 : 팀장 👑 & 프론트엔드 팀장 👑
• 수상 : SSAFY 특화 프로젝트 최우수상 🥇
• 기술 : React React Native TypeScript Styled-Component React-Query Recoil
• 협업/상태관리 툴 : Jira Gitlab Notion
• 링크 : https://github.com/baebaemin/cocopay

구현 및 기여 영역

랜딩페이지

회원가입

• 간편 비밀번호 등록, 입력
• 지문 등록 및 인식

메인 화면

• 이번 달 할인, 소비 내역
• 바코드 제너레이팅
• 오프라인 결제

통계 화면

• 이번 달 할인 내역
• 월별 이용 내역
• 할인금액순 상위 카테고리
• 소비 그래프 및 상세 내역
• 혜택 그래프 및 상세 내역

하이브리드 앱

• 안드로이드 apk 빌드
• 생체인증 - 지문 인식

기타

• 전체 팀 리딩
• 프론트엔드 팀 리딩
• UX/UI 디자인
• 스타일 가이드 수립
• 아토믹 디자인 패턴 도입

메인 기능

[오프라인 결제] 보유한 카드를 스와이핑하여 바코드를 제너레이팅합니다. 바코드 리더기로 인식시 현장 결제로 진입합니다.

[현장 결제 - 할인순]

[현장 결제 - 실적순] 동일한 결제건에 대해서 사용자가 할인, 실적 중 선택한 추천 기준에 따라 결제 카드가 달라집니다.

[카드 추천 및 결제] 추천 로직에 의해 결제될 카드가 자동으로 변경되며, 결제 이후엔 혜택과 실적 도달까지 남은 액수를 안내합니다.

[온라인 결제] 코코페이로 결제시 QR로 생성된 딥링크로 결제 페이지가 연동됩니다.

[카드] 보유한 카드의 상세 정보와 월별 이용내역, 받은 혜택 및 전체 상세 내역을 확인할 수 있습니다.

[통계] 월별 할인순 상위 카테고리 정렬과 막대 그래프로 소비와 혜택 내역을 한 눈에 볼 수 있습니다.

챌린지 & 성장

React Native로 구현하는 웹앱

• 기술 선정 : 모바일 기반의 ‘페이먼츠 어플리케이션’이기에 Flutter 또는 Kotlin을 통해 개발을 하고자 하였으나, 리액트 및 웹기술을 심화시켜보고자 React WebView & React Native를 사용하여 하이브리드 앱을 개발하였습니다.
• 리액트로 제작한 웹을 웹뷰로 감싸니 모바일 앱임에도 불구하고 개발 중 기능과 화면의 변경을 신속하게 확인하고 반영하는 데 용이하여 빠른 개발 속도를 이끌어낼 수 있었습니다.
• 로그인 및 결제 시스템의 보안성 강화를 위한 생체인증 기능을 구현하였습니다.

전체 팀과 프론트엔드 팀 리딩을 동시에

• 전체 팀장으로서 기획부터 마무리 단계까지 전반적인 프로젝트 매니징과 소통을 담당했습니다. 인터랙션 디자인 전공 경험을 살려 UX/UI 설계를 하는 동시에 아토믹 디자인 시스템을 적용한 효율적인 스타일 가이드를 제안함으로써 팀의 빠른 개발 속도와 유지보수 용이성 확보에도 기여할 수 있었습니다. 특히, 프론트엔드 팀만의 것이라 생각했던 트러블슈팅까지 백엔드 팀과 공유하여 해결할 수 있었던 문제들도 다수 있었기에 더더욱 긴밀한 협업이 가능했습니다. 즐거운 분위기 속에서 팀원들간 열정 넘치는 협업 덕에 수상이라는 값진 결과를 얻을 수 있었습니다.
• 프론트엔드 팀원들이 TypeScript, Recoil, React-Query, 아토믹 디자인 시스템을 사용해본 적이 없었기에 프로젝트 초기부터 관련 자료와 학습 스케줄을 제공하여 기술적 성장을 지원하는 역할을 했습니다. 저 역시 SSAFY 교육과정 중 첫 번째 프로젝트에서 React를 포함한 동일 기술을 3주 안에 빠르게 학습하고 적용해야 했던 경험이 있어 팀원들이 느꼈을 막막함과 부담감을 잘 이해하고 있었기 때문이었습니다. 별도의 미니 과제도 부여하면서 체크하는 등 제게도 한정된 시간과 노력을 별도로 할애해야했지만, 크게 보면 전체 팀에 기여하는 일이었기 때문에 결국 함께 성장해나가는 프론트엔드 팀이 될 수 있었습니다.