'챙겨요' 프로젝트 회고

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다.

직전 기사에 이어서, 신한은행 해커톤과 관련한 기사의 주제로

'챙겨요' 프로젝트의 회고를 작성해보았습니다.

많이많이 읽어주세요~!

 

이번 기사의 주제는 바로바로~!~!

'챙겨요' 프로젝트 회고 입니다.

 

직전 기사에서

신한은행 해커톤 with SSAFY에 관한 소식을 전해드렸었습니다 !

 

[이달의SSAFY 9月] 신한은행 해커톤 with SSAFY 참가 후기

 

이번 기사에서는

 

신한은행 해커톤에 참여했던 프로젝트인 '챙겨요'를 소개하고,

잘 챙긴 점과 못 챙긴 점을 회고해보려고 합니다.

 

지금부터 한 번 살펴볼까요? 💨💨

 

---

챙겨요 프로젝트 소개

본격적인 회고에 앞서,

'챙겨요'가 어떤 프로젝트인지 소개해드리고자 합니다.

참고로, 프로젝트명은 신한은행의 '땡겨요'를 모티브하여 작명하였답니다!

---

우리 삶의 다양한 곳에는 '보증금 시스템'이 존재합니다.

스키장에서의 장비대여 보증금, 펜션을 빌릴 때의 숙소 보증금 등이 그 예시입니다.

 

'챙겨요'는 이러한 보증금을 오직 QR 스캔과 한번의 터치로만 간편하게 송금하고, 반환할 수 있도록 도와줍니다.

 

- 점주는 금액과 표시명만 입력하고 간편하게 송금 QR을 생성. 원터치로 손쉬운 QR 공유.

- 사용자는 QR 스캔 후, 원터치로 간편하게 보증금을 송금.

- 100건 이상의 여러 건 반환도 일일이 계좌번호 입력없이 일괄 처리.

 

간단한 시연영상을 함께 첨부합니다!

 

사용한 프론트엔드 기술 스택은 다음과 같습니다.

 

 

잘 챙긴 점 1. 빠른 프로젝트 세팅

🎤 기존 20분 이상 소요되던 프로젝트 공통 세팅을, 단 2분만에 끝냈습니다.

React 깡통 프로젝트에 ESLint, Prettier, axios, 패키지 구조 등

다양한 설정을 할 때, 최소 20분 이상 소요되었던 경험이 있습니다.

 

해커톤 특성상 준비 기간이 매우 짧았습니다.

작업 하나하나에 소요되는 시간적 비용을 아끼고자,

기존에 직접 구축해놓았던 보일러 플레이트 패키지를 활용하였습니다.

 

해당 패키지는 명령어 단 두 줄 입력만으로

React + Typescript + ESLint, Prettier, axios, router 설정을 마치도록 도와줍니다.

 

Jeonny-Boilerplate 소개 (명령어 두 줄로 React 프로젝트 설치&설정)

 

 

잘 챙긴 점 2. 디자인 패턴의 활용

🎤 공통프로젝트에 이어서, 아토믹 패턴과 레이아웃 패턴을 활용하였습니다.

 

이전 공통프로젝트 회고 기사에서,

아토믹 패턴과 레이아웃 패턴을 소개해 드린적이 있습니다.

 

[이달의SSAFY 8月] 2학기 공통 프로젝트 회고

 

이번 프로젝트에서도 마찬가지로, 언급한 두가지 패턴을 프로젝트에 적용하였습니다.

 

우선 첫째로, 아토믹 패턴을 적용함으로써

컴포넌트 재사용성을 높이고 복잡한 컴포넌트 구조를 단순화할 수 있었습니다.

 

둘째로, 레이아웃 컴포넌트 패턴을 적용함으로써

View와 비즈니스 로직을 명확히 분리하고, 컴포넌트 트리의 Depth를 낮춰 가독성을 확보하였습니다.

 

다만, 레이아웃 컴포넌트의 적용방식에 변화를 주었습니다.

 

기존 공통프로젝트에서의 레이아웃 컴포넌트 적용은

아래 사진과 같이, children 배열로 넘겨받아 인덱스를 활용해 배치하는 방식이었습니다.

 

 

위와 같은 방식에서는,

특정 인덱스의 컴포넌트가 어느 컴포넌트인지

레이아웃 컴포넌트 내에서는 알 수 없다는 단점이 존재했습니다.

 

이러한 문제를 해결하기 위해,

컴포넌트를 children 배열이 아닌, prop으로 넘겨주는 방식을 채택하였습니다.

레이아웃 컴포넌트 패턴의 장점을 그대로 가져가면서도,

prop명을 통해 어떤 컴포넌트인지 직관적으로 알 수 있었습니다.

 

참고글 | https://itchallenger.tistory.com/561

 

 

잘 챙긴 점 3. 사용자 경험 (UX) 확보

🎤 이번 프로젝트에서는 실사용자를 고려하여, 그 동안 진행했던 프로젝트보다 사용자 경험에 더욱 집중하였습니다.

 

금융 앱은 다른 서비스 앱에 비해,

유독 이용자의 초기 학습 어렵다는 우려점이 존재했습니다.

 

이러한 우려점에 집중하여,

보다 나은 사용자 경험을 위해 신경썼던 몇 가지를 공유해드리고자 합니다.

 

Page Depth는 3 Depth를 넘지 않도록

챙겨요의 모든 메인 페이지에 도달하는 Depth는 3을 넘지 않습니다.

(터치 수라고 생각하시면 편할 것 같습니다)

 

 Page Depth가 3 Depth를 넘어서면

당연히 해당 페이지에 도달하기 힘들 뿐만 아니라,

이용 시 혼란을 크게 유발할 수 있다는 신한은행 멘토님의 의견을 반영하였습니다.

 

 

PWA 배포를 통한 사용성 / 접근성 향상

PWA가 아닌 일반 웹페이지로 배포할 경우,

크롬, 사파리와 같은 브라우저로 앱을 사용하게됩니다.

 

그 경우, 브라우저 자체의 주소창과 네비게이션에 의해

UI가 가려지거나, 화면이 의도한대로 보여지지 않는 상황을 겪곤 합니다.

 

'챙겨요'는 배포 시에 PWA 설정을 더해서,

브라우저 UI의 간섭없이, 마치 네이티브 앱처럼 동작할 수 있도록 하였습니다.

 

또한, 앱 설치(iOS의 경우 홈 바로가기 추가)를 통해, 앱 바로가기를 생성할 수 있기 때문에

앱으로의 접근성을 향상시킬 수 있습니다.

 

 

스켈레톤 컴포넌트

'챙겨요'는 데이터 로딩 시, 빈 컴포넌트가 아닌 스켈레톤 컴포넌트를 활용하면서,

로딩 이후 들어온 데이터의 형태를 쉽게 예측할 수 있도록 도와줍니다.

 

또한, 데이터 로딩 시 기다리는 사용자의 지루함을 해소해주면서,

해당 페이지에서의 이탈률을 낮추도록 도와줍니다.

 

 

위 화면에서, 아래와 같은 컴포넌트를 보셨나요?

 

이러한 컴포넌트를 바로 '스켈레톤 컴포넌트'라고 부른답니다!

 

 

못 챙긴 점 1.  프로젝트 볼륨과 아이디어

🎤 프로젝트 볼륨과 아이디어가 다소 아쉬웠습니다.

아이디어와 창의성이 중요한 해커톤 특성상, '챙겨요' 서비스의 아이디어는 다소 빈약했다는 생각이 들었습니다.

 

아이디어 구상 시, 정말 다양한 아이디어들이 등장했지만 설계와 구현까지 고려하였을 때,

실현성이 부족하다는 이유로 대부분의 아이디어를 기각하곤 했습니다.

 

더군다나, 특화 프로젝트도 병행해야 했고 프론트엔드 개발도 1명 뿐이었기에,

프로젝트 볼륨을 무작정 크게 잡을 수도 없었습니다.

 

따라서 챙겨요는 아이디어와 창의성을 어느정도 내려놓고,

실현성과 완성도로 승부를 보자는 생각으로, 탄탄함을 1순위로 해커톤에 임하게 되었습니다.

 

하지만 해커톤 참여 이후,

해커톤에서는 완성도나 실현성보다, 아이디어가 더욱 중요하다는 것을 깨닫게 되었습니다.

 

다음 해커톤이나 공모전에서는

아이디어나 주제 확정에도 더욱 많은 시간을 투자해서,

아이디어와 완성도 두 가지 측면을 모두 잡아야겠다고 다짐하였습니다.

 

 

못 챙긴 점 2.  디테일의 부족

🎤 많은 점들을 신경썼지만, 그래도 잡지못한 디테일이 많았습니다.

'챙겨요' 서비스를 돌아보니, 많은 점들이 부족하고 어색하다는 것을 느꼈습니다.

 

반응형의 미흡

웹 개발시에는 웹페이지 ↔ 앱 간 반응형을 고려해야할 뿐만 아니라,

앱 안에서도, 가로 375px, 390px, 414px, 500px 등

다양한 디스플레이 환경에서 동작할 가능성을 고려해야 합니다.

 

챙겨요는 기본적으로 가로 500px의 환경에서 개발되었지만,

500px 보다 더 작은 크기에 대한 반응형을 고려하지 못했습니다.

 

그래서 다음과 같이

가로가 500px보다 작은 스마트폰에서는 UI가 조금씩 깨지곤 했습니다.

 

이러한 반응형에 미리 대응하지 못한 점이 아쉬웠으며,

미디어 쿼리나 CSS 설계에 관해 더 공부해야할 필요성을 느꼈습니다.

 

 

Alert 창, Confirm 창의 부재

브라우저에서 제공하는 기본 alert와 confirm는 디자인 적으로

앱 분위기를 망가뜨린다고 생각했습니다.

 

그래서 후 순위로 두었던 작업 중 하나가

Custom Alert와 Confirm을 만드는 것이었습니다.

 

하지만, 메인기능 구현이 바쁘고 시간에 쫓기다보니

미처 구현하지 못한 점이 아쉬웠습니다.

 

 

현재 챙겨요에서는 다음과 같이 모든 Alert을 대신하여

toast message를 띄우고 있습니다.

 

 

빠른 시일내에,

차후 프로젝트에서 사용할 Custom Alert와 Confirm을

저만의 라이브러리로 만들어서 배포해볼 계획입니다.

 

 

 

마치며 ...

아쉬운 점도 있었지만,

얻어간 것이 더욱 많았던 '챙겨요' 프로젝트였습니다.

 

늘 그래왔듯이,

이번에 겪은 아쉬운 점과 단점들은 다음 프로젝트에서 보완하여 

갈수록 더욱 완성도 있는 프로젝트를 뽑아내보고자 합니다.

 

 

이상으로 기사 마치겠습니다 😊

SSAFYcial 기자 전인혁입니다.

 

 

 

 

이번 기사가 현재 SSAFY 교육생 이거나, SSAFY에 관심이 있으신 분들에게  많은 도움이 되었으면 좋겠습니다.

궁금하신 점이 있다면, 댓글로 꼭! 꼭! 남겨주세요 🙏🏻

 

 

 

---

" 읽어주셔서 감사합니다!

더 재밌고 유익한 기사와 함께 돌아오겠습니다 "